이메일에서 다크 모드 지원은 세 가지로 갈라지며, 그중 대부분의 발신자가 디자인 기준으로 삼는 CSS는 단 한 가지뿐입니다. 일부 클라이언트는 @media (prefers-color-scheme: dark)를 작성된 그대로 인식합니다. 다른 클라이언트는 이를 절대 일치할 수 없는 문법으로 조용히 재작성한 뒤, 대신 자체적인 자동 반전 휴리스틱으로 폴백합니다. 세 번째 그룹은 더 새로운 color-scheme 메타 태그를 거의 인식하지 않습니다. 첫 번째 그룹만을 위해 디자인한다는 것은 받은편지함의 절반도 안 되는 대상만을 위해 디자인한다는 뜻입니다.
그룹 1: 미디어 쿼리를 인식하는 클라이언트
caniemail.com에 따르면 @media (prefers-color-scheme: dark)는 Gmail(모든 플랫폼)과 Apple Mail(macOS 12.4+/iOS 13.0+)에서 완전히 지원됩니다. Outlook도 대부분의 환경에서 그 뒤를 바짝 따릅니다 — Windows(2016+), macOS(16.70+), Outlook.com(2019-07+), 모바일(2020-01+) 모두 이 쿼리를 인식하지만, macOS Outlook과 Outlook.com은 이와 함께 자체 다크 모드 데이터 속성도 추가로 적용합니다. Samsung Email(Android 6.1+)도 이를 완전히 구현합니다. 종합하면 caniemail.com이 테스트한 패널 전체 지원율은 **41.86%**입니다 — 주요 클라이언트의 실질적인 과반수이지만, 전체와는 거리가 멉니다.
그룹 2: 쿼리를 절대 일치하지 않는 문법으로 재작성하는 클라이언트
대부분의 발신자가 봐온, 실제로 다크 모드에서 깨져 보이는 이메일을 만들어내는 것이 바로 이 그룹입니다. Yahoo Mail, AOL, Fastmail은 prefers-color-scheme를 단순히 무시하는 것이 아니라, 절대 참(true)으로 평가될 수 없는 유효하지 않은 문법(@media ( _filtered_a ))으로 재작성하여 그 안의 모든 규칙을 조용히 무력화합니다. HEY는 쿼리를 @media (false)로 재작성하는 동등한 방식을 씁니다. 두 경우 모두, 클라이언트는 원래의 라이트 모드 디자인에 자체적인 자동 색상 반전 휴리스틱을 적용합니다 — 이것이 바로 아무도 의도적으로 디자인하지 않은, 색이 바랜 로고와 읽을 수 없는 저대비 텍스트를 만들어내는 원인입니다. 발신자가 작성한 그 무엇도 실제로 그 결과를 이끌어내지 않기 때문입니다.
그룹 3: color-scheme 메타 태그, 거의 채택되지 않음
<meta name="color-scheme" content="light dark">(그리고 그 사촌 격인 supported-color-schemes)는 이메일이 의도적으로 어떤 모드로 디자인되었는지를 클라이언트에게 알려, 클라이언트가 추측 대신 자동 반전을 아예 건너뛸 수 있게 하기 위해 존재합니다. 더 정교한 해법이지만, caniemail.com에 따르면 채택률은 종합 **4.88%**에 불과하며, 의미 있는 지원은 더 새로운 버전의 Apple Mail(macOS 16+/iOS 12.4+)과 Gmail 데스크톱 웹메일(2023-09+)로 제한됩니다. 그 외 대부분의 클라이언트는 이를 아예 무시합니다.
디자인에 있어 이것이 의미하는 바
세 그룹 모두를 한 번에 커버하는 단일 CSS 규칙은 존재하지 않습니다 — 이는 특정 기법의 허점이 아니라 위 구분에서 곧바로 따라 나오는 결론입니다. 믿을 수 있는 접근법은 점진적 향상(progressive enhancement)이며, Litmus의 다크 모드 가이드도 동일한 결론에 이릅니다:
- 먼저 탄탄하고 완전히 읽을 수 있는 라이트 모드 이메일을 디자인하세요. 이는 그룹 2의 자동 반전 클라이언트를 포함해 모든 클라이언트가 폴백하는 기준선입니다.
- 그 위에 명시적인
prefers-color-scheme오버라이드를 겹겹이 쌓으세요. 실제로 이를 적용할 약 42%의 클라이언트를 위해서입니다 — 메타 태그 하나에만 의존하지 마세요. 채택률이 훨씬 낮으니까요. - 로고와 이미지 자산을 자동 반전에 대비해 방탄 처리하세요. 완전히 흰색 배경 위의 반투명 PNG는 그룹 2의 클라이언트에서 읽을 수 없는 어두운 배경에 어두운 색상이 겹치는 상태로 반전될 수 있습니다. 은은한 테두리나 자산 뒤의 단색 배경 스와치는 벌거벗은 투명 PNG와 달리 반전을 견뎌냅니다.
- 어두운 배경이 곧 다크 모드를 인식하는 텍스트 색상을 의미한다고 절대 가정하지 마세요. 그룹 2의 자동 반전은 발신자가 기대하는 방식으로 텍스트를 건드리지 않은 채 배경만 뒤집을 수 있으므로, 다크 모드 아래에서는 명시적으로 지정한 텍스트 색상이 오히려 덜 중요해지는 것이 아니라 더 중요해집니다.
MailInApp 자체의 스튜디오와 폴백 엔진에 적용된 동일한 클라이언트별 분석은 이메일 클라이언트 지원을 참고하세요.