이메일 클라이언트에서 다크 모드 재정의 스타일 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 작동하지 않아요. 이 점을 알아 두고 점진적 향상을 염두에 두고 이메일을 디자인해 보세요.

영상 튜토리얼: HTML 이메일 디자인에 다크 모드 스타일 추가하기(영어)

이 영상은 Emailify 플러그인으로 Figma에서 바로 쓸 수 있는 반응형 HTML 이메일을 내보낼 때, 이메일 디자인에 사용자 지정 다크 모드 재정의 스타일을 추가하는 방법을 보여 줘요.

다크 모드 디자인 시 중요한 고려 사항

이메일 클라이언트에서 다크 모드 재정의 스타일 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 작동하지 않아요. 이 점을 알아 두고 점진적 향상을 염두에 두고 이메일을 디자인해 보세요.

이메일 클라이언트마다 다크 모드를 구현하는 방식이 달라서 다크 모드에 맞춰 디자인하기는 매우 까다로워요. 그래도 각 이메일 클라이언트가 다크 모드에서 자동으로 적용하는 (대개 형편없는) 변경 사항에 맞춰 작업해 볼 만한 가치가 있어요.

이메일 클라이언트가 정확히 무엇을 바꾸는지, 그리고 디자인에서 그런 변경을 어떻게 줄일 수 있는지 다루는 자료(예: CampaignMonitor와 Litmus의 글(영어))를 먼저 살펴보면 좋은 출발점이 돼요.

다크 모드 색상 재정의 적용하기

텍스트 레이어, 이미지, Button, Row, Column, Wrapper 같은 요소를 선택한 다음 플러그인 헤더의 Settings 버튼을 클릭하세요. Settings 패널 하단의 Dark Mode Overrides 섹션에서 다크 모드 텍스트 색상과 배경 색상을 설정할 수 있어요.

Button, Row, Column, Wrapper 레이어에는 Border Color 재정의도 설정할 수 있어요. 라이트 모드에서 쓰는 테두리 두께나 스타일은 그대로 두고 다크 모드의 테두리 색상만 바꿔요.

이 재정의는 다크 모드가 켜진 기기에서 이메일을 볼 때 이 기능을 지원하는 이메일 클라이언트(iOS/MacOS Apple Mail 앱)에 표시돼요.

이메일 클라이언트에서 다크 모드 재정의 스타일 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 작동하지 않아요. 이 점을 알아 두고 점진적 향상을 염두에 두고 이메일을 디자인해 보세요.

다크 모드와 라이트 모드에서 두 이미지 레이어 바꿔 보여 주기

특정 이미지 레이어를 다크 모드에서 다른 이미지로 바꿔 보여 줄 수도 있어요. Column 레이어 안에 있는 Figma 콘텐츠 레이어를 클릭하고 플러그인 헤더의 Settings 버튼을 클릭한 다음, Only Hide in Dark Mode 또는 Only Show in Dark Mode 토글을 켜세요. 다크 모드가 켜진 기기에서 이메일을 볼 때 이 기능을 지원하는 이메일 클라이언트(iOS/MacOS Apple Mail 앱)에서 해당 이미지 레이어를 보여 줄지 숨길지에 따라 토글을 고르면 돼요.

이메일 클라이언트에서 다크 모드 재정의 스타일 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 작동하지 않아요. 이 점을 알아 두고 점진적 향상을 염두에 두고 이메일을 디자인해 보세요.

플러그인에서 다크 모드 미리보기

Preview를 열고 HTML Preview 툴바에서 Dark Mode 스위치를 켜세요. 같은 다크 모드 디자인을 데스크톱 너비와 모바일 너비로 비교하고 싶다면 미리보기 너비 선택기를 계속 사용하세요. 결합된 Desktop & Mobile Hybrid 보기를 선택한 상태에서는 Dark Mode를 사용할 수 없어요.

로컬 미리보기는 일반적인 자동 다크 모드 처리를 사용하고 이메일의 prefers-color-scheme 스타일을 활성화해요. 색상 조정은 대략적인 참고용이며 특정 이메일 클라이언트를 기준으로 하지 않아요. 이메일에 Emailify 다크 모드 재정의가 있다면 옆의 Overrides 스위치로 명시적인 배경, 텍스트, 테두리, 이미지 교체 스타일을 보여 주거나 숨길 수 있어요.

이 토글은 디자인을 돕는 도구일 뿐, 클라이언트나 기기 에뮬레이터가 아니에요. 인증된 새니타이저, 네이티브 렌더링 엔진과 폰트, 앱 화면 요소, 발송 처리 과정, 클라이언트나 버전별 차이를 모두 재현하지는 않아요.

다크 모드에서 이메일 테스트하기

영상 튜토리얼: Figma에서 내보낸 HTML 이메일을 다크 모드에서 테스트하기(영어)

이 영상은 Emailify 플러그인과 Litmus.com을 사용해 Figma에서 내보낸 HTML 이메일을 다크 모드에서 테스트하는 방법을 보여 줘요.

이메일을 보내기 전에 Litmus나 Email on Acid 같은 서비스로 직접 테스트해서 이메일이 잘 보이는지 확인해 보는 것이 좋아요.

이메일 클라이언트에서 다크 모드 재정의 스타일 지원은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 작동하지 않아요. 이 점을 알아 두고 점진적 향상을 염두에 두고 이메일을 디자인해 보세요.

Settings를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 설정을 일괄 적용할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.