Update travel HUD and tutorial UI assets

Docs/assets.md

@@ -8,12 +8,21 @@
 
 | 파일 | 용도 |
 | --- | --- |
-| `Assets/Resources/UI_PassportPanel.png` | 왼쪽 여권 HUD 배경 |
+| `Assets/Resources/UI_LeftHudPassportHorizontalGridPanel.png` | 현재 적용 중인 가로형 왼쪽 여권 HUD 배경 |
+| `Assets/Resources/UI_LeftHudPassportPanel.png` | 이전 큰 세로형 왼쪽 여권 HUD 배경 |
+| `Assets/Resources/UI_PassportPanel.png` | 기존 작은 왼쪽 여권 HUD 배경 |
+| `Assets/Resources/UI_JJ_PassportPhoto.png` | 현재 적용 중인 JJ 여권사진 UI |
 | `Assets/Resources/UI_JJ_Face.png` | 플레이어 얼굴 UI |
 | `Assets/Resources/UI_LifeStamp.png` | 목숨 도장 |
 | `Assets/Resources/UI_PassportItemSlot.png` | 아이템 슬롯 |
 | `Assets/Resources/Map_Tutorial_Incheon_Airport.png` | 튜토리얼 인천공항 배경 |
 | `Assets/Resources/Map_America_NewYork.png` | 미국 뉴욕 배경 |
+| `Assets/Resources/UI_TutorialAirportMonitorFrame.png` | 튜토리얼 설명창용 공항 디지털 안내 패널 프레임 |
+| `Assets/Resources/UI_TutorialNextButton.png` | 튜토리얼 안내를 넘기는 확인 버튼 |
+| `Assets/Resources/UI_RightHudLuggageLabel_Korea.png` | 튜토리얼/인천 맵 오른쪽 HUD 수하물 라벨 |
+| `Assets/Resources/UI_RightHudLuggageLabel_Japan.png` | 일본 맵 오른쪽 HUD 수하물 라벨 |
+| `Assets/Resources/UI_RightHudLuggageLabel_China.png` | 중국 맵 오른쪽 HUD 수하물 라벨 |
+| `Assets/Resources/UI_RightHudLuggageLabel_America.png` | 미국 맵 오른쪽 HUD 수하물 라벨 |
 | `Assets/Resources/FinishGate_Tutorial_Incheon.png` | 튜토리얼 출국 게이트 |
 | `Assets/Resources/FinishGate_Japan_Torii.png` | 일본 토리이 도착 지점 |
 | `Assets/Resources/FinishGate_China_Paifang.png` | 중국 패방 도착 지점 |
@@ -30,17 +39,78 @@
 | `Assets/ConceptArt/Intro/UI/intro_button_settings.png` | 설정 버튼 이미지 |
 | `Assets/ConceptArt/Intro/Cutouts/` | 잘라낸 여권/스마트폰/아이콘 부품 |
 
