HTML 이메일 다크 모드 완벽 대응 가이드 – 알아야 할 모든 것

iOS 13 업데이트와 함께 Apple Mail에 다크 테마가 도입되었습니다. 그 덕분에 Apple Mail은 prefers-color-scheme CSS 미디어 쿼리를 지원하는 최초의 주요 이메일 클라이언트가 되었죠. 이제 다크 테마와 라이트 테마 각각에 맞춰 이메일을 디자인할 수 있습니다.

저는 다크 모드의 열렬한 팬이고, 눈을 부시게 하는 밝은 이메일은 골칫거리입니다. 그래서 iOS 13의 다크 모드 소식을 듣자마자 당연하게도 새 iPhone을 주문해서 직접 테스트해 보았습니다.

기왕 하는 김에 문제아인 Outlook을 포함해 거의 모든 이메일 클라이언트에서 다크 모드가 어떻게 작동하는지도 함께 테스트했습니다. 그 결과를 소개합니다.

prefers-color-scheme이란 무엇인가?

prefers-color-scheme CSS 미디어 쿼리는 사용자가 라이트 테마를 선호하는지 다크 테마를 선호하는지 감지하는 기능으로, 두 테마 각각에 맞는 이메일 디자인을 가능하게 해줍니다.

iOS 13 업데이트 이후 주요 이메일 클라이언트에서의 지원률이 2.3%에서 38.4%로 급증했습니다! Apple Mail의 압도적인 점유율 덕분에 거대한 발전을 이룬 것입니다. 흥미롭게도 Apple Mail 이전에 이 기능을 지원했던 유일한 이메일 클라이언트는 Outlook이었습니다.

주요 이메일 클라이언트에서 다크 모드가 작동하는 방식

이메일 클라이언트들은 내부적으로 색상을 자동 반전시켜 이메일 자체를 어둡게 렌더링합니다. 일반적인 개인 간 이메일이라면 모든 클라이언트에서 잘 작동합니다.

하지만 우리 받은편지함 대부분을 차지하는 커스텀 HTML 이메일, 즉 트랜잭션이나 프로모션 목적의 이메일에는 상황이 그렇게 단순하지 않습니다.

각 이메일 클라이언트가 다크 모드를 처리하는 방식의 차이는 다음과 같습니다:

* 동일 이메일 클라이언트는 플랫폼 간 점유율을 신뢰성 있게 구분할 수 없어 전체 플랫폼에서 공유됩니다. 점유율 출처: Litmus 2019년 이메일 클라이언트 시장 점유율.

데이터가 말해주는 것:
이메일의 55% 이상이 다크 모드가 활성화된 환경에서 열릴 수 있습니다. Gmail이 다크 모드를 완전히 지원하는 순간, 이 비율은 무려 83%까지 치솟을 전망입니다!

HTML 이메일을 다크 모드 친화적으로 만드는 방법

저는 이미 위 데이터를 실제로 활용해, 몇 번의 Outlook 관련 시행착오 끝에 우리 이메일을 다크 모드에 대응시켰습니다. 여러분도 다음 방법으로 똑같이 할 수 있습니다.

1) 색상 조정하기

Apple Mail은 배경색이 투명하거나 지정되지 않은 경우에만 색상을 반전시킵니다. 즉, 흰색 배경으로는 소용없습니다. 이메일로 아무도 눈부시게 만들지 않으려면 가장 먼저 배경색이 제대로 지정되어 있는지 확인하세요. 더 세밀한 디자인 제어가 필요하다면 prefers-color-scheme이 유용하게 쓰입니다.

@media prefers-color-scheme 구문 예시:

<style>
	/* 라이트 모드(기본) 스타일: */
	body {
		background: white;
		color: #393939;
	}

	@media (prefers-color-scheme: dark) {
		/* 다크 모드 스타일: */

		body {
			background: black;
			color: #ccc;
		}
	}
</style>

디자인 팁: 텍스트 색상으로 순백색(#fff)은 피하세요. 본문 텍스트의 명도 대비 비율을 약 11.5 정도로 맞추는 것이 너무 밝지도 어둡지도 않은 적절한 균형점이었습니다. 대비 비율은 https://contrast-ratio.com 에서 확인하거나 Chrome 개발자 도구를 활용하세요.

2) 라이트/다크 로고 전환하기

어두운 배경 위의 어두운 텍스트는 사실상 보이지 않는데, 다크 모드가 활성화된 이메일 클라이언트에서 로고에 바로 이런 현상이 벌어집니다.

요즘 일반적인 로고는 투명한 배경에 컬러 아이콘, 그리고 어두운 텍스트로 이루어져 있죠. 문제점이 보이시나요? 이메일 클라이언트는 이미지 색상을 반전시키지 않기 때문에 직접 처리해야 합니다.

