1-1. 비주얼 원칙
| 원칙 | 설명 |
|---|
| 다크 글래스모피즘 | 반투명 패널 (배경 블러 12px + 알파 0.15~0.25), 미세한 보더 (1px, 백색 20%) |
| 라운드 코너 | 모든 UI 요소에 border-radius 적용 — 버튼 12px, 카드 16px, 패널 20px, 모달 24px |
| 네온 하이라이트 | Hept32 기반 네온 글로우 — 선택/호버/포커스 시 2~4px 외곽 네온 발광 (시안/골드/핑크) |
| 극단 미니멀 HUD | 화면 95% 게임플레이. 핵심 정보만 아이콘+숫자 위주 |
| Neon on Dark | 딥 퍼플(#0F0A1A) 베이스 위에 Hept32 네온이 빛나는 다크 UI |
| 마이크로 인터랙션 | 모든 상호작용에 시각 피드백 — 호버 글로우, 클릭 펄스, 전환 이징 |
1-2. 컬러 시스템
| 용도 | 색상 | HEX | 적용 |
|---|
| 배경 베이스 | 심흑 퍼플 | #0F0A1A | 전체 배경, 오버레이 |
| 글래스 배경 | 딥 퍼플 반투명 | #180D2F α0.6 | 패널, 카드, 모달 |
| 글래스 보더 | 백색 반투명 | #FFFFFF α0.15 | 패널 테두리 |
| 강조 1차 | Gold | #ECAB11 | 선택 하이라이트, 레벨업, XP |
| 강조 2차 | Danger Red | #DA2424 | 체력, 보스, 경고 |
| 강조 3차 | Neon Cyan | #5EE9E9 | 음 기운, 쿨다운, 영혼 |
| 강조 4차 | Hot Pink | #F94E6D | 보스, 특수 이벤트, 위험 |
| 텍스트 1차 | Moonbeam | #C5CDDB | 본문 텍스트 |
| 텍스트 2차 | Mist | #8B97B6 | 부가 정보, 비활성 |
| 힐링/안전 | Jade Green | #08B23B | HP 회복, 안전 영역 |
| 네온 글로우 | Hept32별 | 각 HEX | 선택/호버 시 외곽 발광 (blur 8px) |
v5.0 변경: Hept32 팔레트 전환. 오방색 체계 전면 교체 → Korean Neon Folklore 컬러 시스템.
1-3. 폰트 체계
폰트 선정
| 용도 | 1순위 | 2순위 | 비고 |
|---|
| 한글 제목 | 넥슨Lv.1고딕 Bold | Pretendard Bold | 게임 타이틀, 화면 제목 |
| 한글 본문 | Pretendard Regular | 넥슨Lv.1고딕 Regular | 설명 텍스트, 대사, UI 라벨 |
한글 분위기 | 둘기마요고딕 | — | 삭제 — 넥슨Lv.1고딕으로 통일 |
| 영문/숫자 | Inter Bold / Regular | Outfit | 스탯 수치, 타이머 |
| 데미지 숫자 | Press Start 2P | 04b_03 | 월드 팝업 숫자 전용 |
| 모노스페이스 | JetBrains Mono | — | 디버그 정보 |
모든 폰트는 OFL/무료 라이선스. 넥슨Lv.1고딕 = 넥슨 무료 배포, Pretendard = OFL, 둘기마요고딕 = OFL, Inter = OFL, Press Start 2P = OFL.
크기 체계
| 레벨 | 크기 | 웨이트 | 용도 | 예시 |
|---|
| H1 | 64px | Bold | 타이틀 화면 로고 | "THE HON: JOSEON" |
| H2 | 36px | Bold | 화면 제목 | "캐릭터 선택", "레벨 업!" |
| H3 | 24px | Bold | 섹션 제목, 카드 이름 | "퇴마사", "혈월" |
| Body | 18px | Regular | 본문 텍스트, 설명 | 카드 설명, NPC 대사 |
| Caption | 14px | Regular | 부가 정보, 라벨 | "HP 100", "CD 25s" |
| Micro | 11px | Regular | HUD 수치, 상태 | "Lv.12", "14:32" |
| Damage L | 48px | Bold | 크리티컬 데미지 | "-999" (골드 네온) |
| Damage M | 32px | Regular | 일반 데미지 | "-15" |
| Damage S | 24px | Regular | 소형 데미지/힐 | "+5" |
웨이트 용도
| 웨이트 | 용도 |
|---|
| Bold (700) | 제목, 강조 수치, 버튼 텍스트, 레벨업 카드 이름 |
| Regular (400) | 본문, 설명, NPC 대사, 일반 UI 라벨 |
| Light (300) | 태그라인, 힌트 텍스트, 워터마크, 버전 정보 |
1-4. 디자인 토큰
v4.0 신규. 모든 UI 파일에서 참조할 통합 상수 정의. 구현: game/src/constants/ui_constants.gd Autoload.
트렌드 근거: 10개+ 파일에 개별 정의된 색상/폰트 상수를 단일 소스로 통합.
Hept32 컬러 토큰
| 토큰 | HEX | 용도 |
|---|
COLOR_GOLD | #ECAB11 | 레벨업, XP, 선택 하이라이트 |
COLOR_DANGER | #DA2424 | HP, 보스, 경고, 양 기운 |
COLOR_CYAN | #5EE9E9 | 음 기운, 쿨다운, 영혼 |
COLOR_PINK | #F94E6D | 보스, 특수 이벤트, 위험 |
COLOR_GREEN | #08B23B | 힐링, HP 회복, 안전 |
COLOR_TEXT | #C5CDDB | 주요 텍스트 |
COLOR_TEXT_SUB | #8B97B6 | 부가 정보, 비활성 |
COLOR_BG | #180D2F | 글래스 배경, 패널 |
COLOR_BG_BASE | #0F0A1A | 전체 배경 (심흑 퍼플) |
폰트 크기 토큰
| 토큰 | 크기 | 용도 |
|---|
FONT_H1 | 64px | 타이틀 로고 |
FONT_H2 | 36px | 화면 제목 |
FONT_H3 | 24px | 카드 이름 |
FONT_BODY | 18px | 본문, NPC 대사 |
FONT_CAPTION | 14px | 라벨 |
FONT_MICRO | 11px | HUD 수치 |
FONT_DAMAGE_CRIT | 48px | 크리티컬 데미지 |
FONT_DAMAGE_NORMAL | 32px | 일반 데미지 |
FONT_DAMAGE_SMALL | 24px | 소형 데미지/힐 |
그림자 토큰
| 토큰 | 오프셋 | 용도 |
|---|
SHADOW_NORMAL | 2px | 일반 텍스트/아이콘 |
SHADOW_EMPHASIS | 3px | 강조 (제목, 보스명, 경고) |
패널 투명도 토큰
| 토큰 | 알파 | 용도 |
|---|
PANEL_ALPHA_DEFAULT | 0.6 | 기본 글래스 패널 |
PANEL_ALPHA_HUD | 0.10 | 인게임 HUD |
PANEL_ALPHA_OVERLAY | 0.5 | 레벨업/일시정지 오버레이 |
PANEL_ALPHA_LOCK | 0.7 | 잠금 오버레이 |
기존 α0.8~0.95 → α0.6 기본. 글래스모피즘 설계에 부합하도록 보정.