활동 요약 이메일의 다크 모드 문제 조사

[simon]

_이 글은 몇 장의 사진과 쉽게 적용할 수 있는 해결책을 담은 짧은 글로 시작하려 했었습니다. 하지만 점점 길어지고 말았네요. HTML 이메일은 다루기 어렵습니다. 재미를 위해, 문제가 어떻게 생길 수 있는지 보여드리겠습니다: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub

이 글은 건너뛰어 읽으셔도 되고, 사진만 보셔도 됩니다. 글을 읽다 보면, 다크 모드 인기에 힘입어 현재 코드에 해결책을 억지로 붙이는 것보다 다이제스트 이메일 자체를 재구성하는 것이 가치가 있을 수 있다는 결론에 거의 도달하게 됩니다. 이는 제 권한 밖의 일이며, 아마도 제가 이 문제에 대해 너무 오래 들여다본 탓일지도 모릅니다.

---

최근 다크 모드로 설정된 이메일 클라이언트에서 다이제스트 이메일이 어떻게 렌더링되는지에 대한 질문들이 몇 가지 있었습니다. 주요 문제는 다이제스트 헤더의 배경색이 전체 색상 반전을 통해 다크 모드를 처리하는 이메일 클라이언트(구글 앱(iOS), Outlook 2021(Windows), Office 365(Windows), Windows Mail)에서 반전된다는 점입니다. 이로 인해 헤더 색상과 사이트 로고 사이에 대비 문제가 발생합니다.

이러한 이메일 클라이언트는 버튼의 텍스트 색상과 다이제스트의 “마지막 방문 이후” 섹션의 텍스트 색상에도 문제가 있습니다.

아래 모든 이미지는 Litmus 이메일 테스트 서비스에서 가져왔습니다:

다크 컬러 스킴을 사용하는 Discourse 사이트에서, 투명한 배경의 흰색 PNG 로고를 사용하는 경우:

기대되는 결과 (Android용 Gmail 앱 다크 모드):

나쁜 결과 (iOS용 Gmail 다크 모드, OL Office 365 다크 모드, Outlook 2021 다크 모드, Windows 10 메일 다크 모드):

모바일 클라이언트 개요 (iOS용 Gmail은 헤더 색상에서 명백한 문제가 있는 유일한 클라이언트입니다):

여기서는 Meta 다이제스트 이메일(기본 라이트 컬러 스킴, 투명한 배경의 다크 PNG 로고)에 대한 동일한 테스트를 보여줍니다. 참고로 Meta는 다이제스트에 사용자 정의 스타일 적용 사이트 설정이 활성화되어 있지 않으므로, 이를 지원하는 클라이언트(Apple Mail 및 최신 버전의 iOS 메일)에 대한 다크 모드 메타 태그와 스타일을 받지 못합니다. 다이제스트에 사용자 정의 스타일 적용 설정이 활성화되어 있었다면, iPhone 다크 모드 테스트에서도 로고/배경색 대비 관련 문제가 발생할 것으로 추정됩니다.

이메일 헤더 배경색을 사이트의 기본 컬러 스킴 색상과 일치하도록 강제할 수 있는 몇 가지 방법이 있습니다:

iOS용 Gmail 앱의 경우, linear-gradient로 생성된 배경 이미지를 사용하여 헤더 배경색을 설정할 수 있습니다. 이 방식으로 생성된 배경 이미지는 색상이 반전되지 않습니다. 트릭은 linear-gradient의 두 색상을 모두 Discourse 사이트 기본 컬러 스킴의 “헤더 배경” 색상 값으로 설정하는 것입니다.

이것은 현재 관리자 / 사용자 정의 / 이메일 스타일 / CSS 탭에 사용자 정의 CSS를 추가하여 달성할 수 있습니다. 색상 값을 기본 컬러 스킴의 “헤더 배경” 색상 값으로 설정하세요. (참고: 이메일 CSS 에디터에서 var(--header_background)를 사용하여 색상을 설정할 수는 없습니다):

