구독 신청 양식 만들기 및 삽입하기

게시일: 2026년 7월 16일 · 최종 업데이트: 2026년 9월 12일 · 작성자 Marcus Biel

임베디드 양식은 웹사이트의 기존 페이지 안에 직접 삽입하는 양식입니다. 콘텐츠 위에 겹쳐 나타나는 것이 아니라 주변 콘텐츠의 일부로 표시됩니다.

임베디드 양식은 블로그 글, 자체 웹사이트의 랜딩 페이지, 뉴스레터 섹션, 사이드바, 푸터에 잘 어울립니다. 양식 코드를 추가한 위치에 양식이 표시됩니다.

이 가이드에서는 임베디드 양식에만 해당하는 단계를 안내합니다. 공통 시각 편집 기능은 구독 신청 양식 빌더 가이드에서 확인하세요.

임베디드 양식 만들기

“Signup Forms”를 열고 “Create Form”을 클릭한 다음 “Embedded Form”을 선택하세요. 쉽게 알아볼 수 있는 내부 관리용 이름을 입력하고 빌더로 이동하세요.

Signup Forms Overview에서 기존 양식의 이름을 클릭해 편집할 수도 있습니다.

내부 관리용 이름은 방문자에게 자동으로 표시되지 않습니다. “Homepage Newsletter”, “Blog Footer”, “Product Updates”처럼 양식의 위치나 목적을 기준으로 이름을 지정하세요.

시작 디자인 선택하기

임베디드 양식에는 빈 양식, 표준 양식, 네 가지 디자인 템플릿이 제공됩니다.

• Calm note
• Coupon strip
• Dark editorial
• Minimal blue

양식을 표시할 웹사이트의 공간과 분위기에 가장 잘 어울리는 디자인을 선택하세요. 어떤 시작 디자인을 선택하든 이후에 모든 부분을 변경할 수 있습니다.

임베디드 양식 디자인하기

“Layout”과 “Content”에서 양식을 구성하세요. 임베디드 양식에는 구독 신청 양식과 함께 부가 설명, 이미지, 목록, 버튼, 소셜 링크, 구독자 수 표시, 여백 또는 구분선을 넣을 수 있습니다.

좁은 사이드바나 푸터에는 대체로 1열 디자인이 가장 읽기 편합니다. 페이지 영역이 넓다면 2열 레이아웃을 사용해 입력란 옆에 짧은 설명이나 이미지를 배치할 수 있습니다.

구독 신청 양식 블록을 선택해 구독자 필드, 필수 필드, 레이블, 숨겨진 태그, 진행 상태 표시를 설정하고, 필요에 따라 구독자 수 표시도 추가하세요. 그런 다음 양식 컨테이너, 필드, 제출 버튼의 스타일을 각각 지정할 수 있습니다.

“Page settings”를 열어 임베디드 양식 캔버스의 배경과 전반적인 디자인 기본값을 변경하세요. 이때 주변 웹사이트 디자인도 고려하세요. 투명하거나 단순한 배경은 웹사이트에 더 자연스럽게 어우러지는 경우가 많고, 대비되는 배경은 구독 혜택을 돋보이게 합니다.

레이아웃, 콘텐츠, 레이어, 필드, 태그, 타이포그래피, 외관 설정에 관한 자세한 안내는 구독 신청 양식 빌더 사용하기에서 확인할 수 있습니다.

구독 신청 절차 연결하기

빌더 상단의 구독 신청 절차 설정에서 양식 제출 후 어떤 과정이 진행되는지, 어떤 이중 수신 동의 이메일이 발송되는지, 이메일 확인 후 방문자에게 무엇이 표시되는지 확인하세요.

기존 절차를 선택하거나, 연결된 절차를 편집하거나, 새 절차를 만들 수 있습니다. 선택한 절차를 다른 양식에서도 사용 중이라면 편집 내용이 해당 양식에도 영향을 줄 수 있다는 점에 유의하세요.

미리 보고 저장하기

웹사이트에 삽입하기 전에 “Preview”를 클릭해 양식 전체를 검토하세요. 필드 순서, 레이블, 오류 메시지 표시 공간, 버튼 문구, 부가 콘텐츠의 분량을 확인하세요.

“Save changes”를 클릭해 현재 버전을 저장하세요. 양식을 삽입할 준비가 되면 Signup Forms Overview로 돌아가세요.

양식 활성화하기

임베디드 양식의 공개용 코드를 사용하려면 먼저 양식을 활성화해야 합니다.

