12 KiB

Raw Permalink Blame History

type	scope	author	date	version	project	phase	data_source	status
상세_기획	HUD_설계	ux-designer	2026-04-24	v0.2 (BT7-Plan 개정)	EerieVillage	Phase 3-B	02_코어_루프 v0.2 + 04_전투_기본_스펙 v0.2 + system/01_카드_시스템.md v0.2 + BT7-Plan PD 확정 방향 11건	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~2초 (하트 소멸 애니메이션 + 캐릭터 소멸 애니메이션) — BT7-Plan 하트 UI 반영
결과 표시: "런 종료 / 레벨 N 도달 / 최대 하트 N / 획득 경험 N / 발동 각성 N" 1화면
마을 복귀: 로딩 느낌 없이 Additive Load 씬 전환
유지 자산 확인: 마을 복귀 직후 아이템·특성 유지 표시 → 낙차 후 안도 제공 (최대 하트 수는 기본 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. 기각안

"미니맵 HUD 포함" — 기각 (현행 유지). 2D 횡스크롤 플랫포머에서 미니맵 정보 밀도가 손맛·집중을 저해. 선형 진행 설계로 방향 혼란 없음.
"카드 슬롯 상시 크게 표시" — 기각 (현행 유지). 슬롯은 빌드 확인 보조 정보. 반투명 소형으로 유지하되 일시정지 시 풀 표시.
"시간 제한 카드 픽" — 기각 (현행 유지). 캐주얼 포지션. 시간 제한은 카드 텍스트 읽기 방해.
"하트 UI 대신 HP 수치만 표기" — 기각 (BT7-Plan 신규). 하트 분할 시각화의 재미 핵심은 "수치가 아닌 형태 인지"(젤다 BotW 고전 강점). 수치 표기는 부가 정보로만 허용 (디버그용 옵션).
"액티브·패시브 슬롯 통합 표시" — 기각 (BT7-Plan 신규). PD 확정 방향 3에서 3분류 구조 명시. 통합 표시는 "어떤 카드가 자동 발동되는가" 정보 혼선 유발.
"각성 발동 연출 생략 (즉시 변환)" — 기각 (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)	기획팀장

12 KiB Raw Permalink Blame History Unescape Escape