.digest-header {
    background-image: linear-gradient(#111, #111);
}

Meta 다이제스트 이메일에 대해 이 방법을 테스트해 보니, 기본 라이트 컬러 스킴을 사용하는 사이트의 해결책으로서 이 방법에 대해 의문이 들기 시작합니다. 로고는 읽을 수 있지만, 이렇게 보이는 것이 조금 이상해 보이지 않나요?

Outlook 2021 다크 모드 및 Windows 10 메일 다크 모드 데스크톱 이메일 클라이언트의 경우, 헤더 배경색 반전 문제는 .digest-header에 설정된 background-color에 !important 규칙을 추가하여 수정할 수 있습니다. 이 작업은 Discourse가 이미 !important 규칙 없이 해당 요소에 background-color 스타일을 추가하고 있기 때문에 사용자 정의 CSS를 통해 수행할 수 없습니다. 그 규칙은 사용자 정의 CSS 뒤에 추가되므로 우선순위가 더 높습니다. (참고: 이 방법은 배경색을 다크 색상으로 강제하는 데만 작동하는 것 같습니다. 헤더 배경을 #ffffff로 강제하려고 할 때는 실패합니다.)

전체 색상 반전을 수행하는 이메일 클라이언트에서 “마지막 방문 이후” 섹션의 텍스트 색상 문제는 쉬운 해결책이 없는 것으로 보입니다. 여기에서 제안된 iOS Gmail 해킹 방법이 있습니다: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. 이 방법은 블렌드 모드를 사용하여 Gmail이 흰색 텍스트 색상을 설정하도록 속이는 데 사용됩니다. 이론적으로는 작동하지만, 다이제스트 이메일 마크업의 복잡성을 고려할 때 이를 추구할 가치가 없다고 생각합니다.

요약하자면, 다크 컬러 스킴을 기본 컬러 스킴으로 사용하는 Discourse 사이트의 경우, 현재로서는 좋은 해결책은 위에서 게시한 CSS를 이메일 스타일 / CSS 탭에 추가하는 것입니다. 이를 통해 iOS Gmail 다크 모드 앱에서 사이트 로고를 읽을 수 있게 됩니다. 추가했을 때 테스트한 다른 이메일 클라이언트에서 문제가 발생하지 않았습니다. 기본 라이트 컬러 스킴을 사용하는 사이트의 경우, 이 접근법에 대해 확신이 덜 합니다. 그렇지 않으면 다크인 화면에 흰색 헤더 배경을 강제하는 것은 좋은 인상을 주지 않습니다.

다이제스트 이메일은 다크 모드가 일반적으로 사용되기 전에 개발되었습니다. 아마도 최근 다크 모드의 인기에 힘입어, 인기 있는 이메일 클라이언트에서 다크 모드와 라이트 모드 모두에서 잘 표시되도록 다이제스트 이메일을 재구성하는 것이 합리적일 수 있습니다.

다이제스트 이메일을 완전히 재구성하는 것이 범위를 벗어나는 경우, dark_mode_digest_logo 및 light_mode_digest_logo 설정을 제공하는 것이 가치가 있을 수 있습니다. 적어도 일부 이메일 클라이언트에서는 모드를 감지하여 적절한 로고를 표시할 수 있을 것입니다.

Outlook 데스크톱 클라이언트의 다크 모드를 개선하기 위해, Discourse는 이메일 HTML에서 모든 클래스 이름을 제거하는 대신 일부 클래스 이름을 남겨둘 수 있습니다. 이러한 클래스 이름은 Outlook에서 다크 모드를 대상으로 할 때 사용할 수 있습니다: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (참고: Outlook은 요소에 여러 클래스 이름을 처리할 수 없으므로, digest.html.erb 파일에서 일부 클래스 이름은 여전히 제거해야 합니다.)

[simon]

가장 명백한 문제를 충분히 명확하게 설명하지 못했을 수도 있다는 점을 깨달았습니다. apply custom styles to digest 사이트 설정은 기본적으로 활성화되어 있습니다. 이 설정은 사용자가 기기에서 다크 모드를 활성화한 경우 iOS 이메일 클라이언트가 이메일을 다크 모드로 표시하도록 메타 태그와 CSS 규칙을 추가하는 데 사용됩니다.

밝은 배경과 어두운 배경 모두에서 충분한 대비를 갖는 다이제스트 로고를 특별히 주의하여 업로드하지 않는 한, 밝은 배경에 최적화된 로고를 가진 사이트의 다이제스트 이메일은 인기 있는 이메일 클라이언트에서 다크 모드로 볼 때 다음과 유사해 보입니다:

apply custom styles to digest 사이트 설정을 비활성화하면 실제로 더 나은 결과를 얻을 수 있습니다. 이 설정이 비활성화된 경우, iOS 메일 앱에는 다크 모드 스타일이 적용되지 않습니다. 그러나 Android 이메일 클라이언트와 iOS Gmail 앱에는 여전히 적용됩니다.

아마도 현재 최고의 모범 사례는 밝은 배경과 어두운 배경 모두에서 잘 표시되는 로고를 digest logo 사이트 설정에 업로드해 보는 것입니다. 이것이 불가능하다면, 밝은 기본 색상 스킴을 가진 Discourse 사이트는 apply custom styles to digest 사이트 설정을 비활성화해야 합니다. 어두운 기본 색상 스킴을 가진 Discourse 사이트는 해당 설정을 활성화한 채로 유지해야 합니다. apply custom styles to digest 사이트 설정에 대한 조언을 아직 확정적으로 받아들이지 마세요. 하지만 몇 가지 테스트에 따르면 이것이 올바른 접근 방식일 가능성이 높아 보입니다.

@simon

dark_mode_digest_logo와 light_mode_digest_logo 설정을 제공하는 것을 살펴볼 가치가 있을 수 있습니다. 적어도 일부 이메일 클라이언트에서는 모드를 감지하고 적절한 로고를 표시할 수 있습니다.

이것은 @media (prefers-color-scheme)을 지원하는 이메일 클라이언트에서만 작동합니다: Can I email… @media (prefers-color-scheme). 다른 이메일 클라이언트에서는 로고의 두 버전이 모두 표시되는 위험이 있습니다.

[Canapin (Coin-coin le Canapin)]

이 철저한 작업에 대해 Simon님께 감사드립니다

@simon

주요 문제는 이메일 클라이언트가 전체 색상을 반전시켜 다크 모드를 처리할 때 다이제스트 헤더의 배경색이 반전된다는 것입니다.

이것은 정말 끔찍합니다. 제 스마트폰에서 이 문제를 겪고 있는데, 콘텐츠와 무관하게 색상을 강제로 반전시키는 것이 좋은 아이디어로 받아들여진 이유가 전혀 이해되지 않습니다.

[jordan.vidrine]

로고를 사용하는 대신, 현재 사이트에서 사용 중인 헤더 배경색과 사이트 로고를 활용해 직사각형 형식의 이미지를 생성하는 것이 해결책이 될 수 있을 것 같습니다.

이 작업은 백엔드에서 수행해야 하지만, 포함된 색상을 배경으로 사용하는 이미지 블록을 사용하면 Gmail이 배경색을 반전시키는 문제를 방지할 수 있습니다.

참고로, Gmail 앱을 다크 모드로 설정한 상태에서 여러 대형 브랜드의 이메일을 테스트해 보았지만, 대부분 이 문제를 해결하지 못하고 있었습니다.

[simon]

@jordan.vidrine

로고를 사용하는 대신, 사이트 로고와 현재 사이트가 사용하는 헤더 배경색을 직사각형 형식의 이미지로 만들어 해결할 수 있을지 궁금합니다.

그렇게 하지 않아도 대부분의 이메일 클라이언트에서는 특정 배경색을 강제할 수 있습니다. 예외는 일부 구형 Outlook 데스크톱 이메일 클라이언트인 것 같습니다. (데스크톱 클라이언트에서 다크 모드가 많이 사용되지 않는다고 추측합니다.)

iOS( Gmail 제외) 이메일 클라이언트의 경우, apply custom styles to digest 설정이 활성화되어 있으면 Discourse가 이미 이렇게 처리하고 있습니다. 문제는 배경색이 하드코딩되어 있어 사이트의 “header background” 색상을 존중하지 않는다는 것입니다:

app/helpers/email_helper.rb

[dm='header'] 규칙을 다음과 같이 변경할 수 있습니다:

"
[dm='header'] {
  background: ##{ColorScheme.hex_for_name('header_background')} !important;
}
"

의미가 있다면 “Since your last visit” 섹션에도 유사한 접근 방식을 적용할 수 있습니다:

"
[dm='body_primary'] {
  background: #{SiteSetting.email_accent_bg_color} !important;
  color: #{SiteSetting.email_accent_fg_color} !important;
}
"

다크 모드 스타일의 dm 속성이 이메일에 추가되는 위치는 여기입니다: discourse/lib/email/styles.rb at main · discourse/discourse · GitHub.

iOS(Gmail 제외) 이메일 클라이언트에서 문제를 해결하려면 이와 같은 방식으로 작동해야 합니다.

iOS Gmail 클라이언트의 경우, 선형 그라디언트로 설정하면 배경색을 강제할 수 있습니다. 이 방식으로 선형 그라디언트 배경을 설정했을 때 모든 이메일 클라이언트에서 의도하지 않은 부작용이 없는 것 같습니다. 따라서 모든 이메일 클라이언트에 전송되는 인라인 CSS에 선형 그라디언트 배경색을 추가하는 것이 괜찮을 것입니다.

전체 색상을 반전시키는 이메일 클라이언트에서 “Since your last visit” 섹션을 처리하는 가장 쉬운 해결책은 클라이언트가 반전을 수행하도록 두되, email accent accent bg color와 email accent fg color 설정 사이에 충분한 대비가 있도록 하는 것이라고 추측합니다:

이렇게 하면 다음과 같은 경우(해당 설정의 기본값인 경우)를 방지할 수 있습니다:

[simon]

다크 모드에서 요약 이메일이 올바르게 표시될 가능성을 높이기 위해 Discourse가 지금 바로 할 수 있는 가장 쉬운 변경 사항은 apply custom styles to digest 사이트 설정을 기본적으로 비활성화하는 것입니다. (참고: 이는 iOS 이메일 클라이언트에のみ 영향을 미칩니다.)

또 하나의 작은 변경 사항은 digest logo 사이트 설정의 설명 문구를 업데이트하여, 밝은 배경색이나 어두운 배경색 위에 표시될 때 충분한 대비를 갖는 로고를 업로드하도록 권장하는 것입니다. 어두운 로고에 적용할 수 있는 대표적인 방법은 로고에 흰색 테두리를 추가하는 것입니다.

또한, 이메일 / 미리보기 요약 페이지에서 일부 이메일 클라이언트가 다크 모드로 이메일을 볼 때 "전체 색상 반전"을 수행할 수 있다는 경고 메시지를 표시하는 것도 좋습니다. 사이트 소유자가 접근할 수 있는 이메일 클라이언트에서 다크 모드 환경으로 요약 이메일을 테스트하도록 권장할 수 있습니다.

[damienalexandre]

자세한 설명 감사합니다!

간단한 우회 방법으로, 이메일 설정에 이 CSS를 추가했습니다:

@media (prefers-color-scheme: dark) {
    body > div > table > tbody > tr > td > table[dm="header"] {
        background: #c89f4c !important;
    }
}

이로 인해 헤더 배경이 더 밝아졌고, 이제 로고가 올바르게 표시됩니다(적어도 미리보기에서는).