요약 이메일: 로고 색상과 배경 충돌 (라이트/다크 모드)

ToddZ · 9월 19, 2023, 7:28오전

테마 컴포넌트나 CSS 커스터마이징 없이 기본 테마를 사용하고 있습니다. 설정에서 다이제스트 이메일용 흰색 “다크 모드” 로고를 지정해 두었는데, 다이제스트의 로고 배경 영역이 어둡기 때문입니다. 평소에는 잘 보입니다:

하지만 iPhone의 기기 다크 모드 상태에서 Gmail 앱으로 다이제스트를 받으면, 로고 배경 영역이 흰색(에 가까움)으로 반전되어 로고가 거의 보이지 않습니다:

데스크톱에서는 Chrome 인스펙터를 사용해 다크 모드를 미리 볼 수 있습니다. 이때 로고 배경색을 흰색으로 반전시키지는 않지만, 기본(“라이트 모드”) 로고로 대체되어 여기서도 로고가 거의 보이지 않습니다:

이 부분이 꽤 혼란스럽습니다… 버그를 보고 있는 건지, 아니면 모바일 다크 모드의 작동 방식에 대한 제 기대치가 잘못된 건지 모르겠습니다…

기본 로고 주위에 검은색 테두리를 추가하면 밝은 배경에서 더 잘 보일 것 같긴 합니다.
하지만 모든 설정에서 다이제스트 로고와 배경 조합이 제대로 작동하도록 만드는 방법에 대한 힌트가 있다면 환영합니다.

simon · 9월 19, 2023, 6:14오후

확인 차원에서 질문드립니다. 관리자 / 사용자 정의 / 이메일 스타일에서 찾을 수 있는 Discourse HTML 이메일 템플릿을 수정해 보셨나요? 또한 해당 페이지의 CSS 탭에 CSS를 추가해 보셨나요?

또한, 사이트 설정에서 apply custom styles to digest(다이제스트에 사용자 정의 스타일 적용)가 활성화되어 있나요? 이 설정은 기본적으로 활성화되어 있습니다.

사용자께서 하신 커스터마이징이 문제를 일으키지 않는다고 가정하면, 제 추측은 다음과 같습니다. Discourse 기본 이메일 템플릿에 있는 %{dark_mode_styles} 플레이스홀더가 다음 메서드에 의해 추가된 CSS로 대체되고 있는 것입니다:

github.com/discourse/discourse

app/helpers/email_helper.rb

