81 lines
6.2 KiB
Markdown
81 lines
6.2 KiB
Markdown
제공해주신 시스템 기획서를 바탕으로, 게임의 어둡고 관료적인 디스토피아 테마를 시각적·감각적 수치로 규격화한 **디자인 토큰(Design Tokens)** 문서를 작성했습니다.
|
|
|
|
이 문서는 UI/UX 디자이너와 클라이언트 개발자가 일관된 시각 언어를 사용하기 위한 핵심 참조 데이터가 됩니다.
|
|
|
|
# 🎨 디자인 토큰 (Design Tokens)
|
|
|
|
## 1. 컬러 시스템 (Color System)
|
|
비밀 조직의 차가운 관료제와 붕괴해 가는 세계의 절망감을 표현하기 위해, 채도를 낮춘 무채색 기반에 특정 파라미터(위험, 파괴)를 강조하는 원색을 포인트 컬러로 사용합니다.
|
|
|
|
### 1.1. 파라미터 및 경고 (Core Parameters)
|
|
4대 핵심 속성 파라미터의 위험도를 직관적으로 전달하는 컬러 토큰입니다. (1~5단계 진행도에 따라 채도 및 명도 증가)
|
|
|
|
- **`color-entropy-base`**: `#5C3A21` (부패하는 세계의 탁한 갈색) - 엔트로피 지표 표기용.
|
|
- **`color-entropy-critical`**: `#8B0000` (검붉은 핏빛) - 엔트로피 4~5단계 경고용.
|
|
- **`color-panic-base`**: `#4A148C` (혼돈과 광기의 보라색) - 대중 공황 지표 표기용.
|
|
- **`color-panic-critical`**: `#9C27B0` (밝은 네온 퍼플) - 대중 공황 4~5단계 경고용.
|
|
- **`color-resistance-base`**: `#2F4F4F` (차가운 심연의 청록색) - 내부 저항 지표 표기용.
|
|
- **`color-resistance-critical`**: `#00FFCC` (날카로운 네온 시안) - 내부 저항(파업/반란) 임박 경고용.
|
|
- **`color-risk-base`**: `#B8860B` (어두운 황금색) - 위험 수용 계수(이사회 압박) 지표 표기용.
|
|
- **`color-risk-critical`**: `#FFD700` (경고등의 쨍한 노란색) - 위험 수용 계수 4~5단계 및 탄핵 경고용.
|
|
|
|
### 1.2. 자원 및 토큰 (Tokens & Tags)
|
|
국장이 결재 시 관리해야 할 소모성 자원 및 영구 자원을 구분하는 컬러입니다.
|
|
|
|
- **`color-token-budget`**: `#4CAF50` (탁한 지폐의 녹색) - 예산 토큰 표기용.
|
|
- **`color-token-personnel`**: `#E53935` (피복/혈액의 붉은색) - 인력 토큰 표기용.
|
|
- **`color-token-info`**: `#3F51B5` (청사진/보안의 파란색) - 정보 토큰 표기용.
|
|
- **`color-tag-neutral`**: `#E0E0E0` (빛바랜 서류의 회백색) - 재력, 무력, 감시 자원 태그 활성화 시 공통 베이스 컬러.
|
|
|
|
### 1.3. 스와이프 인터랙션 피드백 (Swipe Intent)
|
|
딜레마 카드를 넘기는 방향에 따른 암시적 컬러 피드백입니다.
|
|
|
|
- **`color-swipe-left`**: `#D32F2F` (오염/손실 암시 - 덱 오염 발생 시 화면 테두리 이펙트).
|
|
- **`color-swipe-right`**: `#388E3C` (투자/해결 암시 - 토큰 소모로 위기를 넘길 때).
|
|
- **`color-swipe-up`**: `#757575` (보류/버리기 암시 - 극비 프로젝트 취소 시).
|
|
|
|
|
|
## 2. 타이포그래피 (Typography)
|
|
서류 결재라는 테마를 살리기 위해, 타자기로 친 듯한 모노스페이스 폰트와 관공서 느낌의 명조/고딕 폰트를 혼용합니다.
|
|
|
|
- **`font-family-doc-title`**: `Serif (명조체 계열)` - 극비 프로젝트, 위기 강타 등 카드의 제목 표기용.
|
|
- **`font-family-typewriter`**: `Monospace (타자기 폰트)` - 딜레마 카드의 본문 텍스트 및 내러티브 태그 설명용.
|
|
- **`font-family-ui`**: `Sans-Serif (고딕체 계열)` - 파라미터 수치(0~100%), 자원 보유량 등 직관적인 UI 정보 표기용.
|
|
|
|
## 3. 아이코노그래피 (Iconography)
|
|
UI의 여백을 확보하고 정보를 직관적으로 전달하기 위한 기호 체계입니다.
|
|
|
|
|**자원/요소**|**아이콘 토큰 (Icon Token)**|**시각적 묘사**|
|
|
|---|---|---|
|
|
|**재력/자본 태그**|`icon-tag-wealth`|**건물 아이콘** (마천루나 은행 실루엣).|
|
|
|**무력/조직 태그**|`icon-tag-force`|**방패 아이콘** (경찰/군사 조직의 상징).|
|
|
|**감시/언론 태그**|`icon-tag-surveillance`|**눈동자 아이콘** (CCTV 또는 전시안의 형태).|
|
|
|**예산 토큰**|`icon-token-budget`|지폐 뭉치 또는 동전 스택.|
|
|
|**인력 토큰**|`icon-token-personnel`|넥타이를 맨 사람의 흉상 또는 핏방울.|
|
|
|**정보 토큰**|`icon-token-info`|서류철 또는 플로피 디스크.|
|
|
|**오염 카드**|`icon-deck-pollution`|카드의 모서리에 묻은 검은 얼룩이나 불탄 자국 (시각적 오염도 연출용).|
|
|
|
|
## 4. 인터랙션 및 모션 토큰 (Interaction & Motion)
|
|
스와이프와 결재 과정에서 느껴지는 관료제 특유의 묵직함을 수치화합니다.
|
|
|
|
### 4.1. 스와이프 물리 엔진 (Swipe Physics)
|
|
- **`motion-swipe-friction-normal`**: `0.8` - 덱이 깨끗한 상태(페이즈 1)일 때 카드가 부드럽게 넘어가는 기본 저항값.
|
|
- **`motion-swipe-friction-heavy`**: `1.5` - 오염 카드가 많거나, 위험 단계가 높을 때 카드가 뻑뻑하게 끌려가는 저항값 (압박감 연출).
|
|
- **`motion-snap-duration`**: `0.3s` - 결재(스와이프) 완료 후 카드가 화면 밖으로 날아가는 애니메이션 시간.
|
|
|
|
### 4.2. 페이즈 전환 앰비언트 (Phase Ambient)
|
|
내러티브 태그 누적치에 따른 환경 변화 연출 토큰입니다.
|
|
- **`ambient-phase-1`**: `opacity 0.0` - 태그 0~3개. 깔끔하고 차분한 사무실 조명.
|
|
- **`ambient-phase-2`**: `opacity 0.4` - 태그 4~7개. 미세하게 화면 가장자리에 비네팅(어두운 테두리) 생성.
|
|
- **`ambient-phase-3`**: `opacity 0.8` - 태그 8개 이상. 화면 테두리가 붉게 점멸하며 사이렌을 연상시키는 극한의 비네팅.
|
|
|
|
## 5. 햅틱 피드백 토큰 (Haptic/Vibration)
|
|
모바일 기기의 진동을 통해 플레이어에게 직접적인 물리적 압박감을 전달합니다.
|
|
|
|
- **`haptic-swipe-tick`**: `Light (10ms)` - 일상 딜레마를 스와이프할 때의 가벼운 종이 넘김 느낌.
|
|
- **`haptic-stamp-success`**: `Medium (30ms)` - 토큰을 얻거나, 자원 태그/자산을 획득하여 투자가 성공적으로 이루어졌을 때.
|
|
- **`haptic-crisis-hit`**: `Heavy (50ms)` - 위기 강타(신화, 조직 저항 등)가 발동하여 붕괴 파라미터가 상승할 때의 충격.
|
|
- **`haptic-chain-reaction`**: `Successive Light (10ms x 3)` - 무제한 인벤토리에서 파이프라인 연쇄 반응(입력-변환-출력)이 발동하여 오염 카드가 자동 처리될 때의 짜릿한 연속 진동.
|
|
|
|
|