이메일 마케터를 위한 다크 모드에 대한 궁극적인 가이드

게시 됨: 2021-10-29

다크 모드. 기술 업계는 이 두 단어로 윙윙거리고 있으며 이메일 마케팅도 예외는 아닙니다. 2018년에 Apple은 데스크톱 이메일 클라이언트에 다크 모드를 추가했습니다. 다음 해에 다크 모드가 iOS 메일에 도입되었으며 Gmail을 비롯한 기타 업계 주요 기업은 다크 모드에 대한 지원을 발표했습니다. 다크 모드가 받은 편지함을 장악하고 있음을 부인할 수 없습니다. 이러한 읽기 환경에서 이메일이 멋지게 보이도록 하는 것은 이메일 마케팅 담당자에게 새로운 큰 과제입니다.

다크 모드가 받은 편지함을 대체하고 있습니다. 이러한 읽기 환경에서 이메일이 멋지게 보이도록 하는 것은 이메일 마케팅 담당자에게 새로운 큰 과제입니다. 트윗 →

이 게시물에서는 다음과 같이 분류합니다.

다크 모드가 무엇이며 사람들이 사용하는 이유
다크 모드 설정이 이메일 디자인에 영향을 미치는 3가지 방법
다양한 다크 모드 타겟팅 방법
다크 모드에 대한 이메일 클라이언트 지원
다크 모드를 디자인하고 코딩하는 방법

다이빙 할 준비가 되셨습니까? 먼저 기본 사항을 요약해 보겠습니다.

다크 모드란? 저조도 또는 야간 환경을 위한 더 어두운 색상 팔레트

다크 모드는 어두운 배경에 밝은 색상의 타이포그래피, UI 요소 및 도해를 사용하는 반전된 색 구성표이며 최근 몇 년 동안 가장 핫한 디지털 디자인 트렌드 중 하나입니다. Apple의 OS에서 Twitter, Slack 또는 Facebook Messenger와 같은 앱에 이르기까지 대부분의 인기 있는 운영 체제 및 앱에서는 이제 사용자가 다크 모드로 전환할 수 있습니다.

다크 모드는 뜨거운 주제이며 그럴만한 이유가 있습니다. 많은 사람들이 다음과 같은 이유로 다크 모드를 선호합니다.

그것은 눈에 더 쉽습니다 . 어두운 배경의 밝은 텍스트는 특히 저조도 상황에서 눈의 피로를 최소화하는 데 훨씬 좋습니다.
화면 밝기를 줄여 배터리 수명을 절약합니다.
콘텐츠 가독성을 개선 하고 일부 사용자가 데스크톱 및 모바일에서 콘텐츠를 더 쉽게 소비할 수 있습니다.
그들은 단순히 더 어두운 인터페이스를 선호 할 수 있습니다 .

다크 모드의 인기가 높아짐에 따라 받은 편지함에도 표시되는 것은 놀라운 일이 아닙니다.

무료 가이드

다크 모드에서 더 알아보기. 지금 다운로드하려면 양식을 작성하세요.

클라이언트가 내 이메일에 다크 모드를 어떻게 적용합니까?

현재 이메일 클라이언트가 이메일에 다크 모드를 적용하는 데 사용하는 세 가지 기본적으로 다른 유형의 색 구성표가 있는 것으로 보입니다. 하나씩 살펴보겠습니다(또는 다크 모드 이메일 클라이언트 지원 차트로 바로 이동).

색상 변경 없음

네, 잘 읽었습니다. 일부 전자 메일 클라이언트는 다크 모드로 자신의 UI를 변경할 수 있습니다,하지만 당신의 HTML 이메일의 렌더링 방식에 영향을주지 않습니다. 앱이 밝은 모드로 설정되어 있든 어두운 모드로 설정되어 있든 이메일은 정확히 동일하게 보입니다. 특정 이메일 클라이언트는 기본적으로 항상 라이트 모드 디자인을 렌더링합니다(나중에 논의할 다크 모드를 트리거하는 코드를 특별히 추가하지 않는 한). 다음은 해당 클라이언트 목록입니다.

애플 메일
아이폰
아이패드
Hey.com

Apple Mail에서 다음 이메일 예시를 확인하세요. 이메일 클라이언트 UI가 어둡거나 밝거나 상관없이 이메일 디자인은 정확히 동일하게 유지됩니다.

