- 0문의 → 알림톡까지 담당자 개입
- 4API (발송·템플릿·기록·인증)
- 3결과 상태 (전송됨·실패·불확실)
- 200건모든 기기가 같이 보는 발송 기록
화면 미리보기
견적 문의 카카오 알림톡 자동 발송 시스템 화면
한 일
6가지를 맡았습니다
이 프로젝트에서 직접 설계하고 만든 범위입니다.
- 01요구사항 정의 — 문의 응대 병목 분석, 자동·수동 발송 시나리오 설계
- 02백엔드 API — 발송·템플릿·기록·인증 4개, 서버리스 배포
- 03외부 연동 — 견적 문의 webhook, 알림톡 발송 대행사 API, 승인 템플릿 동기화
- 04신뢰성 설계 — 번호 정리·중복 제거·3단계 상태·발송 근거 기록
- 05운영 화면 — 휴대폰 우선 UI, 홈 화면 앱(PWA), PIN 잠금
- 06운영·유지보수 — 실서비스 운영, 템플릿 추가 대응
사용 기술
- Vercel Serverless
- REST API 4개
- 카카오 알림톡
- Webhook
- PWA
- Vanilla JS
주요 화면
화면과 기능으로 보는 핵심
실제 운영 화면에서 잘라 왔습니다. 무엇을 왜 그렇게 만들었는지 함께 적습니다.
- 01
트리거는 두 곳, 발송 경로는 하나
견적 문의에서 오는 자동 발송과 담당자 화면에서 하는 수동 발송이 같은 서버 API를 지나갑니다. 검증·템플릿 제한·기록이 한 곳에 있어서, 어느 경로로 보내든 결과가 똑같이 남고 규칙을 바꿀 때 놓치는 길이 없습니다.
- 자동: 견적 문의 webhook
- 수동: 담당자 화면
- 단일 발송 게이트웨이
- 02
클릭부터 카톡 도착까지 5단계
이벤트 수신 → PIN 확인과 번호 정리 → 승인 템플릿으로 발송 → 결과 판정 → 공용 기록 저장. 단계마다 실패해도 안전하게 끝나도록 막아 두었습니다.
- 번호 정리·중복 제거
- 승인 템플릿만
- 공용 기록
- 03
'불확실' 상태를 따로 둔 이유
성공·실패 말고 '불확실'을 하나 더 둡니다. 시간 초과처럼 결과를 모를 때 자동으로 다시 보내면 같은 고객이 카톡을 두 번 받습니다. 불확실한 건은 사람이 기록을 보고 판단하게 했습니다.
- 전송됨
- 전송 안 됨 — 다시 보내기 가능
- 불확실 — 자동 재시도 안 함
- 04
설명서가 필요 없는 담당자 화면
입력 → 템플릿 → 발송 → 기록을 위에서 아래로 한 흐름에 놓았습니다. 엑셀·메모·카톡에서 복사한 번호를 그대로 붙여 넣으면 정리되고, 버튼에 '3건 알림톡 보내기'처럼 나갈 건수가 미리 보입니다.
- 붙여 넣기만 하면 번호 정리
- 건수가 보이는 버튼
- 템플릿 목록 불러오기
- 05
비용이 새는 길을 설계에서 막기
카톡을 못 받았을 때 문자로 자동 전환하는 대체 발송을 끄고, 승인된 템플릿만 허용하고, 중복 번호를 걸렀습니다. 발송 단가가 올라가는 세 가지 길을 처음부터 닫았습니다.
- 문자 대체 발송 끔
- 승인 템플릿만
- 중복 제거
- 06
앱 설치 없이 홈 화면에서 여는 발송기
웹 앱(PWA)으로 만들어 휴대폰 홈 화면에 추가하면 주소창 없는 앱처럼 열립니다. 앱 심사·배포 과정이 없고, 서버에 반영하면 모든 담당자 휴대폰이 바로 최신이 됩니다. 공용 PC에서는 '잠금' 한 번으로 다시 PIN을 요구합니다.
- 홈 화면 아이콘
- 한 손 조작
- PIN 잠금
과정
상황에서 결과까지
고객 상황, 문제, 접근 방법, 실행, 결과 순서로 적습니다.
- 1고객 상황
견적 문의가 들어와도 사람이 있어야 응답할 수 있었습니다. 문의 메일 확인 → 견적 정리 → 전화번호 복사 → 메시지 발송. 야간·주말·외근 중에는 응답이 반나절씩 밀렸고, 그사이 고객은 다른 업체에도 같은 문의를 넣었습니다.
- 2해결해야 했던 문제
빨리 보내는 기능만으로는 부족했습니다. 매일 실제 고객에게 나가는 메시지라 잘못 보내지 않을 것, 두 번 보내지 않을 것, 무엇을 보냈는지 증명할 수 있을 것이 함께 필요했습니다.
- 3목표와 접근 방법
기존 홈페이지와 폼은 그대로 두고 '견적문의' 이벤트만 연결했습니다. 자동과 수동 발송을 하나의 서버 API로 모으고, 결과 상태와 발송 근거를 남기는 구조를 먼저 설계한 뒤 화면을 만들었습니다.
실행 내용
- 견적 문의 webhook → 서버리스 발송 API 연결
- 번호 정리(줄바꿈·쉼표·공백·슬래시, 하이픈 제거, 휴대폰 번호만)와 중복 제거
- 카카오 승인 템플릿 목록 동기화, 승인 템플릿만 발송
- 결과 3단계 판정과 발송 대행사 접수 번호·건수·시각·출처 기록
- 알림톡 대행사 인증 정보는 서버 환경 변수에만 보관
- 휴대폰 우선 운영 화면, PWA, PIN 잠금
실제 결과
견적 문의 직후 고객 카톡으로 접수 확인이 나가고, 알림톡의 '채팅 상담 연결' 버튼으로 고객이 상담 채널로 바로 이어집니다. 야간·주말에도 같습니다. 담당자는 어느 기기에서나 누가·언제·몇 건 보냈는지 같은 기록으로 확인합니다.
배운 것과 제안
비슷한 상황의 고객에게
이 프로젝트에서 확인한 것만 적습니다.
- 자동화에서 어려운 것은 보내는 기능이 아니라 잘못 보내지 않는 구조입니다. 결과를 모를 때는 다시 보내지 않는 쪽이 고객 신뢰를 지킵니다.
- 경로가 둘이면 규칙도 둘이 되기 쉽습니다. 자동·수동 발송을 한 API로 모으자 정책을 바꿀 때 한 곳만 고치면 됐습니다.
- 같은 구조로 주문 접수, 출고·배송 안내, 예약 확정, 결제 완료, 시안 확인 요청 알림까지 넓힐 수 있습니다.
견적 문의 카카오 알림톡 자동 발송 시스템 페이지를 끝까지 읽으셨습니다.
관련 콘텐츠
비슷한 상황이라면, 상담으로 먼저 이야기해 보세요.
지금 홈페이지 주소와 고민을 알려주시면 이 프로젝트와 비교해 무엇부터 할지 제안드립니다.
영업일 기준 1~2일 안에 답변드립니다.
