슬라이드인 양식 만들기 및 배치하기

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

슬라이드인은 브라우저 창의 가장자리나 선택한 위치에 나타나는 간결한 가입 양식입니다.

페이지 안에 배치된 양식보다 더 많은 주목을 끌면서도 중앙에 표시되는 팝업보다 웹사이트를 덜 가립니다. 슬라이드인은 방문자가 페이지를 읽는 동안 계속 표시되어야 하는 뉴스레터 알림, 할인, 제품 업데이트, 짧은 제안에 적합합니다.

이 가이드에서는 슬라이드인에 고유한 설정을 설명합니다. 공통 레이아웃, 콘텐츠, 필드, 태그, 타이포그래피, 레이어 및 가입 흐름 기능은 기본 가입 양식 빌더 가이드에서 다룹니다.

슬라이드인 만들기

“Signup Forms”를 열고 “Create Form”을 클릭한 다음 “Slide-in”을 선택합니다. 이해하기 쉬운 내부 이름을 입력하고 빌더로 이동합니다.

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

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

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

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

• 깔끔한 알림
• 어두운 제안
• 따뜻한 쿠폰
• 미니멀한 메모

템플릿은 간결한 메시지에 맞게 디자인되었지만 모든 요소를 편집할 수 있습니다. 시작 템플릿을 선택한 후 콘텐츠, 필드, 색상, 타이포그래피, 테두리, 간격 및 제출 버튼을 변경할 수 있습니다.

슬라이드인 디자인하기

비주얼 빌더를 사용하여 슬라이드인을 구성합니다. 가입 양식과 함께 텍스트, 이미지, 동영상, 목록, 버튼, 소셜 링크, 구독자 수, 여백 또는 구분선을 포함할 수 있습니다.

랜딩 페이지나 넓은 임베드 양식보다 사용할 수 있는 공간이 제한적입니다. 제안 내용을 집중적으로 구성하고 방문자가 필드나 제출 버튼을 찾느라 콘텐츠를 살펴봐야 하는 상황을 피하세요.

가입 양식 블록을 선택하여 필드, 필수 정보, 숨겨진 태그, 진행률 표시기, 구독자 수, 입력란 및 제출 버튼을 설정합니다. “Page settings”를 열어 슬라이드인의 배경과 전체적인 기본 표시 설정을 변경합니다.

일반적으로 한 열 레이아웃이 가장 명확합니다. 여러 열을 사용하는 경우 좁은 화면에서 어떻게 쌓이는지 주의 깊게 확인하세요.

화면 위치 선택하기

가입 양식 블록을 선택하고 “Widget Settings”를 엽니다. 위치 선택기에는 3×3 격자가 제공됩니다.

• 왼쪽 상단, 중앙 상단 또는 오른쪽 상단
• 왼쪽 중앙, 중앙 또는 오른쪽 중앙
• 왼쪽 하단, 중앙 하단 또는 오른쪽 하단

중요한 웹사이트 컨트롤을 가리지 않는 위치를 선택하세요. 결정하기 전에 쿠키 알림, 채팅 위젯, 내비게이션, 장바구니 버튼 및 기타 고정 요소를 확인합니다.

좁은 모바일 화면에서는 Maildroppa가 사용 가능한 너비에 슬라이드인이 맞도록 배치를 간소화합니다. 상단 위치는 계속 상단에 유지되고, 그 외의 위치는 하단 가장자리에서 표시됩니다. 데스크톱 위치에만 의존하지 말고 항상 작은 화면에서 결과를 테스트하세요.

표시 지연 시간 설정하기

“Display Delay”는 임베드된 웹사이트 페이지에서 슬라이드인을 표시하기 전에 Maildroppa가 기다리는 시간을 초 단위로 정의합니다.

슬라이드인을 즉시 사용할 수 있게 하려면 0을 사용합니다. 방문자가 먼저 페이지를 살펴볼 시간을 주려면 더 긴 지연 시간을 입력하세요. 빌더에서는 최대 86,400초까지 설정할 수 있습니다.

