에피소드 4 전달: 이메일의 배경 이미지 이해하기

전달의 이 에피소드에서는 이메일 디자이너를 위한 필수 기술인 겸손하지만 강력한 배경 이미지를 살펴보겠습니다. 배경 이미지가 중요한 이유, 다양한 기술을 사용하여 배경 이미지를 코딩하는 방법, 다양한 방법을 서로 다른 이메일 클라이언트에서 어떻게 비교하는지 알아보세요. 이 에피소드는 최근 업데이트된 이메일의 배경 이미지에 대한 궁극적인 가이드의 동반자입니다. 팁, 트릭 및 코드를 확인하십시오.

향후 에피소드를 듣고 Twitter에서 #DeliveringPodcast 해시태그를 사용하여 대화에 참여하려면 iTunes 또는 Spotify에서 배달을 구독해야 합니다.

에피소드 대본

이메일 캠페인에 흥미로운 시각 자료를 추가하는 방법에는 여러 가지가 있습니다.

CSS는 다양한 스타일 옵션을 허용하지만 때로는 좋은 이미지만 있으면 됩니다. 그러나 이메일에서 이미지를 사용하는 가장 좋은 방법은 무엇입니까? 전달의 이 에피소드에서는 이메일 디자이너를 위한 필수 기술인 겸손하지만 강력한 배경 이미지를 살펴보겠습니다.

저는 Jason Rodriguez입니다. 이메일 마케팅과 전 세계에서 차지하는 위치에 대한 팟캐스트인 Delivering에 오신 것을 환영합니다. 이메일 마케팅 담당자를 위한 업계 최고의 플랫폼인 Litmus가 제공합니다. Litmus를 사용하여 더 나은 이메일 마케팅 캠페인을 생성, 검토, 테스트 및 추적하는 600,000명 이상의 이메일 전문가와 함께하십시오. Litmus.com에서 자세히 알아보고 7일 무료 평가판을 받으십시오.

이미지는 이메일 마케팅 캠페인의 필수 요소입니다. 제품 사진, 귀여운 일러스트레이션, 로고, 아이콘 및 경우에 따라 전체 이메일 자체에 사용됩니다. 특히 소매 업계에서 마케터는 Photoshop과 같은 도구에서 캠페인을 완전히 디자인하고 해당 이미지를 잘라서 구독자에게 보내기 전에 HTML로 덤핑하는 경향이 있습니다. 헤드라인, 문구, 클릭 유도문안 등 모든 정보가 이미지 안에 존재합니다.

브랜드 지침을 준수하고 이메일을 빠르게 생성하는 좋은 방법이지만 이러한 방식으로 이미지를 사용하면 몇 가지 큰 단점이 있습니다.

첫 번째는 많은 이메일 클라이언트가 기본적으로 이미지를 비활성화한다는 것입니다. 이메일의 이미지와 모든 콘텐츠는 말 그대로 이메일 클라이언트에 의해 언로드된 상태로 남겨져 많은 구독자에게 깨진 것처럼 보이는 빈 캠페인이 생성됩니다.

두 번째는 스크린 리더 소프트웨어와 같은 보조 기술을 사용하는 가입자는 이메일의 내용을 경험할 수 없다는 것입니다.

두 경우 모두 이메일 캠페인에 투자한 모든 사본, 거래 및 가치가 본질적으로 낭비되었습니다. 더 나은 솔루션이 있어야 겠죠?

배경 이미지를 입력합니다.

배경 이미지는 이메일의 다른 이미지와 마찬가지로 단순한 이미지입니다. 서버에 업로드되고 코드로 연결된 파일입니다. 차이점은 배경 이미지가 HTML 이미지 태그가 아니라 다른 HTML 요소의 속성 또는 CSS로 적용된다는 것입니다.

각각 장단점이 있는 배경 이미지를 코딩하는 네 가지 방법이 있습니다.

첫 번째이자 보다 전통적인 방법은 배경 속성을 테이블 셀에 적용하는 것입니다. 속성 값은 이미지를 가리키는 URL일 뿐입니다. 이 방법은 이메일 클라이언트에서 상당히 잘 지원되기 때문에 좋습니다. 그러나 주요 단점은 매우 유연하지 않다는 것입니다. 배경 이미지의 크기를 제어할 수 없으며 이미지는 기본적으로 요소 전체에서 반복됩니다.

CSS를 사용하여 배경 이미지를 로드할 수도 있습니다. 다음 두 기술은 동일한 방법을 사용하지만 다르게 적용됩니다.

