이메일 배경 이미지로 모든 구독자를 쉽게 놀라게 하는 방법(+ 코드 사용)

게시 됨: 2021-07-23

이메일은 여기에 이미지가 있고 거기에 텍스트 블록이 있으면 약간 예상할 수 있습니다... 구독자 경험을 활성화하는 한 가지 방법은? 배경 이미지. 그들은 예상치 못한 일이며 디자인에 또 다른 차원을 추가하여 이메일을 "팝"하게 만듭니다. 잘하면 이메일이 백만 달러처럼 느껴지지만 매우 쉽게 풀릴 수 있습니다.

계속 읽으십시오:

배경 이미지의 장점
영감을 주는 이메일 예
디자인 고려 사항
배경 이미지를 코딩하는 방법

배경 이미지란 무엇입니까? (그리고 요점은 무엇입니까?)

배경 이미지는 요소의 배경이나 요소 뒤에 적용되는 이미지입니다. 영웅 이미지처럼 이메일의 주요 초점이 되는 대신 캠페인의 다른 콘텐츠에 대해 미묘하고 보완적인 경우가 많습니다.

배경 이미지를 사용하는 주요 이점은 배경 이미지 위에 추가 HTML 콘텐츠를 배치할 수 있다는 것입니다. 해당 공간에 이미지 자체만 존재할 수 있는 다른 이미지와 달리 배경 이미지는 레이어 가능성을 제공하므로 동일한 공간 내에 추가 이미지, 텍스트 또는 클릭 유도문안(CTA)이 존재할 수 있습니다.

라이브 HTML 텍스트 및 배경 이미지 위의 방탄 버튼의 예

해당 텍스트를 이미지의 일부로 포함하는 대신 배경 이미지 위에 라이브 HTML 텍스트를 사용하면 이미지가 꺼져 있을 때 메시지를 읽을 수 있으므로 더 좋고 접근성이 좋은 HTML 이메일을 만드는 데 유용한 기술입니다.

더 나은 읽기 경험을 제공하는 캠페인을 만드는 것 외에도 배경 이미지는 다양한 디자인 가능성을 제공하여 캠페인을 경쟁 제품과 차별화합니다.

브랜드가 배경 이미지를 사용하는 창의적인 방법

Miro 는 영웅 섹션 뒤에 도형이 포함된 배경 이미지를 배치하여 라이브 텍스트를 사용하여 오버레이된 이메일의 주요 헤드라인과 메시지에 주의를 기울였습니다.

Uplers 는 쿠폰 코드 뒤에 배치된 쿠폰 이미지와 함께 배경 이미지를 사용하여 서비스 할인을 강조했습니다.

쿠폰 코드에 대한 Uplers 이메일 배경 이미지 — 출처: 정말 좋은 이메일

Figma 는 이 이메일의 본문에 반복되는 미묘한 배경 패턴을 추가하여 새로운 화이트보드 제품을 소개했습니다. 그들이 특징으로하는 패턴은 제품에서 발견되는 배경을 반영합니다.

이메일의 Figma 배경 이미지 — Litmus Builder에서 이 이메일 보기

Chipotle 는 제품 사진과 라인 패턴을 포함하여 이 임팩트 있는 점보 영웅과 신체 영역 뒤에 점보 배경 이미지를 배치했습니다. 이 이미지 위에는 배경이 투명한 애니메이션 GIF와 본문 영역에 라이브 텍스트가 있습니다.

미묘한 배경 이미지가 있는 치폴레 우정의 이메일 — 출처: 정말 좋은 이메일

애니메이션 GIF를 배경 이미지로 사용할 수도 있습니다(예: Adobe Stock ). 라이브 텍스트와 애니메이션 배경 위에 배치된 CTA 버튼을 포함한 영웅 콘텐츠로 축제 컬렉션을 홍보합니다.

애니메이션 GIF 배경 이미지가 포함된 Adobe Stock 이메일 — 출처: 정말 좋은 이메일

설계 고려 사항

배경 이미지를 구현할 때 고려해야 할 몇 가지 디자인 고려 사항이 있습니다.

차이

모든 독자가 배경 이미지에 오버레이된 콘텐츠의 가치를 얻을 수 있도록 대비를 염두에 두는 것이 중요합니다. 단색과 거의 동일한 방식으로 이미지를 처리하고 이미지의 색상을 콘텐츠 색상과 비교하여 테스트합니다.