간단한 뉴스레터 알림에는 짧은 지연 시간이 효과적일 수 있습니다. 긴 글에서는 더 늦게 표시하는 편이 자연스럽게 느껴지고, 콘텐츠에 관심을 보이는 독자에게 제안이 더 관련성 있게 전달될 수 있습니다.

표시 빈도 설정하기

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

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

제안 내용에 맞는 빈도를 사용하세요. 기간 한정 프로모션에는 더 짧은 간격이 필요할 수 있지만, 일반적인 뉴스레터 알림은 방문할 때마다 표시할 필요가 없는 경우가 많습니다.

빈도 설정은 방문자의 브라우저에 저장됩니다. 다른 브라우저, 시크릿 브라우징 창 또는 삭제된 브라우저 저장소는 별도의 방문 기록으로 처리됩니다.

가입 흐름 연결하기

빌더 헤더에서 할당된 가입 흐름을 확인합니다. 가입 흐름은 제출 후 응답, Double Opt-in 이메일 및 확인 후 발생하는 동작을 정의합니다.

기존 흐름을 선택하거나 현재 흐름을 편집하거나 이 슬라이드인 전용 흐름을 만들 수 있습니다. 여러 양식에서 흐름을 공유하는 경우 변경 사항이 모든 양식에 적용됩니다.

미리 보고 저장하기

웹사이트에 추가하기 전에 “Preview”를 클릭하여 슬라이드인을 검토합니다. 선택한 위치, 표시 동작, 필드 순서, 닫기 컨트롤 및 전체 가입 응답을 확인하세요.

양식과 Widget Settings가 준비되면 “Save changes”를 클릭합니다. 그런 다음 Signup Forms Overview로 돌아갑니다.

슬라이드인 활성화 및 임베드하기

아직 활성화되지 않았다면 점 3개 작업 메뉴에서 슬라이드인을 활성화합니다. “Show Code Snippet”을 클릭하고 “JavaScript” 탭에서 전체 코드를 복사합니다.

슬라이드인을 표시할 모든 웹사이트 페이지에 이 스크립트를 추가합니다. 임베드 양식과 달리 페이지 내 스크립트의 정확한 위치가 슬라이드인의 표시 위치를 결정하지 않습니다. Widget Settings에서 선택한 위치가 표시 위치를 제어합니다.

“HTML” 탭에서는 사용자 지정 구현을 위한 생성된 마크업을 제공합니다. 웹사이트에서 이 옵션을 사용하는 경우 전체 상호작용 및 제출 흐름을 주의 깊게 테스트하세요.

일반적인 코드 배치 지침은 임베드 양식 만들기 및 임베드하기를 참조하세요.

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

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

1. 선택한 지연 시간 후 슬라이드인이 표시되는지 확인합니다.
2. 넓은 화면에서 위치를 확인합니다.
3. 좁은 화면에서 조정된 위치와 너비를 확인합니다.
4. 내비게이션, 쿠키 컨트롤, 채팅 버튼 또는 기타 중요한 동작을 가리지 않는지 확인합니다.
5. 슬라이드인을 열고 닫는 동작을 테스트합니다.
6. 양식을 제출하고 Double Opt-in 절차를 완료합니다.
7. Maildroppa에서 구독자와 숨겨진 태그를 확인합니다.

빈도 설정으로 인해 반복 테스트 중 양식이 다시 표시되지 않을 수 있습니다. 새 방문자를 시뮬레이션해야 할 때는 시크릿 브라우징 창을 사용하거나 관련 브라우저 저장소를 삭제하세요.

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

Maildroppa에서 같은 슬라이드인을 열고 변경한 다음 미리 보고 “Save changes”를 클릭합니다. JavaScript 스니펫은 계속 같은 양식 ID를 사용하며 저장된 구성을 불러옵니다.

슬라이드인을 삭제하지 않고 오프라인으로 전환하려면 Signup Forms Overview에서 “Deactivate”를 선택합니다. 더 이상 해당 웹사이트에서 사용할 계획이 없다면 웹사이트에서도 스크립트를 제거하세요.