제품 목록
Products실시간·커뮤니케이션2026년 7월 10일
Codium Lab Chat
각자 모국어로 읽고 대화하는 실시간 다국어 채팅 — 한 줄 스크립트로 붙이는 임베드 위젯
Socket.IOReact 18VitePostgreSQL 16DeepLClaude API
#실시간채팅#실시간번역#multilingual#임베드위젯
언어의 장벽 없는 실시간 오픈 채팅. 각자 자기 모국어로 읽고 대화하는, 한 줄
<script>로 어떤 웹페이지에도 붙일 수 있는 다국어 채팅 위젯입니다.
무엇을 하나요
- 채널(방) 생성·참여·전환 — 방마다 대화가 분리되고, 채널별 접속 인원을 실시간 표시합니다.
- 실시간 메시지 & 접속 현황 — 입장·퇴장 시스템 메시지, "입력 중…" 타이핑 표시, 접속자 목록.
- 개인별 실시간 번역 — 사용자가 12개 언어(한국어 · English · 日本語 · 中文 · Español · Français · Deutsch · Tiếng Việt · ไทย · Bahasa · Русский · Português) 중 하나를 고르면, 상대 메시지가 내 언어로 번역되어 표시됩니다. 설정은 사용자별로 저장되어 같은 방을 각자 다른 언어로 이용합니다.
- 이모지 반응(리액션) — 메시지에 이모지를 토글하면 집계가 방 전체에 실시간 반영됩니다.
- 메시지 삭제 · 이미지 공유 — 본인 메시지만 소프트 삭제(SQL 단에서 작성자 검증), 이미지는 미리보기/라이트박스.
- 한 줄 임베드 — 아무 웹페이지에 플로팅 채팅 버튼 + iframe 패널로 삽입, 대화 기록은 PostgreSQL 에 영구 저장.
기술 스택
| 영역 | 사용 기술 |
|---|---|
| Backend | Node.js(ESM) · Express 4 · Socket.IO 4(WebSocket) · multer · JWT + bcryptjs |
| Frontend | React 18 · Vite 5 · Tailwind 3 · react-hook-form · socket.io-client |
| DB | PostgreSQL 16 (messages / reactions / channels / users) |
| 번역 | 교체형 3종 — DeepL(기본) / LibreTranslate(자체 호스팅) / Anthropic Claude(문맥 인지, claude-haiku-4-5) |
| 인프라 | Docker Compose (db · server · client, 선택 translate 컨테이너) |
번역 파이프라인
기술적으로 주목할 점
- 채널 = Socket.IO room — join 시 이전 방을 자동 leave 해 항상 현재 채널만 수신. 접속 현황은
room → Map<socketId, nickname>으로 관리. - 수신자 측 온디맨드 번역 — 원문 1건이 사용자별 선택 언어로 각각 표시되고,
(provider, target, text)캐시로 동일 번역 중복 호출을 방지. - 프로바이더 추상화 & 우아한 실패 — 세 번역기를 동일 인터페이스로 감싸고, 미지원 언어는 원문으로 폴백.
- 엄격한 설정 규율(No-Fallback) — 환경변수 기본값을 박지 않고 누락 시 시작 시점에 즉시 throw.
스크린샷