하지만 몇 가지 예외가 있습니다. 첫째, 일반 텍스트 이메일 은 다크 모드 테마의 적용을 트리거하고 다크 모드가 일반 텍스트 이메일에 적용되는 것을 차단하는 최소 코드는 2×1 이미지입니다. "일반 텍스트" 느낌을 유지하면서 1x1 추적 픽셀을 포함할 수 있습니다.

둘째, 실수로 템플릿에 Dark Mode <meta> 태그를 남겨두면 Apple Mail/iPhone/iPad 는 사용자 정의 Dark Mode 스타일로 재정의하지 않는 한 순수한 흰색 #ffffff 인스턴스를 어두운 회색으로 자동 변환합니다 . 또는 대신 #fffffe 와 같은 흰색을 사용할 수 있습니다.

다크 모드 옵션: 기본 대 사용자 지정

아무 것도 하지 않으면 자동으로 기본 다크 모드를 이메일에 적용하는 이메일 클라이언트가 꽤 있습니다. 그러나 당신이 우리 대부분과 비슷하고 이러한 기본 스타일의 팬이 아니라면 세 번째 옵션인 자신만의 다크 모드 테마를 디자인하고 코딩하는 것이 좋습니다. 아래에서 라이트 모드 테마와 사용자 지정 다크 모드 테마가 있는 이메일을 나란히 볼 수 있습니다.

리트머스 라이트 모드 이메일과 커스텀 다크 모드 이메일 예시

사용자 지정 다크 모드 테마에 접근하는 방법을 살펴보기 전에 다른 이메일 클라이언트가 기본 다크 모드를 어떻게 처리하는지 확인하겠습니다.

기본 다크 모드: 부분 색상 반전

첫 번째 다크 모드 테마는 제가 "부분 색상 반전"이라고 부르는 것입니다. 배경이 밝은 영역만 감지하여 반전시켜 밝은 배경은 어둡게 하고 어두운 텍스트는 밝게 만듭니다.

일반적으로 이미 어두운 배경이 있는 영역을 그대로 두어 완전한 다크 모드 디자인을 만듭니다. 다행히도 이 방법을 사용하는 대부분의 이메일 클라이언트는 다크 모드 타겟팅 도 지원하므로 클라이언트의 기본 다크 테마를 재정의할 수 있습니다.

Outlook.com은 이 스크린샷에서 볼 수 있는 것처럼 부분적으로 색상을 반전시키는 이메일 클라이언트입니다.

이메일 나란히 비교

기본 다크 모드: 풀 컬러 반전

Full Color Invert는 가장 침습적인 색 구성표입니다. 밝은 배경이 있는 영역을 반전시킬 뿐만 아니라 어두운 배경에도 영향을 줍니다.

따라서 이미 이메일을 어두운 테마로 디자인했다면 이 계획은 아이러니하게도 이메일을 밝게 만들 것 입니다. 불행히도 이것은 현재 Gmail 앱(iOS) 및 Outlook 2019(Windows)와 같이 더 많이 사용되는 이메일 클라이언트에서 사용하는 전술입니다.

아래의 예에서, 당신은 빛 배경이 이전에 빛 텍스트 어두운 배경을 가지고 원래의 색상과 지역의 어두운 버전으로 변환 된 참조 이제 어두운 텍스트 빛 할 수 있습니다.

나란히 이메일 예

이 풀 컬러 반전 구성표는 이메일을 가장 근본적으로 변경할 뿐만 아니라 이 논리를 사용하는 이메일 클라이언트 도 현재 다크 모드 타겟팅을 허용하지 않습니다 .

이메일 클라이언트는 여전히 다크 모드를 가장 잘 구현하는 방법을 모색하고 있으며 사용자의 피드백에 개방적일 수 있습니다. 특히 개발자가 자신의 스타일로 다크 모드를 타겟팅하도록 허용하지 않으면 가독성과 접근성에 부정적인 영향을 미칠 수 있기 때문입니다.

더 나은 다크 모드 타겟팅 지원과 덜 침습적인 다크 모드 테마 논리를 옹호하기 위해 Gmail의 접근성 팀에 직접 생각을 전달할 수 있으며 Gmail의 다크 모드 스크린샷을 제공하여 이메일을 손상시킬 수도 있습니다.

나만의 스타일로 다크 모드 사용자를 타겟팅하려면 어떻게 해야 합니까?

