LinguaRoom - 실시간 다국어 번역 채팅

서로 다른 언어를 사용하는 사람들이 각자의 모국어로 실시간 대화할 수 있는 다국어 채팅 서비스

주요 기능

• 실시간 다국어 번역: 한국어, 영어, 중국어, 일본어, 스페인어 자동 번역 (Groq API)
• 말풍선 3D 플립: 원문 → 번역문 전환 애니메이션, 클릭으로 원문 ↔ 번역문 토글
• VAD 음성 입력 (STT): 발화 자동 감지 후 Whisper로 텍스트 변환
• TTS 음성 출력: 브라우저 내장 Web Speech API로 번역문 자동 낭독
• AI 봇 참여: 외국어 봇 초대, 자동 응답 + TTS 재생 (데모 최대 1개)
• 화상채팅 레이아웃: 참여자 카드 기반 스테이지 구조 (video 태그 교체 가능)
• 반응형: 모바일 / 데스크탑 탭 전환 레이아웃

기술 스택

영역	기술
프론트엔드	Vue 3 + Vite 6 + Pinia
백엔드	Node.js 20 + WebSocket (ws)
번역 / 봇	Groq API (llama-3.3-70b-versatile)
음성 인식 (STT)	Groq Whisper (whisper-large-v3)
음성 출력 (TTS)	Web Speech API (브라우저 내장)
배포	Docker Compose + Nginx

시작하기

필수 요구사항

• Node.js 20+
• Groq API 키 (console.groq.com에서 무료 발급)

로컬 개발 환경 설정

1. 환경 변수 설정

cp .env.example server/.env
# server/.env 에 GROQ_API_KEY 입력

2. 백엔드 실행

cd server
npm install
npm run dev

3. 프론트엔드 실행

cd client
npm install
npm run dev

http://localhost:5173 에서 확인

참고: STT(음성 인식)은 HTTPS 또는 localhost에서만 동작합니다.

Docker 배포

로컬 실행

cp .env.example .env
# .env 에 GROQ_API_KEY 입력

docker compose up --build

http://localhost/project/linguaroom 접속

프로덕션 배포

# .env 에 도메인 및 보안 설정 추가
DOMAIN=yourdomain.com
ALLOWED_ORIGINS=https://yourdomain.com

docker compose up --build -d

WebSocket은 wss://yourdomain.com/project/linguaroom/ws로 자동 설정됩니다.

중요: 프로덕션 환경에서는 Nginx 앞에 Let's Encrypt 등으로 SSL을 반드시 설정하세요.

프로젝트 구조

linguaroom/
├── server/
│   ├── index.js          # WebSocket 서버, 번역/STT/봇 처리
│   ├── package.json
│   └── Dockerfile
├── client/
│   ├── src/
│   │   ├── main.js
│   │   ├── App.vue
│   │   ├── stores/
│   │   │   └── room.js   # Pinia 스토어 (WebSocket, TTS, STT 상태)
│   │   ├── views/
│   │   │   ├── Landing.vue    # 닉네임·언어 설정, 방 생성/참여
│   │   │   └── ChatRoom.vue   # 채팅방 (스테이지, VAD, 컨트롤바)
│   │   └── components/
│   │       ├── ChatPanel.vue  # 채팅 로그 + 메시지 입력
│   │       ├── FlipBubble.vue # 3D 플립 말풍선
│   │       ├── Sidebar.vue    # 아이콘 사이드바
│   │       ├── Avatar.vue     # 참여자 아바타 카드
│   │       └── Toast.vue      # 토스트 알림
│   ├── vite.config.js
│   ├── nginx.conf         # SPA + WebSocket 프록시 설정
│   └── Dockerfile
├── docker-compose.yml
├── .env.example
└── README.md

환경 변수

변수	필수	설명
GROQ_API_KEY	✅ 필수	Groq API 키
DOMAIN	선택	프로덕션 도메인 (Docker 빌드 시 WS URL에 사용)
ALLOWED_ORIGINS	선택	WebSocket 허용 Origin (프로덕션 권장, 미설정 시 모두 허용)

개발 스크립트

# 서버
npm run dev    # 개발 서버 (node --watch)
npm start      # 프로덕션 실행

# 클라이언트
npm run dev    # Vite 개발 서버
npm run build  # 프로덕션 빌드

라이선스

MIT