구독 신청 양식 빌더: 양식 디자인하기

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

구독 신청 양식 빌더는 Maildroppa의 모든 구독 신청 양식과 랜딩 페이지를 시각적으로 편집하는 도구입니다.

레이아웃 구성, 텍스트와 이미지 추가, 구독자 필드 설정, 색상과 글꼴 변경, 태그 지정은 물론 양식 제출 후의 동작까지 설정할 수 있습니다. 작업하는 동안 캔버스에서 결과를 바로 확인할 수 있어 코드를 작성하지 않고도 구독 신청 과정 전체를 디자인할 수 있습니다.

Maildroppa에서는 다음 네 가지 양식 유형에 동일한 빌더를 사용합니다.

• 랜딩 페이지는 게시 후 링크로 공유할 수 있는 완전한 독립형 페이지입니다.
• 임베드 양식은 웹사이트 페이지 안에 직접 삽입하는 양식입니다.
• 팝업은 웹사이트 위에 겹쳐 표시되며, 페이지 내 요소를 통해 열 수도 있습니다.
• 슬라이드인은 브라우저 창에서 지정한 가장자리나 위치에 표시됩니다.

이 가이드에서는 네 가지 양식 유형의 공통 기능을 모두 설명합니다. 링크된 개별 가이드에서는 각 유형에만 해당하는 설정과 작업 단계를 안내합니다.

구독 신청 양식 빌더 열기

Maildroppa에서 “Signup Forms”를 여세요. 이어서 “Create Form”을 클릭하면 새 랜딩 페이지, 임베드 양식, 팝업 또는 슬라이드인을 만들 수 있습니다.

기존 양식을 계속 편집하려면 양식 이름을 클릭하거나 구독 신청 양식 개요의 점 세 개 작업 메뉴에서 “Edit Form”을 선택하세요.

관리할 때 쉽게 구분할 수 있도록 양식에 명확한 이름을 지정하세요. “양식 1”처럼 포괄적인 이름보다는 “홈페이지 뉴스레터”, “웨비나 팝업”, “여름 구독 혜택 자료”처럼 용도가 드러나는 이름을 쓰면 나중에 알아보기 쉽습니다. 양식 이름은 Maildroppa에서 양식을 관리하는 데 사용되며, 방문자에게 자동으로 표시되지 않습니다.

빌더 화면 살펴보기

빌더는 크게 네 영역으로 나뉩니다.

상단 바에는 양식 이름과 주요 작업 버튼이 있습니다. 여기에서 개요로 돌아가거나, 작업 내용을 미리 보거나, 저장할 수 있습니다. 랜딩 페이지의 경우 초안 저장 및 게시 기능도 이 영역에 표시됩니다.

왼쪽 사이드바에는 “Layout”, “Content”, “Layers”가 있습니다. 양식의 구조를 만들고 새 요소를 추가하거나, 캔버스에 이미 배치한 요소를 관리할 때 사용합니다.

캔버스는 중앙의 작업 영역으로, 현재 페이지나 양식이 표시됩니다. 요소를 클릭하면 선택할 수 있습니다. 요소를 다른 위치로 드래그하거나 왼쪽 사이드바에서 새 요소를 추가할 수도 있습니다.

오른쪽 사이드바에는 “Settings”와 “Page settings”가 있습니다. “Settings”에서는 선택한 요소를, “Page settings”에서는 전체 배경과 디자인 기본값을 변경합니다.

작은 화면에서는 “Content”와 “Settings” 버튼을 눌러 사이드바를 패널 형태로 열 수 있습니다. 사용할 수 있는 기능은 동일합니다.

템플릿으로 시작하기

양식을 만들면 빌더에서 선택한 양식 유형에 맞는 기본 디자인을 제공합니다. 빈 화면에서 시작하거나, 표준 양식을 사용하거나, 미리 만들어진 템플릿을 선택할 수 있습니다.

템플릿에는 기본 레이아웃, 색상, 타이포그래피, 예시 콘텐츠가 포함되어 있습니다. 템플릿을 사용해도 이후 편집에는 제한이 없습니다. 선택한 뒤에도 모든 요소를 편집, 이동, 복제하거나 스타일을 바꾸고 삭제할 수 있습니다.

각 양식 유형에는 목적에 맞는 템플릿이 준비되어 있습니다. 예를 들어 랜딩 페이지에는 뉴스레터, 구독 혜택 자료, 웨비나, 대기자 명단을 위한 완성형 페이지 디자인이 있습니다. 임베드 양식, 팝업, 슬라이드인에는 각 유형에 맞는 간결한 기본 디자인이 제공됩니다.