위에서 언급했듯이 다크 모드의 이메일 클라이언트가 일반 HTML 이메일을 처리하는 방법은 다양합니다. 그러나 이메일 클라이언트의 기본 색 구성표와 매우 다를 수 있는 자신만의 다크 모드 스타일을 적용하려면 어떻게 해야 할까요? 두 가지 방법을 사용할 수 있습니다.

@media (색상 구성표 선호: 어두운)

이 방법은 이 CSS 블록이 다크 모드로 설정된 모든 사용자 인터페이스를 대상으로 한다는 점을 제외하고 모바일 반응 보기에 대한 @media 쿼리 내부에 스타일 블록을 적용하는 것과 거의 동일한 방식으로 작동합니다. @media(prefers-color-scheme: dark)를 사용하면 다크 모드 전용 이미지 스왑, 호버 효과, 배경 이미지 등 기본적으로 기존 CSS로 할 수 있는 거의 모든 것을 구현할 수 있는 가장 강력한 맞춤형 다크 모드 테마를 만들 수 있습니다. !

[데이터-ogsc]

이것은 Outlook 앱을 대상으로 하기 위해 Mark Robbins가 처음으로 주목한 방법입니다. 꽤 좁은 시장 점유율처럼 보이지만 이미 적용한 @media(prefers-color-scheme: dark) 스타일을 복제 하고 각 CSS 규칙에 적절한 [data-ogsc] 접두사를 추가하기만 하면 됩니다.

어떤 이메일 클라이언트가 다크 모드를 지원합니까?

이러한 클라이언트와 앱은 현재 사용자가 수동으로 설정할 수 있는 설정으로 또는 사용자가 선호하는 색 구성표를 자동으로 감지하여 다크 모드를 제공합니다.

모바일 앱

아이폰 메일
아이패드 메일
지메일 앱(안드로이드)
지메일 앱(iOS)
아웃룩 앱(안드로이드)
아웃룩 앱(iOS)

데스크탑 클라이언트

애플 메일
아웃룩 2019(맥 OS)
아웃룩 2019(윈도우)

웹 클라이언트

아웃룩닷컴
Hey.com

그러나 이러한 모든 이메일 클라이언트가 UI를 어두운 색 구성표로 설정하는 방법을 제공한다고 해서 이메일을 같은 방식으로 처리한다는 의미는 아닙니다. 이메일 렌더링은 복잡합니다. 한 클라이언트에서는 멋지게 보이는 이메일이 다른 클라이언트에서는 깨져 보일 수 있습니다. 이제 다크 모드는 복잡성의 또 다른 계층을 추가하고 있습니다. 이미 살펴본 바와 같이 다크 모드 이메일 클라이언트가 코드를 처리할 수 있는 다양한 방법이 있습니다.

또한 다양한 타겟팅 방법에 대한 일관된 지원도 없습니다. 그렇다면 어떤 이메일 클라이언트가 기본적으로 어떤 색 구성표를 따르나요? 일부는 이메일 디자이너에게 읽기 경험을 최적화하기 위해 다크 모드를 타겟팅할 기회를 제공하지 않지만 대부분의 클라이언트는 @media(prefers-color-scheme: dark) 또는 [data-ogsc] 방법을 사용하여 타겟팅할 수 있습니다.

다음 이메일 클라이언트에서 다크 모드 설정을 테스트하여 다크 모드 관련 타겟팅과 다크 모드 타겟팅 지원이 포함되지 않은 일반 이메일에 미치는 영향을 확인했습니다. 여기 우리가 찾은 것이 있습니다 ...

다크 모드 이메일 클라이언트 지원 차트(2021년 10월 기준)

