다크 모드 dark-mode

Last update: Mon Oct 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

작성 대상:

초급
중간

전자 메일을 디자인할 때 전자 메일 Designer을 사용하면 Dark mode 보기로 전환할 수 있습니다.

Dark mode 에서 다크 모드가 켜져 있을 때 지원하여 표시할 특정 사용자 지정 설정을 정의할 수 있습니다.

다크 모드란? what-is-dark-mode

다크 모드를 사용하면 지원되는 이메일 클라이언트 및 앱에서 텍스트, 버튼 및 기타 UI 요소에 대해 배경이 어둡고 색상이 밝은 이메일을 표시할 수 있습니다. 눈의 피로를 줄이고, 배터리 수명을 절약하며, 저조도 환경에서 가독성을 향상시켜 보다 편안한 시청 환경을 제공합니다.

가드레일 guardrails

다크 모드 렌더링은 이메일 클라이언트마다 크게 다를 수 있습니다.

다크 모드를 사용하기 전에 기본 이메일 클라이언트가 다크 모드를 처리하는 방법을 이해하는 것이 중요합니다. 구별해야 할 세 가지 경우가 있습니다.

클라이언트가 다크 모드를 지원하지 않음 not-supporting

일부 이메일 클라이언트는 다음과 같이 이 기능을 전혀 지원하지 않습니다.

Yahoo!Mail
AOL

다크 모드 사용자 지정 설정을 정의하는지 여부에 관계없이 이러한 이메일 클라이언트에는 다크 모드 렌더링이 표시되지 않습니다.

자체 다크 모드를 적용하는 클라이언트 default-support

일부 이메일 클라이언트는 수신되는 모든 이메일에 대해 자체 기본 다크 모드를 체계적으로 적용합니다. 색상, 배경, 이미지 등은 해당 이메일 클라이언트별 어두운 모드 설정으로 자동 조정됩니다. 외부 수정이 불가능합니다.

몇 가지 예는 다음과 같습니다.

Gmail(데스크탑 웹 메일, iOS, Android, 모바일 웹 메일)
Outlook Windows
Outlook Windows 메일

이 경우 이메일 Designer에서 사용자 정의 다크 모드 설정을 정의하는 경우 해당 설정은 이메일 클라이언트의 설정에 의해 재정의됩니다.

따라서 이러한 이메일 클라이언트가 다크 모드를 처리하는 동안 특정 다크 모드 디자인이 렌더링되지 않습니다.

사용자 정의 다크 모드를 지원하는 클라이언트 custom-dark-mode

일부 이메일 클라이언트는 @media (prefers-color-scheme: dark) 이메일 Designer에서 사용하는 메서드인 Marketo Engage 쿼리를 사용하여 사용자 지정 다크 모드를 렌더링하는 옵션을 제공합니다.

이 옵션을 처리하는 주 클라이언트는 다음과 같습니다.

Apple 메일 macOS
Apple 메일 iOS
Outlook macOS
Outlook.com
Outlook iOS
Outlook Android

이메일 Designer에서 정의하는 설정이 표시됩니다.

NOTE

이메일 Designer에서 사용자 지정 어두운 모드 설정을(를) 정의하는 방법을 알아봅니다.

각 이메일 클라이언트에 따라 일부 제한 사항이 적용될 수 있습니다. 예를 들어 일부 클라이언트(예: Apple Mail 16)는 이미지가 있는 경우 다크 모드를 생성하지 않습니다.

최적의 결과를 얻으려면 타겟팅하는 이메일 클라이언트에서 콘텐츠를 테스트하십시오. 각 클라이언트에서 시뮬레이션을 보려면 전자 메일 Designer의 전자 메일 렌더링 기능을 사용하십시오.

이메일 디자이너의 다크 모드 dark-mode-email-designer

이메일 Designer의 다크 모드와 관련하여 두 가지 측면을 고려해야 합니다.

대부분의 지원 이메일 클라이언트에서 기본 다크 모드가 어떻게 렌더링될지 미리 볼 수 있습니다. 자세히 알아보기
지원하는 이메일 클라이언트의 기본 설정을 재정의하려면 편집 중인 이메일에서 사용자 정의 다크 모드 설정을 정의할 수 있습니다. 자세히 알아보기

기본 다크 모드 미리 보기 preview-dark-mode

이메일 Designer에서 다크 모드에 액세스하고 기본 다크 모드 설정을 미리 보는 방법에 대해 알아봅니다.

이메일 Designer 홈 페이지에서 Design from scratch 옵션을 선택합니다.
전자 메일에 구조 및 콘텐츠를 추가하십시오.
오른쪽 상단에서 Dark mode 토글을 활성화합니다.
기본 어두운 모드 미리보기가 표시됩니다.

기본적으로 이메일 Designer 어두운 모드 미리 보기는 이미지와 아이콘을 제외한 모든 요소에 '전체 색상 반전' 색상 스키마를 적용합니다.

즉, 밝은 영역과 어두운 요소를 가진 영역을 탐지하고 반전시킴으로써 밝은 배경은 어둡게, 어두운 텍스트는 밝게, 어두운 배경은 밝게, 밝은 텍스트는 어두워지게 합니다.

CAUTION

최종 렌더링은 수신자의 이메일 클라이언트에 따라 달라질 수 있습니다. 각 전자 메일 클라이언트에 대한 시뮬레이션을 보려면 전자 메일 렌더링 기능을 사용하십시오.

사용자 정의 다크 모드 정의 define-custom-dark-mode

