가입 양식의 스타일 이해

학습 내용

클라비요의 가입 양식 작성기를 사용하여 스타일 섹션에서 제공되는 디자인 설정을 편집하여 양식을 디자인하는 방법을 알아보세요. 스타일 설정은 양식의 모든 단계와 성공 메시지를 포함하여 가입 양식 전체에 적용됩니다. 

가입 양식의 디자인을 단순하게 유지하세요. 명확하고 깔끔하며 하나의 주된 목적이 있어야 합니다. 또한 쉽게 읽고 따라할 수 있도록 작성하는 것이 좋습니다. 

시작하기 전 안내 사항

가입 양식의 스타일을 지정하기 전에 가입 양식 탭( > 가입 양식 만들기 )으로 이동합니다.양식 라이브러리에서 미리 작성된 템플릿을 사용자 지정하거나 새로운 가입 양식 템플릿을 만들 수 있습니다. 스타일링하기 전에 포함하려는 콘텐츠 및 입력 블록을 추가합니다. 

모바일 전용 가입 양식을 구축하는 경우 기본 사항: 모바일 양식 디자인을 참조하세요.

양식 유형

스타일 섹션 상단에서 팝업, 전체 페이지, 플라이아웃, 임베드 등 양식 유형을 선택할 수 있습니다:

• 브라우저 창 가운데에 팝업이 나타납니다. 팝업은 주의를 끌기 때문에 중요한 오퍼나 중요한 메시지에 사용하는 것이 가장 좋습니다. 팝업은 모든 양식 유형 중 전환율이 가장 높습니다. 
• 플라이아웃은 사용자가 선택한 방향에서 브라우저의 창으로 슬라이드됩니다. 팝업과 마찬가지로 다른 사람에게 무언가를 수행하게 하거나 리디렉션하는 데 사용할 수 있지만, 덜 침입적인 옵션이므로 브라우저에 대한 정보를 수동적인 방식으로 수집하는 데 사용할 수 있습니다.
• 제공된 코드 스니펫을 사이트에 붙여넣으면 임베드된 양식이 나타납니다. 임베드된 양식은 가장 방해가 적은 가입 양식으로, 일반적으로 사이트 바닥글에서 이메일 주소를 수집하는 데 사용됩니다. 
• 전체 페이지 양식이 브라우저 창 전체에 표시되므로 쇼핑객의 시선을 사로잡을 수 있습니다. 이러한 양식은 쉽게 간과할 수 없기 때문에 전환율이 높지만, 쇼핑객이 양식을 닫으려면 양식과 상호 작용해야 하므로 더 방해가 됩니다.
  • 구독자 목록을 늘리려면 전체 페이지 양식을 랜딩 페이지로 사용하는 것을 고려하세요. 
• 배너는 웹페이지의 상단 또는 하단에 막대 모양으로 표시됩니다. 팝업이나 전체 페이지 양식에 비해 방해가 적고 지속적인 가시성과 웹사이트와 원활하게 통합되는 모바일 친화적인 디자인을 제공합니다. 배너를 페이지와 함께 스크롤하거나 고정된 상태로 유지하도록 설정하거나, 배너에 콘텐츠 블록이나 입력 필드를 직접 추가하거나, 누군가 배너를 클릭하면 계정과 다른 양식이 열리도록 배너를 구성할 수 있습니다. 
  • 구매자가 배너를 클릭할 때 다른 양식이 표시되도록 트리거하려면 미리 보기에서 버튼을 클릭하고 작업을 다른 양식 열기로 설정한 다음 표시할 라이브 양식을 선택합니다. 임베드된 양식에서는 이 기능을 사용할 수 없습니다.

배경 이미지 및 사이드 이미지 

가입 양식에 사용자 지정 이미지를 추가하려면 측면 이미지 또는 배경 이미지를 사용하세요. 사이드 이미지는 양식 콘텐츠의 왼쪽이나 오른쪽에 표시되고 배경 이미지는 양식 필드 뒤에 표시됩니다. 

양식에 이미지를 사용할 때는 몇 가지 유의해야 할 사항이 있습니다:

• 선택할 수 있는 이미지 형식의 종류는 다양합니다. JPEG는 컬러풀한 이미지를 위해 품질과 크기의 균형을 잘 맞추는 반면, PNG는 투명한 이미지나 로고를 선명하게 유지할 수 있습니다. 
  • 사이트 로딩 시간을 늦추지 않으면서 고품질 이미지를 확보하려면 사이드 이미지의 파일 크기는 50~100KB, 배경 이미지는 200KB 미만을 목표로 합니다.
• 웹에서 보는 모든 이미지와 마찬가지로 파일 크기가 클수록 로드 시간이 느려집니다.
  • 72dpi의 전체 너비 이미지는 1MB보다 큰 경우가 많으므로 이미지 크기를 줄이면 화질이 저하될 수 있습니다. 이미지를 선택할 때 이미지 품질과 로딩 시간 간의 절충점을 고려하세요.
