이메일 템플릿 또는 섹션에 배경 이미지를 추가하는 방법
학습 내용
배경 이미지 위에 텍스트, 이미지 및 기타 이메일 콘텐츠를 겹쳐 배치하는 방법을 알아보세요. 전체 이메일 또는 단일 섹션에 배경 이미지를 추가할 수 있어요. 이 기능을 사용하면 이미지를 다른 이미지 위에 겹쳐 놓거나, 이미지 위에 버튼이나 텍스트를 추가할 수 있어요.
배경 이미지 정보
전체 이메일 템플릿 뒤에 또는 템플릿의 특정 섹션 뒤에 배경 이미지를 추가할 수 있어요. 템플릿 배경은 템플릿의 스타일 탭에서 추가하며, 일반적으로 이메일의 전체 너비와 높이에 걸쳐 표시돼요.
하지만 섹션 배경은 이메일의 특정 영역에만 적용돼요. 역동적이고 시선을 사로잡는 이미지와 행동 촉구를 만들 수 있어요. 또한 이미지 1개 위에 여러 개의 행동 촉구를 포함할 수도 있어요(예: “신발 쇼핑” 및 “액세서리 쇼핑”). 이러한 섹션별 배경 이미지는 섹션의 스타일 탭을 통해 추가할 수 있어요.
텍스트와 다른 콘텐츠를 오버레이한 배경 이미지를 사용하면, 텍스트가 포함된 단일 이미지를 삽입하는 것보다 이메일의 접근성을 높일 수 있어요. 메시지에 텍스트는 거의 없고 이미지 콘텐츠가 대부분인 경우, 이미지를 표시하지 않는 스크린 리더 및 기타 접근성 기기를 사용하는 수신자는 대체 텍스트를 통해 메시지 콘텐츠를 이해하게 돼요.
또한 일반 텍스트 받은편지함을 사용하거나 기본적으로 이미지를 숨기도록 받은편지함을 설정한 수신자는 메시지를 쉽게 이해하기 어려울 수 있어요. 표준 텍스트 블록에 배경 이미지를 사용하면, 접근성 요구 사항이 있거나 대체 기기를 사용하는 수신자가 메시지를 더 쉽게 이해할 수 있어요.
배경 이미지 선택
섹션 또는 템플릿 배경으로 사용할 이미지를 선택할 때는 받은편지함에서 선명하고 전문적으로 보일 만큼 충분히 높은 해상도의 이미지를 선택해 주세요. 다만 불필요하게 큰 파일은 사용하지 않도록 해 주세요. 이메일 로딩 시간이 느려질 수 있어요. 일반적으로 섹션 배경으로는 1MB 이하의 이미지를 사용해 주세요.
섹션 배경 이미지 설정
사용할 이미지를 선택했으면 이메일 템플릿에 새 섹션을 추가해 주세요.
- 섹션의 스타일 탭에서 배경 섹션을 찾으세요.
- +를 클릭하여 이미지를 추가하세요.
- 이미지 라이브러리 찾아보기를 클릭한 다음 이미지를 업로드하세요.
- 배경 이미지를 스타일링했으면 섹션에 콘텐츠를 추가해 주세요. 섹션에 모든 블록 유형(예: 텍스트 블록, 버튼 블록, 표 블록)과 원하는 수의 블록을 추가할 수 있어요.
배경 이미지를 설정한 후 배경색도 선택해 주세요. 이 색상은 어떤 이유로든 배경 이미지를 로드할 수 없는 경우에 표시돼요.
- 섹션의 스타일 탭을 여세요.
- 섹션 색상을 켜세요.
- 선택한 이미지의 색상과 최대한 비슷한 색상을 선택해 주세요.
섹션 배경 스타일 옵션
이미지가 이메일의 전체 너비에 걸쳐 있는지 아니면 이메일 콘텐츠 내에 포함되어 있는지 선택하려면 표시 설정에서 콘텐츠 또는 섹션 중에서 선택합니다.
형식 섹션에서 다음 옵션 중 하나를 선택하세요:
- 원본 크기
이미지가 원본 크기로 표시되며 어떤 방식으로도 제한되지 않아요. - 맞춤
이미지가 섹션 영역 안에 완전히 맞게 표시되며, 섹션 영역과 정확히 같은 크기가 아니라면 아래에 있는 배경색이 노출될 수 있어요. - 채우기
이미지가 섹션 영역을 완전히 채우고 이미지의 일부가 잘릴 수 있습니다. - 타일
이미지가 반복되어 전체 섹션 영역을 채우며, 타일 크기를 전환하여 크기를 선택할 수 있어요.
템플릿 배경 이미지 설정하기
이메일 템플릿에 배경 이미지를 추가하려면:
- 템플릿의 스타일 탭으로 이동합니다.
- +를 클릭하여 이미지를 추가하세요.
- 이미지 라이브러리에서 이미지를 선택하거나 새 이미지를 업로드하세요.
이미지를 추가한 후에는 배치 방식과 가로 및 세로로 반복(또는 타일)할지 여부를 변경할 수 있어요.
템플릿의 배경 이미지로 설정된 이미지는 템플릿 영역의 전체 너비를 덮을 수 있어요. 이미지가 로드되는 동안 또는 수신자가 이메일에서 이미지를 비활성화한 경우 배경색이 표시될 수 있으므로, 이미지와 비슷한 색조로 템플릿 배경 색상을 설정하는 것이 좋을 수 있어요.
배경 이미지에 대한 받은편지함 지원
대부분의 받은 편지함은 배경 이미지를 지원하지만 표시되지 않을 수 있는 특정 상황이 있습니다. 이러한 시나리오에서는 배경색이 대신 표시됩니다.
다음 받은 편지함에서는 배경 이미지를 지원하지 않습니다:
- Windows용 Outlook
- 야후입니다! 메일(일부 지원)
- AOL(부분 지원)
또한 수신자의 인터넷 연결이 제한적이거나 느린 경우 배경 이미지가 느리게 로드되거나 전혀 로드되지 않아 대신 배경색이 표시될 수 있어요.
추가 자료
- 이메일 이미지 모범 사례 소개
Klaviyo 이메일에서 이미지를 사용할 때의 모범 사례(권장 크기, 이미지 추가 방법 포함)를 알아보세요.
- 다크 모드 이메일 디자인 모범 사례
사용자 중 일부가 화면을 어둡게 하기 위해 켜는 기기 설정인 다크 모드에 대해 알아보세요. 이 설정은 이메일이 표시되는 방식에 영향을 줘요. 다크 모드는 기기 수준에서 선택되는 최종 사용자 설정이며, Klaviyo는 각 기기에서 다크 모드가 구현되는 방식에 대해 직접적으로 제어할 수 없어요.
- Coding HTML email backgrounds