# Design

TravelRun의 화면 구성과 시각 방향을 정리합니다.

## 공통 방향

- 게임 첫 화면은 설명용 랜딩 페이지가 아니라 바로 플레이 세계로 들어가는 느낌이어야 합니다.
- 전체 콘셉트는 여행, 여권, 공항, 세계지도, 비행기 이동입니다.
- UI는 텍스트보다 아이콘과 이미지 중심으로 읽히게 합니다.
- 튜토리얼은 글만 보여주지 않고 실제 발판/장애물/아이템과 함께 체험하게 합니다.
- 맵별 도착 지점은 나라의 대표 이미지를 사용합니다.

## Intro

현재 방향:

- 메인 배경은 세계지도
- 오른쪽 아래에 여권과 스마트폰
- 지도 위를 움직이는 미니 비행기
- 제목은 `TravelRun`
- 버튼은 게임시작, 이어하기, 설정
- 버튼 선택 시 출국 도장 느낌의 애니메이션

주의:

- 어두운 검은 배경 카드 느낌은 줄입니다.
- 제목/버튼도 가능하면 이미지 에셋 기반으로 깔끔하게 구성합니다.
- 여권은 스마트폰 밑에 깔리되 잘 보여야 합니다.

## Opening Story

처음 게임 시작 시 한 번만 보여주는 만화 컷신입니다.

구성:

1. 캐릭터가 집에서 누워 있음
2. 휴대폰 알림을 봄
3. 여행 영상을 보고 눈이 반짝임
4. 집을 어지럽히며 여행 준비
5. 여권, 스마트폰, 올리브색 숏비니를 들고 나감
6. 거리로 나가며 게임 시작

현재 결정:

- 텍스트는 최소화하거나 제거합니다.
- 그림만으로 흐름이 이해되게 합니다.
- 캐릭터 의상은 오버핏 갈색 니트, 짙은 올리브 골덴 바지, 숏비니, 운동화, 백팩입니다.

## Main Game

게임 화면은 플레이 가독성이 최우선입니다.

HUD:

- 왼쪽 상단은 여권 느낌 상태 UI
- 목숨은 도장 이미지
- 아이템 슬롯은 추후 가방 업그레이드와 연결
- 오른쪽 상단은 거리와 이번 판 적립 마일리지만 보여주는 간결한 점수판
- 아이템 획득/방어 성공은 짧은 링, 반짝임, 문구 이펙트로 표시

현재 결정:

- 하단 미니맵은 삭제했습니다.
- 진행도 표시는 필요해지면 작은 진행 바 형태로 다시 설계합니다.
- 왼쪽 HUD는 가로형 여권 페이지 패널을 사용하고, 왼쪽 캐릭터 사진은 HP/아이템 2줄 높이에 맞춥니다.
- HP 3칸과 아이템 3칸은 오른쪽에서 같은 열 위치의 2줄 그리드로 정렬합니다.
- 왼쪽 HUD는 게임 화면을 가리지 않도록 원본 배치 기준 약 50% 크기로 표시합니다.
- 왼쪽 HUD 배경은 바깥 여권 테두리와 오른쪽 여행 도장 장식만 담고, 왼쪽 사진/정보 박스 프레임과 상단 장식, 오른쪽의 원형 HP 프레임, 네모 아이템 슬롯, 비행기 표시 라인, 물건 표시 라인은 개별 이미지로 분리해 Unity에서 위치와 크기를 조정합니다.
- 필드에서 먹는 아이템은 기존보다 약 2배 크게 표시해 마일리지 토큰/배경과 확실히 구별합니다.
- 오른쪽 HUD 배경은 가로로 긴 수하물 라벨/공항 스티커 이미지를 사용합니다.
- 오른쪽 HUD에는 거리와 이번 판에서 적립한 마일리지만 표시하고, 실제 숫자와 라벨 텍스트는 이미지에 박지 않고 Unity UI 텍스트로 얹습니다.
- 오른쪽 HUD는 화면을 덜 가리도록 원본 배치 기준 약 60% 크기로 표시하고, 텍스트는 작은 화면에서도 읽히도록 굵고 크게 얹습니다.