해결 방법은 크게 네 가지입니다:

1. 투명 배경 대신 흰색 배경으로 로고를 저장하기(가장 간단하지만 추천하지 않습니다 — 다크 모드 사용자들이 좋아하지 않겠죠).
2. 다크 배경 위에 라이트 로고를 올리고, 나머지 이메일은 흰색 배경 유지하기(Litmus가 사용하는 방식).
3. 다크 모드 이메일을 기본값으로 설정하기(Spotify처럼 앱에서 다크 테마만 제공하는 브랜드에 적합).
4. 라이트 버전과 다크 버전의 로고를 모두 포함하고 prefers-color-scheme 미디어 쿼리로 전환하기.

제가 가장 선호하는 방법은 마지막 네 번째 방식입니다. 방법은 다음과 같습니다.

다크 로고에 간단히 "display: none"을 적용하면 대부분의 최신 이메일 클라이언트에서 잘 작동합니다. 하지만 놀랍게도 Outlook과 Windows 10 Mail에서는 작동하지 않습니다.

CSS 스타일:

<style>
	@media (prefers-color-scheme: dark) {
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

그리고 HTML 구조:

<image src="dark-logo.png" class="darkLogo" />

<!--
	Outlook과 Windows 10 Mail에서 라이트 로고를 완벽히 숨기려면,
	라이트 로고 img 태그를 div로 감싸야 합니다.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

이 방식도 꽤 잘 작동하지만, 여전히 모든 환경에서 완벽하지는 않습니다. 다크 모드는 지원하지만 prefers-color-scheme은 지원하지 않는 클라이언트, 즉 Outlook, Windows 10 Mail, Zoho, 그리고 잠재적으로 Gmail에서는 '어두운 배경 위 어두운 텍스트' 문제가 발생합니다.

따라서 로고를 완벽하게 대응하려면 위의 1번과 4번 방법을 결합하는 것이 좋습니다. 1번 방법은 다크 모드는 지원하지만 prefers-color-scheme을 지원하지 않는 클라이언트를 커버하고, 4번 방법은 Apple Mail, macOS용 Outlook, Outlook.com처럼 둘 다 지원하는 클라이언트를 커버합니다.

또한 흰색 배경으로 저장하는 대신, 배경색과 일치하는 3픽셀 폭의 테두리를 추가하고 평소처럼 투명 배경으로 저장하는 방법도 활용할 수 있습니다.

로고 하나 때문에 꽤 복잡해 보이기 시작하네요. 우선 HTML 마크업부터 살펴보겠습니다:

<!-- 배경색과 일치하는 3픽셀 테두리가 있는 기본 로고 -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- 라이트 테마용(즉, 다크 로고):
Apple Mail, macOS용 Outlook, Outlook.com 대응 -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
	<image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- 다크 테마용(즉, 라이트 로고):
Apple Mail, macOS용 Outlook, Outlook.com 대응 -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

그리고 CSS 스타일:

<style>
	@media (prefers-color-scheme: light) {
		.darkLogoDefault,
		.lightLogo {
			display: none !important;
		}

		.darkLogoWrapper,
		.darkLogo {
			display: block !important;
		}
	}

	@media (prefers-color-scheme: dark) {
		.darkLogoDefault,
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

Gmail의 다크 모드도 머지않았습니다

새로운 Android 10과 함께 다크 모드가 도입되면서 Gmail도 마침내 완전히 어두워질 예정입니다. 필요한 것은 Android 10과 최신 버전의 Gmail(적어도 2019.09.01.268168002 이상)뿐입니다. 다만 Google은 새로운 기능(이 경우 다크 테마)을 서버 사이드 푸시를 통해 점진적으로 활성화하는 경향이 있어서, 아직 제 계정에는 적용되지 않았습니다.

Gmail이 @media prefers-color-scheme 지원을 추가할지도 궁금합니다. 지금까지 읽은 내용으로는 그다지 낙관적이지 않아 보입니다. 결과는 기다려 봐야 알겠죠. Gmail에서 다크 테마가 활성화되는 대로 이 글을 업데이트할 예정입니다.

마치며

다크 모드가 HTML 이메일의 세계로 들어오고 있습니다. 저는 이 변화를 반갑게 생각합니다! 하지만 레이아웃을 위해 HTML 테이블을 쓰는 것만으로도 충분히 고단했는데, 또 하나 신경 써야 할 요소가 늘어난 것도 사실입니다.

이메일 다크 모드 관련 최신 소식을 놓치지 않으려면 메일링 리스트에 가입해 보세요. SaaS 제품 Sidemail을 만들고 성장시키면서 겪는 인사이트와 시행착오도 함께 공유하고 있습니다.

끝까지 읽어주셔서 감사합니다!