Antigravity Agent
3.8 KiB
3.8 KiB
Skybound Hangar Layout Guardrails Scroll Islands
작성일: 2026-04-26 17:24 KST
요청 요약
- Mount Bays 목록이 전체적으로 확인되지 않고 하단이 잘린다.
- 이런 문제가 여러 UI에서 반복적으로 발생한다.
- 사용자가 하나씩 찾아서 수정 요청하기 어렵기 때문에 근본적으로 수정해야 한다.
핵심 문제
행거 UI에는 overflow: hidden과 고정 높이 카드가 여러 곳에 섞여 있었다.
특히 Loadout 화면의 Mount Bays는 다음 구조였다.
- 부모 컬럼은
overflow: hidden - 내부 슬롯은 고정
min-height - 화면 높이가 줄어들면 마지막 슬롯이 부모 밖으로 밀림
- 부모가 hidden이므로 사용자가 확인하거나 스크롤할 수 없음
이 문제는 Mount Bays만의 문제가 아니라, 장비 목록, 업그레이드 목록, 포지 목록처럼 콘텐츠량이 가변적인 UI 전반에서 반복될 수 있는 구조적 문제다.
적용한 해결 방향
이번 수정은 개별 카드 하나를 줄이는 방식이 아니라, 행거 전체에 Scroll Island 규칙을 추가하는 방향으로 처리했다.
원칙:
- 화면 전체는 가능한 한 유지한다.
- 콘텐츠가 많은 영역만 내부 스크롤을 가진다.
overflow: hidden은 레이아웃 컨테이너를 안정화하는 곳에만 쓰고, 실제 목록 영역은 반드시 스크롤 가능하게 둔다.- 고정 높이보다
minmax(0, 1fr)와min-height: 0을 우선한다. - 작은 화면에서는 외부 shell 자체도 스크롤 가능하게 둔다.
적용한 변경
행거 전체 레이아웃 방어선 추가
변경:
.hangar-overlay를overflow: auto로 변경.hangar-inner를96vh기준으로 확장- grid row를
auto minmax(0, 1fr) auto로 고정 - 주요 패널에
min-height: 0적용
의도:
- 전체 화면 높이가 줄어도 UI가 잘려 접근 불가능해지는 상황을 방지한다.
탭 콘텐츠 공통 스크롤 처리
변경:
.tab-content,.upgrade-shop,.pass-panel에 내부 스크롤 규칙 적용- 공통 스크롤바 스타일 적용
- 목록형 영역에
overscroll-behavior: contain적용
의도:
- 특정 탭의 콘텐츠가 많아도 화면 밖으로 사라지지 않고 해당 탭 내부에서 스크롤된다.
Mount Bays 스크롤 아일랜드 적용
변경:
.mount-bay-column을 grid로 변경- 제목 영역과 목록 영역을 분리
.slots-container.compact에overflow-y: auto적용- 슬롯 최소 높이를 줄여 4개 부위가 더 안정적으로 보이도록 조정
의도:
- Weapon, Armor, Engine, Wings를 모두 접근 가능하게 한다.
- 화면 높이가 작아져도 마지막 Aero Stabilizer가 숨지 않게 한다.
Footer 압축 및 작은 화면 대응
변경:
- Footer 최소 높이 축소
- Mission Mode, Tactical Support, Launch 영역이 메인 콘텐츠를 과도하게 밀어내지 않도록 조정
- 낮은 화면 높이에서는 카드 높이와 미리보기 높이를 자동으로 압축
- 좁은 화면에서는 left telemetry panel을 숨기고 메인 콘텐츠 우선
의도:
- 핵심 작업 영역이 footer 때문에 잘리는 문제를 줄인다.
수정 파일
/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HangarOverlay.css
검증
npm run build성공- 출력 디렉터리:
dist/43
후속 체크 포인트
- Loadout에서 Mount Bays 4개가 모두 접근 가능한지 확인한다.
- 화면 높이를 줄였을 때 Mount Bays 내부 스크롤이 동작하는지 확인한다.
- Upgrade, Merge, Salvage, Forge, Pass 탭에서 목록이 잘리지 않는지 확인한다.
- Footer가 메인 콘텐츠를 과하게 밀어내지 않는지 확인한다.
- 좁은 화면에서 left telemetry panel이 숨겨져도 핵심 기능 접근이 가능한지 확인한다.