Home

안녕! 클로바파트라

백로그   |   그라운드 룰   |   서비스 바로가기(https://clovapatra.com)

🧡 팀원 소개

김태원	정진성	박나현
BE	BE	FE
@dev-taewon-kim	@student079	@studioOwol

📄 목차

• ✍🏻 프로젝트 개요
• 🚀 핵심 기능
• 📄 게임 규칙
• ⚙️ 기술 스택
• 🏛️ 시스템 아키텍처
• 🔎 개발 문서

✍🏻 프로젝트 개요

안녕! 클로바파트라는 참가자들이 음성을 기반으로 도전을 수행하며, 게임을 즐기는 실시간 소셜 플랫폼입니다.

• 사용자들은 자신의 목소리로 게임을 플레이하며, 발음, 음정 등의 도전을 통해 경쟁합니다.
• WebRTC와 음성 분석 기술을 활용하여 음성 데이터를 실시간으로 처리하며, Clova Speech Recognition API를 통해 발음의 정확도를 측정합니다.

---

🚀 핵심 기능

🎮 멀티 플레이

방 개설 기능으로 손쉽게 게임을 시작하세요

사용자들은 직접 방을 개설하고, 링크 공유로 다른 사람들을 초대해 실시간으로 소통할 수 있습니다. 닉네임을 지정하여 방에 참여하고, 참가자 목록을 통해 현재 방에 있는 모든 사람을 확인할 수 있습니다.

• 방 개설 및 링크 공유
• 방 제목으로 검색
• 참가자 닉네임 지정 및 실시간 참가자 조회
• 강퇴 기능
• 준비 상태 토글

음성으로 친구들과 소통하세요

사용자는 마이크, 스피커를 이용해 높은 음질로 음성 기반의 실시간 통화를 경험할 수 있습니다.

• 음성 기반의 실시간 통화 지원
• 볼륨 조절
• 마이크 음소거

🎤 안녕! 클레오파트라! 세상에서 제일가는 포테이토 칩!

다른 친구들보다 높은 음을 내세요

이전 사용자 음정의 높낮이를 비교해 성공 or 실패를 판별합니다

• 음정 분석
• 음정 비교

화내는 개구리 페페

목소리 크기가 클수록 페페가 커지고, 음정이 높아질수록 페페가 빨개집니다

• 볼륨 분석
• 음정 분석

👨‍🎤 내가그린기린그림은긴기린그림이고...

주어지는 지문을 정확하게 발음하세요

사용자의 음성을 분석해 주어진 지문과 정확도를 비교합니다.

• 발음 분석
• 발음 점수

---

📄 게임 규칙

1. 게임 시작

• 방장은 게임 시작 버튼을 눌러 게임을 시작합니다.
• 참가자는 각자 닉네임을 설정하여 방에 입장하며, 방장은 모든 참가자의 준비 상태를 확인할 수 있습니다.

2. 게임 모드

게임은 두 가지 주요 모드로 구성되어 있으며, 각 라운드마다 모드가 랜덤으로 선택됩니다.

(1) 클레오파트라 모드

• 목표: 이전 참가자보다 더 높은 음정을 내야 합니다.
• 방법:
  1. 참가자는 "안녕! 클레오파트라! 세상에서 제일 가는 포테이토 칩!"을 외칩니다.
  2. 시스템은 사용자의 음정을 분석하여 이전 사용자보다 높으면 성공, 낮거나 같으면 실패로 판정합니다.
• 패배 조건:
  • 음정을 이전 참가자보다 높게 내지 못한 경우 해당 라운드에서 탈락합니다.

(2) 발음 도전 모드

• 목표: 주어진 지문을 정확하게 발음합니다.
• 방법:
  1. 시스템이 랜덤으로 주어진 발음 도전 문장을 화면에 표시합니다.
  2. 참가자는 제한시간 동안 문장을 읽습니다.
  3. 시스템은 Clova Speech Recognition API를 이용해 음성과 텍스트의 정확도를 비교하여 점수를 매깁니다.
• 패배 조건:
  • 합격 기준인 90점을 넘지 못하면 탈락합니다.

3. 게임 진행

• 순서 결정:

  • 참가자 순서는 랜덤으로 결정됩니다.
  • 연속으로 세 번 라운드를 진행한 참가자는 다음 참가자에서 면제됩니다.

• 라운드:

  • 라운드의 게임 모드는 랜덤으로 결정됩니다.

4. 게임 종료

• 마지막까지 살아남은 최종 1인이 우승자로 선정됩니다.
• 모든 라운드가 종료되면 최종 순위가 표시되며, 로비로 돌아가거나 방에서 나갈 수 있습니다.

5. 추가 기능

• 참가자는 도중에 마이크 음소거나 볼륨 조절을 할 수 있습니다.
• 방장은 참가자를 강퇴할 수 있습니다.

위 규칙에 따라 진행되는 안녕! 클로바파트라는 음성 기반의 독창적인 규칙과 실시간 소통을 통해 참가자들에게 흥미진진한 경험을 제공합니다. 🎤

---

🏛️ 시스템 아키텍처

주요 컴포넌트

1. 클라이언트 그룹:
   • WebRTC 기반의 P2P MESH 연결로 음성 데이터 전송.
   • React로 구성된 사용자 인터페이스.
   • Zustand를 통한 전역 상태 관리.
2. 게임 서버:
   • Socket.IO와 NestJS를 통해 실시간 게임 로직을 관리.
3. 시그널링 서버:
   • WebRTC 연결 초기화를 위한 시그널링 처리.
4. 음성 처리 서버:
   • Express 기반 음성 데이터 분석 처리.
   • 병목 현상 방지를 위한 다중화
5. 저장소:
   • 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로 게임방 관리 최적화: 효율적인 데이터 처리와 성능 개선