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

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 버튼의 활성/비활성 상태가 같은 규칙으로 보이는지 확인한다.
• 위험 버튼과 일반 실행 버튼이 명확히 구분되는지 확인한다.
• 버튼이 너무 강하게 보여서 비활성 상태가 활성처럼 오해되지 않는지 확인한다.