BurningTimesAi/프로젝트/EerieVillage/기획/ux/02_HUD_설계.md

---
type: 상세_기획
scope: HUD_설계
author: ux-designer
date: 2026-04-24
version: v0.2 (BT7-Plan 개정)
project: EerieVillage
phase: Phase 3-B
data_source: 02_코어_루프 v0.2 + 04_전투_기본_스펙 v0.2 + system/01_카드_시스템.md v0.2 + BT7-Plan PD 확정 방향 11건
status: BT7-Plan 개정 반영 — 하트 분할 UI·액티브/패시브 슬롯 분리·각성 발동 연출
---

# 02. HUD 설계

## 1. 재미 축 연결 (P30)

HUD 원칙: **정보 과다 = 정보 없음**. 하트 분할 구조(BT7-Plan 확정 방향 7)에서 HUD가 전달해야 할 것은:
- "현재 생존 상태" (하트 잔량 시각화)
- "다음 결정 트리거" (레벨업 예고·보물상자 획득·각성 조건 충족)
- "현재 빌드 상태" (액티브·패시브 슬롯)

## 2. 인게임 HUD 요소

### 2-1. 정보 우선순위 (BT7-Plan 재구성)

| 우선순위 | 요소 | 이유 |
|---|---|---|
| **1순위** | **하트 UI (생존 여부 + 잔량)** | 하트 분할 구조 → 쿼터 단위 잔량 즉시 인지 필수 |
| **2순위** | 레벨 + 경험치 게이지 | 레벨업 카드 픽 트리거 예고 |
| **3순위** | **액티브 슬롯 (장착 무기 + Lv 표기)** | 자동 발동 감상 재미의 기준 정보 |
| **4순위** | **패시브 슬롯 (장착 패시브 + Lv 표기)** | 빌드 확인용, 전투 흐름 방해 금지 |
| **5순위** | 각성 조건 진행도 (신규) | 액티브 Lv.5 도달 시 "각성 대기" 표시 |

### 2-2. HUD 배치 (와이어프레임, BT7-Plan 재설계)

```
┌──────────────────────────────┐
│ [Lv.3 ████████░░] [♥ ♥]      │  ← 좌상단: 레벨·경험치 + 하트 분할 UI
│                        [⚙]   │  ← 우상단: 일시정지
├──────────────────────────────┤
│                              │
│       플레이 영역             │
│                              │
├────────────┬─────────────────┤
│ 액티브:     │ 패시브:          │  ← 하단: 카드 슬롯 분리 (반투명)
│ [A1][A2]   │ [P1][P2][P3]    │
│ [A3][★★]  │ [P4][P5][P6]    │  ← ★ = 각성 대기 표시
└────────────┴─────────────────┘
             [입력 영역: 가상스틱 + 점프]
```

- **하트 UI**: ♥ 하트 분할 시각화 (풀·3/4·반·1/4·빈 5단계, Zelda BotW 방식). 최대 하트 수 증가 시 우측 추가 하트 아이콘 생성 (최대 5개, 한 줄 배치)
- **레벨·경험치 게이지**: 텍스트 + 바. FormatEx로 "Lv.N" 포맷 렌더링
- **액티브 슬롯**: 6개 슬롯 (BT7-Plan 확정 방향 6). 좌측 반투명 배치. 각 슬롯 아이콘 우하단에 Lv 표기 (Lv.1~Lv.5)
- **패시브 슬롯**: 6개 슬롯. 우측 반투명 배치. 각 슬롯 아이콘 우하단에 Lv 표기
- **각성 대기 표시 (신규)**: 액티브 슬롯 내 아이콘이 Lv.5 도달 + 필요 패시브 1개 이상 보유 시 해당 슬롯 테두리 황금색 하이라이트 + ★ 아이콘 부착
- **일시정지 버튼**: 우상단 고정. Safe Area 내 배치 의무

### 2-3. 하트 UI 분할 스프라이트 (BT7-Plan 신규)

**젤다 BotW 방식 5단계 상태**. 개발팀 이관 항목(§9):

| 상태 | 스프라이트 | 애니메이션 |
|---|---|---|
| 풀 (4/4) | `heart_full.png` | 정적 |
| 3/4 | `heart_three_quarter.png` | 우하단 1/4 사라짐 애니 (150ms) |
| 반 (2/4) | `heart_half.png` | 우측 반 사라짐 애니 (150ms) |
| 1/4 | `heart_one_quarter.png` | 좌상단 1/4만 남기 애니 (150ms) |
| 빈 (0/4) | `heart_empty.png` | 외곽선만. 하트 전소 애니 후 전환 (200ms) |

