블로그에 이메일 구독 기능을 추가했습니다.
KIt(ConvertKit) 서비스를 사용했는데, API만 활용하고 Form은 직접 구현했습니다.
태그 기능이 있는 서비스를 원했고, MailChimp는 해당 기능이 유료여서 Brevo, MailerLite와 함께 검토한 끝에 Kit으로 결정했습니다.
연동 과정
먼저, Next.js의 API Routes를 활용했습니다. API와 Form ID 설정이 필요했습니다.
API는 Settings > Developer에서 생성가능하며 v3와 v4가 있습니다. 저는 v3 버전을 사용했는데, 구독 기능만 구현하기에는 충분했습니다. 추가 기능은 v4와 secret key로 구현 가능합니다.
Form은 Grow > Landing Pages & Forms에서 생성하는데, Form ID는 edit페이지의 url에서 확인핦 수 있으며 일반적으로 6-7자리 숫자를 사용합니다.
태그 기능 구현
구독자가 관심 있는 분야를 선택할 수 있도록 태그 기능을 추가했습니다. Kit에서 미리 태그를 설정해야 하며, Kit의 Grow > Subscribers 메뉴에서 개별 구독자의 태그를 확인할 수 있습니다.
노션 연동
노션의 categoryDB에 있는 'Topics for newsletter' 프로퍼티를 Kit의 Subscribers > Manage Subscriber Preferences > ‘Topics of Interest’와 연동하고 싶었지만, 해당 API가 없어 태그로 대체했습니다. Kit에서 특정태그에 Topic of Interest를 설정할 수 있으며, Topic of Interest는 이메일 하단 링크에서 구독자가 직접 관심 설정 할 수 있는 항목입니다.
토픽을 form 없이 직접 Kit에 업데이트하는 기능이 작동하지 않는듯하여, form에서 선택한 토픽 업데이트방식으로 대체했습니다. 노션의 Topics가 Form에 반영되면, 구독자가 선택한 토픽이 Kit에도 자동으로 반영됩니다.
하지만 현재는 토픽을 하드코딩했는데요. 노션에서 페이지마다 토픽을 가져오는 것이 성능상 부담이 될 것이라 생각합니다. 아직은 필요시 셀프로 업데이트해도 될 것 같습니다.
구독 프로세스
따라서 구독 관련 프로세스는 다음과 같습니다:
- 구독 Form
- 구독 Form 토글
- 넓은 화면일때 바로 표시
- 토픽 불러오기
- 현재: 하드코딩
- 주석 처리: 페이지마다 토픽 가져오기
- 추후 구현: 주기적으로 action 실행: 노션의
Topics for newsletter에서 구독 Form으로 토픽 받아오기
- 토픽 선택 후 구독 신청시
- Kit에 토픽 업데이트
- 구독 확인 이메일 발송(Kit에서 설정한 기능)
- 구독자가 확인 이메일 수락시
- 대시보드에 구독자 추가
- 선택한 토픽이 태그 목록에 없을시 새로 생성
- 구독자 태그
추가 구현 필요
구독 확인 이메일이 스팸함으로 분류되는 것을 방지하기위한 설정