Figma를 사용하여 디자인하는 경우 색맹 및 대비와 같은 플러그인을 추가하여 WCAG(웹 콘텐츠 접근성 지침)를 충족하는지 확인할 수 있습니다. 또한 WebAim의 Contrast Checker와 같은 웹 앱에서 디자인의 색상을 테스트할 수 있습니다.

간단

가독성을 보장하는 또 다른 방법은 단순하게 유지하는 것입니다. 바쁜 배경은 이미지에 배치한 라이브 텍스트의 가치를 얻기 어렵게 만들 수 있습니다. 따라서 배경 이미지를 기능이라기보다는 개선 사항으로 생각하는 것이 도움이 되는 경우가 많습니다.

단색 대체

모든 이메일 클라이언트가 배경 이미지를 존중하는 것은 아니므로 단색 대체를 디자인하십시오. 귀하의 이미지를 지원하지 않는 이메일 클라이언트를 사용하는 구독자는 여전히 단색으로 멋진 경험을 할 수 있습니다. 디자인과 일치하고 전경 요소와 잘 대조되는 대체 색상을 선택해야 합니다.

이메일에서 배경 이미지를 코딩하는 방법

코드를 살펴보기 전에 배경 CSS 스타일을 렌더링할 클라이언트와 VML 폴백의 도움이 필요한 클라이언트를 살펴보겠습니다.

좋은 소식: 인라인 백그라운드 CSS에 대한 지원이 향상되어 웹메일 클라이언트가 이제 이 방법을 완전히 지원하므로 백그라운드 HTML 속성이 더 이상 필요하지 않습니다.

나쁜 소식: 불행히도 Windows 10 Mail은 배경 이미지를 좋아하지 않습니다. 인라인 CSS 또는 더 이상 사용되지 않는 HTML 배경 속성을 렌더링하지 않습니다. VML을 적용하면 '이미지를 표시할 수 없음' 오류 메시지와 함께 렌더링 문제가 발생합니다.

Windows 10 메일 구독자의 경험이 걱정된다면 VML을 생략하는 것이 좋습니다. 이렇게 하면 대체 배경색이 추가 장식 없이도 Microsoft Outlook Suite 청중에게 훌륭한 이메일 읽기 경험을 제공할 수 있습니다.

Windows 10 Mail에서 이메일 배경 이미지가 어떻게 보이는지

배경 이미지에 대한 이메일 클라이언트 지원

이메일 클라이언트	인라인 CSS 사용	VML 사용
애플 메일 14	✓	✘
오피스 365(맥)	✓	✘
오피스 365(윈도우)	✘	✓
아웃룩 2016(macOS 10.12.6)	✓	✘
아웃룩 2013, 2016, 2019(윈도우 10)	✘	✓
윈도우 10 메일	✘	✘
지메일 앱(안드로이드 10)	✓	✘
지메일 앱(iOS 13.4.1)	✓	✘
아웃룩(안드로이드 7.0)	✓	✘
아웃룩(iOS 12.0)	✓	✘
삼성 메일(안드로이드 7.0)	✓	✘
아이패드 11 에어(4세대 iOS 14.2)	✓	✘
아이폰 12(iOS 14.2)	✓	✘
AOL 메일(에지)	✓	✘
지메일(크롬)	✓	✘
오피스 365	✓	✘
아웃룩닷컴	✓	✘
야후! 우편	✓	✘

구독자는 어떤 이메일 클라이언트를 사용합니까?

Litmus Email Analytics를 사용하여 자신의 이메일 클라이언트 시장 점유율을 살펴보십시오. 배경 이미지를 최적화해야 하는 이메일 클라이언트를 확인하세요. (힌트: Windows 10 메일이 낮더라도 걱정하지 마세요.)

더 알아보기 →

이제 문제를 해결했으므로 코드에 대해 이야기해 보겠습니다.

이메일에 배경 이미지를 가져올 때 재미있는 점 중 하나는 이를 달성할 수 있는 몇 가지 다른 방법이 있다는 것입니다. 이메일의 작은 부분을 채우거나 본문을 덮고, 단일 이미지 또는 반복 패턴을 사용하고, 독자가 데스크탑, 모바일, 라이트 모드, 다크 모드 또는 그들은 당신의 이미지를 가리키거나 롤링합니다.

각 기술에는 다른 접근 방식이 필요하므로 이를 코딩하는 가장 좋은 방법을 살펴보겠습니다.

너비 정의 또는 고정 배경 이미지

고정 너비 배경