하트 전소 시 → 우측 하트 아이콘이 있으면 새 하트가 즉시 활성. 모든 하트 전소 시 사망 분기.

### 2-4. 보스전 추가 HUD

보스룸 진입 시 보스 HP 바 상단 출현:
- 보스 이름 + HP 바 (화면 상단 중앙)
- 페이즈 2 진입 시 바 색상 전환 + 경고 아이콘
- 보스 HP 0 도달 시 바 사라짐 + 처치 피드백 (성공 인지 1초 이내)

## 3. 레벨업 카드 픽 UI (분기 포인트 1, BT7-Plan 재설계)

**트리거**: 경험치 만렙 → `Time.timeScale = 0` 일시정지 → 카드 픽 화면 진입

```
┌──────────────────────────────┐
│                              │
│  레벨 업!  Lv.N → Lv.N+1    │
│                              │
│ ┌──────┐  ┌──────┐  ┌──────┐ │
│ │[액티브]│  │[패시브]│  │[액티브]│ │  ← 분류 아이콘 상단 표시
│ │ 카드A │  │ 카드B │  │ 카드C │ │
│ │ Lv.1  │  │ Lv.2  │  │ 신규  │ │  ← 업그레이드 vs 신규 명시
│ │설명   │  │설명   │  │설명   │ │
│ └──────┘  └──────┘  └──────┘ │
└──────────────────────────────┘
```

- **Canvas**: CardPickCanvas.prefab (Additive), timeScale 0에서도 정상 동작 (Unscaled Time 사용)
- **분류 구분 표시 (신규)**: 각 카드 상단에 **액티브·패시브 아이콘** 명시 (색상·기호). 플레이어가 "어떤 슬롯으로 들어갈 카드인가" 즉시 인지
- **업그레이드 vs 신규 구분**: 이미 장착한 카드는 "Lv.N → Lv.N+1" 표기, 미장착은 "신규" 표기
- **각성 조건 힌트 (신규)**: 액티브 카드가 Lv.4 도달 시 "다음 픽으로 Lv.5 → 각성 조건 근접" 힌트 표시 (선택적)
- **결정 압박 없음**: 시간 제한 없이 선택 가능 (캐주얼 포지션)
- **선택 피드백**: 카드 선택 시 하이라이트 + 확인 버튼 노출 → 실수 방지 2단계
- **선택 완료**: `Time.timeScale = 1` 복귀 + 카드 획득 시각 피드백

## 3-A. 각성 발동 피드백 UI (신규, BT7-Plan 확정 방향 5·10)

**트리거**: 보물상자 획득 → 각성 발동 조건 충족 판정 → 조건 충족 시 연출 진입

```
보물상자 획득 연출 (1.5s)
    ↓
조건 충족 판정
    ↓ (충족)
┌──────────────────────────────┐
│                              │
│   ★ 각성! ★                  │
│                              │
│   A05 학익진 → AW05 학익천진   │
│                              │
│   [풀스크린 이펙트]           │
│                              │
└──────────────────────────────┘
    ↓ (3s)
액티브 슬롯 아이콘 각성 형태로 변환
    ↓
전투 재개
```

- **풀스크린 효과**: 황금색 섬광 + 각성 이름 대형 표기 + 원 액티브 → 각성 변환 애니메이션
- **지속시간**: 3초 (캐주얼 페이싱 유지, 너무 길지 않게)
- **Unscaled Time 사용**: `Time.timeScale = 0` 일시정지 상태에서 연출 진행
- **복수 조건 충족 시 선택 UI**: `system/01_카드_시스템.md` v0.2 §7 엣지 케이스 3 반영. 2개 이상 각성 조건 동시 충족 시:
  ```
  ┌────────────────────────┐
  │ 각성 조건 복수 충족!    │
  │ 발동할 각성을 선택하세요│
  │                        │
  │  [AW05]  [AW12]        │
  │                        │
  └────────────────────────┘
  ```

## 4. 마을 UI (허브 화면) — BT7-Plan 유지

진입점: 게임 시작 / 사망 복귀 / 보스 처치 후 귀환

| 화면 | 역할 | 최소 정보 |
|------|------|----------|
| **스테이지 선택** | 다음 도전 스테이지 결정 | 스테이지 번호·난이도 표시 |
| **특성 목록** | 현재 보유 특성 확인 | 유지 자산 확인 (사망 후 안도감) |
| **아이템 슬롯** | 장착 아이템 현황 | 파츠별 1개 제한 가시화 |
| **기본 무기 정보 (신규)** | 퇴마사 고유 기본 무기 스펙 | 시작 무기 정보 |
| **출발 버튼** | 스테이지 진입 | 단일 CTA |

