가입 양식 만들기 및 삽입

Published: 2026년 7월 16일 · Last updated: 2026년 7월 21일 · By 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”를 사용해 양식을 구성합니다. 임베디드 양식에는 가입 양식과 함께 보조 텍스트, 이미지, 목록, 버튼, 소셜 링크, 구독자 수, 여백 또는 구분선을 포함할 수 있습니다.

좁은 사이드바나 푸터에서는 일반적으로 한 열 디자인이 가장 읽기 쉽습니다. 더 넓은 페이지 섹션에서는 두 열 레이아웃을 사용해 필드 옆에 간단한 설명이나 이미지를 배치할 수 있습니다.

가입 양식 블록을 선택해 구독자 필드, 필수 필드, 레이블, 숨겨진 태그, 진행률 표시기 및 선택적 구독자 수를 설정합니다. 그런 다음 양식 컨테이너, 필드, 제출 버튼을 각각 스타일 지정할 수 있습니다.

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

레이아웃, 콘텐츠, 레이어, 필드, 태그, 타이포그래피 및 모양에 관한 전체 지침은 가입 양식 빌더 사용하기에서 확인할 수 있습니다.

가입 흐름 연결하기

빌더 헤더의 가입 흐름 컨트롤을 사용해 제출 후 진행되는 과정, 전송되는 Double Opt-in 이메일, 확인 후 방문자에게 표시되는 내용을 검토합니다.

기존 흐름을 선택하거나, 할당된 흐름을 편집하거나, 새 흐름을 만들 수 있습니다. 선택한 흐름을 다른 양식과 공유하고 있다면 편집 시 해당 양식에도 영향을 줄 수 있다는 점을 기억하세요.

미리 보고 저장하기

웹사이트에 배치하기 전에 “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. Double Opt-in 이메일을 엽니다.
6. 주소를 확인하고 최종 응답을 검토합니다.
7. 구독자와 숨겨진 태그가 Maildroppa에 올바르게 표시되는지 확인합니다.

양식이 웹사이트 컨테이너보다 넓다면 빌더에서 양식 너비, 열 레이아웃, 패딩 또는 모바일 스택 설정을 조정하세요. 생성된 Maildroppa 코드를 변경해 레이아웃 문제를 해결하지 마세요.

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

Maildroppa에서 같은 양식을 열고 변경한 다음 미리 보고 “Save changes”를 클릭합니다. 웹사이트의 JavaScript 스니펫은 계속 같은 양식 ID를 사용하며 저장된 공개 구성을 불러옵니다.

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