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

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

팝업은 웹사이트 콘텐츠 위에 표시됩니다. 기존 페이지를 그대로 유지하면서 방문자의 눈에 잘 띄는 위치에 구독을 유도하는 내용을 보여 줍니다.

팝업은 뉴스레터 구독 안내, 할인 혜택, 이벤트 등록, 구독 혜택 자료 제공 등 특정 행동을 유도할 때 유용합니다. 다만 방문자가 페이지를 이용하는 흐름을 방해할 수 있으므로 디자인만큼 표시 시점과 빈도도 중요합니다.

이 가이드에서는 팝업 전용 설정을 설명합니다. 레이아웃, 콘텐츠 블록, 구독자 필드, 태그, 타이포그래피, 레이어, 구독 신청 절차는 기본 구독 신청 양식 빌더 가이드에서 다룹니다.

팝업 만들기

“Signup Forms”를 열고 “Create Form”을 클릭한 다음 “Popup”을 선택하세요. 알아보기 쉬운 내부 관리용 이름을 입력하고 빌더로 이동하세요.

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

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

팝업 템플릿 선택하기

팝업에는 빈 양식, 표준 양식과 함께 디자인이 적용된 템플릿 4개가 제공됩니다.

• Clean discount
• Warm guide
• Dark webinar
• Soft community

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

팝업 디자인하기

시각적 빌더에서 팝업의 구성 요소를 배치하세요. 구독 신청 양식에 텍스트, 이미지, 동영상, 목록, 버튼, 소셜 링크, 구독자 수 표시, 여백, 구분선을 조합할 수 있습니다.

핵심 메시지는 한눈에 이해할 수 있도록 짧게 작성하세요. 여러 메시지를 한꺼번에 전달하기보다는 명확한 제목, 짧은 설명 하나, 수행할 행동이 구체적으로 드러나는 제출 버튼으로 구성하는 편이 대체로 더 효과적입니다.

구독 신청 양식 블록을 선택해 필드, 필수 정보, 숨겨진 태그, 진행률 표시기, 구독자 수 표시, 입력란, 제출 버튼을 설정하세요. 팝업 전체의 배경과 기본 디자인 설정을 변경하려면 “Page settings”를 여세요.

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

팝업 동작 설정하기

구독 신청 양식 블록을 선택하고 “Widget Settings”를 여세요. 여기에서 팝업이 표시되는 시점과 방문자에게 표시되는 빈도를 설정할 수 있습니다.

표시 지연

“Display Delay”는 팝업을 삽입한 웹사이트 페이지에서 Maildroppa가 팝업을 표시하기 전까지 기다리는 시간을 초 단위로 지정하는 설정입니다.

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

페이지의 성격에 맞게 지연 시간을 선택하세요. 특정 캠페인에 집중한 페이지에는 짧은 지연 시간이 적합할 수 있지만, 글을 읽는 페이지에서는 지연 시간을 길게 두는 편이 방해를 줄일 수 있습니다.

표시 빈도

“Display Frequency”는 같은 방문자에게 팝업을 다시 표시할 수 있을 때까지의 간격을 설정합니다. 다음 옵션을 사용할 수 있습니다.

• Always: 항상
• Once per hour: 시간당 한 번
• Once per day: 하루에 한 번
• Once per week: 일주일에 한 번
• Once per month: 한 달에 한 번

“Always”는 신중하게 사용하세요. 같은 방문자의 페이지 이용을 반복해서 방해하는 팝업은 불편함을 줄 수 있습니다. 일반적인 웹사이트 제안이라면 하루에 한 번 또는 일주일에 한 번으로 시작하는 편이 더 나은 경우가 많습니다.

표시 빈도 정보는 방문자의 브라우저에 저장됩니다. 따라서 다른 브라우저나 비공개 브라우징 창에서 테스트하거나 브라우저 저장소를 비운 뒤 테스트하면 결과가 달라질 수 있습니다.

이탈 감지 사용하기

방문자가 포인터를 페이지 영역 밖으로 이동해 페이지를 떠나려는 징후를 보일 때 팝업이 열리도록 하려면 “Exit Intent Popup”을 활성화하세요.

이탈 감지를 활성화하면 일반적인 지연 시간에 따라 팝업을 표시하는 대신 이 동작이 발생할 때까지 기다립니다. 이때도 선택한 표시 빈도가 적용되므로 팝업이 너무 짧은 간격으로 다시 표시되지 않습니다.

