Home

안녕! 클로바파트라

서비스 바로가기(https://clovapatra.com)

백로그   |   기획서   |   Figma   |   그라운드 룰

📄 목차

• 📄 목차
• ✍🏻 프로젝트 개요
• 🚀 핵심 기능
• ⚙️ 기술 스택
• 🏛️ 시스템 아키텍처
• 🔎 FE 기술적 도전
• 🔎 BE 기술적 도전
• 🧡 팀원 소개

✍🏻 프로젝트 개요

안녕! 클로바파트라는 음성 기반 발음 게임 프로젝트로 사용자들이 발음과 관련된 다양한 도전을 통해 즐거움을 느끼고, 실시간으로 소통할 수 있도록 도와주는 서비스입니다.

이 프로젝트를 통해 사용자들은 음성 인식과 텍스트 변환 기술을 체험하고, 게임을 통해 발음을 개선하며 소통 능력을 향상시키는 경험을 할 수 있습니다.

🎮 멀티 플레이어 게임

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

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

• 방 개설 및 링크 공유
• 참가자 닉네임 지정 및 실시간 참가자 목록 조회
• 음성 기반의 실시간 통화 지원

🎮 안녕! 클로바파트라

게임을 통해 즐거움을 경험하세요

게임은 '클로바파트라'로, 음성을 기반으로 한 독특한 발음 게임입니다. 음성을 텍스트와 음정으로 분석하여 도전 성공/실패 여부를 판별합니다. 다양한 게임 로직을 통해 사용자에게 흥미를 더합니다.

• 클로바파트라 게임:
  • 서버 소켓을 통해 사용자별 음성 데이터를 수집하고, 이를 텍스트와 음정으로 변환
• 게임 로직:
  • 사용자 순서를 랜덤으로 설정하고 발음 도전 게임을 무작위로 제공
  • 클레오파트라 및 발음 게임에서 성공/실패 여부를 판단하고 게임 탈락 여부 결정
  • 모든 게임이 종료되면 최종 순위를 결정하여 보여줍니다.

🏛️ 시스템 아키텍처

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) 클러스터"]
        direction TB
        VoiceServer1["음성 처리 서버 1"]
        VoiceServer2["음성 처리 서버 2"]
        VoiceServer3["음성 처리 서버 3"]
    end

    %% 외부 API
    ClovaAPI["Clova Speech Recognition API"]

    %% 저장소
    subgraph Storage["저장소"]
        direction TB
        Redis[(Redis)]
        MySQL[(MySQL)]
    end

    %% ===========================================
    %% 시스템 연결 정의
    %% ===========================================

    %% 1. 프론트엔드 연결
    ClientGroup <--> |HTTPS| NGINXMain

    %% 2. 로드 밸런서 연결
    NGINXMain <--> |게임 트래픽| GameServer
    NGINXMain <--> |시그널링 트래픽| SignalingServer
    NGINXMain <--> |음성 트래픽| VoiceProcessing

    %% 3. 데이터 저장소 연결
    GameServer <--> Redis
    GameServer <--> MySQL
    SignalingServer <--> Redis

    %% 4. 서비스 간 연결
    VoiceProcessing --> |음성 데이터 처리 결과| GameServer
    GameServer <--> |게임 데이터| ClientGroup

    %% 5. 외부 API 연결
    VoiceServer1 <--> |음성 인식 요청| ClovaAPI
    VoiceServer2 <--> |음성 인식 요청| ClovaAPI
    VoiceServer3 <--> |음성 인식 요청| ClovaAPI

Loading

🔎 FE 기술적 도전

추가 예정

🔎 BE 기술적 도전

추가 예정

🧡 팀원 소개

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