---
url: "/ko/emailify/design/preview.md"
description: "Emailify의 미리보기 창에서는 이메일을 내보내기 전에 실제 HTML로 확인하고 직접 조작해 볼 수 있어요."
---

# Figma에서 HTML 이메일 미리보기

> Emailify의 미리보기 창에서는 이메일을 내보내기 전에 실제 HTML로 확인하고 직접 조작해 볼 수 있어요.

[Video](/assets/videos/emailify/design/preview-email.mp4)

 Emailify 플러그인 헤더의 **Preview** 버튼을 클릭하면 Figma 플러그인 안에서 바로 이메일의 실제 HTML 미리보기가 자동으로 만들어져요.

 미리보기 창이 열려 있는 동안 Figma에서 Emailify 레이어를 수정하면 HTML 미리보기에 실시간으로 반영돼요.

## 미리보기 패널 탭 사용하기 {#using-the-preview-panel-tabs}

미리보기 패널에는 탭이 네 개 있어요.

- **HTML Preview**는 현재 반응형 HTML을 보여 주고, Figma 레이어를 편집하면 함께 업데이트되며, 간단한 다크 모드 미리보기 토글도 들어 있어요.
- **Preflight**는 실제 발송용 HTML에서 제목, 프리헤더, 접근성, 링크, 이미지, 전달, Gmail 잘림 문제를 실용적인 기준으로 점검해요.
- **Test Send**는 수동 받은편지함 테스트를 위해 [htmltest.email](https://htmltest.email/)에 복사해 넣을 수 있도록 실제 발송용 HTML을 준비해요.
- **Email Previews**는 Emailify 안에서 이메일 클라이언트 스크린샷을 요청해요. [플러그인에서 Email Previews 사용하기](/ko/emailify/export/testing#using-email-previews-in-the-plugin)를 참고하세요.

Preflight와 Test Send는 Emailify의 발송용 HTML 기능을 사용하기 때문에, 활성화된 Pro 라이선스가 있거나 Pro 무료 체험 횟수가 남아 있을 때 사용할 수 있어요. 이메일 클라이언트 테스트 방법은 [발송 전 HTML 이메일 테스트](/ko/emailify/export/testing)를 참고하세요.

> **Info:** 미리보기 모드에서는 로딩 속도를 높이기 위해 **GIF**가 정지 이미지로 표시돼요(GIF는 렌더링에 시간이 더 걸리기 때문이에요). 하지만 플러그인에서 최종적으로 내보낸 HTML에서는 애니메이션으로 재생돼요.

> **Tip:** 미리보기 창이 열려 있는 동안에도 미리보기 패널 헤더의 **Settings** 버튼을 클릭하면 모바일 재정의를 편집할 수 있어요.

### 다양한 기기 너비로 이메일 미리보기 {#previewing-your-email-at-different-device-widths}

여러 기기 너비에서 어떻게 보이는지 확인하려면 미리보기 패널 헤더의 선택 상자를 클릭하고 아래 옵션 중에서 고르세요.

- Desktop & Mobile(하이브리드 보기)
- Desktop(너비 **726px**)
- iPhone 17 Pro Max(너비 **440px**)
- iPhone 16 Pro Max(너비 **430px**)
- iPhone Air(너비 **420px**)
- Google Pixel(너비 **412px**)
- iPhone 17(너비 **402px**)
- iPhone 16(너비 **393px**)
- iPhone 13 Mini(너비 **375px**)
- iPhone 12 Mini(너비 **360px**)
- iPhone SE(너비 **320px**)

> **Note:** **이메일의 모바일 브레이크포인트**. Emailify에서 내보낸 HTML 이메일에는 Figma 데스크톱 프레임의 너비에 따라 자동으로 정해지는 “브레이크포인트”가 하나 있어요. 예를 들어 Emailify 프레임이 600px이면 599px 이하에서 모바일 스타일과 재정의가 적용되기 시작해요.

> **Tip:** 일부 이메일 클라이언트나 앱의 읽기 패널은 너비가 700px보다 좁아서 데스크톱 레이아웃 대신 모바일 스타일이 렌더링될 수 있어요. 그래서 이메일 너비는 보통 **600px에서 640px 사이**로 유지하는 것을 권장해요.

## Figma에서 수정한 내용을 HTML 미리보기 창에서 실시간으로 확인하기 {#live-preview-changes-in-html-preview-window-from-figma}

HTML 미리보기를 열어 둔 채로 Figma 레이어를 계속 편집하면, 매번 **Refresh**를 클릭하지 않아도 변경 사항이 미리보기 창에 바로 반영돼요.

[Video](/assets/videos/emailify/design/live-preview-edits-desktop.mp4)

## 다크 모드 미리보기 {#previewing-dark-mode}

HTML Preview 툴바에서 **Dark Mode**를 켜면 현재 이메일을 Emailify의 대략적인 로컬 다크 모드 미리보기와 비교할 수 있어요. 이 미리보기는 특정 이메일 클라이언트의 색상이 아니라 일반적인 자동 색상 처리를 사용해요. 미리보기 너비 선택기를 계속 사용해 같은 다크 모드 디자인을 데스크톱이나 모바일 너비로 검토할 수 있어요. **Desktop & Mobile** 하이브리드 보기를 선택한 동안에는 Dark Mode를 사용할 수 없어요.

이메일에 Emailify 다크 모드 재정의가 있다면, 옆의 **Overrides** 스위치로 명시적으로 지정한 배경, 텍스트, 테두리, 이미지 교체 스타일을 표시하거나 숨길 수 있어요.

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

> **Warning:** 이메일 클라이언트의 [다크 모드 재정의 스타일 지원](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/)은 제한적이에요. Emailify의 명시적 재정의는 지원되는 Apple Mail 버전을 위한 것이고, Gmail, Outlook, Windows Mail, Yahoo 등 다른 클라이언트는 다른 자동 색상 처리를 적용할 수 있어요.

## HTML 이메일 파일 크기(KB) 확인하기 {#checking-the-file-size-of-your-html-email-in-kilobytes-kb}

미리보기 패널 헤더에 이메일 HTML의 전체 파일 크기를 나타내는 숫자가 표시돼요(이미지 에셋을 제외한 `.html` 파일 자체의 크기예요). [Gmail의 102KB 잘림 한도](https://mailchimp.com/help/gmail-is-clipping-my-email/)를 넘었는지 알아볼 때 유용해요.

> **Warning:** **HTML 크기가 102KB를 넘으면** 이메일이 한도를 초과했다는 표시로 미리보기 창의 파일 크기가 노란색으로 강조돼요.

> **Tip:** HTML 파일 크기를 줄이는 가장 좋은 방법은 [이메일의 “Row” 레이어 수를 줄이거나 합치는 것](/ko/emailify/design/optimizing-html-file-size)이에요.

## 이메일의 웹 안전 대체 폰트 미리보기 {#previewing-web-safe-font-fallbacks-in-your-email}

[Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4)

이메일의 사용자 지정 웹 폰트에 웹 안전 [대체 폰트](/ko/emailify/design/fonts)를 지정했다면, Emailify 미리보기 창 하단의 **Show Fallback Fonts** 스위치를 켜서 어떻게 보이는지 미리 확인할 수 있어요.

## Emailify 레이어의 Auto Layout 검사(및 자동 수정) {#auto-layout-linting-and-auto-fixing-for-emailify-layers}

[Video](/assets/videos/emailify/design/linter-auto-fix.mp4)

플러그인의 **Preview** 기능으로 HTML을 미리 볼 때, Emailify 플러그인으로 추가한 레이어에 여전히 올바른 Figma Auto Layout 속성이 적용되어 있는지 자동으로 감지해요. 그래야 HTML로 내보냈을 때 시각적으로 일관되게 나오기 때문이에요.

Auto Layout 속성을 조정해야 하는 레이어 목록이 표시돼요(예: 높이를 “Fixed”에서 “Hug”로 변경). 원한다면 **Apply Fixes** 버튼을 클릭해 이 변경 사항을 자동으로 적용할 수 있어요. 그러면 표시된 Figma 레이어에 필요한 Auto Layout 속성 조정이 반영돼요.

## 잘못된 위치에 있는 Emailify 레이어를 직접 옮겨 해결하기 {#manually-moving-and-resolving-emailify-layers-that-are-in-the-wrong-place}

[Video](/assets/videos/emailify/design/manual-move-layers.mp4)

플러그인의 **Preview** 기능으로 HTML을 미리 볼 때, Emailify 플러그인으로 추가한 레이어가 처음 만들어진 구조(예: Row 레이어 -> Column 레이어 -> 콘텐츠 레이어)를 그대로 유지하고 있는지 자동으로 감지해요. 그래야 HTML로 내보냈을 때 시각적으로 일관되게 나오기 때문이에요.

직접 옮겨야 하는 레이어 목록이 항목별 안내(예: “이 Row 레이어를 기본 Email 프레임 안으로 다시 옮기세요”)와 함께 표시되고, 페이지와 Figma 레이어 목록에서 해당 레이어로 바로 이동하는 버튼도 있어서 필요한 레이어를 쉽게 찾아 옮길 수 있어요.

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