모든 마케터가 다크 모드 이메일에 대해 알아야 할 사항

게시 됨: 2021-08-18

요즘에는 앱도 고트 트렌드를 활용하고 있습니다.

더 진지하게, 우리는 다크 모드에 대해 이야기하고 있습니다. 운영 체제는 항상 반전된 색 구성표를 제공했지만 다크 모드 이메일과 앱은 약간 다릅니다.

많은 사용자가 다크 모드에 열광하지만 이메일 마케팅 담당자에게는 약간의 골칫거리입니다.

각 이메일 클라이언트가 동일한 캠페인을 다르게 표시할 수 있다는 사실을 알고 계실 것입니다. 음, 다크 모드의 도입은 방정식에 하나의 레이어를 더 추가합니다.

이 게시물에서는 이메일 캠페인을 다크 모드에 최적화하기 전에 알아야 할 몇 가지 기본 사항을 살펴보겠습니다.

다크 모드는 무엇이며 사람들이 사용하는 이유는 무엇입니까?

수년 동안 운영 체제와 앱은 기본적으로 흰색 배경과 검은색 텍스트로 콘텐츠를 표시했습니다. 여기서는 이를 "조명 모드"라고 부를 것입니다.

라이트 모드는 여전히 대부분의 앱과 시스템에 대한 기본 옵션이지만 많은 지식이 있는 인터넷 사용자, 특히 하루의 대부분을 온라인에서 보내는 사용자에게 인기가 떨어지고 있습니다.

새로운 데이터에 따르면 평균적인 사람은 매주 온라인에서 44시간 이상을 보냅니다. 많은 사람들에게 컴퓨터나 노트북에서 6시간은 아무 것도 아닙니다.

글쎄, 하루 종일 화면을 응시하는 것은 우리 눈에 좋지 않다는 것이 밝혀졌습니다. TV, 전화, 노트북 등 너무 많은 화면 시간은 눈의 피로를 유발합니다.

밝은 화면 디지털 눈의 피로

출처: 위크돈

유해할 수 있는 것은 밝기만이 아닙니다. 백색 스크린에서 방출되는 청색광은 신체가 멜라토닌을 생성하는 것을 방지하여 일주기 리듬과 수면 주기를 방해할 수 있습니다. 미국인의 최대 절반이 만성 또는 급성 불면증으로 고통받고 있다는 점을 고려하면 우리 모두는 수면 위생을 개선할 수 있습니다.

많은 전화기와 운영 체제에서는 이제 매일 특정 시간이 지나면 자동으로 블루라이트를 줄이거 나 블루라이트 필터를 켜기 위해 따뜻한 색조로 전환할 수 있습니다.

다크 모드 이메일과 앱은 다른 선택을 제공합니다. 흰색 색조를 조정하는 대신 전체 테마를 검은색 또는 짙은 회색으로 변경할 수 있습니다. 그러면 유해한 청색광이 제거됩니다.

Reddit, Facebook Messenger, Twitter 및 WhatsApp과 같은 몇 가지 인기 있는 앱은 내장된 다크 모드 옵션을 제공합니다. Facebook Messenger는 처음에는 이모티콘을 보내 트리거할 수 있는 부활절 달걀로 다크 모드를 출시했지만 이제는 누구나 앱 설정에서 켤 수 있습니다.

일부 스마트폰 앱은 어두운 모드를 제공하지만 사용자는 Apple 또는 Android 테마를 이 모드로 전환해야 합니다. 즉, 앱 설정을 통해 제공되지 않습니다.

다크 모드 이메일과 앱은 OLED 화면이 있는 기기에서 배터리 소모를 줄이는 데에도 유용합니다. OLED를 사용하면 어두운 픽셀이 검은색이기 때문에 화면에 표시되지 않습니다. 그러나 LCD 및 표준 LED 화면의 경우 어두운 픽셀에는 여전히 배터리 수명이 필요합니다.

어떤 클라이언트가 다크 모드 이메일을 제공합니까?

이메일 클라이언트는 다크 모드를 받아들이는 것을 꺼리는 것 같습니다.