배경 이미지를 적용할 때 항상 포함하는 테이블의 셀에 코드를 추가하는 것이 가장 좋습니다. <table> 또는 <body>와 같은 다른 HTML 요소에 적용하는 것은 일부 이메일 클라이언트에서 지원을 받지 못할 것입니다. 다음과 같이 표시됩니다.

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

여기에서 인라인 CSS 스타일에 background-size:cover를 포함하여 셀의 너비와 높이에 맞게 이미지를 만든 다음 중앙에 배치합니다. 이러한 스타일을 추가하면 2x 이미지를 사용할 수 있습니다. 즉, 망막 디스플레이에서 선명한 렌더링을 볼 수 있으며 컨테이너 크기가 다른 장치에서 렌더링되는 경우에도 컨테이너에 깔끔하게 맞게 크기가 조정됩니다.

그러나 이는 이미지가 너무 작거나 컨테이너에 비례하여 크기가 지정되지 않은 경우 픽셀화되거나 늘어나 보일 수 있음을 의미합니다. 특히 사진이라면요.

배경 이미지가 작동합니까?

Gmail 및 Outlook과 같은 가장 널리 사용되는 이메일 앱에서 배경 이미지용 코드가 귀하의 이메일에서 어떻게 작동하는지 확인하십시오.

더 알아보기 →

오늘날 대부분의 이메일 클라이언트는 인라인 CSS 배경 스타일을 지원하므로 배경 단축 CSS 속성을 사용하여 배경 이미지와 대체 색상을 추가할 수 있습니다. 즉, '배경' 스타일에 적용하면 됩니다. 불행히도 인라인으로 코딩할 때 속기에서는 추가 배경 스타일이 제대로 작동하지 않으므로 위치 지정이나 크기 조정은 별도의 스타일로 작성해야 합니다. 예를 들어 background-position: center; 배경 크기: 80%; 배경 대신 : 중앙/80%; .

VML 폴백을 사용하여 Outlook에서 이 작업을 수행합니다.

Outlook 및 데스크톱용 Office 365도 CSS 배경 스타일을 렌더링하지 않으므로 배경 이미지를 표시하는 데 약간의 도움이 필요합니다. 이러한 이메일 클라이언트에 배경 이미지를 표시하려면 캠페인 모니터용으로 Stig Morten Myre가 대중화한 기술을 활용하고 Microsoft의 VML(Vector Markup Language)을 적용해야 합니다.

이미 생성한 코드를 사용하여 필요한 VML과 포함하는 <div>를 테이블 셀에 배치합니다.

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

반복 없이 컨테이너를 채워야 하는 이미지의 경우 vml:fill 태그 내에서 'frame'을 사용해야 합니다. 이렇게 하면 이 태그 내에서 2x 이미지를 사용할 수 있습니다. v:rect 태그에서 인라인 스타일을 사용하여 컨테이너의 너비를 설정했는지 확인하십시오(위의 예에서는 600px로 설정됨).

컨테이너에 패딩을 추가하려는 경우 컨테이너 내에 VML을 배치하면 패딩이 축소될 수 있습니다. 이 문제를 수정하는 방법은 컨테이너 주위에 VML을 래핑하는 것이므로 다음과 같이 다른 테이블 내에 컨테이너를 중첩해야 합니다.

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

반복되는 배경 이미지

배치한 컨테이너 내에서 반복되는 배경을 추가할 수도 있습니다. 좋은 예는 이메일 본문 전체에 패턴을 반복하는 것입니다.

반복되는 배경 이미지의 예

컨테이너 셀에 배치한 이미지가 컨테이너보다 작으면 자동으로 수평 및 수직으로 반복됩니다. 한 방향으로만 반복하려면 'background-repeat' CSS로 스타일을 지정하고 repeat-x 값을 추가하여 가로로 반복하거나 repeat-y 값을 추가하여 세로로 반복합니다.

전체 컨테이너를 완전히 반복되는 패턴으로 채우는 코드는 매우 간단합니다.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

VML 폴백을 사용하여 Outlook에서 이 작업을 수행합니다.

다시 말하지만 Outlook 클라이언트에서 배경 렌더링을 보려면 VML을 적용할 수 있습니다. 이번에는 컨테이너 앞에 VML이 배치되어 코드가 약간 다릅니다.

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

배경을 반복하려면 v:fill 태그를 '타일' 유형으로 채웁니다. 당연히 Windows 10 메일에는 몇 가지 렌더링 문제가 있으며 반복되는 배경에서는 렌더링 문제가 훨씬 보기 흉할 수 있습니다. 따라서 Windows 10 메일 구독자가 있는 경우 VML을 생략하는 것이 가장 안전한 방법일 수 있습니다.