## Tutorial

튜토리얼은 설명과 플레이가 같은 타이밍에 맞아야 합니다.

구간:

1. 점프
2. 2단 점프
3. 슬라이드
4. 강제 피격
5. 아이템 사용

설명은 화면을 가리지 않도록 잠깐 멈춘 뒤 보여주고, 이후 실제 구간을 통과하게 합니다.
아이템 설명창은 전체 아이템 목록을 한 번에 보여주지 않고, 현재 설명하는 아이템 이미지만 크게 보여줍니다.

튜토리얼 안내창은 검은 배경 카드 대신 공항 벽면에 붙은 디지털 안내 패널과 광고판의 중간 느낌으로 구성합니다.
어두운 차콜/네이비 프레임, 얇은 LED 표시등, 밝은 안내 화면을 사용해 게임 세계 안의 공항 사물처럼 보이게 합니다.
튜토리얼 안내창은 화면을 덜 가리도록 원본 배치 기준 약 60% 크기로 표시합니다.
새 컨셉 이미지는 `Assets/ConceptArt/tutorial_instruction_airport_monitor_frame_01.png`이고, 실제 적용 리소스는 `Assets/Resources/UI_TutorialAirportMonitorFrame.png`입니다.
튜토리얼 안내는 시간이 지나도 자동으로 닫히지 않고, 패널 안의 확인 버튼을 클릭했을 때만 닫힙니다.
확인 버튼은 `Assets/Resources/UI_TutorialNextButton.png`를 배경으로 사용하고, 한글 `확인` 텍스트는 Unity UI 텍스트로 얹습니다.

## Result

방향:

- 보딩패스/여권 정산표 느낌
- 클리어 문구는 `출국 성공!`
- 필요한 정보만 표시
  - FROM/TO 공항 코드
  - 로컬 탑승 시간
  - 목적지
  - 획득 마일리지
  - 도착 시간
  - 이동 거리
  - 보상 기념품
- 버튼은 클리어 시 `면세점으로`, 실패 시 `다시 도전`
- 보조 버튼은 `인트로` 대신 `다음 여행지 가기`
- 배경은 인천공항 배경을 사용
- 보딩패스 패널, 출국 도장, 마일리지/시간/체크포인트/기념품 아이콘, 공항 안내 패널 버튼을 사용
- 보딩패스 배경은 텍스트 없는 빈 슬롯 이미지로 유지하고, 실제 한글/숫자는 Unity UI에서 얹습니다.
- 오른쪽 원형 슬롯은 마일리지/도착 시간/이동 거리 수치를 담을 수 있도록 하단 티켓 슬롯과 가로 중심을 맞춥니다.

## DutyFreeShop

방향:

- 스테이지 사이 준비 화면
- 상품 진열 중심
- 보유 마일리지 표시
- 다음 맵 이동은 오른쪽 방향성으로 안내
- 면세점 내부 컨셉 배경 위에 도시락, 영양제, 마일리지 카드 상품 카드를 배치
- 상품 카드는 아이템 이미지, 효과, 보유 수량, 가격, 구매 상태를 함께 표시
- 도시락과 마일리지 카드는 가방 슬롯에 장착하고, 영양제는 누적 구매형 최대 HP 증가로 사용
- 사용자가 조정한 상품/가방/마일리지/다음 여행지 버튼 위치는 이후 리팩터링에서 변경하지 않음

## MapPreview

방향:

- 인트로 세계지도 화면을 재사용한 다음 여행지 이동 화면
- 현재 출발지에서 다음 목적지까지 비행기가 이동하는 경로 애니메이션 표시
- 왼쪽 설명 패널은 제거하고 지도와 이동 연출 중심으로 표시
- 해금 상태 표시
- 비행기 이동이나 여권 도장 분위기 활용