양식이 비활성 상태라면 Signup Forms Overview에서 해당 양식의 점 세 개 작업 메뉴를 열고 “Activate”를 선택하세요. 활성화된 양식에는 “Show Code Snippet” 메뉴가 표시됩니다.

웹사이트에서 더 이상 양식을 사용할 수 없도록 하려면 양식을 비활성화하세요. 비활성화하면 디자인이나 기존 보고서 데이터를 삭제하지 않고 양식의 공개를 중단할 수 있습니다.

JavaScript 코드 복사하기

“Show Code Snippet”을 클릭하고 “JavaScript” 탭을 여세요. Maildroppa는 양식의 고유 ID가 포함된 짧은 스크립트를 제공합니다.

코드 구조는 다음과 같습니다.

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

스크립트 주소나 양식 ID를 변경하지 말고 코드 전체를 복사하세요.

JavaScript 방식은 Maildroppa 양식 런타임을 통해 현재 저장된 양식을 불러옵니다. 나중에 Maildroppa에서 같은 양식을 편집하고 저장해도 기존 스니펫은 계속 해당 양식 ID를 참조합니다. 문구나 디자인만 변경하려고 새 양식을 만들 필요는 없습니다.

웹사이트에 양식 추가하기

페이지에서 임베디드 양식을 표시할 위치에 스크립트를 붙여 넣으세요.

구체적인 방법은 웹사이트 시스템에 따라 다릅니다. 페이지 빌더나 콘텐츠 관리 시스템에서는 사용자 지정 HTML 또는 스크립트 코드를 허용하는 블록을 사용하세요. 직접 제작한 웹사이트에서는 해당 템플릿이나 페이지 마크업에 스크립트를 추가하세요.

일부 웹사이트 편집기는 보안상의 이유로 script 태그를 제거합니다. 페이지를 게시한 뒤 양식이 나타나지 않으면 먼저 편집기에 Maildroppa 스크립트 전체가 그대로 남아 있는지 확인하세요. 시스템의 전용 사용자 지정 코드 영역을 사용하거나 웹사이트 관리 담당자에게 문의해야 할 수도 있습니다.

같은 페이지의 여러 위치에 동일한 양식을 표시하려는 의도가 있고 해당 구성을 테스트한 경우가 아니라면, 동일한 임베디드 양식 스니펫을 한 페이지에 여러 번 붙여 넣지 마세요.

HTML 탭 사용하기

“HTML” 탭에는 생성된 양식 마크업이 표시됩니다. 이 옵션은 렌더링된 HTML을 직접 다루는 맞춤형 구현을 위한 것입니다.

이 방법을 선택했다면 마크업 전체를 복사하세요. 사용자 지정 HTML로 연동하면 웹사이트의 스타일과 구현 방식에 영향을 받을 수 있으므로 필드, 유효성 검사, 제출 및 확인 절차를 꼼꼼히 테스트하세요.

일반적인 Maildroppa 관리 양식에는 더 짧은 코드로 연동할 수 있는 JavaScript 스니펫을 사용합니다. 이 스니펫은 양식 ID를 기준으로 현재 공개된 양식 설정을 불러옵니다.

임베디드 양식 테스트하기

코드가 포함된 웹사이트 페이지를 게시하거나 미리 보세요. 그런 다음 방문자의 입장에서 양식을 테스트하세요.

1. 양식이 올바른 위치에 표시되는지 확인하세요.
2. 넓은 화면과 좁은 화면에서 페이지를 확인하세요.
3. 모든 필수 필드를 작성하세요.
4. 양식을 제출하고 표시되는 응답을 확인하세요.
5. 이중 수신 동의 이메일을 여세요.
6. 이메일 주소를 확인하고 최종 응답을 확인하세요.
7. 구독자와 숨겨진 태그가 Maildroppa에 올바르게 표시되는지 확인하세요.

양식이 웹사이트의 컨테이너보다 넓다면 빌더에서 양식 너비, 열 레이아웃, 안쪽 여백 또는 모바일에서 세로로 쌓는 설정을 조정하세요. 레이아웃 문제를 해결하려고 자동 생성된 Maildroppa 코드를 변경하지 마세요.

임베디드 양식 업데이트하기

Maildroppa에서 같은 양식을 열어 수정하고, 변경 내용을 미리 본 다음 “Save changes”를 클릭하세요. 웹사이트의 JavaScript 스니펫은 계속 같은 양식 ID를 사용하며 저장된 공개 설정을 불러옵니다.

양식을 일시적으로 숨기려면 Signup Forms Overview에서 비활성화하세요. 더 이상 필요하지 않다면 페이지에 사용하지 않는 코드가 남지 않도록 웹사이트에서도 스니펫을 제거하세요.