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

Skybound Desktop Side Dock HUD

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

요청 요약

• 플레이 화면에서 HUD가 전투 필드를 가려 불편하다.
• 현재 UI 배치가 게임 화면 안쪽에 있어 세로 슈터 플레이와 맞지 않아 보인다.
• HUD를 정리하면서도 전투 화면을 침범하지 않게 해야 한다.

핵심 문제

이전 Micro HUD는 크기를 줄였지만 여전히 게임 필드 안쪽 상단에 배치되어 있었다.

세로형 탑다운 슈터에서는 상단도 적기, 탄환, 보스, 아이템이 등장하는 실제 플레이 공간이다.

따라서 HUD가 작더라도 필드 위에 올라가 있으면 다음 문제가 생긴다.

• 상단에서 등장하는 적과 탄환을 가린다.
• 보스나 아이템이 HUD 뒤로 지나갈 때 인지가 늦어진다.
• 화면의 주인공이 전투가 아니라 UI처럼 보인다.

적용한 변경

Desktop Side Dock HUD

데스크톱 화면에서는 HUD를 게임 필드 바깥 오른쪽 블랙 여백으로 이동했다.

표시 구조:

• Stage / Phase
• Hull Core
• Tactical Level / EXP
• Bombs / Lock-On
• Fullscreen / Settings / Pause

의도:

• 플레이 필드를 최대한 깨끗하게 유지한다.
• 전투 판단에 필요한 정보는 유지하되, 실제 전투 공간 위에 올리지 않는다.
• 데스크톱의 넓은 검은 여백을 UI 도크로 활용한다.

좁은 화면 대응

화면 폭이 좁을 때는 오른쪽 여백이 부족할 수 있으므로 기존 Micro HUD 형태를 유지한다.

의도:

• 데스크톱에서는 전투 필드를 침범하지 않는다.
• 좁은 화면에서는 HUD가 화면 밖으로 잘리지 않도록 한다.

수정 파일

• /Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css

검증

• npm run build 성공
• 출력 디렉터리: dist/34

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

• 데스크톱에서 HUD가 게임 필드 오른쪽 바깥으로 빠지는지 확인한다.
• 상단에서 등장하는 적기와 탄환이 HUD에 가려지지 않는지 확인한다.
• 오른쪽 도크의 글씨가 너무 작거나 멀게 느껴지지 않는지 확인한다.
• 브라우저 폭을 줄였을 때 HUD가 화면 밖으로 잘리지 않는지 확인한다.