어떤 템플릿을 선택할지 고민된다면 원하는 구성과 가장 가까운 템플릿을 선택하세요. 빈 캔버스에서 같은 구조를 새로 만드는 것보다 기존 텍스트, 색상, 이미지를 바꾸는 편이 대체로 더 빠릅니다.

레이아웃 만들기

왼쪽 사이드바에서 “Layout”을 열어 셀로 구성된 새 행을 추가하세요. 다음 레이아웃을 사용할 수 있습니다.

• 셀 1개
• 크기가 같은 셀 2개, 3개 또는 4개
• 너비 비율이 2:1인 셀 2개
• 너비 비율이 1:2인 셀 2개

레이아웃을 클릭하면 현재 삽입 위치에 추가됩니다. 캔버스로 직접 드래그할 수도 있습니다. 그런 다음 각 셀 안에 콘텐츠를 배치하세요.

상자나 열을 선택하면 오른쪽 사이드바에서 크기, 간격, 정렬, 배경, 테두리, 패딩을 조정할 수 있습니다. 여러 열로 구성된 레이아웃에서는 열 사이의 너비 비율도 변경할 수 있습니다.

내용을 읽는 순서가 명확해지도록 레이아웃을 구성하세요. 간결한 구독 신청 양식에는 1열 레이아웃이 적합합니다. 양식 옆에 이미지, 혜택 목록, 이벤트 정보를 배치하려면 2열 레이아웃이 유용합니다.

콘텐츠 추가하기

왼쪽 사이드바에서 “Content”를 열어 콘텐츠 블록을 추가하세요. 블록을 클릭해 삽입하거나 캔버스의 원하는 위치로 드래그할 수 있습니다.

빌더에서 제공하는 콘텐츠 블록은 다음과 같습니다.

Signup form — 구독자 필드와 제출 버튼이 포함된 블록입니다. 실제로 작동하는 양식으로 저장하려면 구독 신청 양식 블록이 하나 있어야 합니다. 이 블록을 배치한 뒤에는 추가할 수 있는 콘텐츠 블록 목록에 더 이상 표시되지 않습니다.

Text — 제목, 단락 등 서식을 적용할 수 있는 텍스트를 추가합니다.

Image — URL, 파일 업로드 또는 Maildroppa 미디어 라이브러리를 통해 이미지를 추가합니다. 대체 텍스트와 링크를 지정하고, 크기, 가로세로 비율, 자르기, 초점 위치, 회전, 뒤집기를 조정할 수 있습니다.

Video — YouTube 또는 Vimeo 동영상, 임베드 URL, 동영상 파일을 직접 추가합니다. 미리보기 이미지와 재생 버튼의 모양도 설정할 수 있습니다.

List — 글머리 기호 목록이나 번호 매기기 목록을 추가합니다. 항목을 편집하고 목록 기호의 색상, 간격, 타이포그래피, 정렬을 조정할 수 있습니다.

Button — 링크 버튼을 추가합니다. 텍스트, URL, 크기, 너비, 색상, 테두리, 타이포그래피, 정렬을 설정할 수 있습니다.

Social links — Facebook, Instagram, LinkedIn, TikTok, YouTube 같은 서비스나 웹사이트로 연결되는 아이콘을 추가합니다.

Subscriber counter — 현재 이메일 확인을 완료한 구독자 수를 표시합니다. 표시할 수에 더할 값인 오프셋을 설정하고, 레이블을 바꾸고, 숫자와 텍스트의 스타일을 지정할 수 있습니다.

Spacer — 크기를 조절할 수 있는 빈 공간을 추가합니다. 데스크톱과 모바일의 간격을 각각 설정할 수 있습니다.

Divider — 가로 구분선을 추가합니다. 색상, 두께, 너비, 스타일, 정렬, 간격을 설정할 수 있습니다.

랜딩 페이지에는 재사용할 수 있는 완성형 섹션도 제공됩니다. 자세한 내용은 랜딩 페이지 가이드에서 확인하세요.

요소 선택 및 배치하기

캔버스에서 요소를 클릭해 선택하세요. 해당 요소의 설정이 오른쪽 사이드바에 표시됩니다.

