the email tool that makes email marketing simple
가입 양식 빌더: 양식 디자인하기
Published: · Last updated: · By Marcus Biel
In brief
Maildroppa의 시각적 가입 양식 빌더에서 템플릿을 선택하고 레이아웃과 콘텐츠를 구성하세요. 필드, 태그, 색상과 글꼴을 설정하고 가입 흐름을 연결한 뒤 랜딩 페이지, 임베드 양식, 팝업, 슬라이드인을 미리보고 저장하는 방법을 자세히 안내합니다.
가입 양식 빌더는 모든 Maildroppa 가입 양식과 랜딩 페이지를 위한 시각적 편집기입니다.
이를 사용해 레이아웃을 배치하고, 텍스트와 이미지를 추가하며, 구독자 필드를 설정하고, 색상과 글꼴을 변경하고, 태그를 지정하고, 누군가 양식을 제출한 후 어떤 일이 일어날지 결정할 수 있습니다. 작업하는 동안 캔버스에 결과가 표시되므로 완전한 가입 환경을 디자인하기 위해 코드를 작성할 필요가 없습니다.
Maildroppa는 네 가지 양식 유형에 동일한 빌더를 사용합니다.
- 랜딩 페이지는 게시하고 링크로 공유하는 완전한 독립형 페이지입니다.
- 임베드 양식은 웹사이트 페이지 안에 직접 배치됩니다.
- 팝업은 웹사이트 위에 표시되며 페이지 요소에서 열 수도 있습니다.
- 슬라이드인은 브라우저 창에서 선택한 가장자리나 위치에 표시됩니다.
이 가이드에서는 이러한 양식 유형에 공통된 모든 기능을 설명합니다. 링크된 가이드에서는 각 유형에 고유한 설정과 단계만 설명합니다.
가입 양식 빌더 열기
Maildroppa에서 “Signup Forms”를 엽니다. 그런 다음 “Create Form”을 클릭해 새 랜딩 페이지, 임베드 양식, 팝업 또는 슬라이드인을 만들 수 있습니다.
기존 양식 작업을 계속하려면 이름을 클릭하거나 가입 양식 개요의 점 세 개 작업 메뉴에서 “Edit Form”을 선택합니다.
양식에 명확한 내부 이름을 지정하세요. “Homepage Newsletter”, “Webinar Popup”, “Summer Lead Magnet”과 같은 이름은 “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개
레이아웃을 클릭해 현재 삽입 위치에 추가하거나 캔버스로 드래그합니다. 그런 다음 각 셀 안에 콘텐츠를 배치할 수 있습니다.
상자나 열을 선택하면 오른쪽 사이드바에서 크기, 간격, 정렬, 배경, 테두리 및 패딩을 조정할 수 있습니다. 여러 열 레이아웃에서는 열의 상대적 너비도 변경할 수 있습니다.
레이아웃을 사용해 명확한 읽기 순서를 만드세요. 하나의 열은 간결한 가입 양식에 적합합니다. 이미지, 혜택 목록 또는 이벤트 정보가 가입 양식 옆에 표시되어야 할 때는 두 열 레이아웃이 유용합니다.
콘텐츠 추가하기
왼쪽 사이드바에서 “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단계 표시기의 경우 두 단계의 레이블을 편집하고 활성 및 비활성 색상을 선택할 수 있습니다.
진행률 표시기는 양식 제출이 첫 번째 단계이고 Double Opt-in 이메일 확인이 두 번째 단계임을 설명하는 데 도움이 될 수 있습니다.
양식 내부의 구독자 카운터
가입 양식은 제출 버튼 전이나 후에 현재 확인된 구독자 수를 표시할 수 있습니다.
오프셋을 추가하고, 레이블을 작성하고, 위치를 선택하고, 타이포그래피와 정렬을 조정할 수 있습니다. 오프셋은 Maildroppa가 표시하는 확인된 구독자 수에 더해집니다.
이 양식 카운터는 독립형 “Subscriber counter” 콘텐츠 블록과 다릅니다. 숫자가 제출 영역과 직접 연결되어야 한다면 양식 설정을 사용하세요. 카운터가 디자인의 다른 위치에 표시되어야 한다면 콘텐츠 블록을 사용하세요.
양식, 입력 필드 및 버튼 디자인
“Signup Form Block” 설정은 필드 주변의 컨테이너를 제어하며, 배경, 테두리, 모서리 반경 및 간격이 포함됩니다.
입력 필드 설정은 필드 배경, 레이블, 텍스트, 플레이스홀더, 테두리 및 간격을 제어합니다. 제출 버튼에는 텍스트, 타이포그래피, 색상, 테두리, 크기 및 정렬을 위한 별도의 설정이 있습니다.
캔버스에서 진행률 표시줄이나 제출 버튼을 직접 클릭하면 해당 부분의 설정을 바로 열 수 있습니다.
전체 모양 변경하기
오른쪽 사이드바에서 “Page settings”를 열어 전체 디자인을 변경합니다. 임베드 양식, 팝업 및 슬라이드인의 경우 이 설정은 완전한 호스팅 페이지가 아니라 양식 캔버스에 적용됩니다.
주요 배경, 배경 이미지, 최대 너비 및 모바일 간격을 설정할 수 있습니다. 모양 설정은 다음 항목의 기본값을 정의합니다.
- 본문 글꼴 및 텍스트 색상
- 링크 색상, 밑줄 및 호버 색상
- 제목 글꼴, 색상, 굵기, 크기 및 줄 높이
- 버튼
- 상자, 테두리, 모서리 반경, 간격 및 패딩
- 모바일 페이지 패딩 및 열이 쌓이는 시점
이러한 기본값은 디자인의 일관성을 유지합니다. 필요할 때 개별 블록에서 기본값을 재정의할 수 있습니다.
가입 흐름 연결하기
모든 양식은 가입 흐름에 연결됩니다. 가입 흐름은 양식 제출 후 구독자의 여정을 제어합니다.
- 양식 제출 직후 방문자에게 표시되는 내용
- 전송되는 Double Opt-in 이메일
- 구독자가 이메일 주소를 확인한 후 발생하는 일
빌더 헤더에서 가입 흐름 컨트롤을 열어 현재 지정된 흐름을 확인합니다. 다른 기존 흐름을 선택하거나, 선택한 흐름을 편집하거나, 새 흐름을 만들 수 있습니다.
하나의 가입 흐름을 여러 양식에서 사용할 수 있습니다. 공유 흐름을 편집하면 해당 흐름을 사용하는 모든 양식에 변경 사항이 적용됩니다. 따라서 Maildroppa에서는 공유 흐름을 편집할지, 현재 양식을 위한 별도의 사본을 만들지 선택할 수 있습니다.
미리 보기 및 저장하기
“Preview”를 클릭해 공개하기 전에 전체 디자인과 가입 환경을 확인합니다. 미리 보기는 긴 텍스트, 이미지 비율, 필드 순서, 버튼 레이블 및 양식의 전반적인 균형을 확인하는 데 유용합니다.
임베드 양식, 팝업 및 슬라이드인의 경우 현재 버전을 저장할 준비가 되면 “Save changes”를 클릭합니다.
랜딩 페이지는 상단 바에서 초안 및 게시 컨트롤을 사용합니다. 게시하지 않고 저장할 수 있으며, 이미 게시된 페이지의 변경 사항은 게시할 때까지 게시되지 않은 상태로 유지됩니다. 전체 작업 흐름은 랜딩 페이지 만들기 및 게시하기에서 설명합니다.
저장한 후 가입 양식 개요로 돌아가 웹사이트 양식을 활성화하고 임베드하거나 게시된 랜딩 페이지를 관리합니다.
양식 유형별 가이드 계속하기
공통 디자인 작업이 완료되었습니다. 만들고 있는 양식에 해당하는 가이드로 계속 진행하세요.
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.