133 lines
6.3 KiB
Markdown
133 lines
6.3 KiB
Markdown
|
---
|
|||
|
|
type: 상세_기획
|
|||
|
|
scope: HUD_설계
|
|||
|
|
author: ux-designer
|
|||
|
|
date: 2026-04-23
|
|||
|
|
version: v0.1 (Phase 3-B)
|
|||
|
|
project: EerieVillage
|
|||
|
|
phase: Phase 3-B
|
|||
|
|
data_source: BT5-Plan 02_코어_루프 v0.1 + 04_전투_기본_스펙 v0.1
|
|||
|
|
status: 확정 골격 — 세부 레이아웃 수치는 개발팀 협의
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 02. HUD 설계
|
|||
|
|
|
|||
|
|
## 1. 재미 축 연결 (P30)
|
|||
|
|
|
|||
|
|
HUD 원칙: **정보 과다 = 정보 없음**. 라이프 1 시스템(즉사 전제)에서 HUD가 전달해야 할 것은 오직 "현재 상태"와 "다음 결정"이다. 한 화면에 한 가지 결정만 요구.
|
|||
|
|
|
|||
|
|
## 2. 인게임 HUD 요소
|
|||
|
|
|
|||
|
|
### 2-1. 정보 우선순위
|
|||
|
|
|
|||
|
|
| 우선순위 | 요소 | 이유 |
|
|||
|
|
|---|---|---|
|
|||
|
|
| **1순위** | 라이프 표시 (생존 여부) | 라이프 1 즉사 → 즉시 인지 필수 |
|
|||
|
|
| **2순위** | 레벨 + 경험치 게이지 | 레벨업 카드 픽 트리거 예고 |
|
|||
|
|
| **3순위** | 카드 슬롯 (현재 보유 카드) | 빌드 확인용, 전투 흐름 방해 금지 |
|
|||
|
|
|
|||
|
|
### 2-2. HUD 배치 (와이어프레임)
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌──────────────────────────────┐
|
|||
|
|
│ [Lv.3 ████████░░] [♥] │ ← 좌상단: 레벨·경험치 + 라이프
|
|||
|
|
│ [⚙] │ ← 우상단: 일시정지
|
|||
|
|
├──────────────────────────────┤
|
|||
|
|
│ │
|
|||
|
|
│ 플레이 영역 │
|
|||
|
|
│ │
|
|||
|
|
│ [카드1][카드2][카드3] │ ← 하단: 카드 슬롯 (반투명)
|
|||
|
|
│ [입력 영역] │
|
|||
|
|
└──────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **라이프 표시**: 하트 아이콘 1개. 피격 시 깜박임·소멸 애니메이션 (1초 이내 인지)
|
|||
|
|
- **레벨·경험치 게이지**: 텍스트 + 바. FormatEx로 "Lv.N" 포맷 렌더링
|
|||
|
|
- **카드 슬롯**: 보유 카드 아이콘 최대 N개 (N=balance-designer 결정). 소형·반투명으로 전투 방해 최소화
|
|||
|
|
- **일시정지 버튼**: 우상단 고정. Safe Area 내 배치 의무
|
|||
|
|
|
|||
|
|
### 2-3. 보스전 추가 HUD
|
|||
|
|
|
|||
|
|
보스룸 진입 시 보스 HP 바 상단 출현:
|
|||
|
|
- 보스 이름 + HP 바 (화면 상단 중앙)
|
|||
|
|
- 보스 HP 0 도달 시 바 사라짐 + 처치 피드백 (성공 인지 1초 이내)
|
|||
|
|
|
|||
|
|
## 3. 레벨업 카드 픽 UI (분기 포인트 1)
|
|||
|
|
|
|||
|
|
**트리거**: 경험치 만렙 → `Time.timeScale = 0` 일시정지 → 카드 픽 화면 진입
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌──────────────────────────────┐
|
|||
|
|
│ │
|
|||
|
|
│ 레벨 업! Lv.N → Lv.N+1 │
|
|||
|
|
│ │
|
|||
|
|
│ [카드 A] [카드 B] [카드 C] │ ← 3장 선택
|
|||
|
|
│ 설명 설명 설명 │
|
|||
|
|
│ │
|
|||
|
|
└──────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Canvas**: CardPickCanvas.prefab (Additive), timeScale 0에서도 정상 동작 (Unscaled Time 사용)
|
|||
|
|
- **결정 압박 없음**: 시간 제한 없이 선택 가능 (캐주얼 포지션)
|
|||
|
|
- **선택 피드백**: 카드 선택 시 하이라이트 + 확인 버튼 노출 → 실수 방지 2단계
|
|||
|
|
- **선택 완료**: `Time.timeScale = 1` 복귀 + 카드 획득 시각 피드백
|
|||
|
|
|
|||
|
|
## 4. 마을 UI (허브 화면)
|
|||
|
|
|
|||
|
|
진입점: 게임 시작 / 사망 복귀 / 보스 처치 후 귀환
|
|||
|
|
|
|||
|
|
| 화면 | 역할 | 최소 정보 |
|
|||
|
|
|------|------|----------|
|
|||
|
|
| **스테이지 선택** | 다음 도전 스테이지 결정 | 스테이지 번호·난이도 표시 |
|
|||
|
|
| **특성 목록** | 현재 보유 특성 확인 | 유지 자산 확인 (사망 후 안도감) |
|
|||
|
|
| **아이템 슬롯** | 장착 아이템 현황 | 파츠별 1개 제한 가시화 |
|
|||
|
|
| **출발 버튼** | 스테이지 진입 | 단일 CTA (Call-To-Action) |
|
|||
|
|
|
|||
|
|
- NPC 대화·상점은 Phase 3-C 이후 확장 (파일럿 제외)
|
|||
|
|
- 화면 전환: 버튼 탭 → 씬 전환. 씬 전환 UX (페이드·연출)는 Phase 3-B 후속 과제
|
|||
|
|
|
|||
|
|
## 5. 사망·복귀 전환 UI
|
|||
|
|
|
|||
|
|
**목표**: 사망 낙차 감정을 1~2초 이내로 처리하여 "다시 하고 싶다" 루프 유지 (02_코어_루프 §6 계승)
|
|||
|
|
|
|||
|
|
1. **사망 연출**: 1~2초 (캐릭터 소멸 애니메이션)
|
|||
|
|
2. **결과 표시**: "런 종료 / 레벨 N 도달 / 획득 경험 N" 1화면. 심플하게
|
|||
|
|
3. **마을 복귀**: 로딩 느낌 없이 Additive Load 씬 전환 (VillageScene 상시 유지 방식)
|
|||
|
|
4. **유지 자산 확인**: 마을 복귀 직후 아이템·특성 유지 표시 → 낙차 후 안도 제공
|
|||
|
|
|
|||
|
|
**인지 목표**: 사망부터 다음 스테이지 선택까지 5초 이내 (페이싱 유지).
|
|||
|
|
|
|||
|
|
## 6. BT.Framework 재사용 매핑
|
|||
|
|
|
|||
|
|
| BT.Framework | HUD 활용 용도 | 구현 시점 |
|
|||
|
|
|---|---|---|
|
|||
|
|
| **Log** | HUD 갱신 이벤트 디버그 | Tier 1 P0 즉시 |
|
|||
|
|
| **FormatEx** | "Lv.N" · 경험치 수치 포맷 | Tier 1 P1 |
|
|||
|
|
| **EnumEx** | 카드 슬롯 타입 enum 순회 | Tier 1 P2 |
|
|||
|
|
| **SafeAreaBorder** | HUD 요소 Safe Area 자동 패딩 | Tier 2 신규 구현 후 |
|
|||
|
|
|
|||
|
|
## 7. 접근성 기본 원칙
|
|||
|
|
|
|||
|
|
- **색맹 대응**: 라이프·보스 HP는 색상 외 형태(아이콘·바 형태)로 이중 표현
|
|||
|
|
- **텍스트 크기**: 최소 14sp (모바일 기준), 중요 수치는 18sp 이상
|
|||
|
|
- **버튼 터치 영역**: 최소 44×44dp (Apple HIG / Google Material 공통 기준)
|
|||
|
|
|
|||
|
|
## 8. 기각안
|
|||
|
|
|
|||
|
|
1. **"미니맵 HUD 포함" — 기각.** 2D 횡스크롤 플랫포머에서 미니맵 정보 밀도가 손맛·집중을 저해. 스테이지 구조는 선형 진행 설계로 방향 혼란 없음. 추가 필요 시 Phase 3-C 재검토.
|
|||
|
|
2. **"카드 슬롯 상시 크게 표시" — 기각.** 카드 슬롯은 빌드 확인 보조 정보. 전투 중 시선 분산 유발. 반투명 소형으로 유지하되 일시정지 시 풀 표시.
|
|||
|
|
3. **"시간 제한 카드 픽" — 기각.** 캐주얼 포지션. 시간 제한은 긴장을 주지만 카드 텍스트 읽기 방해 → 빌드 이해도 하락 → 재미 축 1 "육성 카타르시스" 저해.
|
|||
|
|
|
|||
|
|
## 9. 개발팀 이관 항목
|
|||
|
|
|
|||
|
|
- CardPickCanvas.prefab + Unscaled Time 애니메이션 구현
|
|||
|
|
- SafeAreaBorder 신규 구현 후 HUD Canvas에 적용
|
|||
|
|
- 사망 결과 화면 씬 플로우 (Additive Load VillageScene 유지)
|
|||
|
|
- FormatEx "Lv.N" · 경험치 바 UI 컴포넌트 구현
|
|||
|
|
|
|||
|
|
## 10. 변경 이력
|
|||
|
|
|
|||
|
|
| 일시 | 변경 | 사유 | 기안 |
|
|||
|
|
|------|------|------|------|
|
|||
|
|
| 2026-04-23 | v0.1 Phase 3-B 초기 확정 | BT6-Plan PD 지시 | ux-designer |
|