모바일용 팝업 및 플라이아웃 양식을 최적화하는 방법

예상 4 읽은 시간(분)

업데이트 2024년 8월 29일 오후 7:28 EST

클라비요의 모범 사례를 염두에 두고 모바일 가입 양식을 디자인하여 팝업 및 플라이아웃 양식이 모바일 방문자에게 최적화되도록 하는 방법을 알아보세요.

온라인 쇼핑객은 점점 더 많은 모바일 기기를 사용하여 새로운 스토어를 찾고, 제품을 탐색하고, 구매를 하고 있으므로 데스크톱에서와 마찬가지로 모바일에서도 웹사이트가 잘 보이도록 하는 것이 그 어느 때보다 중요하며, 여기에는 가입 양식도 포함됩니다.

시작하기 전 안내 사항

클라비요에서는 모든 디바이스에 표시되는 양식을 만들거나(즉, 데스크톱과 모바일 디바이스에서 모두 표시됨) 모바일 디바이스에만 표시되는 모바일 전용 양식을 만들 수 있습니다.

양식이 모든 장치에 표시되도록 설정된 경우 클라비요는 글꼴 크기 및 이미지와 같은 일부 요소를 자동으로 최적화하여 모바일 장치에서 쇼핑객에게 더 잘 보이도록 개선하지만, 이 가이드에서는 유의해야 할 추가 모범 사례에 대해 다룹니다. 양식 작성기의 오른쪽 상단에 있는 보기 선택기를 사용하여 양식을 작성할 때 데스크톱 보기와 모바일 보기 간에 전환할 수 있습니다. 데스크톱 아이콘은 데스크톱 쇼핑객에게 표시되는 양식의 모습을 보여주며, 모바일 아이콘은 모바일 쇼핑객에게 표시되는 모습을 보여줍니다.

이 가이드에서는 모바일 장치에 표시되는 팝업 및 플라이아웃 양식을 만드는 모범 사례를 다룹니다. 양식이 모든 기기에서 표시되는지, 모바일에서만 표시되는지에 관계없이 유용합니다. 모바일 장치에서 특히 가입 양식에 대한 자세한 개요를 보려면 기본 사항: 모바일 양식 디자인으로 이동하세요.

일반 양식 모범 사례

데스크톱 양식에 대한 많은 모범 사례는 모바일 장치에도 적용됩니다:

짧고 간결하게 작성: 필드가 많은 경우 다단계 양식을 고려하세요.
- 양식에서 SMS 동의를 수집하는 경우, 첫 번째 단계에서 이메일을 수집한 다음 두 번째 단계에서 스마트 옵트인을 사용하여 SMS를 수집하면 모바일 장치 방문자가 가장 쉬운 방법으로 구독할 수 있습니다.
방문자가 좌절하여 사이트를 떠나지 않도록 쉽게 닫을 수 있도록 하세요.
- 양식 티저를 사용하면 쇼핑객이 원하는 대로 양식을 닫았다가 다시 열 수 있습니다.
양식이 모든 장치에 표시되도록 설정되어 있고(데스크톱 및 모바일 쇼핑객이 모두 볼 수 있음을 의미) 측면 이미지가 포함된 경우 측면 이미지는 모바일에만 표시되도록 놔둡니다.
각 입력 필드(예: 이메일 주소, 전화번호 등)에 한 줄에 맞는 간결한 레이블을 사용하여 쇼핑객이 어떤 정보를 요청하는지 쉽게 확인할 수 있도록 하세요.

SEO 및 모바일 양식

특히 홈페이지나 기타 랜딩 페이지에서 양식을 만들 때는 모바일 SEO 모범 사례를 고려하는 것이 중요합니다. 일반적인 자연 검색 랜딩 페이지에 표시되는 양식은 사이트의 콘텐츠를 가리거나 방문자의 경험을 방해해서는 안 되며, 그렇지 않을 경우 검색 알고리즘에 의해 페이지가 불이익을 받을 수 있습니다. 삽입형 전면 광고와 SEO에 대해 자세히 알아보세요.

이를 방지하려면

타겟팅 및 행동 탭에서 양식의 타이밍을 규칙에 따라로 설정한 다음 더 긴 시간 지연(예: 방문자가 페이지를 종료할 때)을 설정합니다.
양식을 표시하기 전에 표시되는 티저를 추가합니다.

