Ep3) Kit 뉴스레터 입문: 구독폼과 랜딩페이지 만들기 정보4(클릭 몇 번으로 완성)

Kit 계정이 활성화되고 발신자 정보 설정까지 완료되었습니다. 이번 3편에서는 구독자를 확보하기 위해 필수적인 구독폼(Form)과 랜딩페이지(Landing Page)를 만드는 방법을 배워보겠습니다. 복잡한 코드나 프로그래밍 없이 클릭 몇 번으로 손쉽게 완성할 수 있도록, 모든 과정을 차근차근 알려드립니다.

Kit 뉴스레터 구독폼과 랜딩페이지 만드는 법 완전 정복.
실전 예시를 통해 직접 만들어보고, 사이트 연결 없이도 공유 가능한 팁까지 제공.

“Ep1) kit 뉴스레터 입문: 워드프레스 웹페이지에 글 발행 시 e메일로 받아보게 된다.“, “Ep2) Kit 뉴스레터 계정 만들기와 첫 세팅 방법 정리9“, 에 이은 Kit 뉴스레터 입문 시리즈 3편으로,실제 가입부터 설정 완료까지 모든 과정을 초보자 눈높이에 맞춰 정리했습니다.

목 차 숨기기

1 구독폼과 랜딩페이지 이해하기

2 구독폼(Form) 만들기

2.1 Kit 대시보드에서 구독폼 생성하기

3 랜딩페이지(Landing Page) 만들기

3.1 Kit에서 랜딩페이지 생성하기

3.2 추천 템플릿 유형별 제안

3.3 템플릿 특징별 추천 제안

3.4 사람들이 주로 선호하는 템플릿 특징

3.5 실제 편집 방법

3.6 Thank You 페이지 설정

3.7 랜딩페이지 발행하기

4 사이트에 임베딩(Embedding)하는 경우 주의사항

5.1 만든 폼과 랜딩페이지를 워드프레스에 연결하기 (다음 편 예고)

구독폼과 랜딩페이지 이해하기

Kit에서는 이메일 구독자를 확보하기 위한 두 가지 대표적인 수단으로 구독폼(Form)과 랜딩페이지(Landing Page)를 제공합니다. 이 둘의 차이와 활용법을 먼저 이해하면 향후 설정이 훨씬 쉬워집니다.

Kit에서 뉴스레터 구독자 이메일을 확보하는 두 가지 주요 방법이 바로 구독폼(Form)과 랜딩페이지(Landing Page)입니다.

구독폼(Form): 웹사이트 내 블로그 게시물, 사이드바, 팝업 등에 삽입하여 이메일 주소를 받는 입력창입니다.
- 예: 블로그 글 하단에 “무료 PDF 자료 받기”라는 문구와 함께 이메일 입력창이 나오는 경우입니다. 방문자가 글을 다 읽고 나서 자연스럽게 구독할 수 있도록 유도할 수 있습니다.
랜딩페이지(Landing Page): 독립적인 웹페이지로, SNS나 광고를 통해 링크로 공유하며 직접 방문자를 유도하여 이메일을 확보하는 페이지입니다.
- 예: 인스타그램 프로필 링크에 “매주 발행하는 건강 뉴스레터 받기” 페이지 링크를 걸어두고, 그 페이지에 방문한 사용자가 이메일을 입력하도록 유도하는 방식입니다.

구독폼(Form) 만들기

Kit 대시보드에서 구독폼 생성하기

대시보드 왼쪽 메뉴에서 Grow → 랜딩 페이지 및 양식(Landing Pages & Forms) 클릭
우측 상단의 [Create New] 버튼 클릭
Form을 선택합니다.

구독폼 유형 선택

Inline: 글 내용 중간이나 하단에 삽입하는 형태
Modal: 화면 중앙에 나타나는 팝업 형태
Slide-in: 화면 하단에서 슬라이드 형식으로 나타남
Sticky Bar: 페이지 최상단에 고정된 형태

자신의 블로그 스타일에 맞게 선택 후 [Choose] 클릭

템플릿 선택 및 폼 디자인

다양한 템플릿 중 원하는 것을 선택하세요 (예: Charlotte, Pine, Minimal).

제목과 설명 문구 클릭 → 원하는 문구로 변경
이름 필드 추가 가능 (이메일 필드 기본 제공)
우측 디자인 설정 메뉴에서 폰트 크기, 정렬, 색상 조정 가능

템플릿 추천 팁

Charlotte: 깔끔한 구성, 어떤 콘텐츠에도 무난하게 잘 어울림
Pine: 감성적 이미지 활용에 적합, 라이프스타일 블로그에 추천
Minimal: 간결하고 집중도 높은 CTA 디자인, 프로모션에 유리