꼭 제공하고 싶지 않은 것은 아니지만, 각 이메일 캠페인이 다르게 코딩되기 때문에 심미적으로 만족스러운 다크 버전을 구현하기가 어렵습니다.

일부 이메일 클라이언트는 앱 내에서 켤 수 있는 특정 설정으로 어두운 모드를 제공합니다. 한편, 다른 클라이언트에서는 앱이 자동으로 다크 모드로 전환되기 전에 운영 체제 설정을 변경해야 합니다.

현재 다크 모드를 제공하는 것으로 알려진 클라이언트 및 앱은 다음과 같습니다.

  • Gmail 앱(iOS 및 Android)

  • Outlook 앱(iOS 및 Android)

  • 애플 메일(데스크탑)

  • Outlook 2019(Mac, Windows 및 웹)

또한 Gmail은 특정 "어두운 모드"를 제공하지 않을 수 있지만 테마를 밝은 톤에서 어두운 톤으로 전환할 수 있습니다.

다크 모드 이메일은 어떻게 생겼나요?

모든 이메일과 마찬가지로 이메일에 따라 다릅니다.

앱을 사용하면 다크 모드가 간단합니다. 개발자는 일부 CSS 조각을 전환하고 사용자가 선택할 수 있도록 합니다.

트위터는 두 가지 버전의 다크 모드를 제공합니다: 소등과 어둡게.

트위터 다크 모드자동으로 생성된 휴대폰 설명의 스크린샷

출처: 트위터

다음은 Facebook Messenger 및 Reddit에서 다크 모드가 어떻게 보이는지 보여줍니다.

페이스북과 레딧 다크모드자동으로 생성된 컴퓨터 설명의 스크린샷

출처: 페이스북, 레딧

완벽한 세상에서 다크 모드 이메일은 마이크로소프트 블로그의 이 그래픽과 똑같을 것입니다.

마이크로소프트 블로그 다크 모드

출처: 마이크로소프트 블로그

다크 모드 이메일에 대한 내용은 다음과 같습니다. 이메일 클라이언트는 사용할 특정 버전을 선택하지 않았습니다. 서로 다른 이메일 클라이언트에서 볼 수 있는 세 가지 특정 유형의 다크 모드가 있는 것 같습니다.

1. 색상 변화 없음

첫째, 이메일 클라이언트는 다크 모드 테마를 유지하면서 고유한 HTML로 이메일을 렌더링합니다.

데스크톱용 Gmail의 경우 이메일 내용은 조금도 변경되지 않고 Gmail 테마만 어둡게 전환됩니다.

Gmail 데스크톱 앱에서는 다음과 같이 표시됩니다.

Gmail 다크 모드

Gmail 다크 모드

출처: 지메일

Apple의 경우 일반 텍스트 이메일이 HTML 이메일이 아닌 밝은 모드에서 어두운 모드로의 전환을 트리거하는 것처럼 보입니다.

2. 부분 다크 모드

부분 어두운 모드 이메일을 사용하면 클라이언트가 밝은 배경을 식별하고 자동으로 어두운 배경으로 전환합니다(어두운 텍스트를 밝은 것으로 전환하는 동안).

이 경우 구독자가 어두운 모드를 켠 경우 어두운 배경으로 이메일 캠페인을 디자인해도 변경되지 않습니다.

다크 모드 디자인

출처: 리트머스

3. 완전 반전 다크 모드

마지막으로 전체 다크 모드는 디자인 방식에 관계없이 모든 이메일을 대상으로 하며 CSS를 완전히 뒤집습니다.

즉, 검정색 배경의 어두운 모드용 이메일을 디자인하면 이메일 클라이언트가 다시 흰색으로 전환합니다.

이것은 많은 사람들이 사용하는 다크 모드의 버전입니다.

Gmail 및 Outlook과 같은 인기 있는 클라이언트도 다크 모드 사용자를 대상으로 하는 것을 허용하지 않습니다. 이메일 개발자가 적응하기 시작하면 이메일 클라이언트가 코드를 변경하여 모든 사람에게 적합한 다크 모드를 찾길 바랍니다.

다크 모드 이메일을 위한 디자인

기억해야 할 가장 중요한 디자인 요소는 배경색이 검정색으로 전환된다는 것입니다.

