팝업 양식 만들기 및 표시하기

Published: 2026년 7월 16일 · Last updated: 2026년 7월 21일 · By Marcus Biel

팝업은 웹사이트 콘텐츠 위에 표시됩니다. 방문자의 시야에 가입 제안을 직접 보여 주면서 기본 페이지는 그대로 유지합니다.

팝업은 뉴스레터 제안, 할인, 이벤트 등록, 리드 마그넷 및 기타 특정 행동 유도에 유용합니다. 일반적인 페이지 이용 경험을 방해하므로 디자인만큼 표시 시점과 빈도도 중요합니다.

이 가이드에서는 팝업 관련 설정을 설명합니다. 레이아웃, 콘텐츠 블록, 구독자 필드, 태그, 타이포그래피, 레이어 및 가입 흐름은 기본 가입 양식 빌더 가이드에서 다룹니다.

팝업 만들기

“가입 양식”을 열고 “양식 만들기”를 클릭한 다음 “팝업”을 선택합니다. 알기 쉬운 내부 이름을 입력하고 빌더로 이동합니다.

가입 양식 개요에서 기존 팝업의 이름을 클릭해 편집할 수도 있습니다.

“홈페이지 할인 팝업”, “웨비나 등록 팝업”, “가이드 다운로드 팝업”처럼 제안 내용이나 배치를 설명하는 이름을 사용하세요. 내부 이름은 방문자에게 자동으로 표시되지 않습니다.

팝업 템플릿 선택하기

팝업에는 빈 양식, 표준 양식 및 디자인된 템플릿 4개가 제공됩니다.

• 깔끔한 할인
• 따뜻한 가이드
• 어두운 웨비나
• 부드러운 커뮤니티

제안에 맞는 크기와 콘텐츠 구조를 가진 템플릿을 선택하세요. 이후 모든 텍스트, 필드, 색상, 이미지, 여백 및 레이아웃을 변경할 수 있습니다.

팝업 디자인하기

시각적 빌더를 사용해 팝업을 배치합니다. 가입 양식에 텍스트, 이미지, 동영상, 목록, 버튼, 소셜 링크, 구독자 카운터, 여백 및 구분선을 조합할 수 있습니다.

핵심 메시지는 즉시 이해할 수 있을 만큼 짧게 유지하세요. 명확한 제목, 간단한 설명 하나, 구체적인 제출 버튼이 서로 경쟁하는 여러 메시지보다 일반적으로 효과적입니다.

가입 양식 블록을 선택해 필드, 필수 정보, 숨겨진 태그, 진행률 표시기, 구독자 카운터, 입력란 및 제출 버튼을 설정합니다. “페이지 설정”을 열어 전체 팝업 배경과 기본 표시 설정을 변경합니다.

팝업은 닫기 컨트롤과 함께 웹사이트 위에 표시됩니다. 작은 화면에서도 양식을 쉽게 사용할 수 있도록 중요한 텍스트와 필드 주변에 충분한 시각적 여백을 두세요.

팝업 동작 설정하기

가입 양식 블록을 선택하고 “위젯 설정”을 엽니다. 이 섹션에서는 팝업이 표시되는 시점과 방문자에게 표시되는 빈도를 제어합니다.

표시 지연

“표시 지연”은 Maildroppa가 삽입된 웹사이트 페이지에서 팝업을 표시하기 전에 기다리는 시간을 초 단위로 지정합니다.

추가 지연 없이 표시하려면 0을 입력합니다. 방문자가 제안이 나타나기 전에 페이지를 읽을 시간이 필요하다면 더 큰 값을 사용하세요. 빌더에서는 최대 86,400초까지 지연을 설정할 수 있습니다.

페이지에 따라 지연 시간을 선택하세요. 집중형 캠페인 페이지에서는 짧은 지연이 적절할 수 있지만, 글에서는 더 긴 지연이 덜 방해되는 느낌을 줄 수 있습니다.

표시 빈도

