Home
백로그 | 그라운드 룰 | 서비스 바로가기(https://clovapatra.com)
| 김태원 | 정진성 | 박나현 |
|---|---|---|
 |
 |
 |
| BE | BE | FE |
| @dev-taewon-kim | @student079 | @studioOwol |
안녕! 클로바파트라는 참가자들이 음성을 기반으로 도전을 수행하며, 게임을 즐기는 실시간 소셜 플랫폼입니다.
- 사용자들은 자신의 목소리로 게임을 플레이하며, 발음, 음정 등의 도전을 통해 경쟁합니다.
- WebRTC와 음성 분석 기술을 활용하여 음성 데이터를 실시간으로 처리하며, Clova Speech Recognition API를 통해 발음의 정확도를 측정합니다.
사용자들은 직접 방을 개설하고, 링크 공유로 다른 사람들을 초대해 실시간으로 소통할 수 있습니다. 닉네임을 지정하여 방에 참여하고, 참가자 목록을 통해 현재 방에 있는 모든 사람을 확인할 수 있습니다.
- 방 개설 및 링크 공유
- 방 제목으로 검색
- 참가자 닉네임 지정 및 실시간 참가자 조회
- 강퇴 기능
- 준비 상태 토글
사용자는 마이크, 스피커를 이용해 높은 음질로 음성 기반의 실시간 통화를 경험할 수 있습니다.
- 음성 기반의 실시간 통화 지원
- 볼륨 조절
- 마이크 음소거
이전 사용자 음정의 높낮이를 비교해 성공 or 실패를 판별합니다
- 음정 분석
- 음정 비교
목소리 크기가 클수록 페페가 커지고, 음정이 높아질수록 페페가 빨개집니다
- 볼륨 분석
- 음정 분석
사용자의 음성을 분석해 주어진 지문과 정확도를 비교합니다.
- 발음 분석
- 발음 점수
- 방장은 게임 시작 버튼을 눌러 게임을 시작합니다.
- 참가자는 각자 닉네임을 설정하여 방에 입장하며, 방장은 모든 참가자의 준비 상태를 확인할 수 있습니다.
게임은 두 가지 주요 모드로 구성되어 있으며, 각 라운드마다 모드가 랜덤으로 선택됩니다.
- 목표: 이전 참가자보다 더 높은 음정을 내야 합니다.
-
방법:
- 참가자는 "안녕! 클레오파트라! 세상에서 제일 가는 포테이토 칩!"을 외칩니다.
- 시스템은 사용자의 음정을 분석하여 이전 사용자보다 높으면 성공, 낮거나 같으면 실패로 판정합니다.
-
패배 조건:
- 음정을 이전 참가자보다 높게 내지 못한 경우 해당 라운드에서 탈락합니다.
- 목표: 주어진 지문을 정확하게 발음합니다.
-
방법:
- 시스템이 랜덤으로 주어진 발음 도전 문장을 화면에 표시합니다.
- 참가자는 제한시간 동안 문장을 읽습니다.
- 시스템은 Clova Speech Recognition API를 이용해 음성과 텍스트의 정확도를 비교하여 점수를 매깁니다.
-
패배 조건:
- 합격 기준인 90점을 넘지 못하면 탈락합니다.
-
순서 결정:
- 참가자 순서는 랜덤으로 결정됩니다.
- 연속으로 세 번 라운드를 진행한 참가자는 다음 참가자에서 면제됩니다.
-
라운드:
- 라운드의 게임 모드는 랜덤으로 결정됩니다.
- 마지막까지 살아남은 최종 1인이 우승자로 선정됩니다.
- 모든 라운드가 종료되면 최종 순위가 표시되며, 로비로 돌아가거나 방에서 나갈 수 있습니다.
- 참가자는 도중에 마이크 음소거나 볼륨 조절을 할 수 있습니다.
- 방장은 참가자를 강퇴할 수 있습니다.
위 규칙에 따라 진행되는 안녕! 클로바파트라는 음성 기반의 독창적인 규칙과 실시간 소통을 통해 참가자들에게 흥미진진한 경험을 제공합니다. 🎤
flowchart TB
%% ===========================================
%% 클라이언트 그룹 정의
%% ===========================================
subgraph ClientGroup["클라이언트 그룹(Mesh)"]
direction LR
Client1["클라이언트 1"]
Client2["클라이언트 2"]
Client3["클라이언트 3"]
Client4["클라이언트 4"]
%% P2P 연결
Client1 <--> |P2P WebRTC| Client2
Client1 <--> |P2P WebRTC| Client3
Client1 <--> |P2P WebRTC| Client4
Client2 <--> |P2P WebRTC| Client3
Client2 <--> |P2P WebRTC| Client4
Client3 <--> |P2P WebRTC| Client4
end
%% ===========================================
%% 시스템 컴포넌트 정의
%% ===========================================
%% 로드 밸런서
subgraph LoadBalancer["라우팅"]
direction TB
NGINXMain["NGINX"]
end
%% 게임 서버
subgraph GameServer["게임 서버 (NestJS)"]
direction TB
GameLogic["게임 로직"]
WebSocket["WebSocket 핸들러"]
GameState["게임 상태 관리"]
end
%% 시그널링 서버
subgraph SignalingServer["시그널링 서버 (Express)"]
direction TB
SignalingLogic["시그널링 로직"]
WebRTCHandler["WebRTC 핸들러"]
end
%% 음성 처리 서버 클러스터
subgraph VoiceProcessing["음성 처리 서버 (Express)<br/>클러스터"]
direction TB
VoiceServer1["음성 처리 서버 1"]
VoiceServer2["음성 처리 서버 2"]
VoiceServer3["음성 처리 서버 3"]
end
%% 외부 API
ClovaAPI["Clova Speech Recognition API"]
%% 저장소
subgraph Storage["저장소"]
direction TB
Redis[(Redis)]
end
%% ===========================================
%% 시스템 연결 정의
%% ===========================================
%% 1. 프론트엔드 연결
ClientGroup <--> |HTTPS| NGINXMain
%% 2. 로드 밸런서 연결
NGINXMain <--> |게임 트래픽| GameServer
NGINXMain <--> |시그널링 트래픽| SignalingServer
NGINXMain <--> |음성 트래픽| VoiceProcessing
%% 3. 데이터 저장소 연결
GameServer <--> Redis
%% 4. 서비스 간 연결
VoiceProcessing <--> |음성 데이터 처리 요청 & 결과 반환| GameServer
GameServer <--> |게임 데이터| ClientGroup
%% 5. 외부 API 연결
VoiceServer1 <--> |음성 인식 요청| ClovaAPI
VoiceServer2 <--> |음성 인식 요청| ClovaAPI
VoiceServer3 <--> |음성 인식 요청| ClovaAPI
-
클라이언트 그룹:
- WebRTC 기반의 P2P MESH 연결로 음성 데이터 전송.
- React로 구성된 사용자 인터페이스.
- Zustand를 통한 전역 상태 관리.
-
게임 서버:
- Socket.IO와 NestJS를 통해 실시간 게임 로직을 관리.
-
시그널링 서버:
- WebRTC 연결 초기화를 위한 시그널링 처리.
-
음성 처리 서버:
- Express 기반 음성 데이터 분석 처리.
- 병목 현상 방지를 위한 다중화
-
저장소:
- Redis: Pub/Sub 및 게임 상태 캐싱.
- MySQL: 데이터 영구 저장.
🛠️ AGT - Automatic Git & Github Tool
📊 WebRTC Mesh ‐ 트래픽 계산
🎢 WebRTC Mesh - 험난한 여정
💬 WebRTC를 알아보자
📮 SSE(Server Sent Events)
📖 SSE Pagination
⏳ Socket 통신에서 비동기 작업 순서 보장 방법
📡 Redis pub/sub를 활용한 SSE 적용기
🏗️ Naver Cloud Platform을 활용한 배포 전략
🚴♀️ Redis로 게임방 관리 최적화: 효율적인 데이터 처리와 성능 개선