선택한 요소 위나 주변에 있는 컨트롤로 요소를 이동, 복제, 삭제할 수 있습니다. 다른 셀이나 위치로 드래그할 수도 있습니다. 이때 배치 표시기를 통해 삽입될 위치를 확인할 수 있습니다.

페이지에 상자, 열, 콘텐츠 블록이 여러 겹으로 중첩되어 있다면 “Layers”를 여세요. Layers 패널에서는 전체 구조를 목록으로 확인하며 다음 작업을 할 수 있습니다.

• 요소 선택
• 쉽게 구분할 수 있도록 이름 변경
• 위아래로 이동
• 다른 위치로 드래그
• 잠금 또는 잠금 해제
• 복제
• 삭제

잠금 기능은 작업이 끝난 배경, 이미지, 섹션을 실수로 옮기지 않도록 할 때 유용합니다. 다시 편집하거나 위치를 바꾸려면 레이어의 잠금을 해제하세요.

빌더 도구 모음의 “Undo”와 “Redo”를 사용하면 최근 디자인 변경 사항을 단계별로 취소하거나 다시 적용할 수 있습니다.

텍스트 편집하기

텍스트 요소 안을 클릭하면 캔버스에서 내용을 직접 편집할 수 있습니다. 텍스트 도구 모음에는 단락 및 제목 스타일과 일반적인 서식 옵션이 제공됩니다.

선택한 텍스트에 따라 굵게, 기울임꼴, 밑줄, 취소선, 아래 첨자, 위 첨자, 정렬, 글머리 기호 목록, 번호 매기기 목록, 링크, 이모지를 사용할 수 있습니다. 선택한 텍스트의 설정에서 타이포그래피와 색상을 조정하면 다른 텍스트 요소는 바뀌지 않습니다.

모든 제목, 본문, 링크, 버튼에 일관된 스타일을 적용하려면 “Page settings”의 전체 타이포그래피 설정을 사용하세요. 특정 블록만 다르게 꾸미려면 해당 요소를 선택한 뒤 설정을 변경하세요.

구독 신청 양식 설정하기

캔버스에서 구독 신청 양식 블록을 선택해 설정을 여세요. 진행률 표시줄, 구독자 카운터, 필드, 숨겨진 태그, 양식 컨테이너, 입력 필드, 제출 버튼을 설정할 수 있습니다.

구독자 필드

이메일 주소는 구독 신청 양식의 핵심 필드입니다. Maildroppa 계정에 등록된 다른 구독자 필드도 추가할 수 있습니다.

각 필드의 레이블과 플레이스홀더를 변경하고, 필수 입력 여부와 레이블 표시 여부를 정할 수 있습니다. 필드를 드래그하거나 이동 컨트롤을 사용해 순서를 바꿀 수도 있습니다.

실제로 필요한 정보만 요청하세요. 양식이 짧을수록 작성에 걸리는 시간이 줄어듭니다. 추가 필드는 수집한 정보를 세그먼트 구성이나 개인화에 활용할 때 유용합니다.

숨겨진 태그

숨겨진 태그는 방문자에게 표시되지 않습니다. 방문자가 양식으로 구독을 신청하면 Maildroppa가 선택한 태그를 해당 구독자에게 자동으로 지정합니다.

이 기능은 구독 신청 경로나 관심사를 파악할 때 유용합니다. 예를 들어 웨비나 양식에는 “Webinar” 태그를 지정하고, 구독 혜택 자료 신청 양식에는 다운로드한 자료의 주제에 해당하는 태그를 지정할 수 있습니다.

진행률 표시줄

진행률 표시줄은 사용하지 않도록 설정하거나, 백분율 또는 2단계 표시기 형태로 표시할 수 있습니다.

백분율 표시기에서는 텍스트, 색상, 글꼴 크기와 굵기, 정렬을 변경할 수 있습니다. 2단계 표시기에서는 각 단계의 레이블을 편집하고 활성 상태와 비활성 상태의 색상을 선택할 수 있습니다.

진행률 표시기를 활용하면 양식 제출이 첫 번째 단계이고, 이중 수신 동의 이메일을 통한 확인이 두 번째 단계라는 점을 안내하기 좋습니다.

양식 내부의 구독자 카운터

구독 신청 양식의 제출 버튼 앞이나 뒤에 현재 이메일 확인을 완료한 구독자 수를 표시할 수 있습니다.

오프셋과 레이블을 입력하고, 표시 위치를 선택하고, 타이포그래피와 정렬을 조정할 수 있습니다. 오프셋은 Maildroppa가 표시하는 이메일 확인 완료 구독자 수에 더해지는 값입니다.

