docs: PC 중심 화면 설계로 변경(07 화면 틀, 상단 메뉴·홈·대기실·게임·관리자 PC 배치)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
EJClaw
@@ -20,7 +20,7 @@
|
||||
- 인원: 각 게임의 원래 최소/최대 인원을 그대로 따른다.
|
||||
- 계정: 디스코드 로그인 또는 닉네임만 정하는 게스트. 디스코드 로그인 사용자도 닉네임을 바꿀 수 있다.
|
||||
- 방: 6자리 숫자 코드, 초대 링크, 코드/링크 복사, QR, 모바일 공유 시트, 빠른 시작, 관전, 재접속.
|
||||
- 기기: 모바일(세로) 우선, 태블릿·PC 모두 지원. 최신 Chrome/Safari/Edge/Samsung Internet.
|
||||
- 기기: **PC 우선**(사용자 결정, 2026-10-04). 태블릿·휴대폰도 같은 화면을 접어서 지원. 최신 Chrome/Edge/Safari/Firefox/Samsung Internet.
|
||||
|
||||
## 5. 범위 밖 (Non-goals)
|
||||
- 실제 돈, 유료 재화, 환전, 사이트 전체에서 유지되는 칩/포인트. 포커·섯다·고스톱의 칩/점수는 **그 방 안에서만** 쓰이고 방이 끝나면 사라진다(법적 위험 회피, `04-stability-security.md` 6절).
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
3. 대기실에서 방장이 바꿀 수 있는 것: 게임 모드/옵션(시간 제한 포함 — 게임마다 다름), 최대 인원(게임의 최소~최대 범위 안), 공개/비공개, 관전 허용, 채팅 허용.
|
||||
4. 옵션은 "기본 설정" 몇 개만 보이고 나머지는 "자세한 설정" 접기 안에 둔다.
|
||||
|
||||
## 5. 대기실 화면 (위에서 아래 순서, 모바일 세로 기준)
|
||||
## 5. 대기실 화면 (PC는 두 칸 배치 — `07-ui-ux.md` 3.4. 아래는 내용 순서이며 좁은 화면에서는 이 순서로 한 칸에 쌓인다)
|
||||
1. **초대 카드**(가장 눈에 띄게): 큰 글씨 코드 `123 456`
|
||||
- [코드 복사] [링크 복사] [공유하기](모바일: 공유 시트 → 카카오톡 등) [QR 보기](같은 공간의 가족이 폰으로 찍어서 입장)
|
||||
- 복사하면 버튼이 1.5초간 "복사했어요 ✓"로 바뀜 + 진동(지원 기기).
|
||||
|
||||
@@ -40,24 +40,62 @@
|
||||
- 모서리 둥글기 12px(버튼), 16px(카드).
|
||||
- 바둑판처럼 칸이 작은 보드: 칸 크기가 32px 미만이면 "확대 보기" 버튼 + 두 손가락 확대 지원, "두 번 눌러 확정" 기본 켜짐.
|
||||
|
||||
## 3. 공통 화면 틀
|
||||
## 3. 화면 틀 — PC 중심 (2026-10-04 결정)
|
||||
사용자 요청으로 **PC 화면을 기준으로 설계**한다. 휴대폰·태블릿은 같은 화면을 세로로 접어서 지원한다.
|
||||
|
||||
### 3.1 화면 폭 구간
|
||||
| 구간 | 폭 | 배치 |
|
||||
|---|---|---|
|
||||
| PC (기준) | 1100px 이상 (설계 기준 1280~1920) | 상단 메뉴 + 여러 칸 배치, 채팅·기보 항상 보임 |
|
||||
| 태블릿 | 720~1099px | 두 칸 → 한 칸으로 접힘, 오른쪽 패널은 판 아래로 |
|
||||
| 휴대폰 | 720px 미만 | 한 칸, 채팅은 버튼으로 여는 시트, 주요 버튼은 아래 고정 |
|
||||
|
||||
### 3.2 공통 상단 메뉴 (PC)
|
||||
```
|
||||
┌──────────────────────────┐
|
||||
│ ← 홈 오목 · 123 456 ⋯ │ ← 상단 바(56px): 뒤로, 게임·코드, 메뉴
|
||||
│ 내 차례예요 (●흑) ◔ 23초 │ ← 상태 줄: 지금 할 일 + 타이머
|
||||
├──────────────────────────┤
|
||||
│ 상대 정보 (이름, 시간) │
|
||||
│ │
|
||||
│ 게임 보드 │ ← 화면 폭에 맞춰 정사각형
|
||||
│ │
|
||||
│ 내 정보 / 내 손패 │
|
||||
├──────────────────────────┤
|
||||
│ [주요 행동 버튼들] │ ← 하단 고정, 엄지 영역
|
||||
│ 💬 채팅 😊 반응 │
|
||||
└──────────────────────────┘
|
||||
┌──────────────────────────────────────────────────────────────────────────┐
|
||||
│ ● 같이 놀자 보드게임 홈 게임 목록 [코드 6자리 입력칸][참여] 👤 닉네임 ▾ │ 64px
|
||||
└──────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
- PC(가로 넓음): 보드 가운데, 오른쪽 패널에 플레이어 목록·채팅·기록.
|
||||
- 카드 게임: 원형 테이블 배치, 나는 항상 아래. 상대는 인원에 따라 위/좌/우에 자동 배치.
|
||||
- 어느 화면에서든 코드를 바로 넣어 참여할 수 있게 상단에 코드 입력칸을 둔다.
|
||||
- 내용 폭은 최대 1280px, 가운데 정렬. 게임 화면만 화면 전체 폭을 쓴다.
|
||||
|
||||
### 3.3 홈 (PC)
|
||||
```
|
||||
┌ 상단 메뉴 ───────────────────────────────────────────────────────────────┐
|
||||
│ [＋ 방 만들기 (큰 버튼)] [코드로 참여: □□□ □□□ ] [▶ 하던 게임으로] │
|
||||
├──────────────────────────────────────────────────────┬───────────────────┤
|
||||
│ 게임 카드 격자 (4~5열, 카드에 인원·시간·난이도) │ 지금 열린 공개 방 │
|
||||
│ │ (게임·인원·참여) │
|
||||
└──────────────────────────────────────────────────────┴───────────────────┘
|
||||
```
|
||||
|
||||
### 3.4 대기실 (PC)
|
||||
```
|
||||
┌──────────────────────────────┬────────────────────────────────┐
|
||||
│ 초대 카드(코드 크게, 복사·QR) │ 자리 목록(2~10칸 격자) │
|
||||
│ 게임 설정(펼쳐서 바로 수정 — 방장) │ 채팅(항상 보임) │
|
||||
│ 규칙 요약 │ [게임 시작] / [준비하기] │
|
||||
└──────────────────────────────┴────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.5 게임 화면 (PC)
|
||||
```
|
||||
┌ 상단 메뉴(얇게 48px: 게임명·코드·메뉴) ─────────────────────────────────────┐
|
||||
│ │ 상태: 내 차례예요 ◔ 23초 │
|
||||
│ │ 상대 정보 · 시계 │
|
||||
│ 게임 판 (화면 높이에 맞춤) │ 내 정보 · 시계 │
|
||||
│ │ [무르기][무승부][기권] │
|
||||
│ │ 기보(수 목록) │
|
||||
│ │ 채팅 + 반응 버튼 │
|
||||
└──────────────────────────────────────────────┴──────────────────────────────┘
|
||||
```
|
||||
- 오른쪽 패널 폭 360px, 판은 남은 공간에서 가장 큰 정사각형.
|
||||
- 카드 게임: 판 자리에 원형 테이블, 나는 항상 아래, 내 패는 판 아래쪽 넓게.
|
||||
- PC 조작: 마우스를 올리면 미리 보기 돌(반투명), 클릭 한 번에 착수(기본값). "두 번 눌러 확정"은 터치 기기의 기본값이고 설정에서 바꿀 수 있다.
|
||||
- 단축키: `Enter` 채팅 입력, `Esc` 창 닫기, 방향키+`Enter` 판 조작.
|
||||
|
||||
### 3.6 관리자 (PC)
|
||||
왼쪽 사이드바(220px)에 메뉴, 오른쪽에 내용. 표는 PC에서 표 형태, 좁은 화면에서는 카드 목록.
|
||||
|
||||
## 4. 공통 컴포넌트
|
||||
| 컴포넌트 | 동작 |
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
| 정보 유출 | 같은 도구 | 숨김 정보 게임 | 매 커밋 |
|
||||
| 서버 통합 | `bun test` + 실제 WS 클라이언트 | 인증, 방 만들기/입장, 행동, 재접속, 강퇴, 한 판 더 | 매 커밋 |
|
||||
| 복구 | 통합 테스트 | 서버 인스턴스 종료 → 같은 DB로 재시작 → 상태 동일 | 매 커밋 |
|
||||
| E2E | Playwright(크로미움 + 모바일 뷰포트) | 게스트 시작 → 방 만들기 → 링크로 두 번째 사용자 입장 → 오목 한 판 끝까지 | 마일스톤마다 |
|
||||
| E2E | Playwright(크로미움, PC 1440×900 기준 + 모바일 뷰포트 1개) | 게스트 시작 → 방 만들기 → 링크로 두 번째 사용자 입장 → 오목 한 판 끝까지 | 마일스톤마다 |
|
||||
| 접근성 | axe-core(Playwright) | 주요 화면 | 마일스톤마다 |
|
||||
| 성능 | Lighthouse(모바일) | 홈, 방 | 마일스톤마다, 예산 위반 시 실패 |
|
||||
| 성능 | Lighthouse(데스크톱 + 모바일) | 홈, 방 | 마일스톤마다, 예산 위반 시 실패 |
|
||||
| 부하 | 자체 Bun 스크립트(가짜 클라이언트) | 동시 2,000 연결, 방 500개, 각 방 2초마다 행동 | 마일스톤 M2, M5, 출시 전 |
|
||||
| 장애 주입 | 스크립트 | 게임 중 서버 강제 종료(SIGKILL), 네트워크 끊김, 느린 클라이언트 | 마일스톤 M2, 출시 전 |
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
- 도메인: **game.tkrmagid.kr** 고정. 모든 기능을 완성한 뒤 연결한다.
|
||||
- 상표명: 친구끼리 쓰는 사이트라 **원래 이름을 그대로 사용**한다.
|
||||
- 관리자 사이트 추가. 슈퍼어드민은 디스코드 ID `293719842274541579`, 어드민은 디스코드 ID로 추가(`14-admin.md`).
|
||||
- 화면은 **PC 버전 중심**으로 만든다(휴대폰은 접어서 지원).
|
||||
- 게임 규칙 기본값은 관리자 사이트에서 모두 바꿀 수 있으므로, 3절의 기본안은 "처음 값"이다.
|
||||
|
||||
## 1. 운영 (진행에 꼭 필요)
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
### 8.6 종료 조건과 결과(GameResult)
|
||||
|
||||
## 9. UI/UX
|
||||
- 화면 배치(모바일 세로 / PC), 조작 방법, 합법 수 하이라이트, 애니메이션, 초보자 도움말
|
||||
- 화면 배치(PC 기준 — 판 + 오른쪽 패널, 좁은 화면 접힘), 조작 방법, 합법 수 하이라이트, 애니메이션, 초보자 도움말
|
||||
|
||||
## 10. 테스트 체크리스트
|
||||
- [ ] 구체적인 시나리오
|
||||
|
||||
Reference in New Issue
Block a user