6.2 KiB
6.2 KiB
제공해주신 시스템 기획서를 바탕으로, 게임의 어둡고 관료적인 디스토피아 테마를 시각적·감각적 수치로 규격화한 디자인 토큰(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)- 무제한 인벤토리에서 파이프라인 연쇄 반응(입력-변환-출력)이 발동하여 오염 카드가 자동 처리될 때의 짜릿한 연속 진동.