모바일용 팝업 및 플라이아웃 양식 최적화 방법
학습 내용
Klaviyo의 모범 사례를 고려하여 모바일 가입 양식을 디자인하여 팝업 및 플라이아웃 양식이 모바일 방문자에게 최적화될 수 있도록 하는 방법을 알아보세요.
온라인 쇼핑객이 모바일 기기로 신규 스토어를 찾고, 제품을 둘러보고, 구매하는 경우가 점점 늘어나고 있어요. 따라서 웹사이트가 데스크톱에서만큼 모바일에서도 보기 좋게 표시되도록 하는 것이 그 어느 때보다 중요하며, 여기에는 가입 양식도 포함됩니다.
시작하기 전에 알아야 할 것
Klaviyo에서는 모든 기기에서 표시되는 양식(즉, 데스크톱과 모바일 기기에서 보이는 양식)을 만들거나, 모바일 기기에서만 표시되는 모바일 전용 양식을 만들 수 있어요.
양식이 모든 기기에 표시되도록 설정되어 있으면 Klaviyo가 글꼴 크기와 이미지 같은 일부 요소를 자동으로 최적화하여 모바일 기기에서 쇼핑하는 고객에게 더 보기 좋게 표시되도록 해요. 하지만 이 가이드에서는 추가로 염두에 두면 좋은 모범 사례도 다룰게요. 양식을 만드는 동안 양식 빌더 오른쪽 상단의 보기 선택기를 사용해 데스크톱 보기와 모바일 보기 사이를 전환할 수 있어요. 데스크톱 아이콘은 데스크톱에서 쇼핑하는 고객에게 양식이 어떻게 보이는지 보여주고, 모바일 아이콘은 모바일에서 쇼핑하는 고객에게 보이는 화면을 보여줘요.
이 가이드에서는 모바일 기기에 표시되는 팝업 및 플라이아웃 양식을 만들기 위한 모범 사례를 다룹니다. 이 내용은 양식이 모든 기기에 표시되든 모바일에만 표시되든 관계없이 도움이 됩니다. 모바일 기기에서의 가입 양식에 대해 더 자세히 알아보려면 기본: 모바일 양식 디자인으로 이동하세요.
일반 양식 모범 사례
데스크톱 양식에 대한 많은 모범 사례는 모바일 기기에도 동일하게 적용돼요:
- 짧고 간단하게 유지하세요. 필드가 많다면 다단계 양식을 고려해 보세요.
- 양식에서 SMS 동의를 수집하는 경우, 첫 번째 단계에서 이메일을 수집한 다음 두 번째 단계에서 스마트 옵트인을 통해 SMS를 수집하면 모바일 기기 방문자가 가장 쉽게 구독할 수 있어요.
- 닫기 쉽도록 설정해 방문자가 불편을 느끼고 사이트를 떠나지 않게 해 주세요.
- 폼 티저를 사용하면 쇼핑객이 원할 때 폼을 닫았다가 다시 열 수 있어요.
- 폼이 모든 기기에 표시되도록 설정되어(즉, 데스크톱 및 모바일 쇼핑객 모두에게 표시됨) 사이드 이미지가 포함된 경우, 사이드 이미지는 모바일 에만 표시되도록 두세요.
- 각 입력란에 대해 한 줄에 들어갈 정도로 간결한 라벨(예: 이메일 주소, 전화번호 등)을 사용하면 쇼핑객이 어떤 정보를 요청하는지 쉽게 확인할 수 있어요.
SEO 및 모바일 양식
특히 홈페이지나 기타 랜딩 페이지에서 양식을 만들 때는 모바일 SEO 모범 사례를 고려하는 것이 중요해요. 일반적인 자연 검색 랜딩 페이지에 표시되는 양식은 사이트 콘텐츠를 가리거나 방문자 경험을 방해하면 안 돼요. 그렇지 않으면 검색 알고리즘에 의해 페이지가 불이익을 받을 수 있어요. 방해가 되는 인터스티셜과 SEO에 대해 자세히 알아보세요.
이를 방지하려면:
- 타겟팅 및 행동 탭에서 양식의 타이밍을 규칙 기반으로 설정한 다음, 더 긴 시간 지연을 설정해 주세요(예: 방문자가 페이지를 나가려고 할 때).
- 양식 표시 전 에 표시되는 티저 를 추가하세요.
팝업 최적화
팝업 양식은 쇼핑객의 화면 중앙에 표시되며, 페이지의 대부분을 가리는 경우가 많고 양식이 열려 있는 동안 페이지의 다른 요소와 상호작용하는 것을 방해합니다. 이렇게 하면 팝업이 더 방해가 되지만, 전환율도 더 높아져요.
모바일 기기에서 팝업이 작동하는 방식을 최적화하려면:
- 모바일 쇼핑객이 폼 영역 밖을 클릭할 때 폼이 닫히지 않도록 비활성화해 실수로 폼이 닫히는 일을 줄이세요.
- 타겟팅 및 행동으로 이동하세요.
- 디바이스까지 아래로 스크롤합니다.
- 양식 밖을 클릭하여 닫기에서 모바일 스위치를 비활성화하세요.
- 양식의 닫기 아이콘(X 버튼)이 모바일 기기처럼 화면이 작은 경우에도 충분히 크게 표시되도록 해 주세요.
- 양식 미리보기에서 닫기 아이콘을 클릭해 크기를 조정하세요.
- 폼이 쉽게 찾을 수 있고 클릭하기 쉬운지 확인할 수 있도록, 본인 모바일 기기에서 폼이 어떻게 보이는지 테스트해 보세요.
예를 들어, 왼쪽의 폼에 있는 닫기 아이콘은 모바일 기기에서 클릭하기 어려울 수 있어요. 하지만 오른쪽의 폼에 있는 닫기 아이콘은 더 크고 찾기 쉬워요.
- 오버레이 색상, 드롭 섀도 또는 둘 다를 사용해 팝업을 사이트의 나머지 부분과 시각적으로 구분해 주세요.
- 스타일 탭으로 이동합니다.
- 양식 배경 섹션에서 오버레이 색상을 설정해 반투명 오버레이를 사용하면 양식에 시선을 집중시키고 양식이 열려 있는 동안 사이트 콘텐츠를 흐리게 표시할 수 있어요.
- 양식이 주변 콘텐츠와 구분되도록 양식 주변에 은은한 음영을 추가하려면 Drop Shadow를 구성하세요.
- 모바일 기기에서 팝업 양식처럼 보이고 화면 가장자리부터 가장자리까지 꽉 차지 않도록 양식의 여백을 조정하세요.
- 스타일 탭에서 양식 스타일까지 아래로 스크롤하세요.
- 미리보기에서 보이는 모양에 따라 왼쪽/오른쪽 여백을 늘리세요.
이 설정은 양식의 데스크톱 및 모바일 버전 모두에 반영돼요.
플라이아웃 최적화
플라이아웃 양식이 표시되면 모바일 오버레이가 켜져 있지 않은 한 모바일 방문자는 양식 뒤에 있는 사이트와 계속 상호작용할 수 있어요. 양식을 닫거나, 작성하거나, 열어 둔 채로 탐색을 계속할 수 있어요. 일반적으로 이 때문에 플라이아웃은 팝업보다 덜 방해가 돼요.
모바일 기기에 맞게 플라이아웃 양식을 최적화하려면:
- 화면 상단 또는 하단에서 폼이 플라이아웃되도록 설정하세요.
- 스타일 섹션으로 이동해 주세요.
- 모바일 플라이아웃 위치를 선택한 다음, 하단에 도킹 또는 상단에 도킹을 선택해 주세요.
이 설정을 선택하면 양식이 화면 상단 또는 하단에서 플라이아웃되어 화면의 일부를 가장자리부터 가장자리까지 덮어요.
- 모바일 오버레이, 드롭 섀도, 또는 둘 다를 사용해 플라이아웃 양식을 사이트의 나머지 부분과 시각적으로 구분해 보세요.
- 스타일 탭으로 이동합니다.
- 양식 배경 설정으로 스크롤해 주세요.
- 모바일 쇼핑객이 폼을 작성하거나 닫기 전까지 사이트의 다른 요소를 클릭할 수 없도록 모바일 오버레이를 켜세요. 참고: 데스크톱에서 플라이아웃 폼을 볼 때는 모바일 오버레이가 표시되지 않아요.
- 주변 콘텐츠와 구분되도록 양식 주변에 은은한 음영을 더하려면 그림자 효과를 켜세요. 그림자 효과 설정은 양식의 모바일 버전과 데스크톱 버전 모두에 적용돼요.
다음 단계
모바일 기기에 맞게 양식을 최적화한 후에는 양식 디자인에 대한 A/B 테스트를 시도하여 사이트 방문자의 선호도를 더 잘 파악해 보세요.