+## Tutorial UI Assets
+
+| 파일 | 용도 |
+| --- | --- |
+| `Assets/Resources/UI_TutorialAirportMonitorFrame.png` | 실제 튜토리얼 안내창에 적용하는 투명 배경 런타임 PNG |
+| `Assets/Resources/UI_TutorialNextButton.png` | 실제 튜토리얼 안내창에 적용하는 확인 버튼 런타임 PNG |
+| `Assets/ConceptArt/tutorial_instruction_airport_monitor_frame_01.png` | 튜토리얼 설명창용 공항 디지털 안내 패널/광고판 컨셉 |
+| `Assets/ConceptArt/tutorial_next_button_concept_01.png` | 공항 안내 패널에 맞춘 확인 버튼 컨셉 |
+| `Assets/ConceptArt/tutorial_instruction_concept_01.png` | 기존 튜토리얼 안내 UI 컨셉 |
+
+## Left Passport HUD Assets
+
+왼쪽 HUD는 체력 도장과 아이템 슬롯이 잘 보이도록 가로형 여권 페이지 패널로 교체했습니다.
+왼쪽 캐릭터 사진 영역은 HP/아이템 2줄 높이에 맞추고, 오른쪽에는 HP 3칸과 아이템 3칸을 같은 열 위치의 2줄 그리드로 배치합니다.
+실제 목숨 도장, 아이템 슬롯, 얼굴 이미지는 Unity UI로 위에 얹습니다.
+
+| 파일 | 용도 |
+| --- | --- |
+| `Assets/Resources/UI_LeftHudPassportHorizontalGridPanel.png` | 실제 적용하는 가로형 여권 2줄 그리드 HUD 런타임 PNG |
+| `Assets/ConceptArt/left_hud_passport_horizontal_grid_panel_concept_01.png` | 가로형 여권 2줄 그리드 HUD 컨셉 원본 |
+| `Assets/Resources/UI_JJ_PassportPhoto.png` | 오프닝 만화의 JJ를 바탕으로 만든 현재 여권사진 런타임 PNG |
+| `Assets/ConceptArt/jj_passport_photo_concept_01.png` | JJ 여권사진 컨셉 원본 |
+| `Assets/Resources/UI_LeftHudPassportPanel.png` | 이전 큰 세로형 여권 HUD 배경 |
+| `Assets/ConceptArt/left_hud_passport_panel_concept_01.png` | 이전 큰 세로형 여권 HUD 컨셉 원본 |
+| `Assets/Resources/UI_PassportPanel.png` | 이전 작은 여권 HUD 배경 |
+
+## Right HUD Luggage Tag Assets
+
+오른쪽 HUD에서 거리와 이번 판 적립 마일리지만 간결하게 표시하기 위한 수하물 태그 컨셉입니다.
+실제 숫자/라벨 텍스트는 Unity UI 텍스트로 얹습니다.
+
+| 파일 | 용도 |
+| --- | --- |
+| `Assets/Resources/UI_RightHudLuggageTag_Korea.png` | 한국 버전 오른쪽 HUD 수하물 태그 런타임 PNG |
+| `Assets/Resources/UI_RightHudLuggageTag_Japan.png` | 일본 버전 오른쪽 HUD 수하물 태그 런타임 PNG |
+| `Assets/Resources/UI_RightHudLuggageTag_China.png` | 중국 버전 오른쪽 HUD 수하물 태그 런타임 PNG |
+| `Assets/Resources/UI_RightHudLuggageTag_America.png` | 미국 버전 오른쪽 HUD 수하물 태그 런타임 PNG |
+| `Assets/ConceptArt/right_hud_luggage_tag_korea_concept_01.png` | 한국 버전 컨셉 원본 |
+| `Assets/ConceptArt/right_hud_luggage_tag_japan_concept_01.png` | 일본 버전 컨셉 원본 |
+| `Assets/ConceptArt/right_hud_luggage_tag_china_concept_01.png` | 중국 버전 컨셉 원본 |
+| `Assets/ConceptArt/right_hud_luggage_tag_america_concept_01.png` | 미국 버전 컨셉 원본 |
+
+가로형 수하물 라벨이 현재 실제 적용 버전입니다.
+런타임 PNG는 투명 여백을 줄이기 위해 태그 경계 기준으로 크롭했고, 맵에 따라 한국/일본/중국/미국 라벨을 자동으로 바꿔 끼웁니다.
+표시 정보는 `DIST`와 `MILE` 두 가지입니다.
+
+| 파일 | 용도 |
+| --- | --- |
+| `Assets/Resources/UI_RightHudLuggageLabel_Korea.png` | 가로형 한국 버전 오른쪽 HUD 수하물 라벨 투명 PNG |
+| `Assets/Resources/UI_RightHudLuggageLabel_Japan.png` | 가로형 일본 버전 오른쪽 HUD 수하물 라벨 투명 PNG |
+| `Assets/Resources/UI_RightHudLuggageLabel_China.png` | 가로형 중국 버전 오른쪽 HUD 수하물 라벨 투명 PNG |
+| `Assets/Resources/UI_RightHudLuggageLabel_America.png` | 가로형 미국 버전 오른쪽 HUD 수하물 라벨 투명 PNG |
+| `Assets/ConceptArt/right_hud_luggage_label_korea_concept_01.png` | 가로형 한국 버전 컨셉 원본 |
+| `Assets/ConceptArt/right_hud_luggage_label_japan_concept_01.png` | 가로형 일본 버전 컨셉 원본 |
+| `Assets/ConceptArt/right_hud_luggage_label_china_concept_01.png` | 가로형 중국 버전 컨셉 원본 |
+| `Assets/ConceptArt/right_hud_luggage_label_america_concept_01.png` | 가로형 미국 버전 컨셉 원본 |
+
 ## Opening Story Assets
 
 | 파일/폴더 | 용도 |
 | --- | --- |
 | `Assets/ConceptArt/Opening/Cutscene/` | 오프닝 만화 컷 |
