Emailify 플러그인 헤더의 Preview 버튼을 클릭하면 Figma 플러그인 안에서 바로 이메일의 실제 HTML 미리보기가 자동으로 만들어져요.
미리보기 창이 열려 있는 동안 Figma에서 Emailify 레이어를 수정하면 HTML 미리보기에 실시간으로 반영돼요.
미리보기 패널 탭 사용하기
미리보기 패널에는 탭이 네 개 있어요.
- HTML Preview는 현재 반응형 HTML을 보여 주고, Figma 레이어를 편집하면 함께 업데이트되며, 간단한 다크 모드 미리보기 토글도 들어 있어요.
- Preflight는 실제 발송용 HTML에서 제목, 프리헤더, 접근성, 링크, 이미지, 전달, Gmail 잘림 문제를 실용적인 기준으로 점검해요.
- Test Send는 수동 받은편지함 테스트를 위해 htmltest.email에 복사해 넣을 수 있도록 실제 발송용 HTML을 준비해요.
- Email Previews는 Emailify 안에서 이메일 클라이언트 스크린샷을 요청해요. 플러그인에서 Email Previews 사용하기를 참고하세요.
Preflight와 Test Send는 Emailify의 발송용 HTML 기능을 사용하기 때문에, 활성화된 Pro 라이선스가 있거나 Pro 무료 체험 횟수가 남아 있을 때 사용할 수 있어요. 이메일 클라이언트 테스트 방법은 발송 전 HTML 이메일 테스트를 참고하세요.
미리보기 모드에서는 로딩 속도를 높이기 위해 GIF가 정지 이미지로 표시돼요(GIF는 렌더링에 시간이 더 걸리기 때문이에요). 하지만 플러그인에서 최종적으로 내보낸 HTML에서는 애니메이션으로 재생돼요.
미리보기 창이 열려 있는 동안에도 미리보기 패널 헤더의 Settings 버튼을 클릭하면 모바일 재정의를 편집할 수 있어요.
다양한 기기 너비로 이메일 미리보기
여러 기기 너비에서 어떻게 보이는지 확인하려면 미리보기 패널 헤더의 선택 상자를 클릭하고 아래 옵션 중에서 고르세요.
- 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)
이메일의 모바일 브레이크포인트. Emailify에서 내보낸 HTML 이메일에는 Figma 데스크톱 프레임의 너비에 따라 자동으로 정해지는 “브레이크포인트”가 하나 있어요. 예를 들어 Emailify 프레임이 600px이면 599px 이하에서 모바일 스타일과 재정의가 적용되기 시작해요.
일부 이메일 클라이언트나 앱의 읽기 패널은 너비가 700px보다 좁아서 데스크톱 레이아웃 대신 모바일 스타일이 렌더링될 수 있어요. 그래서 이메일 너비는 보통 600px에서 640px 사이로 유지하는 것을 권장해요.
Figma에서 수정한 내용을 HTML 미리보기 창에서 실시간으로 확인하기
HTML 미리보기를 열어 둔 채로 Figma 레이어를 계속 편집하면, 매번 Refresh를 클릭하지 않아도 변경 사항이 미리보기 창에 바로 반영돼요.
다크 모드 미리보기
HTML Preview 툴바에서 Dark Mode를 켜면 현재 이메일을 Emailify의 대략적인 로컬 다크 모드 미리보기와 비교할 수 있어요. 이 미리보기는 특정 이메일 클라이언트의 색상이 아니라 일반적인 자동 색상 처리를 사용해요. 미리보기 너비 선택기를 계속 사용해 같은 다크 모드 디자인을 데스크톱이나 모바일 너비로 검토할 수 있어요. Desktop & Mobile 하이브리드 보기를 선택한 동안에는 Dark Mode를 사용할 수 없어요.
이메일에 Emailify 다크 모드 재정의가 있다면, 옆의 Overrides 스위치로 명시적으로 지정한 배경, 텍스트, 테두리, 이미지 교체 스타일을 표시하거나 숨길 수 있어요.
이 토글은 디자인을 돕는 도구일 뿐, 클라이언트나 기기 에뮬레이터가 아니에요. 이메일 클라이언트는 각자 다크 모드 변환을 적용하고, 로컬 미리보기는 인증된 새니타이저, 네이티브 렌더링 엔진과 폰트, 앱 화면 요소, 발송 처리, 클라이언트나 버전별 차이를 모두 재현하지는 않아요.
이메일 클라이언트의 다크 모드 재정의 스타일 지원은 제한적이에요. Emailify의 명시적 재정의는 지원되는 Apple Mail 버전을 위한 것이고, Gmail, Outlook, Windows Mail, Yahoo 등 다른 클라이언트는 다른 자동 색상 처리를 적용할 수 있어요.
HTML 이메일 파일 크기(KB) 확인하기
미리보기 패널 헤더에 이메일 HTML의 전체 파일 크기를 나타내는 숫자가 표시돼요(이미지 에셋을 제외한 .html 파일 자체의 크기예요). Gmail의 102KB 잘림 한도를 넘었는지 알아볼 때 유용해요.
HTML 크기가 102KB를 넘으면 이메일이 한도를 초과했다는 표시로 미리보기 창의 파일 크기가 노란색으로 강조돼요.
HTML 파일 크기를 줄이는 가장 좋은 방법은 이메일의 “Row” 레이어 수를 줄이거나 합치는 것이에요.
이메일의 웹 안전 대체 폰트 미리보기
이메일의 사용자 지정 웹 폰트에 웹 안전 대체 폰트를 지정했다면, Emailify 미리보기 창 하단의 Show Fallback Fonts 스위치를 켜서 어떻게 보이는지 미리 확인할 수 있어요.
Emailify 레이어의 Auto Layout 검사(및 자동 수정)
플러그인의 Preview 기능으로 HTML을 미리 볼 때, Emailify 플러그인으로 추가한 레이어에 여전히 올바른 Figma Auto Layout 속성이 적용되어 있는지 자동으로 감지해요. 그래야 HTML로 내보냈을 때 시각적으로 일관되게 나오기 때문이에요.
Auto Layout 속성을 조정해야 하는 레이어 목록이 표시돼요(예: 높이를 “Fixed”에서 “Hug”로 변경). 원한다면 Apply Fixes 버튼을 클릭해 이 변경 사항을 자동으로 적용할 수 있어요. 그러면 표시된 Figma 레이어에 필요한 Auto Layout 속성 조정이 반영돼요.
잘못된 위치에 있는 Emailify 레이어를 직접 옮겨 해결하기
플러그인의 Preview 기능으로 HTML을 미리 볼 때, Emailify 플러그인으로 추가한 레이어가 처음 만들어진 구조(예: Row 레이어 -> Column 레이어 -> 콘텐츠 레이어)를 그대로 유지하고 있는지 자동으로 감지해요. 그래야 HTML로 내보냈을 때 시각적으로 일관되게 나오기 때문이에요.
직접 옮겨야 하는 레이어 목록이 항목별 안내(예: “이 Row 레이어를 기본 Email 프레임 안으로 다시 옮기세요”)와 함께 표시되고, 페이지와 Figma 레이어 목록에서 해당 레이어로 바로 이동하는 버튼도 있어서 필요한 레이어를 쉽게 찾아 옮길 수 있어요.
Settings를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 설정을 일괄 적용할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.