• 최상의 결과를 얻으려면 적당한 화질의 이미지를 사용하세요. 
  
  • 웹에서는 72dpi 해상도를 사용하는 것이 가장 좋습니다. 이미지 품질과 로딩 속도의 균형을 맞추려면 이미지의 너비는 600~1000픽셀, 높이는 전체 너비 이미지의 경우 2000픽셀 미만으로 유지하세요. 이메일의 전체 너비보다 작은 이미지는 600px보다 작을 수 있습니다.
    
    • 전체 페이지 가입 양식을 사용하는 경우 더 큰 크기의 양식에 맞게 더 큰 고해상도 이미지(예: 최소 너비 1980px)가 필요하다는 점에 유의하세요. 하지만 이 경우에도 로드 시간에 영향을 줄 수 있다는 점에 유의하세요.
• 이미지에 대체 텍스트를 추가하여 양식과 상호 작용하는 모든 사용자의 접근성을 높일 수 있습니다. 

가입 양식은 ESP에서 렌더링되는 이메일과 달리 브라우저에서 렌더링되므로 서식을 지정하고 조정하는 방법에 대한 권장 사항이 적습니다. 브라우저는 모든 유형과 크기의 이미지를 렌더링할 수 있으므로 일반적으로 고해상도 이미지, 관리 가능한 파일 크기를 고수하고 각 유형의 기기에서 어떻게 보이는지 테스트하세요. 

측면 이미지 추가

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

1. 스타일 섹션으로 이동하여 사이드 이미지 설정으로 스크롤합니다.
2. 이미지를 표시할 위치에 따라 왼쪽 이미지 또는 오른쪽 이미지를 선택합니다.
   
3. 이미지를 선택합니다. 기본적으로 사이드 이미지가 있는 양식은 폭 780px, 중간 크기로 설정되어 있지만 양식 크기 또는 이미지를 더 작게 또는 더 크게 표시하려는 경우 스타일 탭의 사이드 이미지 섹션에서 조정할 수 있습니다.

사이드 이미지는 단계 수준에서 설정되므로 양식의 각 단계에 대해 별도의 이미지를 설정할 수 있습니다. 사이드 이미지 표시 옵션에 대한 자세한 내용은 가입 양식에 사이드 이미지를 추가하는 방법 문서를 참조하세요. 

배경 이미지 추가

배경 이미지를 추가하려면

1. 양식 배경 아래의 배경 이미지설정을 토글합니다.
2. 찾아보기 버튼을 사용하여 이미지를 업로드합니다.
3. 원하는 대로 디스플레이 설정을 조정합니다.
   

양식에 측면 또는 배경 이미지를 추가하는 경우 상단 메뉴 모음에서 각 단계를 선택하여 성공 메시지를 포함한 모든 양식 단계를 미리 볼 수 있습니다. 기본적으로 양식의 높이는 각 단계의 콘텐츠 및 양식 필드에 따라 조정되므로 일부 단계는 다른 단계보다 더 길거나 짧을 수 있습니다. 양식에 이미지가 포함된 경우 일부 이미지 콘텐츠는 작은 크기의 단계에서 잘릴 수 있습니다. 이를 방지하려면 스타일 섹션의 양식 유형에서 최소 높이를 설정하세요. 

색상 및 간격 옵션

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

글꼴 및 텍스트 스타일

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

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

가입 양식은 클라비요 에디터에 기본 제공되는 웹 안전 글꼴이나 클라비요에서 호스팅하는 사용자 정의 글꼴 중 하나를 사용하거나 사용자 정의 글꼴을 추가할 수 있습니다. 가입 양식에서 사용자 지정 글꼴을 사용하는 방법을 알아보세요. 

닫기 아이콘

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

전체 페이지 양식을 사용하도록 선택한 경우 쇼핑객이 양식을 닫을 수 있는 유일한 방법은 닫기 아이콘을 클릭하는 것입니다. 닫기 아이콘은 시선을 사로잡는 데 도움이 되지만, 전체 페이지 양식이 중단되어 쇼핑객이 좌절하지 않도록 명확하고 눈에 잘 띄는 아이콘을 사용해야 합니다.

사용자 지정 HTML 및 CSS

클라비요의 가입 양식 편집기는 현재 사용자 지정 HTML 또는 CSS 콘텐츠를 지원하지 않습니다. 클라비요 편집기를 사용하여 양식을 사용자 지정하는 방법에 대한 팁과 영감을 얻으려면 커뮤니티 포럼으로 이동하세요. 

다음 단계

가입 양식의 스타일을 지정한 후에는 양식을 표시해야 하는 방문자와 표시 시기를 포함하여 양식의 동작을 설정하는 방법을 알아보세요. 양식 타겟팅 및 행동 설정을 선택하는 방법 문서로 이동하세요.

가입 양식을 게시한 후에는 목록에 대해 이중 옵트인이 설정되어 있는 경우 옵트인 확인 이메일을 사용자 지정합니다. 그런 다음 환영 시리즈를 작성하여 양식의 혜택(예: 첫 주문 시 할인 또는 무료 배송)을 전달하고 신규 구독자에게 브랜드를 소개합니다.

추가 리소스

• 가입 양식으로 시작하기
• 가입 양식을 A/B 테스트하는 방법
• 코스: 전략적 가입 양식 작성