+| `opening_cutscene_comic_jj_03_no_bubbles.png` | 현재 사용하는 말풍선 없는 오프닝 침대/휴대폰 컷 |
+| `opening_cutscene_comic_jj_04_prepare_no_bubbles.png` | 현재 사용하는 말풍선 없는 오프닝 여행 준비 컷 |
 | `opening_jj_v2_panel_01_room.png` | 누워있는 장면 |
 | `opening_jj_v2_panel_02_alert.png` | 휴대폰 알림 |
 | `opening_jj_v2_panel_03_react.png` | 반응 컷 |
 | `opening_jj_v4_panel_01_sparkle.png` | 눈 반짝임 |
 | `opening_jj_v4_panel_02_messy_room.png` | 여행 준비 |
 | `opening_jj_v4_panel_03_leave_with_items.png` | 나가는 컷 |
+| `opening_cutscene_comic_jj_03.png` | 이전 말풍선 포함 오프닝 침대/휴대폰 컷 |
+| `opening_cutscene_comic_jj_04_prepare.png` | 이전 말풍선 포함 오프닝 여행 준비 컷 |
 | `opening_cutscene_final_departure_jj_06_street_strict_stylematch.png` | 거리로 나가는 큰 컷 |
 
 ## Gameplay Items

Docs/design.md

@@ -55,13 +55,20 @@ HUD:
 - 왼쪽 상단은 여권 느낌 상태 UI
 - 목숨은 도장 이미지
 - 아이템 슬롯은 추후 가방 업그레이드와 연결
-- 오른쪽 상단은 점수/마일리지/거리/시간/속도 정보
+- 오른쪽 상단은 거리와 이번 판 적립 마일리지만 보여주는 간결한 점수판
 - 아이템 획득/방어 성공은 짧은 링, 반짝임, 문구 이펙트로 표시
 
 현재 결정:
 
 - 하단 미니맵은 삭제했습니다.
 - 진행도 표시는 필요해지면 작은 진행 바 형태로 다시 설계합니다.
+- 왼쪽 HUD는 가로형 여권 페이지 패널을 사용하고, 왼쪽 캐릭터 사진은 HP/아이템 2줄 높이에 맞춥니다.
+- HP 3칸과 아이템 3칸은 오른쪽에서 같은 열 위치의 2줄 그리드로 정렬합니다.
+- 왼쪽 HUD는 게임 화면을 가리지 않도록 원본 배치 기준 약 50% 크기로 표시합니다.
+- 필드에서 먹는 아이템은 기존보다 약 2배 크게 표시해 마일리지 토큰/배경과 확실히 구별합니다.
+- 오른쪽 HUD 배경은 가로로 긴 수하물 라벨/공항 스티커 이미지를 사용합니다.
+- 오른쪽 HUD에는 거리와 이번 판에서 적립한 마일리지만 표시하고, 실제 숫자와 라벨 텍스트는 이미지에 박지 않고 Unity UI 텍스트로 얹습니다.
+- 오른쪽 HUD는 화면을 덜 가리도록 원본 배치 기준 약 60% 크기로 표시하고, 텍스트는 작은 화면에서도 읽히도록 굵고 크게 얹습니다.
 
 ## Tutorial
 
