다크 모드 콘텐츠 관리 dark-mode

전자 메일을 디자인할 때 Journey Optimizer 전자 메일 Designer을(를) 사용하면 어두운 모드 보기로 전환할 수 있습니다.

이 다크 모드 보기에서는 다크 모드가 켜져 있을 때 지원 전자 메일 클라이언트가 표시할 특정 사용자 지정 설정을 정의할 수도 있습니다.

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

다양한 이메일 클라이언트에서 다크 모드가 렌더링되는 방식은 복잡합니다. 먼저 어두운 모드를 정의하겠습니다.

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

주요 운영 체제 및 앱에서 증가하는 추세로, 콘텐츠를 읽기 쉽고 시각적으로 모든 사용자에게 어필할 수 있도록 하는 것이 최신 이메일 디자인에서 중요한 고려 사항이 되었습니다.

가드레일 guardrails

다크모드 렌더링 측면에서의 기대는 다양한 이메일 클라이언트에서 적용하는 방식이 많이 달라질 수 있어 신중하게 고려해야 한다.

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

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

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

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

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

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

이러한 클라이언트의 예는 다음과 같습니다.

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

이러한 이메일 클라이언트가 다크 모드를 처리하지만 특정 다크 모드 디자인은 렌더링되지 않는다는 것을 이해하는 것이 중요합니다.

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

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

다음은 이 옵션을 처리하는 주 클라이언트 목록입니다.

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

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

최적의 결과를 얻으려면 타겟팅하는 이메일 클라이언트로 콘텐츠를 테스트합니다. 각 클라이언트의 최종 결과에 최대한 근접한 시뮬레이션을 보려면 이메일 Designer에서 이메일 렌더링 옵션을 사용하십시오.

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

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

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

이메일 Designer에서 다크 모드에 액세스하여 기본 다크 모드 설정을 미리 보려면 아래 단계를 따르십시오.

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

밝고 어두운 요소를 가진 영역을 탐지하고 반전시켜 밝은 배경은 어둡게, 어두운 텍스트는 밝게, 어두운 배경은 밝게, 밝은 텍스트는 어두워지게 하는 것을 의미한다.

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

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

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

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

모범 사례 best-practices

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

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

이미지 및 로고 최적화

배경 보기

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

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