“표시 빈도”는 동일한 방문자에게 팝업이 다시 표시될 수 있는 기간을 제어합니다. 사용 가능한 옵션은 다음과 같습니다.

• 항상
• 시간당 한 번
• 하루에 한 번
• 일주일에 한 번
• 한 달에 한 번

“항상”은 신중하게 사용하세요. 동일한 방문자를 반복적으로 방해하는 팝업은 불쾌감을 줄 수 있습니다. 일반적인 웹사이트 제안에는 매일 또는 매주를 시작점으로 사용하는 것이 더 나은 경우가 많습니다.

빈도 설정은 방문자의 브라우저에 저장됩니다. 따라서 다른 브라우저, 비공개 브라우징 창 또는 브라우저 저장 공간을 삭제한 환경에서 테스트하면 다른 결과가 나타날 수 있습니다.

종료 의도 사용하기

방문자가 페이지 영역 밖으로 포인터를 이동해 곧 페이지를 떠날 수 있음을 나타낼 때 팝업이 열리도록 하려면 “종료 의도 팝업”을 활성화합니다.

종료 의도가 활성화되면 팝업은 일반적인 지연 표시 대신 이 동작을 기다립니다. 선택한 표시 빈도는 팝업이 너무 빨리 다시 표시되는 것을 계속 방지합니다.

종료 의도는 포인터 움직임을 기반으로 하므로 주로 데스크톱 및 노트북 브라우저에서 관련이 있습니다. 터치 기기에서는 동일한 종료 신호를 제공하지 않습니다. 모바일 방문자도 페이지 자체 또는 다른 적절한 양식을 통해 가입 제안을 확인할 수 있도록 항상 확인하세요.

페이지 요소에서 수동으로 팝업 열기

방문자가 웹사이트의 특정 버튼, 이미지 또는 링크를 클릭하면 팝업이 열리도록 설정할 수 있습니다. 이것이 수동 클릭 트리거입니다. 방문자가 포인터를 페이지 밖으로 이동할 때 반응하는 “종료 의도 팝업”과는 다릅니다.

다음과 같이 수동 클릭 트리거를 설정하고 설치합니다.

1. 가입 양식 빌더에서 팝업을 엽니다.
2. 캔버스에서 가입 양식 블록을 클릭하고 오른쪽에서 “설정”을 엽니다.
3. “위젯 설정”을 펼치고 “고객이 페이지 요소를 클릭하면 팝업 열기”를 활성화합니다.
4. “변경 사항 저장”을 클릭합니다.
5. 가입 양식 개요로 돌아가 팝업이 비활성 상태라면 활성화합니다.
6. 해당 팝업의 행에서 “코드 스니펫 표시”를 클릭합니다.

대화 상자에는 웹사이트에 필요한 두 가지 값이 포함되어 있습니다.

1. “JavaScript” 탭에서 전체 코드를 복사해 팝업을 사용할 웹사이트 페이지에 추가합니다.
2. 코드 아래에서 “팝업을 수동으로 트리거하려는 요소에 이 ID 추가” 아래에 표시된 ID를 복사합니다.
3. 팝업을 열 버튼, 이미지 또는 링크의 id 속성에 해당 값을 정확히 추가합니다.

ID 형식은 다음과 같습니다.

maildroppa-popup-btn-[form-id]

예:

<button id="maildroppa-popup-btn-[form-id]">가이드 받기</button>

JavaScript가 팝업을 로드합니다. ID는 팝업을 선택한 페이지 요소에 연결합니다. 두 요소는 모두 동일한 게시 페이지에 있어야 합니다. 방문자가 해당 ID가 정확히 일치하는 요소를 클릭하면 Maildroppa 스크립트가 팝업을 엽니다.

웹사이트 버튼에 다른 팝업 시스템의 ID가 이미 있는 경우, Maildroppa가 클릭을 처리해야 할 때 해당 ID를 Maildroppa 트리거 ID로 바꾸세요. Maildroppa 팝업을 웹사이트 빌더가 제공하는 다른 팝업 안에 배치하지 마세요.

