가입 양식의 스타일 이해하기

학습 내용

Klaviyo의 가입 양식 빌더를 사용해 스타일 섹션에서 사용할 수 있는 디자인 설정을 편집하여 양식을 디자인하는 방법을 알아보세요. 스타일 설정은 모든 양식 단계와 성공 메시지를 포함해 가입 양식 전체에 적용돼요.

가입 양식 디자인은 단순하게 유지해 주세요. 명확하고, 복잡하지 않으며, 주요 목적이 1개여야 해요. 또한, 읽기 쉽고 따라 하기 쉽게 만들어야 해요.

시작하기 전에 알아야 할 것

가입 양식의 스타일을 지정하기 전에 가입 양식 탭 > 가입 양식 만들기로 이동해 주세요.양식 라이브러리에서 미리 만들어진 템플릿을 커스터마이즈하거나, 완전히 새로운 가입 양식 템플릿을 만들 수 있어요. 스타일을 지정하기 전에 포함할 콘텐츠 및 입력 블록을 원하는 대로 추가해 주세요.

모바일 전용 가입 양식을 만들고 있다면 기본 사항: 모바일 양식 디자인을 참고해 주세요.

양식 유형

스타일 섹션 상단에서 폼 유형(팝업, 전체 페이지, 플라이아웃 또는 임베드)을 선택할 수 있어요:

• 팝업은 브라우저 창 중앙에 표시됩니다. 팝업은 시선을 끄는 방식으로, 중요한 혜택이나 핵심 메시지를 전달할 때 사용하는 것이 가장 좋습니다. 팝업은 모든 양식 유형 중 전환율이 가장 높습니다.
• 플라이아웃은 선택한 어떤 방향에서든 브라우저 창 안으로 슬라이드되어 들어와요. 이는 팝업처럼 사용자가 어떤 작업을 완료하도록 유도하거나 다른 곳으로 리디렉션하는 데 사용할 수 있지만, 덜 방해되는 옵션이므로 브라우저에 방문한 사용자에 대한 정보를 수동적으로 수집하는 데 활용할 수 있어요.
• 임베디드 양식은 제공된 코드 조각을 사이트에 붙여넣는 위치에 표시돼요. 임베디드 양식은 가장 방해가 적은 가입 양식이며, 일반적으로 사이트 하단(푸터)에서 이메일 주소를 수집하는 데 사용돼요.
• 전체 페이지 양식은 브라우저 창 전체에 표시되어 쇼핑객의 시선을 온전히 사로잡아요. 이러한 양식은 쉽게 간과할 수 없기 때문에 전환율이 높지만, 쇼핑객이 양식을 닫으려면 양식과 상호 작용해야 하므로 더 방해가 될 수 있어요.
  • 구독자 목록을 늘리려면 전체 페이지 양식을 랜딩 페이지로 사용하는 것을 고려해 보세요.
• 배너는 웹페이지 상단 또는 하단에 표시되는 막대 형태로 나타나요. 팝업이나 전체 페이지 양식에 비해 방해가 적고, 지속적인 가시성과 웹사이트에 자연스럽게 통합되는 모바일 친화적 디자인을 제공해요. 배너가 페이지와 함께 스크롤되게 하거나 고정되게 설정하고, 콘텐츠 블록이나 입력란을 배너에 바로 추가하거나, 누군가 배너를 클릭하면 계정의 다른 양식이 열리도록 배너를 구성할 수 있어요.
  • 쇼핑객이 배너를 클릭할 때 다른 양식이 표시되도록 하려면 미리보기에서 버튼을 클릭하고 작업을 다른 양식 열기로 설정한 다음, 표시할 라이브 양식을 선택해 주세요. 임베드된 양식에서는 이 작업을 할 수 없다는 점을 참고해 주세요.

배경 이미지 및 측면 이미지

