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

Skybound Hangar Loadout Bay Focused UI Redesign

작성일: 2026-04-26 16:22 KST

요청 요약

• Loadout 화면에서 모듈이 1개만 있어도 하단 목록이 잘려 보인다.
• 스크롤이 제대로 되지 않아 사용자가 전체 모듈을 확인하기 어렵다.
• 전체 목록을 계속 나열하는 방식이 맞는지, 장착 부위를 눌렀을 때 관련 모듈만 보여주는 방식이 맞는지 고민이 필요하다.

핵심 판단

Loadout 화면은 모든 인벤토리를 관리하는 화면이 아니라, 출격 전 기체 장착 상태를 빠르게 확인하고 교체하는 화면이어야 한다.

따라서 전체 목록을 항상 펼쳐 보여주는 방식보다 Mount Bay 선택 → 해당 부위 후보만 노출 → 장착/해제 방식이 더 적합하다고 판단했다.

이유:

• 장착 가능한 항목만 보여주므로 사용자가 선택 실수를 덜 한다.
• 인벤토리가 늘어나도 Loadout 화면의 복잡도가 급격히 증가하지 않는다.
• 전체 목록 관리는 Synthesis, Salvage, Forge 같은 별도 탭에서 처리하는 것이 더 자연스럽다.
• 모바일/작은 화면에서도 같은 UX를 유지하기 쉽다.

적용한 변경

Mount Bay 중심 구조로 변경

기존:

• 장착 슬롯 4개
• 모듈 캐시
• 전체 Module Storage
• Mission Mode / Launch

이 모든 요소가 한 화면에 세로로 쌓이면서, 하단 목록이 쉽게 잘렸다.

변경:

• 장착 슬롯 4개를 Mount Bay 선택 버튼으로 변경
• 선택한 부위의 상세 패널을 별도로 표시
• 선택한 부위와 같은 타입의 모듈만 후보 목록에 표시
• 현재 장착 중인 모듈은 상세 패널 상단에 별도 표시
• 해제는 Unequip 버튼으로 명시적으로 처리

전체 목록 제거

Loadout 탭에서는 전체 인벤토리 목록을 제거했다.

의도:

• Loadout 탭은 장착 관리에 집중한다.
• 전체 장비 목록은 합성/분해/포지 탭에서 확인한다.
• “보여야 하는 모든 것”보다 “지금 결정해야 하는 것”을 우선한다.

선택 부위 후보 목록 스크롤 처리

선택 부위 후보 목록은 자체 스크롤 영역을 갖도록 했다.

변경:

• 후보 목록이 많을 때만 해당 영역 내부에서 스크롤
• 모듈이 적을 때는 빈 공간이 어색하지 않도록 empty state 제공
• 모듈 카드가 잘리지 않도록 min-height와 grid layout 재정의

Module Cache 영역 압축

Module Cache는 Loadout의 보조 기능이므로 하단에 컴팩트하게 유지했다.

변경:

• 카드 높이 축소
• 필요 시 캐시 영역만 내부 스크롤
• Empty 상태도 낮은 높이로 처리

수정 파일

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

검증

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

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

• Loadout 탭에서 Weapon, Armor, Engine, Wings 선택 시 관련 모듈만 표시되는지 확인한다.
• 모듈이 1개만 있어도 카드가 잘리지 않는지 확인한다.
• 모듈이 많을 때 후보 목록 내부 스크롤이 자연스럽게 작동하는지 확인한다.
• Unequip 버튼이 명확하게 보이고 실수 클릭이 줄어드는지 확인한다.
• Module Cache 영역이 Loadout의 주 기능을 방해하지 않는지 확인한다.