양식 내부의 카운터는 독립형 “Subscriber counter” 콘텐츠 블록과 다릅니다. 구독자 수를 제출 영역과 직접 연결해 표시하려면 양식 설정을 사용하세요. 디자인의 다른 위치에 카운터를 배치하려면 콘텐츠 블록을 사용하세요.

양식, 입력 필드 및 버튼 디자인

“Signup Form Block” 설정에서는 필드를 감싸는 컨테이너의 배경, 테두리, 모서리 반경, 간격을 조정합니다.

입력 필드 설정에서는 필드의 배경, 레이블, 텍스트, 플레이스홀더, 테두리, 간격을 조정합니다. 제출 버튼에는 텍스트, 타이포그래피, 색상, 테두리, 크기, 정렬을 조정하는 별도의 설정이 있습니다.

캔버스에서 진행률 표시줄이나 제출 버튼을 직접 클릭하면 해당 부분의 설정을 바로 열 수 있습니다.

전체 디자인 변경하기

오른쪽 사이드바에서 “Page settings”를 열어 전체 디자인을 변경하세요. 임베드 양식, 팝업, 슬라이드인에서는 이 설정이 호스팅되는 페이지 전체가 아니라 양식 캔버스에 적용됩니다.

기본 배경, 배경 이미지, 최대 너비, 모바일 간격을 설정할 수 있습니다. 디자인 설정에서는 다음 항목의 기본값을 지정합니다.

• 본문 글꼴과 텍스트 색상
• 링크 색상, 밑줄, 마우스를 올렸을 때의 색상
• 제목 글꼴, 색상, 굵기, 크기, 줄 높이
• 버튼
• 상자, 테두리, 모서리 반경, 간격, 패딩
• 모바일 페이지 패딩과 열이 세로로 쌓여 표시되는 기준

이러한 기본값을 사용하면 디자인의 일관성을 유지할 수 있습니다. 필요하면 개별 블록에 다른 값을 적용할 수도 있습니다.

구독 신청 절차 연결하기

모든 양식은 구독 신청 절차에 연결됩니다. 구독 신청 절차는 양식 제출 이후 구독자가 거치는 다음 과정을 결정합니다.

• 양식을 제출한 직후 방문자에게 표시되는 내용
• 발송할 이중 수신 동의 이메일
• 구독자가 이메일 주소를 확인한 후의 동작

빌더 상단에서 구독 신청 절차 컨트롤을 열면 현재 연결된 절차를 확인할 수 있습니다. 기존의 다른 절차를 선택하거나, 선택한 절차를 편집하거나, 새 절차를 만들 수 있습니다.

하나의 구독 신청 절차를 여러 양식에서 사용할 수 있습니다. 공통으로 사용하는 절차를 편집하면 해당 절차에 연결된 모든 양식에 변경 사항이 적용됩니다. 따라서 Maildroppa에서는 공통 절차를 편집할지, 현재 양식만을 위한 별도 사본을 만들지 선택할 수 있습니다.

미리보기 및 저장하기

공개하기 전에 “Preview”를 클릭해 전체 디자인과 구독 신청 과정을 확인하세요. 미리보기에서는 긴 텍스트, 이미지 비율, 필드 순서, 버튼 레이블, 양식의 전체적인 균형을 점검하기 좋습니다.

임베드 양식, 팝업, 슬라이드인의 현재 버전을 저장하려면 “Save changes”를 클릭하세요.

랜딩 페이지는 상단 바의 초안 저장 및 게시 기능을 사용합니다. 게시하지 않고 저장할 수 있으며, 이미 게시된 페이지를 수정하더라도 변경 사항을 게시하기 전까지는 공개되지 않습니다. 전체 작업 과정은 랜딩 페이지 만들기 및 게시하기에서 확인하세요.

저장한 후에는 구독 신청 양식 개요로 돌아가 웹사이트용 양식을 활성화하고 삽입하거나, 게시된 랜딩 페이지를 관리하세요.

양식 유형별 가이드로 이어가기

공통 디자인 작업을 마쳤습니다. 이제 만들고 있는 양식 유형에 맞는 가이드로 이어서 진행하세요.

• 랜딩 페이지 만들기 및 게시하기
• 임베드 양식 만들기 및 삽입하기
• 팝업 설정 및 표시하기
• 슬라이드인 설정 및 배치하기