67 lines
2.2 KiB
Markdown
67 lines
2.2 KiB
Markdown
# 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가 화면 밖으로 잘리지 않는지 확인한다.
|