웹 광고문의 채널 자동화하기
목차
광고·제휴 협력사들이 외부 이메일이나 전화로 문의를 보내오던 것을 웹 폼으로 받고, 그 내용을 바로 메일로 자동 발송하는 시스템을 만들었다. 간단한 기능이지만 여러 레이어를 거쳐야 하는 작업이었고, 이 과정에서 오래된 설정 문제까지 발견해서 함께 정리했다.
왜 웹 폼이 필요했나
원래는 광고 관심사들이 직접 이메일을 쓰거나 전화를 걸어왔다. 담당자들 입장에서는 여러 채널을 뒤져야 했고, 놓치거나 중복으로 처리할 위험이 있었다. 특히 규모가 커질수록 이런 비체계적인 접수는 영업 기회 손실로 이어진다. 그래서 공식 채널을 만들어서:
- 단일 입구: 웹 폼 하나로 모든 광고문의를 받음
- 자동 기록: 발송자의 정보와 문의 내용이 메일로 즉시 도착해서 담당자가 놓치지 않음
- 통일된 형식: 수동으로 정리할 일을 줄임
구현 구조
| 계층 | 파일 | 역할 |
|---|---|---|
| UI | src/components/AdInquiryWidget.astro |
폼 입력 위젯 |
| 통합 | src/layouts/Base.astro |
페이지 레이아웃에 위젯 삽입 |
| 백엔드 | src/pages/api/ad-inquiry.ts |
폼 데이터 수신 → 메일 발송 |
| 의존성 | package.json |
메일 라이브러리 추가 |
가장 중요한 부분은 API 엔드포인트다. 사용자가 폼을 제출하면 /api/ad-inquiry 로 POST 요청이 들어오고, 거기서 메일 라이브러리를 써서 담당자 이메일로 바로 발송한다. 보통 이런 작업에서 빠지는 부분:
- 입력 검증: 필수 필드가 빠졌거나 이메일 형식이 이상하면 거절
- 에러 핸들링: 메일 서버 연결 실패 시 사용자에게 재시도 메시지
- 레이트 제한: 같은 IP에서 무차별적으로 폼을 날리는 것 방지
.gitignore 정상화
커밋을 보니 .gitignore 를 함께 수정했다. 확인해보니 components/ 디렉토리를 무시하도록 설정돼 있었다. 프론트엔드 프레임워크(Astro)의 컴포넌트 폴더는 당연히 버전관리 대상인데, 어쩌다가 실수로 .gitignore 에 들어가 있었던 것 같다. 이번에 새로운 위젯을 추가하면서 제대로 추적되어야 한다는 걸 깨달았을 거다.
이런 설정 문제는 초기에 놓쳤을 때는 조용히 있다가, 나중에 누군가 "왜 우리 컴포넌트가 repo에 없지?" 라고 물을 때야 드러난다. 그래서 새 기능을 만들 때마다 주변 설정도 함께 정리하는 습관이 중요하다.
메일 발송의 실제 고민
API를 만들 때 생각할 점들:
-
동기 vs 비동기: 폼을 제출한 사람이 메일 발송을 기다려야 할까? 보통은 즉시 "전송 완료" 응답을 주고, 메일은 백그라운드에서 따로 처리한다. 그래야 메일 서버가 느려도 사용자 경험이 안 나빠진다.
-
실패 처리: 메일 발송이 실패하면? 발송자 정보는 데이터베이스에 임시 저장했다가 나중에 재시도하는 게 일반적이다. 그래야 귀중한 영업 기회를 놓치지 않는다.
-
이메일 템플릿: 담당자가 받는 메일 형식도 신경써야 한다. 발신자 정보, 문의 내용, 받은 시간이 명확하게 정렬돼 있으면 담당자가 빠르게 대응할 수 있다.
이번에는 기본 기능 (폼 → API → 메일) 구현에 집중했지만, 향후 트래픽이 늘면 위의 것들을 하나씩 보강해야 할 것 같다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.