Dark mode(으)로 전환한 후에는 받는 사람의 전자 메일 클라이언트에서 다크 모드가 활성화된 경우에만 표시되는 콘텐츠의 특정 스타일 요소를 편집할 수 있습니다(해당 기능이 지원되는 경우).

IMPORTANT

다크 모드 최종 렌더링은 각 이메일 클라이언트에 따라 다르므로 한 클라이언트마다 결과가 다를 수 있습니다. 자세히 알아보기

이메일 Designer 사용자 지정 어두운 모드 스타일을 활용하기 위해 Marketo Engage에서는 사용자의 이메일 클라이언트가 어두운 모드로 설정되어 있는지 검색하고 이메일에 정의된 어두운 테마 디자인을 적용하는 @media (prefers-color-scheme: dark) CSS 쿼리를 사용합니다.

사용자 지정 어두운 모드 설정을 정의하려면 아래 단계를 따르십시오.

이메일 Designer에서 어두운 모드 미리 보기(으)로 전환합니다.
텍스트, 배경, 단추 등의 모든 스타일 색상 속성을 편집합니다.
이미지 및 아이콘의 색상을 변경할 수는 없지만 어두운 모드에 대해서만 특정 에셋을 정의할 수 있습니다. 이렇게 하려면 이미지를 선택합니다. Dark mode 창의 전용 토글을 사용하여 Settings(으)로 전환하고 다른 에셋을 선택하세요.

언제든지 Switch to live view 을(를) 통해 다양한 장치 크기에서 콘텐츠가 어떻게 렌더링되는지 확인할 수 있습니다. 이 보기에서 어두운 모드 토글을 선택하여 여러 장치에서 콘텐츠의 어두운 모드 버전을 미리 봅니다.

note note
NOTE
라이브 보기는 다양한 장치 크기에서 렌더링이 어떻게 표시될 수 있는지 비교하도록 설계된 일반 미리 보기입니다. 최종 렌더링은 수신자의 이메일 클라이언트에 따라 달라질 수 있습니다.

다크 모드 변경 사항에 만족하면 Simulate Content 을(를) 클릭합니다.

Render email 을(를) 선택하고 Litmus 계정에 연결합니다. 다양한 이메일 클라이언트에 대한 최종 다크 모드 렌더링을 볼 수 있습니다. 전자 메일 렌더링에 대해 자세히 알아보세요.

note important
IMPORTANT
시뮬레이션은 이메일이 다크 모드로 표시되는 방식과 거의 유사하지만 실제 렌더링은 이메일 서비스 공급자 또는 장치 설정의 변경으로 인해 달라질 수 있습니다.

모범 사례 best-practices

주요 이메일 클라이언트에서 다크 모드 채택이 증가함에 따라 사용자 지정 다크 모드를 사용하는지 여부에 관계없이 밝은 환경과 어두운 환경 모두에서 이메일이 렌더링되는 방식을 고려해야 합니다.

어두운 모드는 색상, 배경 및 이미지를 변경할 수 있으며 디자인 선택 사항을 오버라이드할 수도 있습니다. 시각적 일관성, 접근성 및 브랜드 무결성을 보장하려면 아래 나열된 모범 사례를 따르십시오.

이미지 및 로고 최적화

어두운 모드에서 흰색 상자가 보이지 않도록 로고와 아이콘을 투명 배경이 있는 PNG로 저장합니다.
흰색 또는 밝은 배경이 하드코딩된 이미지를 사용하지 마십시오.
투명도가 옵션이 아닌 경우 디자인에서 단색 배경에 이미지를 배치하여 어색한 색상 반전을 방지합니다.

배경 보기

밝은 모드와 어두운 모드 모두에서 가독성을 위해 텍스트와 배경색 간의 충분한 대비를 보장합니다.
중요한 콘텐츠에 배경색에만 의존하지 마십시오. 일부 클라이언트는 어두운 모드에서 배경색을 재정의하므로 키 정보가 계속 표시되는지 확인합니다.

어두운 모드에서 액세스 가능한 콘텐츠 디자인

색맹이 있는 사람들을 구별하기 쉬운 색상 조합을 사용하십시오.
중간 색조 팔레트를 사용하여 밝은 배경과 어두운 배경의 대비를 보장합니다.
높은 대비로 액세스 가능한 색상 조합을 사용하여 가독성을 향상시키고 WCAG(Web Content Accessibility Guidelines) 표준을 충족합니다. WebAIM의 대비 검사기와 같은 도구를 사용하여 색상 대비를 확인합니다.
가독성에 영향을 줄 수 있으므로 가는 글꼴을 사용하지 마십시오. 브랜드에 얇은 글꼴이 필요한 경우 어두운 모드에서 굵게 표시합니다.
눈의 피로를 유발할 수 있고 일부 이메일 클라이언트가 자동으로 반전시킬 수 있으므로 순수한 검정에서 순수한 흰색을 건너뜁니다.
다크 모드가 지원되지 않는 경우 액세스 가능한 대체 스타일을 제공합니다.

어두운 모드 환경에서 전자 메일 테스트

반전된 색상 구성표를 사용하여 문제를 조기에 발견하는 이메일 Designer의 어두운 모드 미리 보기를 사용하십시오.
Litmus를 활용하는 전자 메일 렌더링 기능을 사용하여 주요 전자 메일 클라이언트에서 디자인을 시뮬레이션하고 어두운 모드에서 색상과 이미지가 어떻게 작동하는지 확인할 수 있습니다.

recommendation-more-help

94ec3174-1d6c-4f51-822d-5424bedeecac