← 전체 프로젝트

웹앱·플랫폼

임베드형 커뮤니티 채팅 솔루션 'GOMCHAT'

스크립트 한 줄이면 어떤 웹사이트에도 실시간 채팅방이 붙는 SaaS형 채팅 위젯입니다. 데모 페이지에서 더미 데이터로 채팅 흐름을 직접 체험할 수 있습니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗PHP, Workerman, WebSocket, Redis, MySQL, JWT
임베드형 커뮤니티 채팅 솔루션 'GOMCHAT' 대표 화면

문제

팬덤·게임 커뮤니티는 순간적으로 트래픽이 몰립니다. 10만 명 동시 접속과 무제한 다중 방을 견디면서도, 고객사 입장에서는 스크립트 한 줄로 끝나는 간단한 연동이 필요했습니다. 채팅을 붙이려는 서비스는 이미 회원 시스템을 운영하고 있어서 회원 DB를 옮기라는 요구부터가 도입 장벽이 됩니다. 욕설과 도배, 리딩방 광고처럼 운영자가 매일 마주치는 문제를 위젯이 대신 처리하지 못하면 도입 후 운영 비용이 커지는 점도 부담입니다. 여기에 이 프로젝트는 포트폴리오 데모라는 조건이 하나 더 있었습니다. 실제 웹소켓 서버를 상시 운영하지 않으면서 방문자가 채팅 SaaS의 전체 흐름을 스크린샷이 아니라 진짜 위젯으로 체험하게 만들어야 했습니다.

해결

Workerman 웹소켓 서버에 Redis Pub/Sub을 얹어 워커 사이 메시지를 동기화하고, 테넌트별 시크릿과 HMAC 서명으로 위젯 입장을 검증합니다. 요금제별 기능 제한은 서버에서 강제하고, 관리자 콘솔에서 음소거·차단·공지·신고 처리까지 해결합니다. 연동은 세 단계로 줄였습니다. 테넌트 키를 발급받고 서버에서 회원 정보를 HMAC SHA-256으로 서명한 뒤 widget.js 스니펫을 넣으면 끝이라서 회원 DB를 옮길 일이 없습니다. 데모 페이지는 실서버 대신 모의 소켓이 이 구조를 그대로 재현합니다. 첫 화면의 채팅창이 봇과 대화하는 진짜 위젯으로 동작하되 입력한 메시지는 어디에도 저장되지 않는다는 사실을 화면에 그대로 적어 두었습니다.

100K
동시 접속 설계 목표
1줄
위젯 연동 코드
멀티룸
무제한 방 개설 구조

제작 노트

히어로에서 바로 만지는 위젯

첫 화면의 채팅창은 화면 캡처가 아니라 실제로 동작하는 위젯입니다. 메시지를 입력하면 봇이 응답하고 위로 끌어올리면 지난 대화가 커서 기반으로 이어 붙습니다. 기능 섹션의 큰 칸 두 개는 마이크로데모로 만들어 금칙어 필터에 먹튀·조작 같은 단어를 직접 넣어 가려지는 순간을 볼 수 있게 했습니다. 브랜드 리스킨 스와치를 누르면 위쪽 위젯의 색과 모서리가 그 자리에서 바뀝니다. 곰 스티커 12종과 2,000여 개 이모지, 다중 방과 귓속말 같은 기능도 설명 대신 체험으로 보여 줍니다.

서명 한 줄로 끝나는 연동

기술 스택은 PHP와 Workerman 웹소켓 서버, Redis Pub/Sub, MySQL로 잡았습니다. 워커 여러 대가 떠도 Redis가 메시지를 중계해 어느 워커에 붙은 유저든 같은 방을 봅니다. 인증은 세션 공유 대신 서명 방식입니다. 고객사 서버가 로그인한 회원의 uid·닉네임·등급을 시크릿 키로 서명해 넘기면 위젯이 검증만 하고 입장시키므로 회원 DB 이관이 필요 없습니다. 설치 섹션에는 PHP·Node.js·HTML 임베드 세 가지 예제 코드를 탭으로 두고 서명 입력 순서를 고정 규격으로 못 박았습니다.

요금제와 콘솔까지 한 페이지

랜딩은 기능·설치·요금제·보안·콘솔·FAQ 순서로 도입 담당자가 검토하는 흐름을 그대로 따라갑니다. 요금제는 동시 접속 300명 무료부터 3,000명, 30,000명까지 세 단으로 나눠 커뮤니티 크기에 맞춰 고르게 했습니다. 콘솔 데모에서는 신고 큐에 들어온 스팸을 경고·뮤트·차단으로 처리하고 실수하면 8초 안에 되돌리는 운영 동선까지 만져 볼 수 있습니다. 위젯 브랜딩 설정을 바꾸면 옆의 위젯에 곧바로 반영되어 설정과 결과를 한 화면에서 확인합니다.

화면

랜딩 — 임베드형 채팅 SaaS 히어로
랜딩 — 임베드형 채팅 SaaS 히어로
기능 — 위젯 기능 그리드
기능 — 위젯 기능 그리드
설치 — 3단계 연동과 코드 스니펫
설치 — 3단계 연동과 코드 스니펫
요금제 카드
요금제 카드
라이브 데모 — 채팅 위젯과 모의 상담
라이브 데모 — 채팅 위젯과 모의 상담

이 작업과 관련된 서비스

다른 작업