슬라이드인 양식 만들기 및 위치 설정

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

슬라이드인은 브라우저 창의 가장자리나 지정한 위치에 나타나는 작은 구독 신청 양식입니다.

페이지 안에 배치된 양식보다 눈에 잘 띄면서도 중앙에 표시되는 팝업보다 웹사이트를 덜 가립니다. 방문자가 페이지를 읽는 동안 계속 보여주고 싶은 뉴스레터 안내, 할인 혜택, 제품 업데이트, 짧은 제안에 적합합니다.

이 가이드에서는 슬라이드인에만 있는 설정을 설명합니다. 공통으로 사용하는 레이아웃, 콘텐츠, 필드, 태그, 글꼴 및 텍스트 스타일, 레이어, 구독 신청 절차 기능은 구독 신청 양식 빌더 기본 가이드에서 다룹니다.

슬라이드인 만들기

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

Signup Forms Overview에서 기존 슬라이드인의 이름을 클릭해 편집할 수도 있습니다.

“Blog Newsletter Slide-in”, “New Product Reminder”, “Summer Coupon Slide-in”처럼 용도를 알 수 있는 이름을 사용하세요. 내부 관리용 이름은 양식을 관리할 때 사용하며 방문자에게 자동으로 표시되지 않습니다.

슬라이드인 템플릿 선택하기

슬라이드인에는 빈 양식, 표준 양식, 디자인이 적용된 템플릿 4가지가 제공됩니다.

• Clean reminder
• Dark offer
• Warm coupon
• Minimal note

템플릿은 짧고 간결한 메시지에 맞춰 디자인되어 있지만 모든 요소를 편집할 수 있습니다. 시작할 템플릿을 선택한 뒤 콘텐츠, 필드, 색상, 글꼴 및 텍스트 스타일, 테두리, 간격, 제출 버튼을 변경할 수 있습니다.

슬라이드인 디자인하기

비주얼 빌더로 슬라이드인을 구성하세요. 구독 신청 양식과 함께 텍스트, 이미지, 동영상, 목록, 버튼, 소셜 링크, 구독자 수 표시, 여백, 구분선을 넣을 수 있습니다.

랜딩 페이지나 폭이 넓은 임베드 양식보다 공간이 제한적입니다. 제안은 핵심에 집중하고, 방문자가 입력 필드나 제출 버튼을 찾아 헤맬 만큼 콘텐츠를 많이 넣지 마세요.

구독 신청 양식 블록을 선택해 필드, 필수 정보, 숨겨진 태그, 진행률 표시, 구독자 수 표시, 입력란, 제출 버튼을 설정하세요. 슬라이드인의 배경과 전반적인 기본 디자인 설정은 “Page settings”에서 변경할 수 있습니다.

일반적으로 단일 열 레이아웃이 가장 보기 쉽습니다. 여러 열을 사용한다면 좁은 화면에서 각 열이 어떤 순서로 쌓이는지 꼼꼼히 확인하세요.

화면 위치 선택하기

구독 신청 양식 블록을 선택하고 “Widget Settings”를 여세요. 위치 선택기는 3×3 격자로 구성되어 있습니다.

• 상단 왼쪽, 상단 중앙, 상단 오른쪽
• 중앙 왼쪽, 정중앙, 중앙 오른쪽
• 하단 왼쪽, 하단 중앙, 하단 오른쪽

웹사이트의 중요한 조작 요소를 가리지 않는 위치를 선택하세요. 결정하기 전에 쿠키 알림, 채팅 위젯, 탐색 메뉴, 장바구니 버튼 등 화면에 고정된 요소를 확인하세요.

좁은 모바일 화면에서는 Maildroppa가 슬라이드인을 화면 너비에 맞추도록 배치를 단순화합니다. 상단으로 설정한 위치는 그대로 상단에 유지되며, 나머지 위치는 하단 가장자리에 표시됩니다. 데스크톱에서의 위치만 보고 판단하지 말고 작은 화면에서도 반드시 테스트하세요.

표시 지연 시간 설정하기

“Display Delay”는 슬라이드인을 삽입한 웹사이트 페이지에서 Maildroppa가 양식을 표시하기까지 기다리는 시간을 초 단위로 설정하는 항목입니다.

슬라이드인을 바로 표시하려면 0으로 설정하세요. 방문자가 먼저 페이지를 살펴볼 시간을 주려면 지연 시간을 늘리세요. 빌더에서는 최대 86,400초까지 설정할 수 있습니다.