이탈 감지는 포인터 움직임을 기반으로 하므로 주로 데스크톱과 노트북 브라우저에서 활용할 수 있습니다. 터치 기기에서는 같은 방식으로 이탈 징후를 감지할 수 없습니다. 모바일 방문자도 페이지 자체나 다른 적절한 양식에서 구독 제안을 확인할 수 있는지 반드시 확인하세요.

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

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

다음 순서로 수동 클릭 트리거를 설정하고 설치하세요.

1. 구독 신청 양식 빌더에서 팝업을 여세요.
2. 캔버스에서 구독 신청 양식 블록을 클릭하고 오른쪽의 “Settings”를 여세요.
3. “Widget Settings”를 펼치고 “Open popup when a customer clicks a page element”를 활성화하세요.
4. “Save changes”를 클릭하세요.
5. 구독 신청 양식 개요로 돌아가 팝업이 비활성 상태라면 활성화하세요.
6. 해당 팝업의 행에서 “Show Code Snippet”을 클릭하세요.

대화 상자에는 웹사이트에 필요한 코드와 ID가 있습니다.

1. “JavaScript” 탭에서 전체 코드를 복사해 팝업을 사용할 웹사이트 페이지에 추가하세요.
2. 코드 아래의 “Add this ID to element from which you want to manually trigger Popup”에 표시된 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를 중복 사용하지 않고 해당 요소들을 연결해 달라고 요청하세요.

구독 신청 절차 연결하기

빌더 헤더에서 지정된 구독 신청 절차를 확인하세요. 이 절차는 양식 제출 직후의 응답, 이중 수신 동의 이메일, 이메일 확인 후의 결과를 결정합니다.

기존 절차를 선택하거나 편집할 수도 있고, 이 팝업을 위한 별도 절차를 만들 수도 있습니다. 제안에 맞는 별도의 확인 메시지나 구독 혜택 자료 전달이 필요하다면 전용 절차가 유용합니다.

미리 보기 및 저장하기

“Preview”를 클릭하면 웹사이트에서 사용 중인 버전을 변경하지 않고 팝업의 디자인과 동작을 확인할 수 있습니다. 레이아웃, 닫기 기능, 필드 순서, 유효성 검사 메시지가 표시될 공간, 제출 후 응답을 확인하세요.

팝업이 준비되면 “Save changes”를 클릭하세요. 그런 다음 구독 신청 양식 개요로 돌아가세요.

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

팝업이 아직 활성화되지 않았다면 점 3개 모양의 작업 메뉴에서 활성화하세요. 그런 다음 “Show Code Snippet”을 클릭하고 “JavaScript” 탭에서 전체 코드를 복사하세요.

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

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

이 섹션은 표시 지연이나 이탈 감지에 따라 팝업이 자동으로 열리도록 설정할 때 적용됩니다. 버튼, 이미지 또는 링크를 클릭해 팝업을 열려면

를 따르세요.

일반적인 삽입 방법은 임베디드 양식 만들기 및 삽입하기를 참고하세요.

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

코드를 추가한 후 실제 웹사이트 페이지에서 팝업을 테스트하세요.

1. 설정한 지연 시간을 확인하세요.
2. 닫기 버튼을 누를 때와 양식 바깥쪽을 클릭할 때의 동작을 테스트하세요.
3. 이탈 감지를 활성화했다면 포인터를 페이지 밖으로 이동해 테스트하세요.
4. 수동 트리거를 활성화했다면 지정한 페이지 요소를 클릭해 테스트하세요.
5. 폭이 좁은 화면에서 레이아웃을 확인하세요.
6. 양식을 제출하고 이메일 확인을 거치는 이중 수신 동의 절차를 완료하세요.
7. Maildroppa에서 구독자와 숨겨진 태그를 확인하세요.

반복해서 테스트할 때는 표시 빈도 설정 때문에 팝업이 다시 나타나지 않을 수 있습니다. 이전 방문 기록의 영향 없이 테스트해야 한다면 비공개 브라우징 창을 사용하거나 관련 브라우저 저장소를 비우세요.

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

팝업을 업데이트하려면 Maildroppa에서 팝업을 열어 디자인이나 동작을 편집한 다음, 미리 확인하고 “Save changes”를 클릭하세요. JavaScript 코드 스니펫은 계속 같은 양식 ID를 사용합니다.

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