가입 양식에 맞춤 이미지를 추가하려면 측면 이미지 또는 배경 이미지를 사용해 주세요. 측면 이미지는 양식 콘텐츠의 왼쪽 또는 오른쪽에 표시되고, 배경 이미지는 양식 필드 뒤에 표시돼요.

폼에서 이미지를 사용할 때는 몇 가지 유의해야 할 점이 있어요:

• 선택할 수 있는 이미지 형식에는 여러 가지가 있어요. JPEG는 컬러 이미지에서 품질과 용량의 균형이 좋고, PNG는 투명 이미지나 로고를 선명하게 유지할 수 있어요.
  • 사이트 로딩 시간을 늦추지 않으면서도 고품질 이미지를 유지하려면 측면 이미지는 파일 크기를 50～100KB로, 배경 이미지는 200KB 미만으로 맞추는 것이 좋아요.
• 웹에서 보는 모든 이미지와 마찬가지로 파일 크기가 클수록 로딩 시간이 더 길어져요.
  • 72dpi의 전체 너비 이미지는 1MB보다 큰 경우가 많으며, 이미지 크기를 줄이면 품질이 낮아질 수 있어요. 이미지를 선택할 때는 이미지 품질과 로드 시간 간의 균형을 고려해 주세요.
• 최상의 결과를 위해 적절히 고품질의 이미지를 사용해 주세요.
  
  • 웹 전반에서 72dpi 해상도를 사용하는 것이 모범 사례예요. 이미지 품질과 로딩 속도 간 균형을 맞추려면 이미지 너비를 600~1,000px로 유지하고, 전체 너비 이미지의 경우 높이는 2,000px 미만으로 유지해 보세요. 이메일 전체 너비보다 작은 이미지는 600px보다 작아도 괜찮아요.
    
    • 전체 페이지 가입 양식을 사용하는 경우 더 큰 크기의 양식에 맞추려면 더 큰 고해상도 이미지(예: 최소 너비 1980px)가 필요해요. 하지만 이로 인해 로드 시간에 영향을 줄 수도 있다는 점을 유의해 주세요.
• 양식과 상호작용하는 모든 사용자의 접근성을 높이기 위해 이미지에 대체 텍스트를 추가하세요.

가입 양식은 브라우저에서 렌더링되기 때문에(ESP(이메일 서비스 공급업체)에서 렌더링되는 이메일과는 달리) 형식 지정 및 조정 방법에 대한 권장 사항이 더 적어요. 브라우저는 모든 유형과 크기의 이미지를 렌더링할 수 있으므로, 일반적으로 고해상도 이미지와 관리 가능한 파일 크기를 유지하고 각 기기 유형에서 표시를 테스트해 보세요.

사이드 이미지 추가

사이드 이미지를 추가하려면:

1. 스타일 섹션으로 이동한 다음 측면 이미지 설정으로 스크롤해 주세요.
2. 이미지를 표시할 위치에 따라 왼쪽 이미지 또는 오른쪽 이미지를 선택해 주세요.
   

3. 이미지를 선택하세요. 기본적으로 측면 이미지가 있는 양식은 너비가 780px이고 중간 크기로 설정되지만, 양식 크기나 이미지가 더 작거나 더 크게 표시되도록 하려는 경우 스타일 탭의 측면 이미지 섹션에서 조정할 수 있어요.

참고로, 사이드 이미지는 단계 수준에서 설정되므로 양식의 각 단계마다 별도의 이미지를 설정할 수 있어요. 사이드 이미지의 표시 옵션에 대해 자세히 알아보려면 가입 양식에 사이드 이미지를 추가하는 방법 문서를 확인해 주세요.

배경 이미지 추가

배경 이미지를 추가하려면:

1. Form Background 아래의 Background Image설정을 켜 주세요.
2. 찾아보기 버튼을 사용해 이미지를 업로드해 주세요.
3. 표시 설정을 원하는 대로 조정하세요.
   

