채널톡 팀 기능과 고객 DB
상담 서비스 채널톡에서 상담 배정, 멘션, 서포트봇, 마케팅 자동화가 함께 쓰는 팀 기능의 화면을 혼자 맡아 만들고, 대량 고객 데이터 처리를 개선했습니다.
1,000한 번에 처리하는 고객 데이터 작업 한도, 기존 200건의 다섯 배
- 2021.11 ~ 2022.09
- 주식회사 채널코퍼레이션
- 팀 기능 프론트엔드와 고객 DB 기능 개발
핵심 가치
매니저를 팀으로 묶어 멘션 한 번으로 팀을 부르고 상담을 팀에 배정하게 됐고, 운영자는 대량 다운로드가 끝나기를 화면 앞에서 기다리지 않아도 됐습니다.
성과
- 팀 만들기, 팀 목록, 팀 멘션, 팀 검색의 프론트엔드를 혼자 개발
- 상담 배정, 서포트봇, 마케팅 자동화에 팀 조건 추가
- 한 번에 처리하는 고객 데이터 작업 한도를 200건에서 1,000건으로
- 검색 결과를 주소 하나로 공유하고, 뒤로 가기에도 그대로 유지
기술 스택
배경
상담 SaaS 채널톡의 채팅팀에서 일했습니다. 팀 단위로 협업하려면 에디터에서 팀과 멤버를 멘션하고 상담을 자동으로 배정할 수 있어야 했습니다. 멤버가 많아도 검색과 삽입이 매끄러워야 했고, 팀명과 소속을 조합한 검색 조건도 지원해야 했습니다. 대량 고객 데이터를 다루는 운영자에게는 처리량과 검색 상태 공유가 과제였습니다.
결정과 구현
- 팀 멘션과 자동 배정 에디터: ProseMirror 에디터에 팀과 멤버 멘션, 팝오버 UI, 가상 스크롤 리스트를 합성 패턴으로 조립해, 멤버가 많아도 끊김 없이 렌더링되게 했습니다.
- 팀명과 소속 조건을 조합할 수 있는 표현식 검색으로 자동 완성을 지원해, 이름만 맞춰 보던 검색의 한계를 풀었습니다.
- 코드 리뷰와 Gherkin BDD 테스트 컨벤션을 팀에 정착시켰고, Playwright 멀티 브라우저 E2E로 배포마다 에디터 회귀를 자동으로 검증했습니다.
- 고객 DB 벌크 처리와 검색: 벌크 액션 처리 한계를 200개에서 1,000개로 5배 늘렸습니다. 다운로드 진행률은 WebSocket으로 실시간 추적하고, 다운로드가 끝나면 DM을 자동으로 보내도록 했습니다.
- 검색 상태는 URL SearchParam을 단일 출처(SSOT)로 두고 관리했습니다. 다중 필터 조합과 정렬, 뒤로 가기 복원, 결과 URL 공유가 모두 이 상태를 따르도록 했습니다.