폼 완성 후 발행하기

디자인이 끝났다면 상단 우측 [Publish] 버튼 클릭하여 저장합니다.

폼 URL 예시: https://yournewsletter.kit.com/abc12345 (이 링크는 예시입니다. 실제 생성 후 표시됨)

구독폼 만들기 자세히 알아보기

랜딩페이지(Landing Page) 만들기

Kit에서 랜딩페이지 생성하기

왼쪽 메뉴 Grow > 랜딩 페이지 및 양식으로 이동
[Create New] 클릭
Landing Page 선택

이후에는 다양한 템플릿 선택 화면이 나타납니다. 이 중에서 자신의 뉴스레터 목적에 맞는 디자인을 선택할 수 있습니다.

템플릿 특징별 추천 제안

Archer: 깔끔하고 명확한 메시지를 전달하고자 할 때, 신제품 출시 등에 적합
Harrison: 정보 전달 중심의 뉴스레터, 기업 브랜딩에 어울림
Rose: 감성적인 분위기, 이미지 중심 콘텐츠와 잘 어울림
Sliding: 동적이고 시각적 몰입도가 필요한 이벤트/포트폴리오 용
Stark: 미니멀하고 강렬한 메시지를 전할 때 유용

사람들이 주로 선호하는 템플릿 특징

간결하고 핵심이 보이는 구조
모바일 반응형 지원
명확한 CTA 버튼 포함
브랜드 색상·폰트와 어울림 고려 가능
시선을 끄는 이미지 배치 영역 존재

실제 편집 방법

템플릿 선택 후, 이미지 클릭 → 내 이미지로 배경 교체 가능
텍스트 클릭 → 제목과 설명 문구 수정 (예: “매주 유용한 건강정보 받기” 등으로 변경)
우측 사이드에서 색상, 폰트, 정렬 등 시각 요소 조정
이메일 주소 입력란은 사용자가 직접 자신의 이메일 주소를 입력하는 곳입니다. 이 란은 구독을 원하는 방문자/구독자가 입력해야 하는 부분이며, 웹사이트 운영자의 이메일 주소를 입력하는 곳이 아닙니다.

💡 참고: Kit의 랜딩페이지는 자체적으로 호스팅되는 페이지이기 때문에, 꼭 자신의 도메인(예: yourdomain.com)과 연결하지 않아도 작동합니다. 하지만 브랜드 일관성과 신뢰도를 높이고 싶다면 자신의 도메인과 연결해주는 것이 권장됩니다.

기본 제공 링크 예시: https://yournewsletter.kit.com/abcd1234
커스텀 도메인 연결 예시: https://yourdomain.com

커스텀 도메인을 연결하면 뉴스레터 페이지가 더 전문적으로 보이며, 구독자 신뢰도를 높이는 데 도움이 됩니다. 도메인 연결은 필수가 아니지만, 가능하다면 사용하는 것이 좋습니다.

Thank You 페이지 설정

방문자가 이메일 입력 후 볼 수 있는 감사 페이지도 자동 생성 및 수정 가능

랜딩페이지 발행하기

완성되었다면 상단 우측의 [Publish] 클릭 → 고유한 URL이 생성됩니다. 이 링크를 복사하여 SNS나 다른 채널에 공유하세요.

랜딩페이지가 성공적으로 발행되면 아래와 같은 메시지가 나타납니다:

🎉 축하합니다! 랜딩 페이지가 게시되어 공유할 준비가 되었습니다 예시 링크: https://도메인명.kit.com/000000e2b3

이때 제공되는 옵션은 다음과 같습니다:

X에 공유: 버튼을 클릭하면 생성된 링크를 트위터(X)에 바로 공유할 수 있습니다.
페이스북에 공유하기: 뉴스레터를 홍보하고 싶은 페이스북 페이지 또는 타임라인에 게시할 수 있습니다.
링크드인 공유: 비즈니스 네트워크에 뉴스레터 홍보가 필요한 경우 유용합니다.
사이트에 임베딩: Kit에서 제공하는 HTML 코드를 복사하여 워드프레스나 다른 웹사이트에 삽입할 수 있습니다.

링크를 복사해두고, SNS 또는 이메일 시그니처 등 다양한 채널에서 활용해 보세요.

랜딩페이지 만들기 자세히 알아보기

사이트에 임베딩(Embedding)하는 경우 주의사항

랜딩페이지 발행 후 “사이트에 임베딩” 옵션을 선택하면, Kit 공식 안내 페이지로 연결되며 아래와 같은 영문 메시지가 나타납니다:

How to set up the Kit plugin on your WordPress website
워드프레스에 Kit 플러그인을 연결하는 단계별 가이드입니다.

