# Skybound Hangar Unified Button Legibility System

작성일: 2026-04-26 17:38 KST

## 요청 요약

- Permanent Upgrade 화면의 `UPGRADE` 버튼 글씨가 잘 보이지 않는다.
- 이 화면만 고치는 것이 아니라, 전체적으로 비슷한 사례가 있는지 확인하고 같은 패턴을 사용하도록 정리해야 한다.

## 핵심 문제

행거 UI 안에서 버튼 스타일이 여러 계열로 나뉘어 있었다.

확인된 버튼 계열:

- `upgrade-btn`
- `craft-btn`
- `coupon-btn`
- `support-btn`
- `pass-buy-btn`
- `cache-confirm-btn`
- `unequip-btn`
- settings action/toggle 버튼

특히 비활성 상태가 각각 다른 방식으로 표현되고 있었고, 일부는 배경과 글자 대비가 낮아 “비활성”이 아니라 “읽기 어려움”으로 느껴졌다.

## 적용한 해결 방향

행거 내부 버튼에 공통 버튼 대비 시스템을 추가했다.

원칙:

- 활성 버튼은 행동 가능한 CTA로 명확하게 보여야 한다.
- 비활성 버튼도 읽을 수 있어야 한다.
- 비활성은 낮은 채도/낮은 강조도로 표현하되, 글자 대비는 유지한다.
- 위험/해제 버튼은 빨강 계열, 일반 실행 버튼은 cyan/lime 계열, premium/cosmic 계열은 gold 계열로 통일한다.

## 적용한 변경

### 공통 버튼 베이스 추가

대상:

- `craft-btn`
- `upgrade-btn`
- `coupon-btn`
- `pass-buy-btn`
- `support-btn`
- `cache-confirm-btn`
- `unequip-btn`
- `settings-toggle`
- `settings-action`

변경:

- 공통 font smoothing 적용
- 공통 border radius, border, shadow, weight 적용
- 버튼 텍스트를 uppercase + 굵은 weight로 통일
- 기본 액션 버튼은 cyan/lime 계열로 통일

### 비활성 버튼 대비 개선

변경:

- 비활성 버튼 글자색을 더 밝은 blue-white 계열로 변경
- 어두운 네이비 배경 위에서도 읽히도록 text-shadow 적용
- opacity를 과도하게 낮추지 않음
- cursor는 `not-allowed`로 유지

의도:

- `UPGRADE` 같은 문구가 흐릿해서 안 보이는 문제를 해결한다.
- 사용자는 버튼이 비활성이라는 사실과 버튼의 기능을 동시에 인지할 수 있다.

### 행동 종류별 색상 통일

변경:

- 일반 실행/확인: cyan/lime
- 위험/해제/무음 OFF: pink/red
- cosmic/forge/premium/max: gold/orange

의도:

- 버튼마다 다른 디자인 언어를 쓰지 않고, 행동의 성격에 따라 같은 색상 규칙을 공유한다.

## 수정 파일

- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HangarOverlay.css`

## 검증

- `npm run build` 성공
- 출력 디렉터리: `dist/44`

## 후속 체크 포인트

- Permanent Upgrade 화면에서 비활성 `UPGRADE` 텍스트가 읽히는지 확인한다.
- Craft/Synthesis/Salvage/Forge/Pass 버튼의 활성/비활성 상태가 같은 규칙으로 보이는지 확인한다.
- 위험 버튼과 일반 실행 버튼이 명확히 구분되는지 확인한다.
- 버튼이 너무 강하게 보여서 비활성 상태가 활성처럼 오해되지 않는지 확인한다.