---
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 |