이때 주요 내용은 다음과 같습니다:

Kit 플러그인 설치 방법

워드프레스 관리자 > 플러그인 > 새로 추가 > “kit” 검색

‘Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Subscribers and Landing Pages’ 플러그인 설치 및 활성화

Kit 계정과 워드프레스 연결

설치 후 자동으로 Kit 설정 마법사 실행

이미 설치되어 있다면 WordPress 관리자 화면 왼쪽 메뉴 > Settings > Kit 항목을 클릭하면 설정화면으로 진입할 수 있습니다. 이때 다음 단계를 따라 연결을 완료합니다:

Connect 버튼 클릭 → Kit 계정 로그인

“WordPress가 귀하의 계정에 접근하려고 합니다”라는 메시지에서 Grant Access to WordPress 클릭

연결이 완료되면 기본 폼 설정 화면으로 이동됩니다.

Genenal Settings

🔧 이후 설정 화면은 영어로 구성되어 있으며 다음과 같은 내용을 포함합니다:

Account Name: Kit 계정명이 표시됩니다.
Default Form (페이지/글): 폼을 어디에 자동 출력할지 선택합니다. 현재 제공되는 옵션이 ‘None’과 ‘Cocoa form [modal]’ 두 가지뿐이라면, ‘None’은 어떤 폼도 자동으로 출력하지 않겠다는 설정이고, ‘Cocoa form [modal]’은 팝업 형태로 자동 표시되는 폼입니다. 만약 다른 형태의 폼을 원한다면, Kit에서 새로운 폼을 생성 후 이 설정에서 선택할 수 있도록 해야 합니다. 또한 ‘페이지’와 ‘글’ 각각에 대해 폼 위치를 ‘콘텐츠 하단(After content)’ 또는 ‘상단(Before content)’으로 설정할 수 있으며, 사이트 전체에 표시할 폼을 별도로 ‘Site Wide’ 항목에서 지정할 수도 있습니다.
Form Position: 콘텐츠 상단/하단 위치 설정

아래 항목은 ‘폼(Form)’을 페이지 또는 블로그 글에서 어디에 표시할지를 정하는 설정입니다. 각 위치는 다음과 같은 특징을 갖고 있습니다:

After 페이지 content: 본문이 끝난 뒤에 구독 폼이 표시됩니다. 독자가 글을 다 읽고 나서 자연스럽게 구독하도록 유도하는 데 효과적입니다. 블로그 글 하단 추천.
Before 페이지 content: 본문이 시작되기 전에 폼이 나타납니다. 주제를 읽기 전에 강하게 구독을 유도하고 싶을 때 유용합니다. 이벤트 안내, 특별한 홍보에 적합합니다.
Before and After 페이지 content: 본문 시작 전과 끝난 후 모두에 폼이 표시됩니다. 구독 전환율을 극대화하려는 경우에 사용되며, 다소 과하게 느껴질 수 있으므로 신중하게 선택하세요.
After element: 글 내용 중 특정 HTML 요소(예: 특정 이미지, 문단 등) 뒤에 폼을 표시하는 고급 설정입니다. 일반적인 사용에는 권장되지 않으며, 특정 구조의 사이트나 테마에서만 적용됩니다.

📝 실전 팁: 블로그 글에서는 ‘After content’ 또는 ‘Before and After’가 가장 자주 쓰이며, 독자가 글을 다 읽은 뒤 자연스럽게 구독을 유도하기에 효과적입니다.

Default Form (글): 보통 ‘Cocoa form [modal]’이 기본값으로 제공되며, 이는 팝업 형태의 구독 폼입니다. 만약 아무것도 선택하지 않으면 (None), 글에 폼이 자동 삽입되지 않습니다. 구독 유도 목적이라면 modal 형식도 효과적입니다.
Form Position (글): ‘After 글 content’는 글 하단에 폼이 삽입되어 독자의 흐름을 끊지 않으면서 구독 유도를 돕습니다. 다른 옵션으로는 ‘Before content'(글 상단), ‘Before and After content'(상단+하단 모두), ‘After element'(특정 HTML 요소 뒤)가 있으며, 목적에 따라 선택 가능합니다.
Site Wide: 전체 사이트에서 팝업 또는 슬라이드 폼을 일괄적으로 적용하고자 할 때 사용합니다. 특정 글/페이지에 개별 폼을 지정하지 않아도 일괄 적용되어 편리합니다.
고급 설정(Advanced): 디버그 로그 활성화, 자바스크립트/스타일시트 비활성화 등 고급 기능이 있으나 초보자는 그대로 유지하는 것을 권장합니다.

💡 영어로 되어 있으나, 구글 번역 또는 브라우저 번역 기능을 이용해 쉽게 이해할 수 있습니다.

