Design

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

공통 방향

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

Intro

현재 방향:

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

주의:

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

Opening Story

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

구성:

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

현재 결정:

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

Main Game

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

HUD:

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

현재 결정:

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

Tutorial

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

구간:

점프
2단 점프
슬라이드
강제 피격
아이템 사용

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

튜토리얼 안내창은 검은 배경 카드 대신 공항 벽면에 붙은 디지털 안내 패널과 광고판의 중간 느낌으로 구성합니다. 어두운 차콜/네이비 프레임, 얇은 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

방향:

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

6.6 KiB Raw Blame History