각 HTML ID는 페이지에서 한 번만 사용하세요. 여러 요소에서 동일한 팝업을 열어야 한다면 웹사이트 구현 담당자에게 동일한 ID를 중복하지 않고 해당 요소들을 연결하도록 요청하세요.

가입 흐름 연결하기

빌더 헤더에서 할당된 가입 흐름을 검토합니다. 가입 흐름은 즉시 제출 응답, Double Opt-in 이메일 및 확인 후 결과를 제어합니다.

기존 흐름을 선택하거나 편집하거나 이 팝업을 위한 별도의 흐름을 만들 수 있습니다. 제안에 별도의 확인 메시지나 리드 마그넷 전달이 필요한 경우 전용 흐름이 유용합니다.

미리 보기 및 저장하기

“미리 보기”를 클릭해 웹사이트에서 사용 중인 버전을 변경하지 않고 팝업 디자인과 동작을 확인합니다. 레이아웃, 닫기 컨트롤, 필드 순서, 유효성 검사 공간 및 제출 응답을 검토하세요.

팝업이 준비되면 “변경 사항 저장”을 클릭합니다. 그런 다음 가입 양식 개요로 돌아갑니다.

팝업 자동 활성화 및 삽입하기

팝업이 아직 활성화되지 않았다면 점 3개 작업 메뉴에서 팝업을 활성화합니다. 그런 다음 “코드 스니펫 표시”를 클릭하고 “JavaScript” 탭에서 전체 코드를 복사합니다.

팝업을 사용할 모든 웹사이트 페이지에 스크립트를 추가합니다. 코드에는 팝업의 고유한 양식 ID가 포함되어 있으며, 현재 저장된 설정을 로드합니다.

“HTML” 탭에서는 사용자 지정 구현을 위한 생성된 마크업을 제공합니다. 이 탭을 사용하는 경우 웹사이트 코드와 스타일이 결과에 영향을 줄 수 있으므로 모든 동작과 제출 단계를 주의 깊게 테스트하세요.

이 섹션은 팝업이 표시 지연 또는 종료 의도 동작에 따라 자동으로 열려야 하는 경우에 적용됩니다. 클릭 시 팝업을 여는 버튼, 이미지 또는 링크의 경우

를 따르세요.

일반적인 삽입 지침은 삽입 양식 만들기 및 삽입하기를 참조하세요.

웹사이트에서 팝업 테스트하기

코드를 추가한 후 실제 웹사이트 페이지에서 팝업을 테스트합니다.

1. 설정한 지연 시간을 확인합니다.
2. 닫기 버튼과 양식 바깥쪽 클릭을 테스트합니다.
3. 활성화된 경우 포인터를 페이지 밖으로 이동해 종료 의도를 테스트합니다.
4. 활성화된 경우 설정한 페이지 요소를 클릭해 수동 트리거를 테스트합니다.
5. 좁은 화면에서 레이아웃을 확인합니다.
6. 양식을 제출하고 Double Opt-in 절차를 완료합니다.
7. Maildroppa에서 구독자와 숨겨진 태그를 확인합니다.

빈도 설정으로 인해 반복 테스트 중 팝업이 다시 표시되지 않을 수 있습니다. 새로운 방문 환경에서 테스트해야 할 때는 비공개 브라우징 창을 사용하거나 관련 브라우저 저장 공간을 삭제하세요.

팝업 업데이트 또는 비활성화하기

팝업을 업데이트하려면 Maildroppa에서 팝업을 열고 디자인이나 동작을 편집한 다음 미리 보고 “변경 사항 저장”을 클릭합니다. JavaScript 스니펫은 계속 동일한 양식 ID를 사용합니다.

팝업 표시를 일시적으로 중지하려면 작업 메뉴에서 “비활성화”를 선택합니다. 비활성화해도 팝업과 이전 보고서 데이터는 유지됩니다. 더 이상 필요하지 않다면 웹사이트에서 스크립트 또는 트리거 요소도 제거하세요.