# Skybound Global HUD Result UI Tone Unification

작성일: 2026-04-26 14:48 KST

## 요청 요약

- 전체 게임 HUD/UI가 정리정돈된 느낌을 잃었다.
- 플레이 중 HUD가 패널 단위로 흩어져 보이고 사용자 친화적이지 않다.
- `MISSION_FAILED` 결과 화면이 이전 스타일을 사용하고 있어 현재 `Stylized Casual Magitech` 톤앤매너와 맞지 않는다.
- 누락된 구형 UI가 없도록 전체적으로 안정적이고 깔끔한 방향으로 맞춰야 한다.

## 핵심 문제

이번 문제의 핵심은 UI 요소 자체의 색상보다 정보 구조였다.

기존 플레이 HUD는 `Stage`, `Tactical Level`, `Hull Core`, `Bombs`, `Lock-On`, `Best Run`, 설정 버튼이 모두 같은 헤더 라인 안에서 밀집되어 있었다.

그 결과:

- 각 정보의 중요도가 잘 구분되지 않았다.
- 큰 반투명 배경판이 전투 화면 위를 덮어 정돈감보다 부피감이 커졌다.
- 작은 화면비나 Campaign 플레이 상황에서 모듈 간 간격이 불안정해 보였다.

Mission Failed 화면은 더 큰 문제가 있었다.

- `MISSION_FAILED`처럼 시스템 문자열에 가까운 표기였다.
- 결과 카드가 얇은 글래스모피즘/스티치 스타일에 가까워, 현재의 두꺼운 외곽선과 선명한 마지테크 UI와 맞지 않았다.
- 실패 상태에서 사용자가 다음에 무엇을 하면 되는지 안내가 약했다.

## 적용한 변경

### Gameplay HUD 정리

HUD를 명확한 grid 영역으로 재정렬했다.

구조:

- 좌측: Stage / Phase
- 중앙 상단: Tactical Level / EXP
- 우측 상단: Hull Core
- 중앙 하단: Bombs / Lock-On
- 우측 하단: Best Run
- 최우측: Fullscreen / Settings / Pause

변경 의도:

- 큰 통합 배경판을 제거하고, 정보별 카드가 정확한 칸에 고정되도록 했다.
- 각 UI 모듈의 크기를 줄여 전투 화면을 덜 가리게 했다.
- `Stage`, `HP`, `Bomb`, `Lock-On`처럼 전투 판단에 필요한 정보가 빠르게 읽히도록 했다.
- 모든 HUD 카드에 동일한 진한 네이비, 두꺼운 외곽선, 시안/라임/골드 포인트를 적용했다.

### Mission Result / Mission Failed 화면 통합

결과 화면을 현재 톤앤매너에 맞게 다시 스타일링했다.

변경:

- `MISSION_FAILED` → `MISSION FAILED`
- `MISSION_SUCCESS` → `MISSION CLEARED`
- `MISSION_COMPLETE` → `MISSION COMPLETE`
- 실패 시 `Recovery Beacon Received` 상태 문구 추가
- 실패 시 `Hull core collapsed. Refit, upgrade, and redeploy.` 안내 추가
- 결과 카드, 스탯 그리드, 버튼을 두꺼운 외곽선 기반의 마지테크 카드로 변경
- 실패 상태는 오렌지/레드 계열, 성공 상태는 시안/라임 계열로 명확히 구분

의도:

- 실패 화면도 게임 세계관 안의 결과 보고서처럼 보이게 한다.
- 사용자가 실패 후 바로 재도전 또는 복귀를 이해할 수 있게 한다.
- 성공/실패/완료 화면이 서로 다른 낡은 스타일로 보이지 않게 한다.

### Boss Warning 전역 알림 통일

기존 보스 경고는 Tailwind class 기반의 붉은 경고 띠 2개로 출력되어 현재 UI 톤과 따로 놀았다.

변경:

- `WARNING` 반복 띠를 제거
- `BOSS SIGNAL` 마지테크 경고 카드로 변경
- 오렌지/레드 기반의 위협 색상은 유지하되, 두꺼운 외곽선과 카드형 구조로 통일
- 보스 진입 시 사용자가 해야 할 행동을 짧게 안내

## 수정 파일

- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css`
- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/ResultCard.tsx`
- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/ResultCard.css`
- `/Volumes/Data/project/Antigravity/Skybound/src/App.tsx`
- `/Volumes/Data/project/Antigravity/Skybound/src/App.css`

## 검증

- `npm run build` 성공
- 출력 디렉터리: `dist/31`

## 후속 플레이테스트 체크 포인트

- 플레이 HUD가 전투 화면을 과하게 덮지 않는지 확인한다.
- HUD 정보가 `Stage`, `Level`, `HP`, `Bomb`, `Lock-On` 순서로 자연스럽게 읽히는지 확인한다.
- Mission Failed 화면이 더 이상 옛날 스타일처럼 보이지 않는지 확인한다.
- 실패 후 사용자가 `Retry Mission`과 `Back to Title` 선택을 쉽게 이해하는지 확인한다.
- Boss Signal 경고가 위협적이면서도 현재 UI 톤에서 튀지 않는지 확인한다.