생산일 2026.05.20 · 원문 가독성 정리본

MMX 디자인 전략

문서 ID: MMX-DESIGN-001

작성일: 2026.05.20

작성: sglee + Claude PMO

상태: 수립 중 — 레퍼런스 앱 확보 후 고도화 예정

1. 디자인 원칙

• 몰입감 우선: 플레이어가 120분 동안 화면에서 이탈하지 않도록 설계한다
• 기능 중심: 디자인이 기능을 방해하지 않는다
• 감성 연출: 단서 오픈·Phase 전환·시상식 등 핵심 순간에 집중 연출
• 일관성: 디자인 시스템을 준수하여 화면 간 통일감을 유지한다

2. 레퍼런스 앱

⚠️ 레퍼런스 앱 확보 전까지 디자인 시스템은 잠정 수립. 확보 후 즉시 반영하여 고도화한다.

3. 디자인 시스템 (잠정 — 레퍼런스 확보 후 확정)

3.1 색상 팔레트

• 미정 — 레퍼런스 앱 확보 후 확정

3.2 타이포그래피

• 미정 — 레퍼런스 앱 확보 후 확정

3.3 간격 규칙

• 8px 그리드 기반 (잠정)

3.4 핵심 컴포넌트

• 버튼·카드·모달·채팅 버블·단서 카드·Phase 전환 화면
• 스타일 미정 — 레퍼런스 앱 확보 후 확정

3.5 애니메이션 원칙

• 단서 카드 오픈: 햅틱 진동 + 카드 뒤집기 + 효과음 + 화면 암전 후 밝아짐
• 시작 시 시네마틱 연출: 인트로에만 적용
• 나머지: 자연스럽고 빠른 전환 (과도한 애니메이션 금지)

4. UI 구현 절차

UI 구현 정책(MMX-POL-UI-001) 준수. 요약:

1차: sglee + Claude PMO 공동 (텍스트 와이어프레임)
2차: CODEX (HTML 인터랙티브 와이어프레임)
3차: Claude PMO 검토
4차: 비니 검토 (개선 의견만 — 범위 확장 불가)
5차: sglee 승인
6차: CURSOR 구현
7차: sglee 최종 승인

5. 디자인 퀄 보장 방안

5.1 레퍼런스 앱 활용

• 2026.07 초 미스토리 출시 후 즉시 플레이·분석
• 디자인 시스템 업데이트에 반영

5.2 디자인 시스템 준수

• CURSOR는 확정된 디자인 시스템 안에서만 구현
• 임의 색상·폰트·간격 결정 금지

5.3 Claude PMO 디자인 감사

• 6차 구현 완료 후 sglee 승인 전
• URL 확인으로 디자인 기준 대비 검토
• 승인 or 재작업 지시

6. 향후 일정

MMX: The Murder Mystery X | 디자인 전략 | MMX-DESIGN-001 | 2026.05.20