Xingu 플랫폼의 플레이어 화면 상세 설계 문서
플레이어는 호스트가 만든 게임 방에 참여하여 게임을 즐기는 역할입니다.
- ✅ 방 코드(PIN)로 참여
- ✅ 닉네임 설정
- ✅ 게임 참여 및 답변 제출
- ✅ 내 점수 및 순위 확인
- ✅ 결과 확인
- MT/워크샵 참가자
- 팀원
- 학생
- 동아리 회원
1. 랜딩 페이지 접속
↓
2. 중앙에 있는 PIN 입력 필드에 방 코드 입력
예: AB1234
↓
3. [참여하기] 클릭
↓
4. PIN 검증 → 방 정보 확인
↓
5. 닉네임 입력 모달
- 방 정보 확인 (게임, 인원)
- 닉네임 입력
↓
6. 플레이어 대기실 (/play/[code]/lobby)
- 게임 정보 확인
- 참가자 목록 확인
- 호스트가 시작할 때까지 대기
↓
7. 호스트가 게임 시작 → 자동으로 게임 화면 전환
↓
8. 플레이어 게임 화면 (/play/[code]/game)
- 문제 확인
- 답변 입력/선택
- 제출
- 내 점수 및 순위 확인
- 다음 라운드 대기
↓
9. 게임 종료 → 자동으로 결과 화면 전환
↓
10. 플레이어 결과 화면 (/play/[code]/result)
- 내 최종 순위 확인
- 전체 순위 확인
- 다음 게임 대기 또는 퇴장
플레이어가 빠르고 쉽게 방에 참여할 수 있도록
┌─────────────────────────────────────────────────────┐
│ 🎮 Xingu [게임 선택 & 방 만들기] 🎮 │
├─────────────────────────────────────────────────────┤
│ │
│ │
│ 🎮 Xingu │
│ 재미있는 아이스브레이킹 플랫폼 │
│ │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ │ │
│ │ [ 방 코드를 입력하세요 ] │ │
│ │ │ │
│ │ AB1234 │ │
│ │ │ │
│ └──────────────────────────────────────────┘ │
│ │
│ [🚀 참여하기] │
│ │
│ 예: AB1234, XY9876 │
│ │
│ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 💡 방 코드는 호스트에게 받으세요 │
│ │
└─────────────────────────────────────────────────────┘
특징
- 중앙 배치, 큰 크기
- 자동 대문자 변환
- 6자리 제한
- 실시간 검증 (입력 중)
에러 처리
존재하지 않는 방
┌─────────────────────────────────────┐
│ ❌ 방을 찾을 수 없습니다 │
│ 코드를 다시 확인해주세요 │
└─────────────────────────────────────┘
꽉 찬 방
┌─────────────────────────────────────┐
│ ⚠️ 참가 인원이 가득 찼습니다 │
│ 호스트에게 문의해주세요 │
└─────────────────────────────────────┘
이미 시작한 게임
┌─────────────────────────────────────┐
│ ⏸ 게임이 진행 중입니다 │
│ 다음 게임을 기다려주세요 │
└─────────────────────────────────────┘
방 참여 전 닉네임 설정 및 방 정보 최종 확인
┌─────────────────────────────────────────────────────┐
│ 방 참여 [✕] │
├─────────────────────────────────────────────────────┤
│ │
│ 🎮 방 정보 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 게임: 초성 게임 │ │
│ │ 호스트: 철수 │ │
│ │ 참가자: 3/20명 │ │
│ │ 설정: 5라운드 / 30초 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 👤 닉네임 입력 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ [ 영희 ] │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ⚠️ 2-10자, 특수문자 불가 │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ [✅ 참여하기] │
│ │
└─────────────────────────────────────────────────────┘
허용
- 한글, 영문, 숫자
- 2-10자
- 공백 허용 (양 끝 제외)
불허
- 특수문자
- 너무 짧거나 긴 이름
- 욕설/부적절한 단어
중복 처리
- 같은 닉네임 허용
- 호스트가 구분 가능하도록 번호 부여 (영희#1, 영희#2)
게임 시작 전 대기, 다른 참가자 확인
┌─────────────────────────────────────────────────────┐
│ 🎮 대기 중... [나가기] │
├─────────────────────────────────────────────────────┤
│ │
│ 선택된 게임 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ │ │
│ │ 🎯 초성 게임 │ │
│ │ │ │
│ │ 제시된 초성으로 단어 맞추기 │ │
│ │ │ │
│ │ 5라운드 / 30초 / 보통 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 👥 참가자 (3명) │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 👑 철수 (호스트) │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 👤 영희 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 👤 민수 (나) ← 나 표시 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 💬 호스트가 게임을 설정하고 있어요... │
│ 곧 시작됩니다! 🎯 │
│ │
│ │
│ [참가자 입장 중 애니메이션] │
│ ••• │
│ │
└─────────────────────────────────────────────────────┘
표시 정보
- 게임 이름
- 간단한 설명
- 게임 설정 (라운드, 시간, 난이도)
특징
- 실시간 업데이트
- 호스트 표시 (👑)
- 내 닉네임 하이라이트
- 입장 애니메이션
참가자 카드
┌─────────────────────────────────────┐
│ 👤 영희 │
│ 방금 입장했습니다 │
└─────────────────────────────────────┘
대기 중
"호스트가 게임을 설정하고 있어요..."
참가자 입장
"영희님이 입장했습니다!"
게임 곧 시작
"잠시 후 게임이 시작됩니다! 준비하세요! 3... 2... 1..."
게임 참여, 답변 제출, 내 점수 확인
┌─────────────────────────────────────────────────────┐
│ 초성 게임 │
├─────────────────────────────────────────────────────┤
│ │
│ Round 3/5 ⏱ 0:25 │
│ 내 점수: 18점 순위: 2/3위 │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 📋 문제 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ │ │
│ │ ㅋ ㅋ │ │
│ │ │ │
│ │ 카테고리: 음식 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ✏️ 답변 입력 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ │ │
│ │ [ 커피 ] │ │
│ │ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ │
│ [✅ 제출하기] │
│ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 💡 힌트: 음료나 디저트를 생각해보세요! │
│ │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ Round 3/5 ⏱ 0:25 2/3위 18점 │
└─────────────────────────────────────────────────────┘
표시 정보
- 현재 라운드 / 전체 라운드
- 남은 시간 (타이머)
- 내 현재 순위
- 내 총 점수
레이아웃
- 큰 글씨로 문제 표시
- 카테고리/힌트 제공
- 깔끔한 카드 형태
게임별 다른 형태
- 초성 게임: 초성 + 카테고리
- 밸런스 게임: A vs B 선택지
- 퀴즈: 질문 + 보기
텍스트 입력형 (초성 게임 등)
┌─────────────────────────────────────┐
│ [ 커피 ] │
└─────────────────────────────────────┘
[✅ 제출하기]
선택형 (밸런스 게임 등)
┌─────────────────────────────────────┐
│ [🍗 치킨] │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ [🍕 피자] │
└─────────────────────────────────────┘
객관식 (퀴즈)
┌─────────────────────────────────────┐
│ ① 서울 │
│ ② 부산 │
│ ③ 인천 │
│ ④ 대구 │
└─────────────────────────────────────┘
상태별 표시
입력 전
[제출하기] (비활성화, 회색)
입력 후
[✅ 제출하기] (활성화, 녹색)
제출 완료
[✓ 제출 완료] (비활성화, 체크 표시)
시간 초과
[⏰ 시간 초과] (비활성화, 빨간색)
┌─────────────────────────────────────────────────────┐
│ Round 3/5 ⏱ 종료 │
│ 내 점수: 28점 (+10점) 순위: 1/3위 ⬆️ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ✅ 정답입니다! │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ ㅋ ㅋ │ │
│ │ │ │
│ │ 정답: 커피 ☕ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 내 답변: 커피 (3.2초) │
│ 획득 점수: +10점 (빠른 답변 보너스 +2점) │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 📊 현재 순위 │
│ 1위 나 (영희) 28점 ⬆️ │
│ 2위 철수 25점 │
│ 3위 민수 15점 ⬇️ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 💬 다음 라운드 준비 중... │
│ [로딩 애니메이션] │
│ │
└─────────────────────────────────────────────────────┘
정답
✅ 정답입니다! 훌륭해요!
+10점 (빠른 답변 보너스 +2점)
오답
❌ 아쉽지만 오답입니다
정답: 커피
0점
시간 초과
⏰ 시간이 초과되었습니다
정답: 커피
0점
현재 순위
━━━━━━━━━━━━━━━━━━━
1위 영희 (나) 28점 👑
2위 철수 25점
3위 민수 15점
내 최종 결과 확인 및 전체 순위 확인
┌─────────────────────────────────────────────────────┐
│ 초성 게임 - 결과 │
├─────────────────────────────────────────────────────┤
│ │
│ 🏆 게임 종료! │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ │ │
│ │ 내 결과 │ │
│ │ │ │
│ │ 🥈 │ │
│ │ │ │
│ │ 2위 │ │
│ │ 영희 (나) │ │
│ │ │ │
│ │ 45점 │ │
│ │ │ │
│ │ 정답 4개 / 평균 3.1초 │ │
│ │ │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 📊 전체 순위 │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🥇 1위 철수 52점 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🥈 2위 영희 (나) 45점 ← 내 순위 강조 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🥉 3위 민수 38점 │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ 💬 다음 게임을 기다리는 중... │
│ 호스트가 새 게임을 시작하면 자동으로 이동합니다 │
│ │
│ [🚪 나가기] │
│ │
└─────────────────────────────────────────────────────┘
표시 정보
- 순위 (메달 아이콘)
- 내 닉네임
- 최종 점수
- 정답 개수
- 평균 답변 시간
순위별 메달
- 🥇 1위: 금메달
- 🥈 2위: 은메달
- 🥉 3위: 동메달
- 4위 이하: 숫자만
리스트 형태
- 1-3위는 메달 표시
- 내 순위는 하이라이트
- 스크롤 가능 (참가자 많을 경우)
호스트가 새 게임 시작 예정
"다음 게임을 기다리는 중..."
"호스트가 새 게임을 시작하면 자동으로 이동합니다"
호스트가 방 종료
"게임이 종료되었습니다"
"참여해주셔서 감사합니다!"
[메인으로 돌아가기]
landing/
├── pin-input.tsx // PIN 입력 필드
│ ├── input-field.tsx
│ └── error-message.tsx
│
├── nickname-modal.tsx // 닉네임 입력 모달
│ ├── room-info-preview.tsx
│ └── nickname-input-field.tsx
│
└── join-button.tsx // 참여하기 버튼lobby/
├── game-info-card.tsx // 게임 정보 카드
│ ├── game-title.tsx
│ ├── game-description.tsx
│ └── game-settings-info.tsx
│
├── player-list.tsx // 참가자 목록
├── player-item.tsx // 참가자 카드
│ └── player-badge.tsx // 호스트/나 표시
│
├── status-message.tsx // 상태 메시지
└── leave-button.tsx // 나가기 버튼game/
├── game-header.tsx // 상단 정보 바
│ ├── round-info.tsx
│ ├── timer-display.tsx
│ ├── score-display.tsx
│ └── rank-display.tsx
│
├── question-display.tsx // 문제 표시
│ └── question-card.tsx
│
├── answer-input.tsx // 답변 입력
│ ├── text-input.tsx // 텍스트 입력형
│ ├── choice-buttons.tsx // 선택형
│ └── multiple-choice.tsx // 객관식
│
├── submit-button.tsx // 제출 버튼
│
├── feedback-display.tsx // 피드백 표시
│ ├── correct-feedback.tsx
│ ├── wrong-feedback.tsx
│ └── timeout-feedback.tsx
│
└── round-result.tsx // 라운드 결과
├── score-gained.tsx
└── current-ranking.tsxresult/
├── my-result-card.tsx // 내 결과 카드
│ ├── rank-display.tsx
│ ├── medal-icon.tsx
│ ├── score-display.tsx
│ └── stats-display.tsx
│
├── ranking-list.tsx // 전체 순위
├── ranking-item.tsx // 순위 항목
│ └── highlight-my-rank.tsx
│
├── waiting-message.tsx // 대기 메시지
└── leave-button.tsx // 나가기 버튼- 최소 44x44px (터치 영역)
- 중요한 버튼은 48x48px 이상
- 버튼 간 간격 최소 8px
- 모바일 키보드 자동 표시
- 입력 타입 최적화 (텍스트, 숫자)
- 자동완성 비활성화 (PIN 입력)
┌──────────────────┐
│ Header │
├──────────────────┤
│ │
│ Main Content │
│ (Full Width) │
│ │
│ │
├──────────────────┤
│ Submit Button │
└──────────────────┘
- 약간의 여백 추가
- 카드 형태 유지
- 가로 모드 최적화
- 중앙 정렬
- 최대 너비 제한 (600px)
- 좌우 여백
- 필수 컴포넌트 우선 로드
- 이미지 lazy loading
- 코드 스플리팅
- WebSocket 자동 재연결
- 오프라인 상태 감지
- 낙관적 UI 업데이트
스와이프
- 좌우 스와이프: 이전/다음 화면 (해당되는 경우)
풀 투 리프레시
- 대기실에서 아래로 당겨 새로고침
롱프레스
- 방 코드 롱프레스로 복사
-
즉시성
- 빠른 참여 (PIN 입력만)
- 최소한의 입력 (닉네임만)
- 자동 화면 전환
-
피드백
- 답변 제출 시 즉각 반응
- 점수 변동 애니메이션
- 순위 변화 표시
-
명확성
- 현재 상태 명확히 표시
- 다음 액션 안내
- 에러 메시지 친절하게
-
몰입감
- 부드러운 애니메이션
- 적절한 사운드 효과
- 시각적 피드백
참여 단계
- PIN 입력 성공률 > 95%
- 닉네임 설정 완료율 > 98%
- 평균 참여 시간 < 20초
게임 중
- 답변 제출률 > 90%
- 중도 이탈률 < 5%
- 평균 답변 시간 적정
결과 화면
- 결과 확인률 100%
- 연속 게임 참여율 > 70%
- 만족도 > 4.2/5.0
네트워크 끊김
┌─────────────────────────────────────┐
│ ⚠️ 연결이 끊어졌습니다 │
│ 재연결 시도 중... │
│ [수동 재연결] │
└─────────────────────────────────────┘
호스트 방 종료
┌─────────────────────────────────────┐
│ 📢 호스트가 방을 종료했습니다 │
│ 참여해주셔서 감사합니다! │
│ [메인으로 돌아가기] │
└─────────────────────────────────────┘
강퇴
┌─────────────────────────────────────┐
│ ⛔ 방에서 나가게 되었습니다 │
│ [메인으로 돌아가기] │
└─────────────────────────────────────┘
문서 버전: 1.1
최종 수정: 2025.10.11
주요 변경사항:
- 랜딩 페이지 PIN 입력 UI 구현 완료
- 닉네임 모달 구현 완료
- 현재 구현 상태 반영