Klaviyo 가입 양식에서 모바일 최적화 사용

개요

양식을 중복하지 않고 데스크톱과 모바일에 맞게 Klaviyo 양식을 맞춤 설정하여 더 빠르게 게시하고 모바일 방문자의 경험을 개선할 수 있습니다.

모바일 최적화를 사용하면 모바일과 데스크톱 보기를 나란히 편집하고 블록에 대한 변경 사항을 여러 디바이스에 동기화할지 아니면 디바이스별로 유지할지 선택하여 디바이스별 경험을 디자인할 수 있습니다.

시작하기 전에 알아야 할 것

• 일부 블록 유형은 디바이스 간 연결 해제를 지원하지 않습니다. 예외는 다음과 같습니다: 공개, 스핀 투 윈, 이미지(별도 처리), 전화번호(다단계 동의).

   

사용 방법

이중 장치 미리 보기 토글

데스크톱과 모바일에서 양식을 나란히 미리 보고 편집 내용이 여러 기기에서 실시간으로 어떻게 적용되는지 확인하세요. 이렇게 하면 앞뒤로 전환하는 횟수가 줄어들고 모바일 디자인 품질이 향상됩니다.

연결된 블록과 연결되지 않은 블록

기본적으로 데스크톱과 모바일의 동일한 블록은 연결되어 있어 한 보기의 변경 사항이 다른 보기로 이어집니다. 블록 연결을 해제하여 양식을 복제하지 않고 모바일 또는 데스크톱 전용으로 편집할 수 있습니다.

캔버스 내 링크 해제 버튼을 클릭하거나 사이드 패널의 링크 해제 버튼을 클릭하여 선택한 블록의 링크를 해제/재연결할 수 있습니다. 

블록이 연결 해제된 경우:

• 편집 내용은 현재 디바이스 보기에만 적용되며 다른 디바이스의 블록은 변경되지 않습니다.
• 연결되지 않은 블록을 복제하면 현재 디바이스 보기에만 복제본이 생성됩니다(연결된 블록을 복제하면 두 디바이스에 모두 복제됩니다).

블록 재연결:

• 다시 연결하면 여러 디바이스에서 페어링된 새 블록이 다시 생성됩니다. 상대 블록이 삭제된 경우 다시 연결하면 다른 디바이스에도 블록이 생성되므로 두 뷰 모두 해당 블록을 다시 갖게 됩니다(필요하지 않은 중복 블록은 삭제할 수 있습니다).

디바이스별 티저

사이드 패널을 통해 티저 연결을 해제하여 데스크톱과 모바일에서 각각 고유한 티저 스타일을 적용할 수 있습니다. 다시 연결하면 다시 연결된 티저의 모든 디바이스에 대한 가시성이 다시 초기화됩니다.

단계별

이중 미리보기 열기

1. 편집기에서 양식을 엽니다.
2. 데스크톱과 모바일을 나란히 표시하는 토글을 통해 미리보기로 전환하여 레이아웃과 간격을 한 눈에 평가할 수 있습니다.

디바이스별 편집을 위해 블록 연결 해제하기

1. 모바일에서 사용자 지정하려는 블록을 선택합니다.
2. 연결 해제를 선택하면 모바일 편집 내용이 데스크톱에 영향을 미치지 않습니다.
3. 작은 화면에서 가독성을 높이기 위해 모바일 레이아웃(예: 위치, 글꼴 크기, 간격)을 조정합니다.
4. 필요에 따라 다른 블록에 대해서도 반복합니다.

공유 동작을 다시 원할 때 다시 연결

1. 블록을 선택하고 재연결을 선택합니다.
2. 다른 장치에 대응하는 항목이 없는 경우 편집기에서 자동으로 생성합니다.
3. 중복된 블록을 제거합니다.

디바이스별 티저 설정(선택 사항)

1. 티저 설정을 열고 링크 해제를 선택합니다.
2. 데스크톱과 모바일용 티저 콘텐츠 또는 가시성을 독립적으로 구성할 수 있습니다.

3. 하나의 티저를 두 디바이스에 모두 적용하려면 나중에 다시 연결하세요.

    

모바일 양식 모범 사례

• 작은 화면에 우선순위를 두세요: 더 큰 글꼴, 간결한 카피를 사용하세요.

• 탭 대상과 세로 간격을 늘려 버튼과 입력을 쉽게 사용할 수 있도록 합니다.

• 특히 소형 디바이스에서는 집중력과 선명도를 위해 모바일에서 전체 화면을 고려하세요.

• 이미지의 목적성을 유지하세요. 사이드 이미지가 작은 화면의 콘텐츠와 경쟁하는 경우 이미지를 숨기거나 레이아웃을 단순화하세요.

   

알아야 할 제한 사항 및 행동

• 연결된 블록은 데스크톱과 모바일 모두에 디바이스 가시성이 설정된 단일 블록입니다. 두 보기 중 하나에서 편집하면 해당 공유 블록이 업데이트됩니다.

• 블록의 링크를 해제하면 편집기는 내부적으로 두 번째 블록을 생성하고 각 블록을 다른 디바이스(데스크톱 전용, 모바일 전용)로 설정합니다. 그 시점부터는 편집 내용이 서로 동기화되지 않습니다.

• 일부 블록 유형에서는 연결 해제가 지원되지 않습니다: 공개, 스핀 투 윈, 이미지(사이드 이미지 작업에서 별도로 처리됨), 전화번호(다단계 동의).

• 복제는 링크 상태에 따라 다르게 작동합니다. 연결된 블록의 복제는 두 장치에 모두 나타나고, 연결되지 않은 블록의 복제는 현재 장치 보기에만 나타납니다.

• 다시 연결하면 선택한 블록이 진실의 출처가 되어 두 디바이스 모두에 표시되도록 설정됩니다. 대응하는 항목이 없는 경우 편집기에서 생성하며, 여러 버전이 있는 경우 유지하지 않으려는 여분의 블록을 수동으로 제거해야 할 수도 있습니다.

   

결과

이제 두 개의 양식을 따로 만들지 않고도 모바일 기기에 최적화된 가입 양식을 만들 수 있습니다. 

문제 해결

• 블록에 링크 해제/재연결 기능이 표시되지 않습니다:
  블록 유형이 링크 해제를 지원하지 않을 수 있습니다(예외 사항 참조).

• 모바일 변경 사항이 데스크톱에 영향을 미쳤습니다(또는 그 반대의 경우):
  디바이스별 버전을 수정하기 전에 블록의 연결이 해제되어 있는지 확인하세요.

• 리링크가 추가 블록을 생성했습니다:
  상대방이 누락된 경우 예상되는 현상입니다. 다시 연결한 후 필요 없는 중복 항목을 삭제합니다.

   

다음 단계

• 가입 양식으로 시작하기.

• 기본 사항: 양식 디자인.

• 가입 양식을 A/B 테스트하는 방법.