CSS에는 background-image, background-repeat, background-position, background-size 및 background-color와 같은 많은 배경 속성이 있습니다. 매우 유용한 배경 속기 속성도 있습니다.

이러한 속성을 사용하여 이미지에 대한 URL을 포함하고, 해당 이미지의 위치와 반복 여부를 제어하고, 이미지가 로드되지 않을 때의 대체 색상을 포함할 수 있습니다.

CSS 배경을 사용하는 첫 번째 방법은 해당 속성을 이메일 헤드의 스타일 블록에 포함하는 것입니다. 테이블 셀 또는 div와 같은 HTML 요소를 대상으로 지정하고 거기에 있습니다. 이 방법은 코딩, 읽기 및 유지 관리가 쉽지만 포함된 스타일이 모든 이메일 클라이언트에서 지원되는 것은 아닙니다.

보다 강력한 방법은 이러한 속성을 HTML 요소에 인라인으로 포함하는 것입니다. 여러 요소에서 배경 이미지를 사용하는 경우 지저분해질 수 있지만 이메일 괴짜이고 인라인 이미지를 사용하는 데 익숙하기 때문에 여전히 완벽하게 관리할 수 있습니다.

이메일에 배경 이미지를 포함하는 마지막 방법은 "방탄 배경"을 사용하는 것입니다. 방탄 배경은 코드에 VML(또는 벡터 마크업 언어)을 포함하여 HTML 속성 메서드를 기반으로 합니다. VML은 Outlook과 같은 Office 제품에서 사용되는 독점 Microsoft 언어입니다. VML에서 배경 이미지를 적용하면 Microsoft Outlook에서 작동하지만 이전에 논의된 다른 방법에서는 반드시 그렇지는 않습니다.

VML 사용의 주요 단점은 접근성이 좋지 않거나 잘 문서화되어 있지 않으며 솔직히 이해하기 어려운 많은 코드가 추가된다는 것입니다. 더 쉽게 만들기 위해 Campaign Monitor의 친구들은 방탄 배경을 생성하기 위한 놀라운 도구를 실제로 만들었습니다. background.cm에서 편리하게 찾을 수 있습니다.

어떤 방법을 선택하든지 간에 기존에 코딩된 이미지보다 이메일에서 배경 이미지를 사용하면 놀라운 이점이 있습니다.

주요 이점은 접근성입니다. 배경 이미지를 사용하면 모든 콘텐츠에 이미지 대신 라이브 HTML 텍스트를 사용할 수 있습니다. 텍스트는 이미지처럼 차단되지 않으므로 이미지가 꺼져 있어도 구독자가 메시지를 읽을 수 있습니다. 또한 스크린 리더가 필요한 사용자의 경우 기존 이미지와 달리 콘텐츠를 읽을 수 있습니다.

CSS를 사용하여 해당 HTML 콘텐츠의 스타일을 지정하여 Photoshop에서 나오는 이미지처럼 잘 디자인된 것처럼 보이도록 할 수 있으며 거기에 CTA 버튼도 포함할 수 있습니다.

그런 다음 배경 이미지는 단순한 그라디언트, 멋진 제품 사진 또는 반복 패턴 등 추가 시각적 스타일을 포함하는 데 사용됩니다. 그들은 아름답고 유용한 이메일을 만들기 위해 HTML 텍스트와 함께 작동합니다.

더욱 멋진 것은 애니메이션 GIF를 배경 이미지로 포함하고, 화면 크기나 장치에 따라 이미지를 교체하거나, 몇 년 전 Litmus Live 발표 이메일에서 했던 것처럼 비디오 배경을 코딩하는 것과 같은 고급 작업을 수행할 수 있다는 것입니다.

배경 이미지를 최대한 활용하기 위해 많은 노력이 필요합니다. 우리는 최근 Litmus 블로그에서 확인할 가치가 있는 이메일의 배경 이미지에 대한 궁극적인 가이드에 대한 업데이트를 게시했습니다. 배경 이미지를 제공하는 코드를 보고 자신의 캠페인을 업데이트하기 위한 영감을 얻을 수 있는 좋은 방법입니다. 링크에 대한 오늘의 쇼 노트로 이동하십시오.

또한, Delivering on iTunes 또는 Spotify를 구독하여 더 나은 HTML 이메일을 구축하기 위한 더 많은 기술을 탐구하는 향후 에피소드를 들으십시오.