운영 중2025.04 ~ 현재Featured
실시간 상담 위젯 및 관리자 운영 콘솔
80여 개 홈페이지와 ERP를 연결한 사내 상담 플랫폼
외부 채팅 SaaS 의존도를 낮추고 내부 상담 프로세스에 맞추기 위해, 고객용 공통 채팅 위젯과 ERP 관리자 콘솔을 구축했습니다.
Role
Main Frontend Developer → Go Backend 운영·확장
- 80여 개
- 적용 대상 홈페이지
- 6,455건+
- 2025.12 기준 상담
- 58개+
- 외부 API 연동 함수
- 43개
- 관리자 UI 컴포넌트
- Next.js
- React
- TypeScript
- WebSocket
- React Query
- Zustand
- Context API
- TipTap
- AWS S3
- Go
프로젝트 상세 보기
Context
프로젝트 배경
기존 채널톡은 빠른 도입에는 유리했지만 비용, 기능 확장, ERP 연계에 제약이 있었습니다. 단순 UI 복제가 아니라 여러 홈페이지에서 재사용할 수 있고 상담 운영 흐름과 결합되는 자체 플랫폼이 필요했습니다.
Contribution
담당 범위
- 고객 채팅 위젯과 ERP 상담 관리자 주요 화면 설계·개발
- 메시지, 상담방, unread count, preview 등 실시간 UI 동기화
- scoped npm package 형태의 공통 위젯 분리 및 배포
- Presigned URL 기반 파일 업로드와 썸네일 처리 상태 UX 구현
- 모바일 WebView 생명주기에 대응하는 앱 Bridge 기반 재연결 흐름 구성
- 기존 Go 서버의 운영 API와 이벤트 응답, AI API 중간 연동 확장
서비스 흐름
- 80여 개 고객 홈페이지 · 공통 npm 채팅 위젯
- REST API + WebSocket 실시간 통신
- Go Backend · WebSocket Server · AI API
- ERP 상담 관리자 운영 콘솔
Problem solving
문제와 해결
연결과 상담방 생명주기 분리
01- 문제
- 절전 모드, 브라우저 포그라운드 복귀, 모바일 파일 선택 과정에서 연결이 종료되고 상담방 상태가 복구되지 않았습니다.
- 접근
- Connection Life Cycle과 Room Life Cycle을 분리하고 비정상 종료 재시도, 소켓 교체, 현재 상담방 join 재전송을 구현했습니다.
- 결과
- 새로고침 없이 연결과 상담방 상태를 복구하고 사용자가 연결 상태를 인지할 수 있는 UX를 마련했습니다.
서버 상태와 실시간 UI 상태의 경계
02- 문제
- REST 조회 결과와 WebSocket 이벤트를 한 저장소에서 다루면 캐시와 즉시 반영 상태의 책임이 불명확해졌습니다.
- 접근
- 조회·mutation은 React Query, 메시지·상담방 목록·미리보기처럼 즉시 반영할 상태는 Zustand로 분리했습니다.
- 결과
- 서버 데이터 캐시와 이벤트 기반 UI 업데이트의 역할이 명확해지고 상담방 전환 시 동기화 흐름을 단순화했습니다.
다수 홈페이지의 배포 일관성
03- 문제
- 사이트마다 위젯 코드를 복사하면 기능 추가와 장애 수정이 각 저장소에 흩어지는 문제가 있었습니다.
- 접근
- 외부에는 최소 설정만 props로 노출하고 내부 API·Socket·사용자 상태는 Context와 Hook으로 감싼 scoped npm package를 만들었습니다.
- 결과
- 하나의 패키지 버전으로 약 80개 Next.js 홈페이지의 공통 기능을 관리할 수 있는 기반을 구축했습니다.
성과와 영향
- 일부 사이트에 한정됐던 상담 접점을 약 80개 홈페이지로 확장
- 외부 채팅 SaaS 의존도를 낮추고 사내 업무 흐름에 맞춘 기능 확장 기반 확보
- 고객 위젯, 관리자 콘솔, 파일 처리, AI 답변을 하나의 상담 흐름으로 연결
- 실제 운영 이슈를 바탕으로 데스크톱과 WebView의 재연결 안정성 개선
회고
초기에는 실시간 메시지 구현에 집중했지만 운영 단계에서 연결 복구가 더 중요한 문제임을 배웠습니다. 다시 설계한다면 WebSocket 연결, Room 참여, 모바일 생명주기, 복구 UX를 초기 스펙에 먼저 포함할 것입니다.
담당 범위.Go 백엔드와 WebSocket 서버를 처음부터 구축한 것은 아닙니다. 기존 구조를 분석한 뒤 신규 엔드포인트, 운영 API, 파일 업로드와 AI 연동에 필요한 범위를 수정·확장했습니다.