2nd/00_Raw/2026-04-26-Skybound_Global_HUD_Result_UI_Tone_Unification.md

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 톤에서 튀지 않는지 확인한다.