docs: 온라인 보드게임 사이트 계획서 (공통 14편 + 게임 26종)

- 개요, 조사(BGA·한국 인기 보드게임·UI/UX), 아키텍처, 실시간 프로토콜, 안정성·보안, 계정, 로비·방, UI/UX, 데이터 모델, 게임 엔진, 테스트, 배포·운영, 로드맵(M0~M9), 사용자 결정 항목 - 게임별 규칙·엔진 설계·UI·테스트 체크리스트 26종 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 04:18:29 +09:00
parent b4a3c51201
commit f4d63e1544
43 changed files with 8948 additions and 0 deletions
--- a/docs/07-ui-ux.md
+++ b/docs/07-ui-ux.md
@@ -0,0 +1,119 @@
+# 07. UI/UX 설계
+
+## 1. 디자인 원칙
+1. **한 화면에 할 일 하나.** 지금 눌러야 하는 버튼이 가장 크고 진하다.
+2. **글자 + 아이콘.** 아이콘만 있는 버튼 금지(닫기 ✕ 제외).
+3. **지금 상황을 문장으로.** 화면 맨 위에 "내 차례예요. 돌을 놓을 곳을 눌러 주세요."
+4. **할 수 있는 것만 누를 수 있게.** 둘 수 있는 곳·낼 수 있는 카드만 밝게, 나머지는 흐리게. 잘못 누르면 짧게 흔들리고 이유를 한 줄로("같은 색 카드만 낼 수 있어요").
+5. **실수 방지.** 큰 결정(기권, 나가기, 올인, 다이)은 확인. 단, 매 턴 확인창은 금지(느려짐) — 대신 "두 번 눌러 확정" 옵션(바둑·오목 오착 방지, 기본 켜짐: 첫 탭은 미리보기 돌, 같은 곳을 다시 탭하면 착수).
+6. **기다림을 보여 준다.** 남은 시간 링, "OO님이 생각 중…", 연결 상태.
+7. **가볍게.** 장식 이미지 최소, 애니메이션은 짧게(150~250ms), `prefers-reduced-motion` 존중.
+
+## 2. 디자인 토큰
+### 2.1 색 (밝은 테마 / 어두운 테마)
+| 토큰 | 밝게 | 어둡게 | 용도 |
+|---|---|---|---|
+| `--bg` | #F7F5F0 | #16181D | 배경(따뜻한 미색) |
+| `--surface` | #FFFFFF | #20232A | 카드, 패널 |
+| `--text` | #1C1E21 | #F2F3F5 | 본문(명암비 15:1 이상) |
+| `--text-sub` | #4A4F57 | #B8BCC4 | 보조 글(4.5:1 이상) |
+| `--primary` | #2563EB | #5B8DEF | 주요 버튼(파랑) |
+| `--primary-text` | #FFFFFF | #0B1020 | 주요 버튼 글자 |
+| `--success` | #15803D | #4ADE80 | 준비, 성공 |
+| `--warning` | #B45309 | #FBBF24 | 시간 부족, 연결 불안정 |
+| `--danger` | #B91C1C | #F87171 | 기권, 나가기 |
+| `--felt` | #1F6B4A | #17513A | 카드 게임 테이블 |
+| `--wood` | #E3B76B | #B98C45 | 바둑판·오목판·장기판 |
+| `--focus` | #F59E0B | #F59E0B | 키보드 포커스 테두리 3px |
+
+- 색만으로 정보를 전달하지 않는다(내 차례 = 색 + 글자 + 테두리). 색약 모드: 카드 무늬에 모양 추가(♦에 빗금 등), 팀 색을 파랑/주황 조합으로.
+
+### 2.2 글자
+- 글꼴: Pretendard Variable(자체 호스팅, KS X 1001 서브셋 + 필요한 문자).
+- 크기 단계(기본 "보통"): 본문 17px, 작은 글 15px(최소), 버튼 18px, 제목 22/28px. 줄 간격 1.5.
+- 글자 크기 설정: 보통(100%) / 크게(120%) / 아주 크게(140%). 루트 `font-size`만 바꾸고 모든 크기는 `rem`으로.
+- 굵기: 본문 500, 버튼·제목 700. 300 이하 금지.
+
+### 2.3 크기·간격
+- 터치 영역 최소 48×48px, 주요 버튼 높이 56px, 버튼 사이 간격 최소 8px.
+- 간격 단위 4px(4/8/12/16/24/32).
+- 모서리 둥글기 12px(버튼), 16px(카드).
+- 바둑판처럼 칸이 작은 보드: 칸 크기가 32px 미만이면 "확대 보기" 버튼 + 두 손가락 확대 지원, "두 번 눌러 확정" 기본 켜짐.
+
+## 3. 공통 화면 틀
+```
+┌──────────────────────────┐
+│ ← 홈   오목 · 123 456   ⋯ │  ← 상단 바(56px): 뒤로, 게임·코드, 메뉴
+│ 내 차례예요 (●흑)  ◔ 23초  │  ← 상태 줄: 지금 할 일 + 타이머
+├──────────────────────────┤
+│  상대 정보 (이름, 시간)      │
+│                          │
+│        게임 보드           │  ← 화면 폭에 맞춰 정사각형
+│                          │
+│  내 정보 / 내 손패         │
+├──────────────────────────┤
+│ [주요 행동 버튼들]          │  ← 하단 고정, 엄지 영역
+│ 💬 채팅  😊 반응            │
+└──────────────────────────┘
+```
+- PC(가로 넓음): 보드 가운데, 오른쪽 패널에 플레이어 목록·채팅·기록.
+- 카드 게임: 원형 테이블 배치, 나는 항상 아래. 상대는 인원에 따라 위/좌/우에 자동 배치.
+
+## 4. 공통 컴포넌트
+| 컴포넌트 | 동작 |
+|---|---|
+| `BigButton` | 56px, 종류 primary/secondary/danger, 로딩 표시, 두 번 눌림 방지 |
+| `CodeDisplay` | `123 456` 큰 글씨 + 복사 |
+| `CopyButton` | 복사 후 1.5초 "복사했어요 ✓", 실패하면 텍스트 선택 상태로 보여 줌 |
+| `ShareButton` | `navigator.share` 있으면 공유 시트, 없으면 링크 복사 |
+| `QrModal` | QR 크게 + 코드 |
+| `CodeInput` | 6칸, 숫자 키패드, 붙여넣기 감지, 다 채우면 자동 제출 |
+| `Seat` | 프로필, 이름, 방장/준비/연결 상태 |
+| `TurnTimer` | 원형 링, 10초 남으면 주황 + 똑딱 소리(설정), 5초 남으면 빨강 + 진동 |
+| `Toast` | 위에서 내려오는 짧은 알림(3초), 스크린리더 `aria-live` |
+| `ConfirmSheet` | 아래에서 올라오는 확인창(큰 버튼 두 개) |
+| `Card` | 트럼프/화투/게임 카드 공용 SVG, 크기 3단계 |
+| `RulesSheet` | 게임 중 규칙 요약(그림), 현재 상황 도움말 |
+| `ConnectionBanner` | "다시 연결하는 중…" 띠 |
+
+## 5. 초보자 도움
+- 처음 하는 게임이면(기기 기준) 시작할 때 "30초 규칙 요약" 카드 3장(그림 위주), [건너뛰기].
+- 게임 중 [?] → 지금 상황에서 할 수 있는 것 설명("지금은 낼 카드를 고르는 차례예요. 밝게 보이는 카드만 낼 수 있어요").
+- 족보·점수가 복잡한 게임(섯다, 포커, 고스톱, 마작)은 내 패 옆에 현재 족보 이름 표시("지금: 7끗", "투페어"), 족보표 버튼.
+- 힌트 옵션(방 설정): 끄면 하이라이트만, 켜면 추천 수 표시(초보 방).
+
+## 6. 소리·진동
+- 짧은 효과음만(돌 놓기, 카드 넘기기, 내 차례 알림, 시간 경고, 승리). 합쳐서 100KB 이하, 처음 사용자 조작 후에만 재생(브라우저 정책).
+- 내 차례가 되었는데 탭이 백그라운드면: 탭 제목 깜빡임("● 내 차례예요") + 소리(설정).
+- 진동(`navigator.vibrate`): 내 차례, 시간 5초 남음.
+
+## 7. 접근성
+- 키보드만으로 모든 조작 가능(보드는 방향키로 칸 이동 + Enter). 포커스 테두리 항상 보이게.
+- 스크린리더: 보드 칸에 `aria-label`("가로 8, 세로 8, 빈칸"), 상대의 수를 `aria-live`로 읽어 줌("상대가 H8에 두었어요").
+- 명암비 기준 WCAG 2.2 AA 이상, 큰 글자 모드에서 화면이 깨지지 않는지 테스트.
+- 시스템 글자 크기·확대 존중(`user-scalable` 막지 않음).
+
+## 8. 성능 예산
+| 항목 | 예산 |
+|---|---|
+| 첫 화면 JS | 150KB gzip 이하 (React + 라우터 + 홈) |
+| 게임 화면 하나 | 추가 80KB gzip 이하(lazy) |
+| 글꼴 | 서브셋 woff2 2개(500/700) 합 400KB 이하, `font-display: swap` |
+| 이미지 | 게임 카드 썸네일은 SVG 또는 WebP 10KB 이하 |
+| 외부 요청 | 0개(디스코드 아바타 제외) |
+
+## 9. 문구 규칙
+- 존댓말 해요체, 짧게. "~하시겠습니까?" 대신 "~할까요?".
+- 어려운 말 금지: "테이블" → "방", "세션" → 쓰지 않음, "로비" → "홈".
+- 오류 문구는 원인 + 할 일: "방을 찾을 수 없어요. 코드를 다시 확인해 주세요."
+
+## 10. 화면 목록과 상태 (구현 체크용)
+- 홈(로그인 전/후, 진행 중 게임 있음)
+- 닉네임 입력(게스트 시작 / 링크 입장)
+- 코드 입력
+- 게임 상세 + 공개 방 목록
+- 대기실(방장/참가자/관전자, 인원 부족/가득 참)
+- 게임 화면(내 차례/남의 차례/연결 끊김/자리 비움/일시 정지)
+- 결과 화면(승/패/무승부, 한 판 더 투표 중)
+- 계정(게스트/디스코드)
+- 오류(방 없음, 방 가득 참, 서버 업데이트, 오프라인)