디자이너는 화면 배경과 혼합할 부분적으로 흰색 요소가 있는 이미지를 선택하는 것이 일반적입니다. 다른 경우에는 디자이너가 특정 색상으로 이미지를 만들고 배경에 동일한 색상을 사용하여 매끄럽게 보이도록 합니다.

다크 모드가 색상을 반전시키면 사려 깊은 디자인을 버릴 수 있습니다.

이 이메일에서 색상이 어떻게 조금씩 변하는지 보십시오.

부분적 다크 모드 디자인

출처 : 미디엄

밝은 모드에서 밝은 노란색은 어두운 모드에서 갈색으로 전환됩니다. 한편, 삼성 이미지의 청록색 배경은 이메일 배경색이 어두워지기 때문에 어두운 모드에서 두드러집니다.

다크 모드 이메일용 이미지 생성

가능한 한 배경이 투명한 이미지를 사용하는 것이 현명한 생각입니다.

배경색을 제어할 수 없는 경우 사진과 로고를 깨끗하게 유지하고 싶을 것입니다. 그래서 투명성이 갈 길입니다.

다시 말하지만, 대부분의 디자이너는 가장자리 주위에 흰색 테두리가 있는 로고와 그림을 사용합니다. 일반적으로 트림이 이메일의 흰색 배경과 혼합되기 때문에 문제가 되지 않습니다.

그러나 다크 모드에서는 그 트림이 두드러집니다. 일반적으로 큰 결함은 아니지만 이메일이 약간 어수선해 보일 수 있습니다.

이 소셜 미디어 아이콘의 차이점이 보이십니까?

소셜 미디어 아이콘 다크 모드

출처: 캠페인 모니터

어두운 모드에서 눈부시게 느껴질 수 있는 모든 밝은 이미지 위에 디밍 필터를 추가하는 것도 가치가 있습니다.

다크 모드 이메일에 대한 텍스트 최적화

많은 브랜드에서 일반 검정색 로고를 사용합니다. 투명한 배경을 추가하고 로고를 검정색 배경 위에 던지면 로고가 보이지 않게 됩니다.

다행히 약간의 계획만 있으면 쉽게 해결할 수 있습니다.

검은색 로고 또는 머리글을 처리하는 경우 흰색 테두리를 추가하여 어두운 모드 이메일에서 검은색 배경에 걸쳐 표시되도록 합니다.

흰색 테두리를 추가하면 배경이 흰색으로 바뀌면 테두리가 사라지기 때문에 어두운 모드와 밝은 모드 모두에서 잘 작동합니다.

사이트 포인트 다크 모드

출처: 캠페인 모니터

테스트를 잊지 마세요

모든 이메일 마케팅과 마찬가지로 특히 다크 모드의 경우 많은 테스트를 실행하지 않고 캠페인을 보내지 않도록 하십시오.

이메일 클라이언트와 앱은 아직 이상적인 다크 모드 전략을 찾지 못했으므로 표준 및 CSS 스타일이 몇 번 변경될 것으로 예상합니다.

또한 다크 모드 이메일은 모든 클라이언트에서 다르게 보입니다. 그러나 밝은 모드와 어두운 모드에서 테스트를 실행하면 모든 장치에서 이메일을 읽기 쉽고 멋지게 유지하는 데 도움이 될 수 있습니다.

마무리

일관된 이메일 디자인을 정하는 것은 이미 어려울 수 있으며 다크 모드 이메일 기능은 도움이 되지 않습니다. 다행히 구독자가 사용하는 이메일 클라이언트에 대해 알아보고 이메일을 멋지게 만들기 위한 몇 가지 모범 사례를 따를 수 있습니다.

  • 검은색 텍스트 또는 로고 주위에 흰색 윤곽선을 포함합니다.

  • 밝은 이미지에 비네트 또는 희미한 필터를 추가하십시오.

  • 배경이 투명한 이미지, 로고, 사진을 사용해 보세요.

  • 이미지를 배경색과 혼합하지 마십시오.

  • 많은 테스트를 실행합니다.

디자인을 개선하고 최고의 이메일을 보내고 싶습니까? 효과적인 이메일 디자인을 위한 이 궁극적인 가이드를 확인하십시오.