양식에 측면 이미지나 배경 이미지를 추가했다면, 상단 메뉴 바에서 각 단계를 선택해 성공 메시지를 포함한 모든 양식 단계를 미리보기로 확인해 주세요. 기본적으로 양식의 높이는 각 단계의 콘텐츠와 양식 필드에 따라 조정되므로, 어떤 단계는 다른 단계보다 더 높거나 낮을 수 있어요. 양식에 이미지가 포함되어 있으면, 단계 높이가 더 작은 경우 일부 이미지 콘텐츠가 잘릴 수 있어요. 이를 방지하려면 스타일 섹션의 양식 유형에서 최소 높이를 설정해 주세요.

색상 및 간격 옵션

양식 스타일 및 입력란 스타일 설정을 사용하여 색상, 테두리 색상, 패딩 및 여백을 설정하세요. 이러한 설정은 특정 콘텐츠 블록의 스타일 설정 내에서(예: 텍스트 또는 색상) 상충되는 설정을 적용하지 않는 한, 양식의 모든 단계에 적용돼요.

글꼴 및 텍스트 스타일

입력란 텍스트 스타일에서 콘텐츠 블록(예: 이메일 또는 전화번호 필드)의 텍스트(예: 글꼴, 크기, 색상 등)를 편집하세요.

양식 미리보기에서 특정 콘텐츠 블록의 텍스트를 편집하려면 해당 블록을 클릭하고 표시되는 텍스트 옵션 메뉴를 사용해 주세요. Klaviyo의 양식 편집기는 UTF-8 인코딩 표준을 사용하므로 라틴 문자, 이모티콘, 더블 바이트 문자 등을 지원합니다.

가입 양식에서는 Klaviyo 편집기의 기본 웹 안전 글꼴, Klaviyo에서 호스팅하는 사용자 정의 글꼴 중 하나를 사용하거나, 자체 사용자 정의 글꼴을 추가할 수도 있어요. 가입 양식에서 사용자 정의 글꼴을 사용하는 방법을 알아보세요.

닫기 아이콘

양식의 닫기 아이콘(오른쪽 상단 모서리에 있는 X)의 크기, 색상, 스타일을 조정할 수 있어요. 양식 편집기에서 X 아이콘을 클릭한 다음, 왼쪽의 편집기에서 설정을 조정하세요. 양식 닫기 아이콘 스타일 지정에 대해 자세히 알아보세요.

전체 페이지 양식을 사용하도록 선택했다면 쇼퍼가 양식을 닫을 수 있는 유일한 방법은 닫기 아이콘을 클릭하는 거예요. 이는 주의를 끄는 데 도움이 되지만, 전체 페이지 양식으로 인한 방해에 쇼퍼가 불편함을 느끼지 않도록 닫기 아이콘이 명확하고 잘 보이도록 해 주세요.

사용자 정의 HTML 및 CSS

Klaviyo의 가입 양식 편집기는 현재 사용자 지정 HTML 또는 CSS 콘텐츠를 지원하지 않아요. Klaviyo 편집기를 사용해 양식을 맞춤 설정하는 팁과 영감을 얻으려면 커뮤니티 포럼으로 이동해 주세요.

결과

이제 가입 양식을 디자인하기 위해 양식 편집기에서 다양한 스타일 설정을 조정하는 방법을 알아보았어요.

다음 단계

가입 양식의 스타일을 지정하고 나면 양식을 볼 방문자와 표시 시기를 포함하여 양식의 동작을 설정하는 방법을 알아보세요. 양식 타겟팅 과 행동 설정 을 선택하는 방법을 안내합니다.

가입 양식을 게시한 후, 목록에 이중 옵트인이 켜져 있다면 옵트인 확인 이메일을 맞춤 설정하세요. 그런 다음 환영 이메일 시리즈를 구축 하여 양식의 혜택(예: 첫 주문 할인 또는 무료 배송)을 전달하고 새 구독자에게 브랜드를 소개해 주세요.