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