Ep4) Kit 뉴스레터 워드프레스 연결: 폼 삽입하고 자동 연동 팁9

Kit 뉴스레터 구독폼을 성공적으로 만들었다면, 다음 단계는 자신의 워드프레스 웹사이트에 이 폼을 자연스럽게 삽입하고, 구독자가 신청한 정보가 Kit 계정에 자동으로 저장되도록 연동하는 것입니다. 이는 단순한 디자인 삽입이 아닌, 정확한 구독자 정보 수집과 이메일 자동 발송을 위해 필수적인 작업입니다. 예를 들어, 사용자가 뉴스레터 폼에 이메일을 입력해 신청을 누르면 해당 정보가 Kit의 구독자 목록에 자동으로 추가되어야 하며, 이를 위해 폼이 Kit 계정과 정확히 연결돼 있어야 합니다.

“Ep1) kit 뉴스레터 입문: WP 웹페이지에 글 발행 시 e메일로 받아보게 된다.”, “Ep2) Kit 뉴스레터 계정 만들기와 첫 세팅 방법 정리9“, “Ep3) Kit 뉴스레터 입문: 구독폼과 랜딩페이지 만들기 정보4(클릭 몇 번으로 완성)“에 이은 Kit 뉴스레터 입문 시리즈 4편으로, 이 글에서는 코딩 지식 없이 누구나 쉽게 따라할 수 있도록 Kit 공식 플러그인 활용법, 수동 삽입 방법, 글마다 다른 폼을 다르게 적용하는 팁까지 정리합니다.

목 차 숨기기

1 Kit 공식 플러그인 설치하기

1.1 💡 주의:

2 Kit 계정과 워드프레스 연결하기

2.1 연결 3단계 마법사 안내 (Connect – Configuration – Done)

3 API 키 수동 연결 방법 (자동 연결 실패)

3.1 연결이 잘 되었는지 확인하는 방법

4 이메일 인증 도메인 설정 여부 확인

4.1 도메인 인증 시 유의사항 (루트 도메인만 가능)

4.2 궁금증 정리

5 구독폼을 워드프레스 본문에 삽입하는 두 가지 방법

5.1 Kit 블록/단축코드 사용

5.2 HTML 코드 직접 삽입 (수동 방식)

6 폼 자동 표시 위치 설정 (기본 폼 지정)

7 특정 글/페이지에만 폼 다르게 설정하기

8 모바일 최적화와 테스트

9 체크리스트 요약

10 결론

Kit 공식 플러그인 설치하기

WP 관리자 페이지에 로그인 후 아래 경로로 이동합니다.

플러그인 > 새로 추가
검색창에 kit 입력 → “Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Subscribers and Landing Pages” 선택
[지금 설치] > [활성화] 클릭

💡 주의:

‘ConvertKit’ 또는 ‘Kit’ 이름으로 혼동될 수 있으나 공식 명칭이 맞는지 확인하세요.
설치 후 ‘Kit’이라는 메뉴가 WP 좌측 메뉴에 추가됩니다.

Kit 계정과 워드프레스 연결하기

연결 3단계 마법사 안내 (Connect – Configuration – Done)

플러그인 설치 및 활성화 후, WP에 Kit 계정을 연결하는 마법사가 자동으로 실행됩니다. 이 단계는 다음과 같이 구성되어 있으며, 영어 인터페이스이지만 단계별로 따라가기 어렵지 않습니다.

Connect

만약 스킵했다면 설정 > Kit 메뉴에서 수동으로 실행 가능.

Kit 계정에 로그인하고 WP와의 연동을 승인합니다.
WP에서 플러그인 설치 후 [활성화] 클릭 시 Connect 버튼 생성 이 버튼 클릭
Kit 계정 로그인 (또는 자동 로그인)

“Grant Access to WordPress” 버튼을 눌러 연결 허용.

Configuration

워드프레스에서 사용할 폼을 선택하고 자동 삽입 위치를 지정합니다.

Which form would you like to display below all blog posts?