이메일 클라이언트	다크 모드에서 HTML 처리	@미디어	[데이터-ogsc]	단점
애플 메일(MacOS)	변경 없음*	✓ 예	✘ 아니요	*순백색(#ffffff) BG는 <meta>가 있는 경우 반전됩니다.
아이폰/아이패드(iOS 13)	변경 없음*	✓ 예	✘ 아니요	*순백색(#ffffff) BG는 <meta>가 있는 경우 반전됩니다.
Hey.com	변경 없음	✓ 예	✘ 아니요
아웃룩닷컴	부분 반전	? 부분*	? 부분**	일부 BG 색상이 어두워집니다. *이미지 스왑이 작동합니다!
아웃룩 2019(맥OS)	부분 반전	? 부분*	✘ 아니요	*일부 BG 색상이 어두워집니다.
아웃룩 2019(WinOS)	완전 반전*	✘ 아니요	✘ 아니요	*스페셜 타게팅 가능!
아웃룩 앱(iOS)	부분 반전	? 부분*	✘ 아니요	*일부 BG 색상이 어두워집니다.
아웃룩 앱(안드로이드)	부분 반전	✘ 아니요	? 부분*	*일부 BG 색상이 어두워집니다.
Gmail 앱(iOS)	완전 반전*	✘ 아니요	✘ 아니요	*스페셜 타게팅 가능!
Gmail 앱(안드로이드)	부분 반전	✘ 아니요	✘ 아니요

Gmail iOS 및 Outlook Windows 전용 타겟팅

이 가이드를 처음 작성한 이후로 제가 가장 좋아하는 #EmailGeeks가 우리가 싸워온 Full Invert Default Themes 중 일부를 제어할 수 있는 훌륭한 해결 방법을 개발했습니다. 이러한 각 솔루션은 매우 철저하며 자체 가이드를 보증하므로 전체 설명을 확인하려면 해당 솔루션을 확인하십시오!

Remi Parmentier는 mix-blend-mode 와 HowToTarget.email의 Gmail 해킹을 결합하여 Gmail 앱 iOS의 원래 배경 및 텍스트 색상을 유지함으로써 "CSS 혼합 모드로 Gmail의 어두운 모드 문제 해결"에 대한 자습서를 제시했습니다.

Nicole Merlin은 "Outlook 다크 모드 문제를 해결하는 방법"에서 이메일 마법사를 사용하여 MSO별 그라데이션 CSS 속성과 정말 깔끔한 VML(벡터 마크업 언어) 트릭을 사용하여 Windows의 다크 모드용 Outlook을 대상으로 하는 두 가지 방법을 만들었습니다.

그러나 이러한 해킹을 조사할 때 주의해야 할 사항 은 다음과 같습니다. 이 두 가지 방법 모두 이메일 클라이언트가 원래의 밝은 모드 텍스트 및/또는 적용된 배경색을 강제로 렌더링하도록 하는 의도된 효과가 있기 때문에 사용자의 접근성 정신에 어긋나는 다크 모드를 선호합니다. 배경이나 텍스트가 읽을 수 없는 방식으로 다크 모드로 변환될 때 명암비를 향상시키는 것과 같이 이러한 기능을 아껴서 사용해야 합니다.

이러한 타겟팅 방법은 @media(prefers-color-scheme: dark) 또는 [data-ogsc] 방법으로 수행할 수 있는 작업에 비해 상대적으로 제한적 이지만 문제를 해결해야 할 경우에 사용할 수 있는 편리한 도구입니다. 다크 모드로 텍스트 가독성을 떨어뜨립니다.

다크 모드 이메일을 디자인하고 코딩하는 방법

이메일 클라이언트 전반에 걸쳐 다크 모드 스타일을 타겟팅하는 경우 구독자를 위한 다크 모드 환경을 개선하려면 다음 6단계를 각각 따르십시오.

1. 모든 스타일에 맞게 로고 및 기타 이미지 최적화

Gmail 앱 및 Outlook 2019(Windows)와 같이 다크 모드 사용자 지정이 더 제한된 이메일 클라이언트에서 가독성을 위해 어두운 텍스트가 있는 투명 PNG에 반투명 윤곽선을 추가합니다.

이렇게 하면 이메일 클라이언트가 부분 색상 반전 또는 전체 색상 반전 설정을 사용하기로 결정할 수 있는 문제를 방지하고 가입자의 눈에 더 쉽게 볼 수 있습니다. 가능하면 투명한 배경을 선택하면 도움이 됩니다.

01-로고

다크 모드에 최적화된 로고로 즐거운 시간을 보낼 수도 있습니다!

아래는 내가 만든 가짜 로고의 예입니다. 텍스트 뒤에 밝은 그림자를 추가하여 어두운 배경에서 돋보이도록 했을 뿐만 아니라 "NebulaCo" 은하 테마에 맞게 뒤에 별이 빛나는 텍스처를 통합했습니다.

당신이 당신의 로고로 만드는 것이 모든 빛 반투명 요소가 라이트 모드에 보이지 않는 것, 이벤트를 만 다크 모드에서 볼 수있는 특별한 브랜드의 터치를 추가 할 수있는 기회를 방어 디자인 전술 역할을합니다.

이미지가 투명 하지 않고 배경을 포함하는 경우 어색한 병치를 피하기 위해 초점 주위에 충분한 여백이 있는지 확인하십시오.

03-공백

또한 라이트 모드와 다크 모드 이미지를 이 가이드에서 아래에 설명된 @media(prefers-color-scheme: dark) 및 [data-ogsc] 방법 으로 교체하십시오 .

2. 이메일 클라이언트 사용자 에이전트에서 다크 모드 활성화

<head> 태그에 이 메타데이터 를 포함하면 다크 모드가 켜져 있는 구독자의 이메일에서 다크 모드가 활성화되도록 할 수 있습니다.

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

3. @media에 다크 모드 스타일 추가(색상 구성표 선호: 다크)

iOS, Apple Mail, Outlook.com, Outlook 2019(MacOS) 및 Outlook 앱(iOS)의 사용자 지정 어두운 모드 스타일에 대해 포함된 <style></style> 섹션에 이 미디어 쿼리를 추가합니다.

.dark -img 및 .light-img 클래스는 윤곽선 로고가 이상적이지 않은 경우 어두운 모드별 로고를 표시하는 데 특히 유용합니다.

예제 CSS :

@media (prefers-color-scheme: dark ) {
  /* Shows Dark Mode-Only Content, Like Images */
  .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
  
  /* Hides Light Mode-Only Content, Like Images */
  .light-img { display:none; display:none !important; }
  
  /* Custom Dark Mode Background Color */
  .darkmode { background-color: #272623 !important; }
  
  /* Custom Dark Mode Font Colors */
  h1, h2, p, span, a, b { color: #ffffff !important; }
  
  /* Custom Dark Mode Text Link Color */
  .link { color: #91ADD4 !important; }
}

4. [data-ogsc] 접두사를 사용하여 다크 모드 스타일 복제

Outlook 앱(Android)에서 지원을 위해 이 스타일을 추가합니다.

예제 CSS :

/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }

5. 다크 모드 전용 스타일을 신체 HTML에 적용

모든 HTML 태그에 적절한 다크 모드 클래스가 삽입되어 있는지 확인하십시오. 다음은 Light Mode vs. Dark Mode 로고에 나타나는 .dark -img 및 .light-img 클래스의 예입니다.

예제 HTML :

<!-- start HEADER_LOGO -->
<a href="http://litmus.com/" target="_blank">

    <img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />

    <!-- The following Dark Mode logo image is hidden 
    with MSO conditional code and inline CSS, but will be         
    revealed once Dark Mode is triggered -->

    <!--[if !mso]><! --><div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">
          <img src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    </div><!--<![endif]-->

</a>
<!-- end HEADER_LOGO -->

6. ABT: 항상 테스트하십시오!

항상 언급했듯이 이메일 클라이언트는 지속적으로 변경됩니다. 특히 다크 모드와 같은 새로운 기능으로 렌더링 로직에 대한 조정이 빠르고 자주 제공됩니다. 이 모든 것을 파악하는 유일한 방법은 Litmus와 같은 도구를 사용하여 모든 이메일을 테스트하는 것입니다.

QA는 다크 모드 이메일을 테스트합니다.

제대로 했어? Litmus 무료 평가판으로 알아보십시오. 100개 이상의 이메일 클라이언트, 앱 및 장치에서 이메일이 어떻게 보이는지 미리 봅니다. 그리고 이메일이 항상 브랜드에 있고 오류가 없는지 확인하십시오.

무료 평가판 시작

다크 모드와 관련하여 사용자 기본 설정을 존중합니다.

다크 모드의 가장 큰 이점 중 하나는 저조도 환경이나 기타 개인적인 이유로 사람들의 눈의 피로를 줄이는 데 도움이 된다는 것입니다. 그러나 그것은 다크 모드와 라이트 모드의 문제가 아닙니다. 어두운 경험이든 가벼운 경험이든 가입자가 원하는 것이 무엇인지 의 문제입니다. 정답도 오답도 없습니다.

따라서 구독자가 다크 모드에서 이메일을 보기로 의식적으로 결정하는 경우 이를 존중하는 것이 가장 좋습니다. 구독자가 기본적으로 이미지를 끄는 것을 선호하는 경우를 대비하여 ALT 텍스트를 추가하려는 것처럼 어두운 인터페이스를 존중하는 이메일도 작성해야 합니다.

Alice Li가 2019년 11월 20일에 원래 게시했습니다. 2021년 10월 28일에 마지막으로 업데이트되었습니다.