- NPC 대화·상점은 Phase 3-C 이후 확장 (파일럿 제외)
- 화면 전환: 버튼 탭 → 씬 전환. 씬 전환 UX(페이드·연출)는 Phase 3-B 후속

## 5. 사망·복귀 전환 UI (BT7-Plan 업데이트)

**목표**: 사망 낙차 감정을 1~2초 이내로 처리하여 "다시 하고 싶다" 루프 유지

1. **사망 연출**: 1~2초 (**하트 소멸 애니메이션** + 캐릭터 소멸 애니메이션) — BT7-Plan 하트 UI 반영
2. **결과 표시**: "런 종료 / 레벨 N 도달 / 최대 하트 N / 획득 경험 N / 발동 각성 N" 1화면
3. **마을 복귀**: 로딩 느낌 없이 Additive Load 씬 전환
4. **유지 자산 확인**: 마을 복귀 직후 아이템·특성 유지 표시 → 낙차 후 안도 제공 (최대 하트 수는 기본 1개로 초기화 표시)

**인지 목표**: 사망부터 다음 스테이지 선택까지 5초 이내 (페이싱 유지).

## 6. BT.Framework 재사용 매핑

| BT.Framework | HUD 활용 용도 | 구현 시점 |
|---|---|---|
| **Log** | HUD 갱신 이벤트 디버그 | Tier 1 P0 즉시 |
| **FormatEx** | "Lv.N" · 경험치 수치 포맷 · "Lv.5 / 5" 스택 표기 | 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 횡스크롤 플랫포머에서 미니맵 정보 밀도가 손맛·집중을 저해. 선형 진행 설계로 방향 혼란 없음.
2. **"카드 슬롯 상시 크게 표시" — 기각 (현행 유지).** 슬롯은 빌드 확인 보조 정보. 반투명 소형으로 유지하되 일시정지 시 풀 표시.
3. **"시간 제한 카드 픽" — 기각 (현행 유지).** 캐주얼 포지션. 시간 제한은 카드 텍스트 읽기 방해.
4. **"하트 UI 대신 HP 수치만 표기" — 기각 (BT7-Plan 신규).** 하트 분할 시각화의 재미 핵심은 "수치가 아닌 형태 인지"(젤다 BotW 고전 강점). 수치 표기는 부가 정보로만 허용 (디버그용 옵션).
5. **"액티브·패시브 슬롯 통합 표시" — 기각 (BT7-Plan 신규).** PD 확정 방향 3에서 3분류 구조 명시. 통합 표시는 "어떤 카드가 자동 발동되는가" 정보 혼선 유발.
6. **"각성 발동 연출 생략 (즉시 변환)" — 기각 (BT7-Plan 신규).** 각성은 클라이맥스 순간의 카타르시스. 연출 생략은 재미 축 1 "육성 폭발" 감정 파괴. 3초 연출 유지 필수.

## 9. 개발팀 이관 항목

- CardPickCanvas.prefab + Unscaled Time 애니메이션 구현 (**액티브/패시브 분류 구분 표시 반영**)
- **AwakeningCanvas.prefab 신규 구현** — 각성 발동 풀스크린 연출 + 복수 조건 선택 UI
- SafeAreaBorder 신규 구현 후 HUD Canvas에 적용
- **하트 UI 분할 스프라이트 5단계** (풀·3/4·반·1/4·빈) 렌더링 시스템
- **하트 아이콘 동적 생성 로직** (최대 하트 수 증가 시 우측 추가)
- **각성 대기 표시 황금 테두리 + ★ 아이콘** (액티브 슬롯 조건 충족 시)
- 사망 결과 화면 씬 플로우 (Additive Load VillageScene 유지)
- FormatEx "Lv.N" · 경험치 바 UI 컴포넌트 구현

## 10. 변경 이력

| 일시 | 변경 | 사유 | 기안 |
|------|------|------|------|
| 2026-04-23 | v0.1 Phase 3-B 초기 확정 | BT6-Plan PD 지시 | ux-designer |
| 2026-04-24 | v0.2 — BT7-Plan 개정 집행 — PD 지시 11건 반영 (하트 분할 UI 5단계·액티브/패시브 슬롯 분리·각성 발동 풀스크린 연출·각성 대기 표시·하트 수 증가 UI) | 기획팀장 |