기타 셋팅

Kit 플러그인 설정화면에는 ‘General Settings’ 이후 ‘Site Wide’, ‘Advanced’ 항목이 있습니다. 각각의 특징과 권장사항은 다음과 같습니다:

Site Wide

사이트 전체에 걸쳐 적용할 폼을 지정할 수 있습니다.
예: ‘Cocoa form [modal]’ 선택 시, 특정 글/페이지에 폼이 지정되지 않아도 자동 팝업이 뜹니다. 모든 페이지에 통일된 구독 유도 전략을 적용할 수 있어 유용합니다.
‘Behavior’ 항목은 “Kit Form 설정이 None인 페이지에는 사이트 전체 폼을 표시하지 않겠다”는 의미입니다. 일반적으로는 체크하지 않는 것이 좋습니다. 체크하지 않으면 폼이 모든 페이지에서 작동하여 구독 기회를 놓치지 않을 수 있습니다.
여기서 ‘Site Wide’는 자신의 웹사이트 주소를 직접 입력하는 항목이 아닙니다. 이미 Kit 플러그인과 사이트가 연결되어 있는 상태에서, 어떤 폼을 사이트 전체에 표시할지를 결정하는 설정입니다. 따라서 이 항목은 공란으로 두는 것이 맞으며, Kit에서 제공한 랜딩페이지 링크를 입력하는 곳도 아닙니다. Site Wide 설정은 ‘사이트 전역에 자동 표시할 구독 폼의 종류’를 선택하는 것이 핵심입니다.

Advanced 설정 (고급 사용자 전용)

Debug: 디버그 메시지를 활성화하여 오류 확인 가능. 일반 사용자는 체크 해제 권장.
Disable JavaScript / Disable CSS: JS나 CSS를 로딩하지 않음. 폼 기능이 작동하지 않을 수 있어 일반 사용자에겐 비추천.

⚠️ 참고: 이 설정들은 대부분 영어로 되어 있으나, 브라우저 자동 번역 기능을 사용하면 쉽게 이해할 수 있습니다.

모든 설정 후에는 ‘Save’ 버튼을 눌러 저장을 꼭 해주세요

키트로 목록 확장하기

Kit에서는 구독 폼을 만들고 나면, 단계별로 구독자 목록 확장을 위한 체크리스트가 제공됩니다. 다음은 그 중 하나로, 워드프레스 연결 이전에 랜딩페이지 공유 단계를 안내합니다.

랜딩 페이지 공유
마지막 점검을 마치면 랜딩 페이지를 게시하고 전 세계와 공유하세요!

[랜딩 페이지 공유] 버튼을 클릭하면 미리 설정한 구독폼이 포함된 Kit 랜딩페이지를 SNS, 이메일, 웹사이트 등에 자유롭게 배포할 수 있습니다.
이 단계는 워드프레스 플러그인 연동과는 별도로 Kit 내에서 자체 호스팅되는 랜딩페이지를 활용해 초기 구독자를 유입하는 추천 경로입니다.

결론

뉴스레터 구독자를 확보하는 데 있어 구독폼과 랜딩페이지의 활용은 필수입니다. Kit에서는 누구나 쉽게 시작할 수 있도록 다양한 템플릿과 설정 기능을 제공하며, WordPress와의 연동도 매우 직관적입니다.

Kit에서는 폼/페이지 제작이 매우 쉬워 초보자도 진입장벽이 낮지만, 영문기반 홈페이지라 번역을 통해 가입과 셋팅 절차가 진행해야한 다는 점에서 국내 이용자에게 접근성이 떨어 질 수는 있지만, 한번 설정해 두면 거의 다시 만날 일이 드물다는 점
브랜드 이미지와 구독 목적에 맞게 템플릿(글 작성 서식/양식 같은 것)을 선택해서 글자 만 바꾸면 되는 점
워드프레스 플러그인 연동으로 자산의 웹사이트에 자동화된 폼 표시를 할 수 있다는 점
구독자는 이메일 주소란에 자신의 이메일을 직접 입력하고 제출함으로써 웹사이트의 게시글이 발행 될 때마다 받아 볼 수 있다는 점
사이트 전체 설정(Site Wide)이나 기본 폼 위치 설정을 통해 해당 카테고리에 발행 되는 글을 자동 구독 유도 할 수 있다는 점 등

위와 같은 점들이 트래픽 유도에 유용하다 할 수 있을 것입니다. Kit의 장점을 최대한 활용하려면, 콘텐츠에 맞는 폼 위치와 형태를 정하고, 구독자의 흐름을 끊지 않는 위치에 폼을 배치하는 것이 핵심이라 할 수 있습니다.