main


      
              .gsub("%{dark_mode_styles}", dark_mode_styles)
              .html_safe
          end
          
          protected
          
          def dark_mode_meta_tags
            "
            <meta name='color-scheme' content='light dark' />
            <meta name='supported-color-schemes' content='light dark' />
            "
          end
          
          def dark_mode_styles
            "
            <style>
              @media (prefers-color-scheme: dark) {
                html {
                  background: #151515 !important;
                }

해당 메서드는 템플릿에 다음 CSS를 추가합니다:

[dm='header'] {
  background: #151515 !important;
}

이 CSS는 다크 모드로 설정된 기기에서 이메일을 볼 때 다이제스트 헤더가 어둡게 보이도록 의도된 것입니다. 하지만 일부 기기는 !important 지시문을 무시하고 색상의 반전을 표시할 수 있습니다.

저는 Android 폰에서 이 문제를 재현할 수 없습니다. 테스트할 iPhone이 없기 때문입니다. 혹시 다른 분이 iPhone에서 다크 모드로 요약 이메일을 보고 이 문제를 재현해 주실 수 있을까요?

ToddZ · 9월 19, 2023, 9:32오후

시몬님, 답변 주셔서 감사합니다.

이메일 템플릿의 사용자 지정 HTML이나 CSS에는 손을 대지 않았습니다. apply custom styles to digest 설정은 비활성화했지만, 예상대로 효과가 없었습니다.

누군가 게시글이나 DM으로 주소를 보내주시면 요약 이메일을 보내드릴 수 있습니다…

simon · 9월 25, 2023, 4:55오전

사이트에서 보낸 이메일을 받아본 적이 있습니다. 안드로이드 폰의 Gmail 앱에서 다크 모드로 올바르게 렌더링됩니다. iOS 기기가 없어서 테스트를 해보지 못했습니다.

@ToddZ 님의 iOS 기기에서는 apply custom styles to digest 설정을 활성화하든 아니든 동일한 결과가 나타납니다:

제 추측으로는 iOS Gmail 앱이 여전히 prefers-color-scheme 미디어 쿼리를 지원하지 않는 것 같습니다: Can I email… @media (prefers-color-scheme). 해당 페이지에는 안드로이드도 이를 지원하지 않는다고 나와 있지만, 제 경우 안드로이드에서 Gmail로 이메일이 올바르게 렌더링됩니다.

관련해서, 이메일 템플릿에 추가되는 다크 모드 CSS가 적용되려면 apply custom styles to digest 설정을 활성화해야 한다는 점을 어딘가에 언급해 두는 것이 좋을 수도 있습니다.

@isaac 님, 이 문제를 아직 담당하고 계신지 모르겠습니다. 특히 Discourse 사이트의 기본 테마가 다크 컬러 스킴을 사용하는 경우 iOS Gmail이 이를 어떻게 처리하는지 테스트해 보는 것이 가치가 있을 것 같습니다.

ToddZ · 9월 30, 2023, 7:38오전

흥미롭게도, 방금 초대 이메일에서 Windows에서 다소 비슷한 문제를 발견했습니다.
(이것은 iOS에서는 정상적으로 보입니다.)

이는 Win11 22H2이며, 시스템 테마(운영체제의 라이트/다크 설정을 사용)를 사용하는 Thunderbird입니다.

Windows 다크 모드:

(라이트 모드는 잘 보입니다.)

simon · 9월 30, 2023, 7:48오전

가능하시다면 apply custom styles to digest 사이트 설정을 활성화한 상태에서 동일한 이메일을 트리거해 보실 수 있을까요? 이 설정이 Thunderbird의 다크 모드에서 이메일 렌더링에 어떤 차이를 만드는지 확인해 주세요.

또한, Admin / Customize / Email Style에서 찾을 수 있는 이메일 템플릿이 수정되지 않았는지 다시 한번 확인해 주시겠습니까? 수정되지 않았다면 해당 페이지의 “기본값으로 초기화” 버튼이 비활성화되어 있을 것입니다:

위 스크린샷에서 강조 표시한 dark_mode_meta_tags와 dark_mode_styles 키가 템플릿에 존재하는지 확인하고 싶습니다.

ToddZ · 9월 30, 2023, 8:02오전

네 - 방금 확인해 보았습니다:

이메일 스타일: HTML과 CSS는 기본값으로 설정되어 있으며, 수정된 적이 없습니다. HTML에는 dark_mode 메타 태그가 포함되어 있습니다.
apply custom styles to digest(다이제스트에 사용자 지정 스타일 적용): 켜거나 끄거나 차이가 없습니다.

simon · 10월 2, 2023, 6:42오후

이 문제의 원인은 이 게시물의 “Default Dark Modes: full color invert” 섹션에 설명되어 있는 것으로 보입니다: Dark Mode for Email: The Definitive Guide for Marketers.

Full Color Invert는 가장 침습적인 색상 스킴입니다. 밝은 배경의 영역만 반전시키는 것이 아니라 어두운 배경에도 영향을 미치기 때문입니다.

따라서 이미 이메일을 다크 테마로 디자인했다면, 이 스킴은 역설적으로 이메일을 라이트로 강제 변환하게 됩니다. 안타깝게도 현재 Gmail 앱(iOS), Outlook 2021(Windows), Office 365(Windows), Windows Mail 등 일부 인기 있는 이메일 클라이언트들이 이 방식을 사용하고 있습니다.

해당 게시물의 문제 예시는 보고하신 내용과 일치합니다:

Discourse의 Litmus 계정에 접근 권한이 있는 사람이 이를 테스트해야 합니다. 문제를 재현하려면, 기본 테마의 팔레트가 다크 색상 스킴으로 설정된 Discourse 사이트에서 Litmus로 다이제스트 이메일을 보내어 보세요.

이로 인해 문제가 발생한다면, 쉬운 해결책은 Discourse의 기본 테마에 할당된 색상 팔레트와 관계없이 이메일에는 항상 라이트 색상 스킴을 사용하는 것입니다. 또한 제가 링크한 게시물의 “Gmail iOS & Outlook Windows-specific targeting” 섹션에서 제안하는 접근 방식도 잠재적으로 작동할 수 있습니다. 다만 이는 약간 해킹(hack)에 가까운 방법입니다.

이 문제를 조사하게 될 사람은 또한 apply custom styles to digest 사이트 설정이 현재 실제로 다크 모드를 지원하는 이메일 클라이언트에 대한 다크 모드 지원을 추가하려면 활성화되어야 하는 방식도 살펴볼 수 있습니다. Discourse UI에는 이 설정이 다크 모드 지원과 관련이 있다는 것을 명확히 보여주는 요소가 없습니다.

ToddZ · 10월 3, 2023, 3:00오전

와, 맞아요. Full Color Invert가 제가 보고 있는 현상인 것 같습니다. 적어도 iOS Gmail의 요약/요약(digest/summary) 기능에서는 그렇습니다.

지금 그 긴 기사를 전부 읽고 적절한 우회 방법을 찾아낼 여유가 없지만, 언젠가 무언가를 시도해 봐야 할 것 같습니다. Gmail 예제를 공유하기 위한 GitHub 스레드는 2019년부터 열려 있었고 여러 우회 방법이 제안되었지만, 근본적인 동작이 변경되었음을 시사하는 조짐은 없습니다.

Discourse 팀이 플랫폼 간에 외관을 통일할 수 있도록 일반적인 조정을 해 주기를 바랍니다.

simon · 10월 15, 2023, 7:21오전

사이트에서 확인한 다이제스트 이메일을 바탕으로, 사이트의 기본 색상 테마가 다크 모드인 것으로 추정됩니다. 이 경우, iOS Gmail 앱에서 발생하는 헤더 배경색 문제를 수정하려면 다음 코드를 사이트의 관리자 / 사용자 지정 / 이메일 스타일 / CSS 탭에 추가하면 됩니다:

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

linear-gradient에 추가하는 색상은 모두 동일해야 합니다. 기본 테마의 색상 팔레트에서 설정된 “헤더 배경” 색상 값과 일치해야 합니다:

이 방법은 기본으로 다크 색상 테마가 설정된 사이트에만 적합한 접근 방식이라고 생각합니다. 작동 원리에 대한 자세한 내용은 여기에서 확인할 수 있습니다: Investigating activity summary email dark mode issues.

글		댓글	조회수
Investigating activity summary email dark mode issues UX activity-summary	6	2542	1월 23, 2024
Email digest having its own colors Product Support activity-summary	6	843	10월 2, 2023
Emailed Forum Posts grayed out in Dark Mode on some Discourse forums Bug	8	1541	11월 8, 2022
Digest logo color Product Support activity-summary	2	699	7월 16, 2022
Styling email digest Feature activity-summary	1	1418	2월 25, 2014

요약 이메일: 로고 색상과 배경 충돌 (라이트/다크 모드)

Related topics