화면 목록 정의
| 1 | 로고/스플래시 화면 | 게임 시작 로딩 |
| 2 | 로그인 화면 | 계정 로그인 |
| 3 | 서버 선택 화면 | 접속 서버 선택 |
| 4 | 캐릭터 선택 화면 | 캐릭터 선택/생성 |
| 5 | 메인 로비 화면 | 게임 진입 전 허브 |
| 6 | 인게임 HUD | 실제 플레이 화면 |
| 7 | 인벤토리 화면 | 장비/아이템 관리 |
| 8 | 캐릭터 정보 화면 | 스탯/장비 확인 |
| 9 | 스킬 강화 화면 | 스킬 업그레이드 |
| 10 | 상점 화면 | 아이템 구매 |
| 11 | 퀘스트 화면 | 진행 퀘스트 확인 |
| 12 | 우편함 화면 | 보상 수령 |
| 13 | 설정 화면 | 그래픽/사운드 설정 |
| 14 | 파티/매칭 화면 | 멀티플레이 준비 |
| 15 | 결과 화면 | 전투 종료 결과 |
| 16 | 게임 종료 팝업 | 종료 여부 확인 |
화면 흐름도
[스플래시]
↓ 자동 로딩
[로그인]
↓ 로그인 성공
[서버 선택]
↓ 서버 선택 완료
[캐릭터 선택]
├─ 캐릭터 생성 버튼 → [캐릭터 생성]
└─ 게임 시작 버튼 → [메인 로비]
[메인 로비]
├─ 전투 시작 → [인게임 HUD]
├─ 인벤토리 버튼 → [인벤토리]
├─ 캐릭터 버튼 → [캐릭터 정보]
├─ 상점 버튼 → [상점]
├─ 퀘스트 버튼 → [퀘스트]
├─ 우편 버튼 → [우편함]
├─ 설정 버튼 → [설정]
└─ 파티 버튼 → [파티/매칭]
[인게임 HUD]
├─ 가방 버튼 → [인벤토리]
├─ 캐릭터 버튼 → [캐릭터 정보]
├─ 설정 버튼 → [설정]
├─ 전투 종료 이벤트 → [결과 화면]
└─ ESC/뒤로 → [일시정지 팝업]
[인벤토리]
├─ 아이템 선택 → [아이템 상세 팝업]
├─ 장착 버튼 → 장비 적용
├─ 판매 버튼 → 판매 확인 팝업
└─ 닫기 버튼 → 이전 화면 복귀
[상점]
├─ 구매 버튼 → 구매 확인 팝업
└─ 닫기 버튼 → 이전 화면 복귀
[설정]
├─ 저장 버튼 → 설정 저장
└─ 뒤로 버튼 → 이전 화면 복귀
[결과 화면]
├─ 다시하기 → [인게임 HUD]
└─ 로비로 이동 → [메인 로비]
[게임 종료 팝업]
├─ 확인 → 게임 종료
└─ 취소 → 이전 화면 복귀HUD 와이어프레임
HUD 구조 예시
┌──────────────────────────────────┐
│ HP바 / MP바 / 레벨 / 닉네임 │ ← Horizontal Box
│ 미니맵 퀘스트 │ ← Canvas Panel
│ │
│ │
│ │
│ │
│ 스킬1 스킬2 스킬3 회피 궁극기 │ ← Horizontal Box
│ 가상 조이스틱 │ ← Canvas Panel
└──────────────────────────────────┘HUD UI 요소 상세
UI 요소역할UMG 패널 타입
| HP/MP 바 | 플레이어 상태 표시 | Progress Bar |
| 레벨/닉네임 | 캐릭터 정보 표시 | Text Block |
| 미니맵 | 주변 정보 표시 | Overlay |
| 퀘스트 추적 | 현재 목표 표시 | Vertical Box |
| 스킬 버튼 | 스킬 사용 | Button |
| 궁극기 버튼 | 특수 스킬 사용 | Button |
| 회피 버튼 | 대시/회피 | Button |
| 가상 조이스틱 | 이동 입력 | Canvas Panel |
| 알림 메시지 | 시스템 피드백 | Border + Text |
| 경험치 바 | 성장 진행 표시 | Progress Bar |
인벤토리 화면 상태 설계
상태표현 방식플레이어 피드백
| 기본 상태 | 아이템 슬롯 일반 표시 | 기본 설명 표시 |
| 선택 상태 | 슬롯 강조 테두리 + 확대 | 아이템 상세 정보 출력 |
| 빈 슬롯 상태 | “+” 또는 빈칸 아이콘 표시 | 장비 가능 위치 안내 |
| 비활성 상태 | 회색 처리 + 클릭 불가 | “레벨 부족” 표시 |
| 오류 상태 | 빨간 테두리 + 흔들림 효과 | “장착 불가” 메시지 출력 |
예시 (AI에게 이미지 요청)
모바일 UX 고려사항
1) 버튼 크기 확보
- 터치 오입력을 방지하기 위해 버튼 크기를 충분히 크게 설계해야 한다.
- 최소 48px 이상 권장.
2) 손가락 가림 현상 고려
- 중요한 UI가 손가락에 가려지지 않도록 화면 하단 중앙 배치를 피한다.
- 자주 사용하는 버튼은 엄지 영역에 배치한다.
3) 한 손 조작 고려
- 이동 조이스틱은 왼쪽 하단,
- 공격/스킬 버튼은 오른쪽 하단에 배치한다.
4) 과도한 UI 배치 금지
- 모바일 화면은 작기 때문에 HUD 정보를 최소화해야 한다.
- 전투 중 필요한 정보만 표시한다.
5) 즉각적인 피드백 제공
- 버튼 터치 시 진동, 색 변화, 애니메이션 등 즉각적인 반응 제공 필요.
- 입력 성공 여부를 명확히 전달해야 한다.