@@ -78,6 +85,13 @@ HUD:
 설명은 화면을 가리지 않도록 잠깐 멈춘 뒤 보여주고, 이후 실제 구간을 통과하게 합니다.
 아이템 설명창은 전체 아이템 목록을 한 번에 보여주지 않고, 현재 설명하는 아이템 이미지만 크게 보여줍니다.
 
+튜토리얼 안내창은 검은 배경 카드 대신 공항 벽면에 붙은 디지털 안내 패널과 광고판의 중간 느낌으로 구성합니다.
+어두운 차콜/네이비 프레임, 얇은 LED 표시등, 밝은 안내 화면을 사용해 게임 세계 안의 공항 사물처럼 보이게 합니다.
+튜토리얼 안내창은 화면을 덜 가리도록 원본 배치 기준 약 60% 크기로 표시합니다.
+새 컨셉 이미지는 `Assets/ConceptArt/tutorial_instruction_airport_monitor_frame_01.png`이고, 실제 적용 리소스는 `Assets/Resources/UI_TutorialAirportMonitorFrame.png`입니다.
+튜토리얼 안내는 시간이 지나도 자동으로 닫히지 않고, 패널 안의 확인 버튼을 클릭했을 때만 닫힙니다.
+확인 버튼은 `Assets/Resources/UI_TutorialNextButton.png`를 배경으로 사용하고, 한글 `확인` 텍스트는 Unity UI 텍스트로 얹습니다.
+
 ## Result
 
 방향:

Docs/feedback.md

@@ -2,6 +2,36 @@
 
 날짜별 수정 내용과 다음 할 일을 기록합니다.
 
+## 2026-07-07
+
+### 수정한 점
+
+- 튜토리얼 설명창을 공항 벽면 디지털 안내 패널/광고판 느낌의 이미지 프레임으로 교체
+- 튜토리얼 안내는 자동으로 넘어가지 않고 확인 버튼 클릭으로만 닫히게 수정
+- 튜토리얼 설명창 전체 크기를 원본 기준 약 60%로 조정
+- 오프닝 만화 컷 중 시선이 분산되던 빈 말풍선을 제거한 버전으로 교체
+- 왼쪽 HUD를 가로형 여권 페이지 패널로 교체
+- 오프닝 만화 캐릭터를 바탕으로 만든 JJ 여권사진을 왼쪽 HUD에 적용
+- 왼쪽 HUD는 화면을 덜 가리도록 원본 기준 약 50% 크기로 표시
+- HP 3칸과 아이템 3칸을 2줄 그리드로 정렬하고, 캐릭터 사진은 두 줄 높이에 맞춤
+- 필드에서 먹는 아이템 크기를 약 2배로 확대
+- 오른쪽 HUD를 가로형 수하물 라벨/공항 스티커 이미지로 교체
+- 오른쪽 HUD에는 거리와 이번 판 적립 마일리지만 표시
+- 오른쪽 HUD는 맵에 따라 한국/일본/중국/미국 라벨을 자동으로 바꾸고, 원본 기준 약 60% 크기로 표시
+- 오른쪽 HUD 글자는 부모 스케일 축소 대신 실제 크기로 배치해 회색 번짐을 줄임
+
+### 현재 문제
+
+- 면세점 구매 아이템이 아직 장착 슬롯과 연결되지 않음
+- 일본, 중국, 미국 맵의 실제 패턴과 난이도 차별화가 더 필요함
+- 새 HUD 이미지들은 실제 플레이 화면에서 위치와 글자 크기를 한 번 더 미세 조정할 수 있음
+
+### 다음 할 일
+
+1. 면세점 구매 아이템을 장착 슬롯과 연결
+2. 일본, 중국, 미국 맵의 실제 패턴과 난이도 차별화
+3. 새 HUD와 튜토리얼 안내창의 실제 플레이 화면 가독성 최종 확인
+
 ## 2026-07-06
 
 ### 수정한 점