다크 모드 이메일 디자인 모범 사례

학습 내용

사용자 중 일부가 화면을 어둡게 하기 위해 켜는 기기 설정인 다크 모드에 대해 알아보세요. 이 설정은 이메일이 표시되는 방식에 영향을 줘요. 다크 모드는 기기 수준에서 선택되는 최종 사용자 설정이며, Klaviyo는 각 기기에서 다크 모드가 구현되는 방식에 대해 직접적으로 제어할 수 없어요.

사람들은 왜 다크 모드를 사용하나요?

다크 모드는 다양한 이점이 있다고 여겨지기 때문에 인기를 얻었어요. 사용자는 다음과 같은 이유로 다크 모드를 선택할 수 있어요:

• 눈의 피로를 최소화하세요.
• 더 건강한 수면 습관을 지원하세요.
• 기기의 배터리 수명을 연장하세요.
• 접근성을 개선하세요.

Litmus에 따르면, 다크 모드에서 이메일을 보는 사람 수는 2021년 28%에서 2022년 34%로 증가했어요.

다크 모드 및 브랜딩

다크 모드는 받은편지함에서 렌더링하는 데 사용되는 HTML을 조정해 이메일 브랜딩에 영향을 미쳐요. 이러한 조정은 텍스트 전용 이메일에서 색상을 반전하는 것(HTML 이메일은 변경하지 않음)처럼 작을 수도 있고, 완전히 디자인된 이메일 템플릿의 모든 색상을 조정하는 것처럼 큰 변화일 수도 있어요.

이메일을 디자인할 때 다크 모드를 고려하지 않으면 텍스트가 읽기 어려워지고, 브랜드 스타일과 맞지 않는 색상이 적용되는 등 문제가 생길 수 있어요.

SWAK Cosmetics의 로고를 예로 들어 보세요. 흰색 배경에서는 아주 멋지게 보입니다.

하지만 다크 모드 기기에서 보면 읽을 수 없어요.

라이트 모드와 다크 모드에서 이 이메일 헤더가 어떻게 달라지는지 확인해 보세요. 이메일 배경색, 텍스트 색상, 링크 바 색상이 모두 반전되었어요.

다크 모드를 제공하는 기기 및 운영 체제

다크 모드 변경 사항의 구체적인 내용은 기기와 운영 체제에 따라 달라요. Litmus는 다크 모드를 제공하는 기기와 HTML 이메일을 처리하는 방식에 대한 리소스를 제공합니다.

일반적으로 받은편지함은 2가지 범주 중 1가지에 속해요. 변경을 거의 하지 않거나 전혀 하지 않는 받은편지함과 이메일 색상을 반전시키는 받은편지함이에요.

최소한의 변경

Apple Mail(데스크톱) 같은 일부 받은 편지함은 이메일 콘텐츠를 직접 변경하지 않아요(다크 모드 메타태그를 포함한 경우는 제외). 이 받은편지함에서는 다크 모드와 라이트 모드에서 메시지 간에 보이는 유일한 차이는 발신자 정보 뒤에 표시되는 색상이에요.

색상 반전

데스크톱의 Outlook 같은 다른 받은편지함에서는 색상이 부분적으로 반전돼요. 즉, 일부 밝은 색상은 더 어두운 색조로 바뀌고, 일부 어두운 색상은 더 밝은 색상으로 바뀝니다(예: 이전에는 밝은 배경에 있던 어두운 텍스트). 결과적으로 원본보다 눈에 띄게 더 어두운 이메일이 됩니다.

완화 전략

라이트 모드와 다크 모드에 맞게 최적화하면서 브랜딩을 유지하는 전략은 여러 가지가 있어요. 팀의 역량과 브랜딩 요구 사항에 가장 잘 맞는 방법을 선택하세요.

라이트 모드와 다크 모드를 고려해 디자인을 개발하세요.

Klaviyo의 드래그 앤 드롭 편집기를 사용해 이메일을 발송한다면 이 전략이 가장 좋아요. 다크 모드 기기에서 어떤 변경이 적용되는지 염두에 두고 이메일 템플릿을 개발하세요:

• Bola의 베이커리 제품용 이미지처럼, 밝은 배경과 어두운 배경 모두에서 멋지게 보이는 로고와 이미지를 사용해 보세요.
  

• 또는 투명한 배경의 어두운 로고에 밝은 색상의 그림자를 추가해 다크 모드에서 더 잘 보이도록 하세요.
  

• 또는 투명 배경을 사용하는 대신 배경색이 포함된 이미지 파일을 사용하세요. 이 옵션을 선택하는 경우 이미지가 차지하는 공간을 완전히 채우도록 해 주세요(예: 전체 너비 이미지의 경우 가로 600px).
  

• 가능하면 텍스트가 포함된 이미지를 사용하기보다 텍스트를 사용하세요. 이렇게 하면 전체 색상 반전이 가능하며(또한 접근성에도 더 좋아요).

사용자 지정 코드 어두운 버전 및 밝은 버전

개발자 팀이 HTML 이메일을 처음부터 맞춤 코딩할 수 있다면, 뷰어가 다크 모드 또는 라이트 모드를 사용 중인지 감지하고 그에 맞게 디자인을 조정하는 CSS를 제공할 수 있어요. 이렇게 하면 일부 받은편지함에서 특정 다크 모드 기본 설정을 재정의할 수 있어, 더 많은 부분을 직접 제어할 수 있어요.

이메일 코드에서 @media (prefers-color-scheme: dark) 및 [data-ogsc]을 사용해 다크 모드 사용자를 구체적으로 타겟팅할 수 있어요. 어떤 이메일 클라이언트가 이러한 태그를 지원하는지 및 자체 디자인에서 사용할 코드에 대해 자세히 알아보세요.

이미지만 있는 이메일 사용

여러 가지 이유로 이미지 전용 이메일 사용은 권장하지 않아요:

• 대체 텍스트가 없으면, 이메일이 받은편지함에서 수상해 보이고 스팸 폴더로 들어갈 수 있어요.
• 이미지만 있는 이메일은 많은 사용자와 스크린 리더가 읽기 어려워 접근성 모범 사례에 해당하지 않아요.
• 라이트 모드로 보이도록 하려고 이미지만 있는 이메일을 사용하는 것은 구독자의 기본 설정을 우회하는 방식이에요.

하지만 많은 브랜드에서 이 전략을 사용하므로, 여기에서 언급할 가치가 있어요. 이미지만 있는 이메일은 색상, 글꼴, 간격 등을 위해 HTML에 의존하지 않아요. 즉, 반전될 수 없으므로 받은편지함에는 일반적으로 원래 디자인과 일치하는 이메일이 표시돼요.