팝업 최적화

팝업 양식은 쇼핑객의 화면 중앙에 표시되어 페이지의 대부분을 가리고 양식이 열려 있는 동안 페이지의 다른 요소와 상호 작용하는 데 방해가 되는 경우가 많습니다. 이렇게 하면 팝업이 더 방해가 되지만 전환율도 높아집니다.

모바일 디바이스에서 팝업이 작동하는 방식을 최적화합니다:

모바일 쇼핑객이 양식 영역 외부를 클릭하면 양식이 닫히지 않도록 설정하여 실수로 양식이 닫히는 것을 줄이세요.
- 타겟팅 및 행동으로 이동합니다.
- 아래로 스크롤하여 장치로 이동합니다.
- 닫으려면 양식 외부 클릭 아래에서 모바일 스위치를 비활성화합니다.
모바일 장치와 같은 작은 화면에서도 양식의 닫기 아이콘(X 버튼)이 충분히 큰지 확인하세요.
- 양식 미리 보기에서 닫기 아이콘을 클릭하여 크기를 조정합니다.
- 모바일 기기에서 양식이 어떻게 보이는지 테스트하여 쉽게 찾고 클릭할 수 있는지 확인하세요.
  예를 들어 왼쪽 양식의 닫기 아이콘은 모바일 기기에서 클릭하기 어려울 수 있습니다. 하지만 오른쪽 양식의 닫기 아이콘은 더 크고 쉽게 찾을 수 있습니다.
오버레이 색상, 그림자 또는 둘 다를 사용하여 팝업을 사이트의 나머지 부분과 시각적으로 구분합니다.
- 스타일 탭으로 이동합니다.
- 양식 배경 섹션에서 오버레이 색상을 설정하여 반투명 오버레이를 사용하여 양식에 초점을 맞추고 양식이 열려 있는 동안 사이트의 콘텐츠를 흐리게 표시합니다.
- 그림자 효과를 구성하여 양식 주위에 미묘한 음영을 제공하여 주변 콘텐츠와 구분할 수 있습니다.
모바일 장치에서 팝업 양식처럼 보이고 가장자리에서 가장자리로 실행되지 않도록 양식의 여백을 조정합니다.
1. 스타일 탭에서 양식 스타일을아래로 스크롤합니다.
2. 미리보기에서 보이는 모양에 따라 왼쪽/오른쪽 여백을 늘립니다.

이러한 설정은 양식의 데스크톱 및 모바일 버전에 모두 반영됩니다.

플라이아웃 최적화

플라이아웃 양식이 표시되면 모바일 오버레이가 켜져 있지 않은 한 모바일 방문자는 양식 뒤에서 사이트와 상호 작용할 수 있습니다. 양식을 닫거나, 작성하거나, 계속 탐색하면서 열어두는 것을 선택할 수 있습니다. 일반적으로 플라이아웃은 팝업보다 덜 방해가 됩니다.

모바일 장치에 맞게 플라이아웃 양식을 최적화합니다:

양식이 화면 상단 또는 하단에서 튀어나오도록 설정합니다.
- 스타일 섹션으로 이동합니다.
- 모바일 플라이아웃 위치를 선택한 다음 하단에 도킹 또는 상단에 도킹을 선택합니다.
  이 설정을 선택하면 양식이 화면 상단 또는 하단에서 튀어나와 화면 가장자리에서 가장자리까지 화면의 일부를 덮게 됩니다.
모바일 오버레이, 그림자 또는 둘 다를 사용하여 플라이아웃 양식을 사이트의 나머지 부분과 시각적으로 구분합니다.
- 스타일 탭으로 이동합니다.
- 양식 배경 설정으로 스크롤합니다.
- 모바일 쇼핑객이 양식을 작성하거나 닫을 때까지 사이트의 다른 요소를 클릭할 수 없도록 모바일 오버레이를 설정합니다. 데스크톱에서 플라이아웃 양식을 볼 때는 모바일 오버레이가 나타나지 않습니다.
- 그림자 효과를 켜서 양식 주위에 미묘한 음영을 제공하여 주변 콘텐츠와 구분할 수 있습니다. 그림자 설정은 양식의 모바일 및 데스크톱 버전 모두에 영향을 줍니다.