가입 양식에 사이드 이미지를 추가하는 방법

학습 내용

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

시작하기 전 안내 사항

사이드 이미지는 양식 콘텐츠의 왼쪽 또는 오른쪽에 표시됩니다. 양식에 이미지를 사용할 때는 몇 가지 유의해야 할 사항이 있습니다:

• 선택할 수 있는 이미지 형식의 종류는 다양합니다. JPEG는 컬러풀한 이미지를 위해 품질과 크기의 균형을 잘 맞추는 반면, PNG는 투명한 이미지나 로고를 선명하게 유지할 수 있습니다. 
• 최상의 결과를 얻으려면 적당한 화질의 이미지를 사용하세요. 
  
  • 품질과 로딩 시간의 균형을 맞추려면 전체 너비 이미지의 경우 이미지 너비는 600~1000px, 높이는 2000px 미만으로 유지하세요. 전체 너비보다 작은 이미지는 600px보다 작을 수 있습니다.
• 웹에서 보는 모든 이미지와 마찬가지로 파일 크기가 클수록 로드 시간이 느려집니다.
  • 사이드 이미지는 50~100KB, 배경 이미지는 200KB 미만의 파일 크기를 목표로 하면 사이트 속도 저하 없이 고품질의 이미지를 만들 수 있습니다.
• 모든 사이트 방문자가 양식에 액세스할 수 있도록 이미지에 대체 텍스트를 추가합니다. 

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

양식에 사이드 이미지 추가

가입 양식 콘텐츠의 양쪽에 이미지를 추가하려면 다음과 같이 하세요:

1. 가입 양식 탭으로 이동합니다.
2. 양식 옆의 점 3개 > 양식 편집을 클릭합니다.
   

   2021년 7월 이전에 양식을 만들었고 오른쪽 또는 왼쪽으로 정렬된 배경 이미지를 사이드 이미지로 사용하는 경우 사이드 이미지 기능을 사용하기 전에 해당 이미지를 제거하세요. 이렇게 하려면 스타일 섹션의 양식 배경 섹션으로 이동하여 배경 이미지를 제거합니다. 그런 다음 양식 스타일로 스크롤하여 오른쪽 또는 왼쪽의 여분의 패딩을 제거합니다. 

3. 스타일 섹션에서 측면 이미지 섹션으로 이동하여 이미지를 추가할 측면(왼쪽 또는 오른쪽)을 선택합니다.
   
4. 양식 미리 보기에서 빈 이미지 플레이스홀더를 클릭합니다.
5. 이미지 라이브러리 찾아보기를 클릭하여 Klaviyo 이미지 라이브러리에서 이미지를 추가하거나 이미지를 업로드하거나 URL에서 새 이미지 가져오기를 클릭합니다.
   

최상의 결과를 얻으려면 적당한 화질의 이미지를 사용하세요. 웹에서 보는 모든 이미지와 마찬가지로 파일 크기가 클수록 로드 시간이 느려집니다. 사이트 속도 저하 없이 이미지가 고품질로 보이도록 하려면 사이드 이미지의 파일 크기를 50~100KB로 설정하세요. 

측면 이미지 표시 옵션

양식 스타일

기본적으로 측면 이미지가 있는 양식은 측면 이미지 너비가 중간으로 설정되어 780px 너비로 설정됩니다. 너비 및 최소 높이 섹션을 사용하여 양식의 크기를 조정할 수 있습니다. 양식 내에서 측면 이미지가 차지하는 공간을 늘리거나 줄이려면 측면 이미지 섹션에서 크기를 조정합니다(예: 소형, 중형, 대형, 사용자 지정). 

모바일 기기의 화면 공간이 제한되어 있으므로 모바일 환경을 최적화하기 위해 기본적으로 모바일 기기에서는 양식의 측면 이미지가 숨겨집니다. 측면 이미지를 모든 디바이스에 표시하려면 미리보기에서 이미지를 클릭한 다음 스크롤하여 모든 디바이스에 표시를 선택합니다.

측면 이미지 스타일

사이드 이미지 설정의 스타일 섹션을 사용하여 이미지 표시 방식을 선택합니다. 

• 대체 텍스트
  웹사이트를 방문하는 모든 사람이 액세스할 수 있도록 이미지에 대체 텍스트를 추가합니다.
• 이미지 위치
  이미지가 사이드 이미지 영역에 어떻게 들어갈지 결정합니다. 다음 옵션 중에서 선택합니다: 
  • 포함
    전체 이미지가 섹션 내에 표시되며 잘리지 않습니다. 이미지가 이미지 영역에 정확히 맞지 않는 경우 섹션의 배경색이 가려진 부분을 채웁니다. 
  • 커버
    이미지가 측면 이미지 영역을 완전히 채웁니다. 이미지가 공간을 채울 수 있도록 이미지의 일부가 잘릴 수 있습니다. 
  • 사용자 지정
    이미지의 너비를 직접 선택합니다.
• 수평 정렬 및 수직 정렬
  이미지를 이미지 영역의 중앙에 정렬할지 또는 위, 아래, 왼쪽 또는 오른쪽에 정렬할지 선택할 수 있습니다.
• 배경 색상
  양식에 작은 이미지를 사용하는 경우 배경색을 설정하여 이미지 뒤의 빈 공간을 채우세요.

추가 리소스

• 접근성 높은 이메일 및 양식 구축을 위한 모범 사례 
• 가입 양식의 스타일 이해
• Canva 시작하기