Don’t display an email subscription form on posts.

Cocoa form [modal]

뉴스레터 구독폼 [inline]

Which form would you like to display below all pages?

Don’t display an email subscription form on pages.

Cocoa form [modal]

뉴스레터 구독폼 [inline]

위 같은 항목이 표시되며, 원하는 폼(Cocoa form 등)을 선택할 수 있는 데, 미리 kit에서 구독폼을 만들고 자신이 원하는 제목으로 저장한 이름이 선택지에 표시 됩니다.

구독폼 만드는 법 확인

“Which form would you like to display below all blog posts?”라는 항목에서는 블로그 포스트 하단에 자동으로 표시될 폼을 선택할 수 있습니다. 예: Cocoa form (팝업형 모달 형식)
- 이 기능은 모든 게시글에 동일한 뉴스레터 신청 폼이 붙는 구조로, AdSense 광고와 섞이면 가독성이 떨어질 수 있습니다. 광고 승인된 페이지에서는 폼이 본문 아래에 노출되면 콘텐츠 식별이 어려워질 수 있으므로, 게시글 본문 중간이나 사이드바, 팝업 형태로 수동 삽입하는 방식을 고려해볼 수 있습니다.
“Which form would you like to display below all pages?” 항목은 모든 고정 페이지(예: About, Contact 등) 하단에 폼을 자동으로 붙일지 결정합니다.
- Cocoa 모달 폼은 화면에 떠오르는 형식이라 방문자의 주의를 끌기 좋지만, 사용자 경험을 방해할 수도 있어 상황에 맞게 인라인 폼을 선택하는 것도 방법입니다.

Done

모든 설정이 완료되면 “Finish Setup”을 클릭하여 설정을 마칩니다.

설정 마무리 후에는 두 가지 옵션이 표시됩니다:

Dashboard: 워드프레스 기본 관리자 대시보드로 이동합니다. 블로그 글쓰기, 테마 설정 등 일반 작업을 계속하고자 할 때 클릭합니다.
- 만약 Kit 플러그인이 잘 설치되었는지 확인하고, 바로 구독 폼 등을 만들거나 기존 설정을 조정하고 싶다면 Plugin Settings를 선택
Plugin Settings: Kit 플러그인의 세부 설정 화면으로 이동합니다. 이후 폼 편집, 자동화 시퀀스(Sequences), 구독자 관리 등 기능을 추가로 설정하고자 할 때 클릭합니다.
- 일단 설치가 끝났으니 워드프레스 다른 작업을 계속하고 싶거나, 나중에 Kit 설정을 할 예정이라면 Dashboard를 선택

Kit 사용에 익숙하지 않은 사용자라면 Plugin Settings눌러 아래와 같은 세팅을 한번 더 확인하는 것을 추천합니다.

API 키 수동 연결 방법 (자동 연결 실패)

자동 연동이 실패한 경우 다음 절차를 따릅니다.

Kit 대시보드 접속 → Account Settings > Advanced > Developer
Your API Key → Copy(복사)
워드프레스 관리자 > 설정 > Kit → API Key 입력 후 저장

연결이 잘 되었는지 확인하는 방법

API Key를 입력 후 저장하면, 아래와 같은 상태가 나타납니다:

계정 이름(Account Name) 항목에 자신의 Kit 계정명이 표시됨
[연결 끊기(Disconnect)] 버튼이 활성화되어 있음

이 두 가지가 보인다면 정상적으로 계정이 연결된 상태입니다. 이제 다음 단계로 폼 설정을 진행할 수 있습니다.

이메일 인증 도메인 설정 여부 확인

Kit에서 뉴스레터 폼이 제대로 작동하지 않는 경우, 다음 설정을 확인해야 합니다:

Kit 대시보드 > Account Settings > Email
하단의 Verified Sending Domains 항목에서 도메인이 인증되어 있어야 함

