---
url: "/ko/emailify/design/dark-mode.md"
description: "다크 모드 재정의는 iOS/MacOS Apple Mail 앱에서만 지원돼요(Gmail, Outlook 등은 다크 모드 재정의를 *지원하지 않아요*)."
---

# 다크 모드 디자인 재정의 추가(iOS/MacOS Apple Mail만 지원)

> 다크 모드 재정의는 iOS/MacOS Apple Mail 앱에서만 지원돼요(Gmail, Outlook 등은 다크 모드 재정의를 *지원하지 않아요*).

> **Warning:** 이메일 클라이언트에서 [다크 모드 재정의 스타일 지원](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 *작동하지 않아요*. 이 점을 알아 두고 [점진적 향상](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)을 염두에 두고 이메일을 디자인해 보세요.

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

이 영상은 Emailify 플러그인으로 Figma에서 바로 쓸 수 있는 반응형 HTML 이메일을 내보낼 때, 이메일 디자인에 사용자 지정 다크 모드 재정의 스타일을 추가하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/uAxQ5Psi1m4)

## 다크 모드 디자인 시 중요한 고려 사항 {#important-design-considerations-for-dark-mode}

![이메일 클라이언트별 다크 모드 CSS 지원 현황](/assets/images/emailify/caniemail-dark-mode.jpg)

> **Warning:** 이메일 클라이언트에서 [다크 모드 재정의 스타일 지원](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 *작동하지 않아요*. 이 점을 알아 두고 [점진적 향상](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)을 염두에 두고 이메일을 디자인해 보세요.

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

이메일 클라이언트가 정확히 무엇을 바꾸는지, 그리고 디자인에서 그런 변경을 어떻게 줄일 수 있는지 다루는 자료(예: [CampaignMonitor](https://www.campaignmonitor.com/blog/email-marketing/designing-an-email-for-dark-mode-dark-and-light-optimization/)와 [Litmus](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)의 글(영어))를 먼저 살펴보면 좋은 출발점이 돼요.

## 다크 모드 색상 재정의 적용하기 {#applying-dark-mode-color-overrides}

[Video](/assets/videos/emailify/design/dark-mode-color-override.mp4)

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

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

이 재정의는 다크 모드가 켜진 기기에서 이메일을 볼 때 [이 기능을 지원하는 이메일 클라이언트](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)(iOS/MacOS Apple Mail 앱)에 표시돼요.

> **Warning:** 이메일 클라이언트에서 [다크 모드 재정의 스타일 지원](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 *작동하지 않아요*. 이 점을 알아 두고 [점진적 향상](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)을 염두에 두고 이메일을 디자인해 보세요.

## 다크 모드와 라이트 모드에서 두 이미지 레이어 바꿔 보여 주기 {#swapping-between-two-image-layers-in-dark-and-light-mode}

[Video](/assets/videos/emailify/design/swap-dark-mode-content.mp4)

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

> **Warning:** 이메일 클라이언트에서 [다크 모드 재정의 스타일 지원](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 *작동하지 않아요*. 이 점을 알아 두고 [점진적 향상](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)을 염두에 두고 이메일을 디자인해 보세요.

## 플러그인에서 다크 모드 미리보기 {#previewing-dark-mode-in-the-plugin}

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

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

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

## 다크 모드에서 이메일 테스트하기 {#testing-your-emails-in-dark-mode}

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

이 영상은 Emailify 플러그인과 Litmus.com을 사용해 Figma에서 내보낸 HTML 이메일을 다크 모드에서 테스트하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/h5Gq9apZrxk)

이메일을 보내기 전에 [Litmus](https://www.litmus.com/)나 [Email on Acid](https://www.emailonacid.com/) 같은 서비스로 직접 테스트해서 이메일이 잘 보이는지 확인해 보는 것이 좋아요.

> **Warning:** 이메일 클라이언트에서 [다크 모드 재정의 스타일 지원](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)은 iOS/MacOS의 Apple Mail로 한정돼요. 즉, Gmail, Outlook 등 다른 클라이언트에서는 다크 모드 재정의가 *작동하지 않아요*. 이 점을 알아 두고 [점진적 향상](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)을 염두에 두고 이메일을 디자인해 보세요.

> **Tip:** **Settings**를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 [설정을 일괄 적용](/ko/emailify/design/settings#apply-settings-in-bulk)할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.