가입 양식에 측면 이미지 추가 방법

학습 내용

브랜드 디자인에 맞는 매력적인 가입 경험을 위해 가입 양식 왼쪽 또는 오른쪽에 고품질 이미지를 포함하는 방법을 알아보세요.

시작하기 전에 알아야 할 것

측면 이미지는 양식 콘텐츠의 왼쪽 또는 오른쪽에 표시돼요. 양식에서 이미지를 사용할 때는 몇 가지 유의할 점이 있어요:

• 선택할 수 있는 이미지 형식에는 여러 가지가 있어요. JPEG는 컬러 이미지에서 품질과 용량의 균형이 좋고, PNG는 투명 이미지나 로고를 선명하게 유지할 수 있어요.
• 최상의 결과를 위해 적절히 고품질의 이미지를 사용해 주세요.
  
  • 품질과 로드 시간을 균형 있게 맞추려면 전체 너비 이미지의 가로 폭은 600～1,000px, 세로 높이는 2,000px 미만으로 유지해 주세요. 전체 너비가 아닌 이미지는 600px보다 작아도 됩니다.
• 웹에서 보는 모든 이미지와 마찬가지로 파일 크기가 클수록 로딩 시간이 더 길어져요.
  • 사이트 속도를 늦추지 않으면서 이미지가 고품질로 보이도록, 측면 이미지의 파일 크기는 50~100KB, 배경 이미지의 파일 크기는 200KB 미만을 목표로 하세요.
• 모든 사이트 방문자가 양식에 액세스할 수 있도록 이미지에 대체 텍스트를 추가해 주세요.

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

양식에 사이드 이미지를 추가하세요

가입 양식 콘텐츠의 양쪽(왼쪽 또는 오른쪽)에 이미지를 추가하려면:

1. 가입 양식 탭으로 이동합니다.
2. 양식 옆에서 점 3개 > 양식 편집을 클릭해 주세요.
   

1. 스타일 섹션에서 측면 이미지 섹션으로 이동한 다음, 이미지를 추가할 측면(왼쪽 또는 오른쪽)을 선택하세요.
   

2. 양식 미리보기에서 비어 있는 이미지 자리표시자를 클릭하세요.
3. 이미지 라이브러리 찾아보기를 클릭해 Klaviyo 이미지 라이브러리에서 이미지를 추가하거나, 이미지를 업로드하거나, URL에서 새 이미지를 가져오세요.
   

최상의 결과를 위해 합리적으로 높은 품질의 이미지를 사용해 주세요. 웹에서 보는 모든 이미지와 마찬가지로 파일 크기가 클수록 로드 시간이 느려져요. 사이트 속도를 느리게 하지 않으면서도 고품질로 보이도록 사이드 이미지의 파일 크기는 50~100KB를 목표로 해 주세요.

측면 이미지 디스플레이 옵션

양식 스타일

기본적으로 측면 이미지가 있는 양식은 너비가 780px로 설정되며, 측면 이미지 너비는 Medium으로 설정돼요. Width 및 Minimum height 섹션을 사용해 양식의 크기를 조정할 수 있어요. 양식 내에서 측면 이미지가 차지하는 공간을 더 늘리거나 줄이고 싶다면 Side Image 섹션에서 크기를 조정하세요(예: small, medium, large, custom).

모바일 기기에서는 화면 공간이 제한적이므로 모바일 경험을 최적화하기 위해 기본적으로 양식의 측면 이미지가 숨겨져요. 모든 기기에서 사이드 이미지가 표시되도록 하려면 미리보기에서 이미지를 클릭한 다음 표시 대상으로 스크롤해 모든 기기를 선택해 주세요.

사이드 이미지 스타일

Side Image 설정의 Styles 섹션을 사용해 이미지가 표시되는 방식을 선택해 주세요.

• 대체 텍스트
  웹사이트를 방문하는 모든 사용자가 이용할 수 있도록 이미지에 대체 텍스트를 추가해 주세요.
• 이미지 위치
  이미지가 사이드 이미지 영역 내에 어떻게 맞춰질지 결정해요. 다음 옵션 중에서 선택하세요:
  • Contain
    전체 이미지가 섹션 안에 표시되며, 전혀 잘리지 않아요. 이미지가 이미지 영역에 정확히 맞지 않으면, 섹션의 배경색이 덮이지 않은 영역을 채워요.
  • 표지
    이미지가 측면 이미지 영역을 완전히 채워요. 이미지가 공간을 채우도록 이미지의 일부가 잘릴 수 있어요.
  • 사용자 지정
    이미지 너비를 직접 선택하세요.
• 수평 정렬 및 수직 정렬
  이미지가 이미지 영역의 가운데에 오도록 할지, 위/아래/왼쪽/오른쪽으로 정렬할지 선택할 수 있어요.
• 배경색
  폼에서 더 작은 이미지를 사용하는 경우, 뒤에 남는 빈 공간을 채우도록 배경색을 설정해 주세요.