고급 기술

고정되고 반복되는 배경 이미지는 이메일 디자인의 수준을 높일 수 있는 많은 기회를 제공하지만 더 많은 것이 있습니다.

대비 이미지 교환

이제 여러 이메일 클라이언트에서 다크 모드를 사용할 수 있고 구독자 기본 설정을 존중하면 더 많은 청중에게 다가가고 신뢰를 구축하는 데 도움이 되므로 배경 이미지를 전환하는 것은 밝은 모드 또는 다크 모드 디자인을 보완하는 좋은 방법입니다. 또한 재미있고 간단한 개선 사항이기도 합니다.

대비 모드

이를 구현하려면 다크 모드 미디어 쿼리에 임베디드 CSS를 추가해야 합니다. 이렇게 하면 다음 유형의 미디어 쿼리를 지원하는 이메일 클라이언트 내에서 다크 모드 배경 이미지가 제공됩니다.

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

어두운 대체 색상을 추가하는 것이 좋습니다. 이것은 독자가 조치를 취하지 않고 이미지를 로드하지 않는 이메일 클라이언트에 도움이 되고 이미지가 로드되지 않았을 때 메시지를 읽을 수 있도록 합니다.

이제 HTML에서 라이트 모드 배경 이미지가 포함된 셀에 클래스를 적용합니다. 단순한!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

참고 : 디자인하기 어렵고 코딩하기 더 어려운 것은 다크 모드 환경에서 이메일 색상을 반전시키는 이메일 클라이언트로, 다크 모드 미디어 쿼리를 작성하는 데 드는 모든 노력을 완전히 간과합니다.

이러한 이메일 클라이언트를 차단하는 것은 거의 불가능합니다. 그러나 투명도가 있는 배경 이미지를 가지고 놀 수 있으며 밝은 모드의 경우 흰색, 어두운 모드의 경우 검정색과 같이 컨테이너에 고대비 배경색을 적용할 수 있습니다. 이렇게 하면 배경색이 반전될 수 있습니다. 다음 예에서 이것을 시도했습니다.

다양한 다크 모드 시나리오의 이메일 배경 이미지

내 갈매기 모양의 배경 이미지는 화살표의 불투명도가 30%이고 화살표 사이가 완전히 투명합니다. 즉, 기분을 상하게 하는 이메일 클라이언트가 내 다크 모드 렌더링을 제어하면 콘텐츠를 읽을 수 있습니다.

다크 모드 코딩 및 이메일 클라이언트 지원에 대한 자세한 내용은 다크 모드 이메일에 대한 궁극적인 가이드를 확인하세요.

인터랙티브 배경

약간의 상호 작용으로 구독자를 기쁘게 하는 것은 어떻습니까? 독자가 콘텐츠 위로 커서를 이동할 때 컨테이너의 배경을 변경하여 간단한 호버 또는 롤오버 효과로 작은 기쁨을 퍼뜨릴 수 있습니다.

호버 또는 롤오버 시 이메일 배경 이미지 전환

이 작업을 수행하려면 약간의 임베디드 CSS가 필요합니다. 이것을 <style> 태그 안에 넣으세요:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

이제 다음과 같이 이 클래스를 테이블 셀에 적용하기만 하면 됩니다.

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

디자인 레벨 업

풍부한 기회가 있는 배경 이미지를 사용하여 이메일 디자인을 향상시키는 것은 한계를 뛰어넘고 이메일을 군중 속에서 돋보이게 할 수 있는 좋은 방법입니다. 이러한 기술을 실제로 적용하는 데 도움이 되도록 이 게시물에 소개된 코드를 가져올 수 있는 편리한 리소스를 만들었습니다.

이메일에서 배경 이미지를 사용하는 방법을 알고 싶습니다. 아래 의견에서 예를 공유하세요.

Litmus를 사용하여 배경 이미지가 제대로 작동하는지 확인하세요.

효과가 있었나요? Litmus를 사용하여 100개 이상의 이메일 클라이언트, 앱 및 장치에서 배경 이미지(및 나머지 이메일)를 미리 봅니다. 그리고 온 브랜드에 오류가 없는 이메일을 보내십시오.

무료 평가판 시작 →

Jason Rodriguez가 2019년 5월 24일에 원래 게시했습니다. 2021년 7월 21일에 마지막으로 업데이트되었습니다.