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

개요

양식을 복제하지 않고도 데스크톱과 모바일에 맞게 Klaviyo 양식을 조정할 수 있어 더 빠르게 게시하고 모바일 방문자의 경험을 개선할 수 있어요.

모바일 최적화를 사용하면 모바일 보기와 데스크톱 보기를 나란히 편집해 기기별 경험을 디자인할 수 있으며, 블록 변경 사항을 기기 간에 동기화할지 또는 기기별로 유지할지도 선택할 수 있어요.

시작하기 전에 알아야 할 것

• 일부 블록 유형은 기기 간 연결 해제를 지원하지 않아요. 예외에는 다음이 포함돼요: 고지, Spin to win, 이미지(별도로 처리됨), 전화번호(다단계 동의).

사용 방법

듀얼 기기 미리보기 토글

데스크톱과 모바일에서 양식 미리보기를 나란히 확인해, 편집 내용이 기기 전반에 실시간으로 어떻게 적용되는지 확인해 보세요. 이를 통해 오가며 전환하는 작업을 줄이고, 모바일 디자인 품질을 더 빠르게 개선할 수 있어요.

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

기본적으로 데스크톱과 모바일의 동일한 블록은 연결되어 있어요. 한 보기에서 변경한 내용이 다른 보기에도 그대로 적용돼요. 양식을 복제하지 않고도 모바일 전용 또는 데스크톱 전용으로 수정하려면 블록 연결을 해제하도록 선택할 수 있어요.

캔버스 내 연결 해제 버튼을 클릭하거나 사이드 패널 연결 해제 버튼을 클릭해 선택한 블록을 연결 해제/재연결할 수 있어요.

블록이 연결 해제되면:

• 편집 내용은 현재 기기 보기(뷰)에만 적용되며, 다른 기기의 블록은 변경되지 않아요.
• 연결되지 않은 블록을 복제하면 현재 기기 보기에서만 복제본이 생성돼요(연결된 블록을 복제하면 두 기기에 모두 복제돼요).

블록 다시 연결하기:

• 다시 연결하면 기기 전반에 걸쳐 새로운 페어링된 블록이 다시 생성돼요. 대응 블록이 삭제된 경우, 다시 연결하면 다른 기기용으로 해당 블록이 생성되어 두 보기 모두에 블록이 다시 표시돼요(그런 다음 필요하지 않은 중복 항목은 삭제할 수 있어요).

기기별 티저

측면 패널에서 티저를 연결 해제해 데스크톱과 모바일 각각에 고유한 티저 스타일을 적용할 수 있어요. 다시 연결하면 다시 연결한 티저의 표시 범위가 모든 기기로 재설정돼요.

단계별

이중 미리보기 열기

1. 편집기에서 양식을 여세요.
2. 데스크톱과 모바일을 나란히 보여 주는 토글을 통해 미리보기로 전환해 레이아웃과 간격을 한눈에 확인해 보세요.

기기별 편집을 위해 블록 연결 해제

1. 모바일에서 맞춤설정할 블록을 선택하세요.
2. 모바일에서의 편집이 데스크톱에 영향을 주지 않도록 연결 해제를 선택하세요.
3. 더 작은 화면에서도 읽기 쉽도록 모바일 레이아웃(예: 위치, 글꼴 크기, 간격)을 조정해 주세요.
4. 필요에 따라 다른 블록에도 동일하게 반복하세요.

공유 동작을 다시 사용하려면 다시 연결해 주세요.

1. 블록을 선택한 다음 다시 연결을 선택하세요.
2. 다른 기기에 해당 항목이 없으면 편집기에서 자동으로 생성해요.
3. 중복 블록을 제거하세요.

기기별로 티저 설정(선택 사항)

1. 티저 설정을 열고 연결 해제를 선택하세요.
2. 데스크톱과 모바일에서 티저 콘텐츠 또는 표시 여부를 각각 따로 구성하세요.
3. 하나의 티저를 두 기기에 모두 적용하려면 나중에 다시 연결하세요.

모바일 양식 모범 사례

• 작은 화면을 우선으로 고려하세요: 더 큰 글꼴과 간결한 문구를 사용하세요.
• 버튼과 입력을 쉽게 사용할 수 있도록 탭 대상과 세로 간격을 늘리세요.
• 특히 더 작은 기기에서는 집중도와 명확성을 위해 모바일에서 전체 화면을 고려해 보세요.
• 이미지는 목적에 맞게 사용하세요. 작은 화면에서 측면 이미지가 콘텐츠와 경쟁한다면 숨기거나 레이아웃을 단순화해 주세요.

알아두어야 할 제한 사항 및 동작 방식

• 연결된 블록은 기기 표시 설정이 데스크톱과 모바일 모두로 설정된 단일 블록이에요. 어느 보기에서든 편집하면 공유된 해당 블록 하나가 업데이트돼요.
• 블록 연결을 해제하면, 편집기가 내부적으로 두 번째 블록을 만들고 각 블록을 서로 다른 기기에 설정해요(하나는 데스크톱 전용, 다른 하나는 모바일 전용). 그 시점부터는 두 항목 간에 편집 내용이 동기화되지 않아요.
• 일부 블록 유형에서는 연결 해제가 지원되지 않아요. 해당 유형은 고지, Spin to win, 이미지(사이드 이미지 작업에서 별도로 처리됨), 전화번호(다단계 동의)예요.
• 복제 동작은 링크 상태에 따라 달라요. 연결된 블록의 복제본은 두 기기에 모두 표시되고, 연결되지 않은 블록의 복제본은 현재 기기 보기에서만 표시돼요.
• 다시 연결하면 선택한 블록이 기준이 되며 두 기기 모두에 표시되도록 설정돼요. 대응 항목이 없으면 편집기가 생성하고, 여러 버전이 있으면 유지하지 않으려는 추가 블록을 수동으로 제거해야 할 수 있어요.

결과

이제 별도의 양식 2개를 만들지 않고도 모바일 기기에 최적화된 가입 양식을 만들 수 있어야 해요.

문제 해결

• 블록에서 연결 해제/다시 연결이 표시되지 않아요:
  해당 블록 유형은 연결 해제를 지원하지 않을 수 있어요(예외 사항 참고).
• 모바일 변경이 데스크톱에 영향을 줬어요(또는 그 반대):
  기기별 버전을 편집하기 전에 블록 연결이 해제되어 있는지 확인해 주세요.
• 리링크 때문에 추가 블록이 생성되었어요:
  상대 항목이 누락된 경우라면 정상이에요. 다시 연결한 후 필요 없는 중복 항목은 삭제하세요.

다음 단계

• 가입 양식으로 시작하기.
• 기본: 양식 양식 디자인.
• 가입 양식 A/B 테스트 방법.