간단한 뉴스레터 안내에는 짧은 지연 시간이 적합할 수 있습니다. 긴 글에서는 조금 늦게 표시하는 편이 자연스럽고, 콘텐츠에 관심을 보이는 독자에게 더 적절한 제안으로 다가갈 수 있습니다.

표시 빈도 설정하기

“Display Frequency”는 같은 방문자에게 슬라이드인을 다시 표시할 수 있을 때까지의 간격을 설정합니다. 다음 중에서 선택할 수 있습니다.

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

제안 내용에 맞는 빈도를 선택하세요. 기간 한정 프로모션은 더 짧은 간격으로 표시해야 할 수 있지만, 일반적인 뉴스레터 안내는 대체로 방문할 때마다 표시할 필요가 없습니다.

표시 빈도 정보는 방문자의 브라우저에 저장됩니다. 다른 브라우저나 시크릿 창을 사용하거나 브라우저 저장소를 삭제하면 별도의 방문 기록으로 처리됩니다.

구독 신청 절차 연결하기

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

기존 절차를 선택하거나 현재 절차를 편집할 수 있으며, 이 슬라이드인 전용 절차를 새로 만들 수도 있습니다. 여러 양식이 같은 절차를 공유한다면 변경 사항이 해당 양식 모두에 적용됩니다.

미리 보고 저장하기

웹사이트에 추가하기 전에 “Preview”를 클릭해 슬라이드인을 검토하세요. 선택한 위치, 열리는 방식, 필드 순서, 닫기 버튼, 구독 신청 과정 전반의 응답을 확인하세요.

양식과 “Widget Settings” 설정이 준비되면 “Save changes”를 클릭하세요. 그런 다음 “Signup Forms Overview”로 돌아가세요.

슬라이드인 활성화 및 웹사이트 삽입하기

슬라이드인이 아직 활성화되어 있지 않다면 점 3개로 표시된 작업 메뉴에서 활성화하세요. “Show Code Snippet”을 클릭하고 “JavaScript” 탭에서 전체 코드를 복사하세요.

슬라이드인을 표시할 모든 웹사이트 페이지에 이 스크립트를 추가하세요. 임베드 양식과 달리 페이지 안에서 스크립트를 넣는 위치는 슬라이드인의 표시 위치에 영향을 주지 않습니다. 표시 위치는 “Widget Settings”에서 선택한 위치에 따라 결정됩니다.

“HTML” 탭에서는 직접 맞춤 구현할 때 사용할 수 있도록 생성된 마크업을 제공합니다. 이 옵션을 사용한다면 웹사이트에서 전체 상호작용과 제출 절차를 꼼꼼히 테스트하세요.

일반적인 코드 배치 방법은 임베드 양식 만들기 및 웹사이트 삽입하기를 참고하세요.

웹사이트에서 슬라이드인 테스트하기

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

1. 설정한 지연 시간이 지난 후 슬라이드인이 표시되는지 확인하세요.
2. 넓은 화면에서 표시 위치를 확인하세요.
3. 좁은 화면에서 조정된 위치와 너비를 확인하세요.
4. 탐색 메뉴, 쿠키 설정, 채팅 버튼 등 중요한 조작 요소를 가리지 않는지 확인하세요.
5. 슬라이드인을 열고 닫는 동작을 테스트하세요.
6. 양식을 제출하고 이메일 확인을 거치는 이중 수신 동의 절차를 완료하세요.
7. Maildroppa에서 구독자와 숨겨진 태그를 확인하세요.

반복해서 테스트할 때는 표시 빈도 설정 때문에 양식이 다시 나타나지 않을 수 있습니다. 신규 방문자 환경에서 테스트해야 한다면 시크릿 창을 사용하거나 관련 브라우저 저장소를 삭제하세요.

슬라이드인 업데이트 또는 비활성화하기

Maildroppa에서 해당 슬라이드인을 열어 수정하고 미리 본 다음 “Save changes”를 클릭하세요. JavaScript 코드 스니펫은 동일한 양식 ID를 계속 사용하며 저장된 설정을 불러옵니다.

슬라이드인을 삭제하지 않고 게시만 중단하려면 “Signup Forms Overview”에서 “Deactivate”를 선택하세요. 해당 웹사이트에서 더 이상 사용할 계획이 없다면 웹사이트에서도 스크립트를 제거하세요.