대륜톡 — 실시간 상담 플랫폼

기존 채널톡은 빠른 도입에는 유리했지만 비용, 기능 확장, ERP 연계에 제약이 있었습니다. 단순 UI 복제가 아니라 여러 홈페이지에서 재사용할 수 있고 상담 운영 흐름과 결합되는 자체 플랫폼이 필요했습니다.

Main Frontend Developer → Go Backend 운영·확장

2025.04 ~ 현재

고객 위젯과 ERP 상담 화면을 담당하고 기존 Go 서버를 수정·확장했습니다. Go·WebSocket 서버나 공통 npm 패키지 자체를 처음부터 구축한 것은 아닙니다. 12만 건은 메시지 수가 아닌 서비스 첫 1년간 실제 상담 DB 집계입니다.

1. 01

   연결과 상담방 생명주기

   절전·모바일 복귀·파일 선택 후 연결과 상담방 상태가 복구되지 않았습니다.

2. 02

   조회와 실시간 상태의 경계

   REST 조회와 WebSocket 이벤트의 책임을 나누어 동기화할 필요가 있었습니다.

3. 03

   여러 홈페이지에 일관된 위젯 제공

   사이트별 복사 방식은 기능 개선과 장애 대응을 분산시킬 수 있었습니다.

약 80개 홈페이지의 고객 상담 위젯과 ERP 관리자 콘솔을 개발했습니다. 실시간 상태 동기화와 연결 복구를 구현하고, Go 기반 파일 업로드 API까지 개발 범위를 넓혔습니다.

• 고객 상담 위젯과 ERP 관리자 주요 화면 설계·개발
• 메시지·상담방·미확인 수·미리보기 실시간 동기화
• 기존 공통 npm 패키지에 상담 위젯 추가 및 배포
• 파일 업로드 API와 Presigned URL 기반 화면 흐름 구현
• 모바일 앱 Bridge 기반 재연결과 기존 Go 운영 API 확장

1. 연결과 상담방 생명주기

   연결과 상담방의 생명주기를 분리하고 재시도·소켓 교체·상담방 재참여를 구현했습니다.

   새로고침 없이 상태를 복구하는 흐름을 마련했습니다.

2. 조회와 실시간 상태의 경계

   조회·변경 요청은 React Query, 즉시 반영 상태는 Zustand로 분리했습니다.

   조회 캐시와 UI 이벤트 상태의 역할을 명확히 했습니다.

3. 여러 홈페이지에 일관된 위젯 제공

   기존 공통 npm 패키지에 위젯을 추가하고 설정은 props, 내부 상태는 Context와 Hook으로 분리했습니다.

   공통 패키지 버전으로 위젯을 관리합니다.

1. 상담 접점홈페이지
2. 실시간 연결WebSocket
3. 기존 서버 확장Go
4. 상담 운영ERP

담당 기능을 중심으로 정리한 개념 흐름입니다.

고객·관리자 화면

Next.js · React · 공통 npm 패키지

상태 관리

React Query 조회 캐시 · Zustand 실시간 상태

통신·서버

REST API · WebSocket · 기존 Go 서버 확장

파일 처리

AWS S3 · Presigned URL · 썸네일 처리 상태

• ✓비정상 종료 재시도와 현재 상담방 재참여 처리
• ✓데스크톱과 모바일 WebView의 복귀·연결 복구 대응
• ✓서버 조회 캐시와 즉시 반영하는 실시간 상태의 책임 분리

초기에는 실시간 메시지 구현에 집중했지만 운영 단계에서 연결 복구가 더 중요한 문제임을 배웠습니다. 다시 설계한다면 WebSocket 연결, Room 참여, 모바일 생명주기, 복구 UX를 초기 스펙에 먼저 포함할 것입니다.

• Next.js
• React
• TypeScript
• WebSocket
• React Query
• Zustand
• Context API
• TipTap
• AWS S3
• Go