# 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의 주 기능을 방해하지 않는지 확인한다.