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

학습 내용

일부 사용자가 디스플레이를 어둡게 하기 위해 켜는 기기 설정인 다크 모드에 대해 알아보세요. 이 설정은 이메일이 표시되는 방식에 영향을 줍니다. 다크 모드는 디바이스 수준에서 선택되는 최종 사용자 설정이며, 클라비요는 각 디바이스에서 다크 모드가 구현되는 방식을 직접 제어할 수 없습니다. 

사람들이 다크 모드를 사용하는 이유는 무엇인가요?

다크 모드는 다양한 이점이 있는 것으로 알려져 인기를 끌고 있습니다. 사용자는 다크 모드를 선택할 수 있습니다: 

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

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

다크 모드와 브랜딩

다크 모드는 받은 편지함에서 렌더링하는 데 사용되는 HTML을 조정하여 이메일 브랜딩에 영향을 줍니다. 이러한 조정은 텍스트만 있는 이메일의 색상을 반전시키는 것(HTML 이메일은 변경하지 않고 그대로 두는 것)처럼 아주 작은 것부터 완전히 디자인된 이메일 템플릿의 모든 색상을 조정하는 것까지 다양합니다.

이메일을 디자인할 때 다크 모드를 고려하지 않으면 읽기 어려운 텍스트, 브랜드 스타일에 맞지 않는 색상 등이 발생할 수 있습니다. 

SWAK 화장품의 로고를 생각해 보세요. 흰색 배경에서는 멋지게 보입니다.

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

이 이메일 헤더가 라이트 모드와 다크 모드 사이에서 변경되는 점에 유의하세요. 이메일 배경색, 텍스트 색상, 링크 표시줄 색상이 모두 반전되었습니다. 

다크 모드를 제공하는 디바이스 및 운영 체제

다크 모드 변경의 세부 사항은 디바이스와 운영 체제마다 다릅니다. Litmus는 다크 모드를 제공하는 기기와 해당 기기가 HTML 이메일을 처리하는 방식에 대한 리소스를 제공합니다. 

일반적으로 받은 편지함은 최소한의 변경만 하거나 변경하지 않는 범주와 이메일 색상이 반전되는 범주 중 하나로 분류됩니다.

최소한의 변경 사항

데스크톱용 Apple Mail과 같은 일부 받은 편지함에서는 다크 모드 메타태그를 포함하지 않는 한 이메일 콘텐츠를 직접 변경할 수 없습니다. 이 받은 편지함에서 어두운 모드와 밝은 모드의 메시지 사이에 표시되는 유일한 변화는 발신자 정보 뒤에 있는 색상입니다.

색상 반전

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

완화 전략

밝고 어두운 모드에 최적화하면서 브랜딩을 유지하기 위한 몇 가지 전략이 있습니다. 팀의 역량과 브랜딩 요구사항에 가장 적합한 것을 선택하세요. 

밝고 어두운 모드를 염두에 두고 디자인 개발

클라비요의 드래그 앤 드롭 편집기를 사용하여 이메일을 보내는 경우 이 전략이 가장 좋습니다. 다크 모드 기기에서 이메일 템플릿이 어떤 변화를 겪게 될지 염두에 두고 이메일 템플릿을 개발하세요: 

• 볼라의 제빵 제품처럼 밝고 어두운 배경에 잘 어울리는 로고와 이미지를 사용하세요.
  
• 또는 투명한 배경의 어두운 로고에 밝은 색상의 그림자를 추가하여 어두운 모드에서 눈에 띄도록 합니다.
  
• 또는 투명한 배경을 사용하는 대신 배경색이 포함된 이미지 파일을 사용하세요. 이 옵션을 선택하는 경우 이미지가 차지하는 공간을 완전히 채우도록 합니다(예: 전체 너비 이미지의 경우 너비 600px).
  
• 가능한 한 텍스트가 포함된 이미지보다는 텍스트를 사용합니다. 이렇게 하면 전체 색상 반전이 가능합니다(또한 접근성 측면에서도 더 좋습니다).

사용자 지정 코드 다크 및 라이트 버전

HTML 이메일을 처음부터 사용자 지정 코딩할 수 있는 개발자 팀이 있는 경우 뷰어가 어두운 모드 또는 밝은 모드를 사용하는지 감지하고 그에 따라 디자인을 조정하는 CSS를 제공할 수 있습니다. 이렇게 하면 일부 받은 편지함의 특정 다크 모드 기본값을 무시할 수 있으므로 더 많은 제어 권한을 가질 수 있습니다. 

이메일 코드에서 @media(prefers-color-scheme: dark ) 및 [data-ogsc] 를 사용하여 다크 모드 사용자를 특별히 타겟팅할 수 있습니다. 이러한 태그를 지원하는 이메일 클라이언트와 디자인에 사용할 코드에 대해 자세히 알아보세요.

이미지 전용 이메일 사용

여러 가지 이유로 이미지 전용 이메일은 사용하지 않는 것이 좋습니다: 

• 대체 텍스트가 없는 이메일은 받은 편지함에서 의심스러워 보일 수 있으며 스팸 폴더로 분류될 수 있습니다. 
• 이미지 전용 이메일은 많은 사람과 화면 리더가 읽기 어렵기 때문에 접근성 모범 사례에 해당하지 않습니다.
• 이미지 전용 이메일을 사용하여 라이트 모드를 강제로 표시하는 것은 구독자의 기본 설정을 우회하는 것입니다.

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

추가 리소스

• 이메일 템플릿 편집기 가이드 
• 이메일 및 양식의 접근성 모범 사례 
• 코스: 이메일 디자인 시작하기