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

학습 내용

다크 모드는 사용자가 기기나 이메일 앱에서 켤 수 있는 설정으로, 화면을 더 어둡게 표시해요. 이 설정은 이메일이 표시되는 방식에 영향을 줘요. Klaviyo는 각 받은편지함에서 다크 모드를 적용하는 방식에 대해 직접적으로 제어할 수 없어요.

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

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

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

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

다크 모드 및 브랜딩

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

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

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

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

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

다크 모드를 제공하는 이메일 앱 및 기기

다크 모드에서 바뀌는 구체적인 내용은 이메일 앱, 기기, 운영 체제에 따라 달라요. Litmus에서 다크 모드를 제공하는 이메일 클라이언트와 HTML 이메일을 어떻게 처리하는지에 대한 리소스를 제공해요.

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

최소한의 변경

데스크톱용 Apple Mail 같은 일부 받은편지함은 다크 모드 메타태그를 포함하지 않으면 완전히 디자인된 HTML 이메일의 색상을 그대로 유지해요. 텍스트 전용 이메일도 다크 모드에서 변경될 수 있어요. 이메일 콘텐츠가 그대로이면, 주변 받은편지함만 색상이 바뀌어요.

색상 반전

Outlook.com 같은 다른 받은편지함은 색상이 일부 반전돼요. 즉, 일부 더 밝은 색상이 더 어두운 색조로 바뀌고, 일부 더 어두운 색상은 더 밝은 색상으로 바뀐다는 뜻이에요(예: 이전에는 밝은 배경에 있던 어두운 텍스트). 최종 결과물은 원본보다 눈에 띄게 더 어두운 이메일이에요.

일부 받은편지함은 전체 색상 반전을 적용해 밝은 배경과 어두운 배경을 모두 변경해요. 예를 들어, Windows용 Outlook 2021은 어두운 배경을 밝게 바꿀 수 있어요.

완화 전략

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

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

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

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

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

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

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

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

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

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

이미지만 있는 이메일은 피하세요

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

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

많은 브랜드가 이미지만 있는 이메일을 사용하는데, 이미지 파일은 이미지에 포함된 색상과 글꼴을 그대로 유지해 주기 때문이에요. 하지만 이미지만 있는 이메일도 레이아웃, 여백, 주변 배경을 위해 HTML에 의존해요. 받은편지함은 다크 모드에서 주변 색상을 바꿀 수 있기 때문에, 이 방식으로는 이메일 전체가 원래 디자인과 일치한다고 보장할 수 없어요.

라이트 모드와 다크 모드에서 이메일을 테스트해 보세요

전송하기 전에 두 모드 모두에서 로고, 텍스트, 링크가 잘 읽히는지 확인해 주세요. 받은편지함 테스트는 유료 Klaviyo 계정에서 사용할 수 있으며, 사용자당 월 100회 테스트가 포함돼요. 생성하는 받은편지함 미리보기 1개는 테스트 1회로 계산돼요.

1. 드래그 앤 드롭 이메일 편집기에서 미리보기를 클릭한 다음 수신함 테스트를 선택합니다.
2. 미리보기에 사용할 프로필을 선택하세요. 이벤트 데이터를 사용하는 이메일의 경우, 관련 이벤트를 선택해 개인화된 콘텐츠를 확인할 수 있어요.
3. 수신함 테스트 선택에서 다크 모드를 펼친 다음, 구독자가 사용하는 수신함을 선택해 주세요. 비교를 위해 라이트 모드 버전을 선택하고, 필요 없는 미리 선택된 수신함은 제거해 주세요.
4. 테스트 실행을 클릭해 주세요. 미리 보기가 준비되면, 각 타일을 클릭해 확인해 보세요.
5. 편집기로 돌아가려면 완료를 클릭하세요. 필요한 디자인 변경을 적용한 다음, 업데이트된 이메일을 확인할 수 있도록 새 테스트를 실행하세요.

받은편지함 테스트 사용 방법에 관해 자세히 알아보세요. 접근할 수 있는 받은편지함으로 테스트 이메일을 보내고, 라이트 모드와 다크 모드에서 비교할 수도 있어요.

추가 자료