💡 요약 설명: 뉴스레터 폼이 제대로 표시되지 않거나 구독 기능이 작동하지 않는다면, Kit 계정의 발신 이메일 도메인이 인증되지 않았을 가능성이 높습니다. 이 설정은 특히 자신의 웹사이트에 폼을 임베드(적용)하려는 경우 필수입니다.

도메인 인증 시 유의사항 (루트 도메인만 가능)

Kit의 Verified Sending Domain 기능은 서브도메인 인증을 지원하지 않습니다. 반드시 루트 도메인(최상위 도메인)을 입력해야 합니다.

입력값	인증 가능 여부	설명
abc.com	✅ 가능	루트 도메인
news.abc.com	❌ 불가	서브도메인 – 인증 실패
blog.abc.com	❌ 불가	서브도메인 – 인증 실패

즉, 발신자 이메일 주소가 news@news.abc.com이라도, 도메인 인증은 반드시 abc.com으로 해야 합니다.

📌 실전 예시:

health.abc.com이라는 서브도메인을 운영 중이라 하더라도, 인증은 반드시 abc.com 루트 도메인 기준으로 진행해야 함
DNS 설정은 abc.com 도메인의 네임서버에서 제공된 TXT 레코드를 추가해야 인증 성공

궁금증 정리

Q. Kit에서 이메일 입력 폼이 나타나지 않습니다. 왜 그런가요?

A. 대부분 Verified Sending Domains 설정이 누락되어 있거나 인증이 완료되지 않아 폼 로딩이 막히는 경우입니다.

Q. 서브도메인으로 뉴스레터를 운영할 수는 없나요?

A. 뉴스레터 페이지는 서브도메인에서도 작동하지만, 도메인 인증은 루트 도메인 기준으로만 가능합니다.

Q. abc.com에 인증을 했는데 123.abc.com에도 폼을 삽입하고 싶습니다. 따로 인증해야 하나요?

A. 별도로 인증할 필요는 없습니다. 루트 도메인 기준으로 인증되어 있다면 같은 도메인 계열의 모든 서브도메인에서도 뉴스레터 발송 및 폼 삽입이 가능합니다.

구독폼을 워드프레스 본문에 삽입하는 두 가지 방법

Kit 폼을 워드프레스 글에 삽입하는 방법은 크게 두 가지입니다: (1) 단축코드 또는 Kit 블록을 이용하는 방법, (2) HTML 코드를 직접 삽입하는 방법입니다.

Kit 블록/단축코드 사용

글 작성 화면에서 아래 형식 복사하기 붙여넣기 또는 타이핑

[kit form=123456]

폼 ID는 Kit 대시보드 > 폼 목록에서 확인 가능

✅ 단축코드는 글 안에서 특정 위치에 폼을 삽입할 때 유용합니다. 예를 들어, 중간 부분에 CTA로 폼을 배치하고 싶을 때 활용하면 좋습니다.

HTML 코드 직접 삽입 (수동 방식)

Kit 폼 편집화면 상단 [Publish] 클릭
HTML embed 코드 복사
워드프레스 글/페이지 편집기에서 HTML 블록에 붙여넣기

💡 이 방법은 플러그인을 사용하지 않고도 폼을 삽입할 수 있어 유연합니다. 특히 외부에서 제공되는 디자인과 호환하거나, 고급 HTML 사용자일 경우 적합합니다. 다만 CSS 충돌 여부는 반드시 확인해야 합니다.

폼 자동 표시 위치 설정 (기본 폼 지정)

설정 > Kit > General Settings 화면에서 다음을 설정합니다:

Default Form (글 / 페이지): 자동으로 폼을 어디에 표시할지 지정
- 추천: Cocoa form [modal] → 팝업 형식으로 깔끔하게 노출
Form Position:
- After Content (추천)
- Before Content
- Before and After
- After Element (고급 사용자용)

✅ 대부분의 블로그 글에는 After Content 설정이 가장 자연스럽습니다. 특히 방문자가 글을 다 읽은 직후 구독을 유도할 수 있어 전환율이 높습니다.