HTML 이메일 미리보기: 모바일 PC 화면별 확인법

2026년 7월 18일

HTML 이메일 에디터 화면으로, 왼쪽 코드 입력창에 테이블 기반 뉴스레터 템플릿이 입력되어 있고 오른쪽 미리보기에는 모바일(375px) 탭이 선택되어 좁은 폭으로 렌더링된 결과가 표시되어 있다

HTML 이메일 코드를 발송 전에 확인하는 가장 확실한 방법은, 그 코드를 브라우저가 직접 그리게 해서 화면 크기별로 눈으로 보는 것입니다.

이 글은 뉴스레터나 마케팅 메일용 HTML을 작성하는 담당자와 개발자가, 메일을 실제로 보내지 않고도 모바일·태블릿·PC에서 어떻게 보일지 확인하는 방법을 설명합니다.

그 전에 이메일 HTML이 왜 일반 웹페이지 코드와 다른 규칙을 따라야 하는지부터 짚습니다.

요약 ① HTML 이메일은 <div>+외부 CSS가 아니라 <table> 레이아웃과 인라인 style 속성으로 만들어야 여러 메일 클라이언트에서 덜 깨집니다. ② 이 도구는 입력한 코드를 그대로 iframe의 srcDoc에 넣어 브라우저가 직접 그리며, 탭을 누르면 iframe 폭만 375px·768px·100%로 바뀌어 반응형을 보여줍니다. ③ 브라우저 미리보기는 실제 Gmail·Outlook 렌더링과 100% 같지 않습니다. 메일 클라이언트마다 지원하는 CSS 범위와 렌더링 엔진이 다르기 때문입니다.

뉴스레터 HTML이 메일함마다 다르게 보이는 이유

마케팅 담당자가 뉴스레터를 만들 때 흔히 저지르는 순서가 있습니다. 웹페이지를 만들 때처럼 <div>로 구획을 나누고, <style> 태그나 별도 CSS 파일로 배경색·정렬·여백을 지정하는 방식입니다. 브라우저에서 미리보기 파일을 열어보면 의도한 대로 예쁘게 보입니다.

문제는 이 코드를 실제로 발송했을 때 시작됩니다. 같은 코드인데도 수신자에 따라 배경색이 사라지거나, 나란히 배치했던 영역이 세로로 쌓이거나, 여백이 의도와 다르게 벌어지는 일이 생깁니다. 브라우저에서는 멀쩡했던 코드가 메일함에서는 다르게 그려지는 겁니다.

이런 차이는 코드가 틀려서가 아니라, 메일을 여는 프로그램(메일 클라이언트)이 웹페이지를 여는 브라우저와 같은 방식으로 HTML·CSS를 해석하지 않기 때문에 생깁니다. 발송 후에는 되돌릴 수 없으므로, 보내기 전에 코드가 실제로 어떻게 그려지는지 확인하는 절차가 필요합니다.

도구 없이 직접 확인하는 방법

이 확인 작업은 도구 없이도 할 수 있습니다. 브라우저 자체가 HTML을 해석해 화면에 그리는 렌더링 엔진이기 때문입니다.

브라우저만으로 확인하는 3단계

1단계 — HTML 파일로 저장해 직접 연다. 작성한 코드를 텍스트 편집기에 붙여넣고 확장자를 .html로 저장한 뒤, 그 파일을 더블클릭해 브라우저로 엽니다. 브라우저가 코드를 파싱해 화면에 그려줍니다.

2단계 — 브라우저 개발자도구로 화면 폭을 바꿔본다. 크롬이나 사파리에서 개발자도구를 열고 반응형 보기(디바이스 툴바) 아이콘을 누르면, 창 너비를 375px·768px 같은 값으로 바꿔가며 같은 코드가 어떻게 다시 배치되는지 볼 수 있습니다.

3단계 — 실제 메일 클라이언트에서 열어본다. 여기까지는 브라우저 렌더링 기준입니다. 발송 환경까지 확인하려면 자신에게 테스트 메일을 보내 Gmail 웹, Gmail 모바일 앱, Outlook 등 여러 클라이언트에서 직접 열어봐야 합니다.

반복 확인이 번거로운 이유

세 단계 모두 비용 없이 할 수 있지만, 코드를 고칠 때마다 파일을 다시 저장하고 다시 열어야 하고, 화면 폭도 개발자도구에서 매번 숫자를 입력해야 합니다. 결과를 보는 것 자체는 어렵지 않지만 반복하기가 번거롭습니다.

저희 도구로 확인하기.

HTML 이메일 에디터 & 미리보기

브라우저 안에서만 렌더링되며 코드는 서버로 전송되지 않습니다. 로그인 없이 무료로 사용할 수 있습니다.

헷갈리기 쉬운 부분 — div 대신 table을 쓰는 이유와 미리보기의 한계

HTML 이메일 코드를 처음 작성할 때 가장 자주 걸리는 지점은 두 가지입니다. 레이아웃을 <div>로 짜는 것과, 브라우저 미리보기가 실제 발송 결과와 완전히 같을 거라고 기대하는 것입니다.

구분	웹페이지(브라우저용)	HTML 이메일
레이아웃	`<div>` + CSS Grid·Flexbox	`<table>` `<tr>` `<td>`
스타일 적용	`<style>` 태그 또는 외부 CSS 파일 + class	각 태그의 `style=""` 인라인 속성
외부 리소스	CSS 파일을 자유롭게 불러옴	상당수 클라이언트가 외부 CSS 요청을 차단함
렌더링 엔진	브라우저 하나(Chrome, Safari 등)	클라이언트마다 다른 엔진(Outlook 데스크톱, 각 웹메일, Apple Mail 등)

div 대신 table을 쓰는 이유

레이아웃 줄부터 보면, 메일 클라이언트 중에는 CSS Grid나 Flexbox, position 같은 레이아웃 속성을 지원하지 않는 것들이 있습니다. 특히 Outlook 데스크톱 버전은 일반 브라우저가 아니라 문서 편집기 계열의 렌더링 엔진으로 메일 본문을 그리기 때문에, 웹페이지에서 흔히 쓰는 레이아웃 방식이 그대로 통하지 않는 경우가 많습니다.

<table>은 훨씬 오래전부터 널리 지원돼 온 방식이라 클라이언트 간 편차가 상대적으로 적습니다. 아래는 같은 영역을 두 가지 방식으로 짠 예시입니다.

<!-- 웹페이지 방식: 일부 메일 클라이언트에서 레이아웃이 무너질 수 있음 -->
<div style="display:flex; max-width:600px;">
  <div style="background:#f5f5f5; padding:20px;">제목 영역</div>
</div>

<!-- 이메일 방식: table + 인라인 style -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="background:#f5f5f5; padding:20px;">제목 영역</td>
  </tr>
</table>

두 코드는 브라우저에서는 비슷하게 보일 수 있지만, table 방식이 더 많은 클라이언트에서 같은 결과를 낼 가능성이 높습니다.

스타일 적용 줄도 같은 맥락입니다. 외부 CSS 파일(<link rel="stylesheet">)은 메일이 열릴 때 외부 요청 자체를 차단하는 클라이언트가 많아 적용되지 않는 경우가 있고, <head> 안의 <style> 태그도 클라이언트에 따라 제거되기도 합니다.

그래서 이메일 HTML에서는 각 태그의 style="" 속성에 스타일을 직접 적어 넣는 인라인 방식이 널리 쓰입니다.

미리보기가 실제 발송과 다른 이유

마지막 렌더링 엔진 줄이 이 도구의 미리보기와 실제 발송 결과가 완전히 같지 않은 이유입니다. 이 도구의 미리보기는 사용자가 지금 보고 있는 웹 브라우저 안의 iframe이 코드를 그리는 것입니다.

반면 Outlook 데스크톱은 별도 문서 렌더링 엔진을, 일부 웹메일은 자체 CSS 필터링을 거쳐 화면을 그립니다. 같은 코드라도 이 엔진들이 서로 다른 CSS 규칙을 적용하기 때문에, 브라우저 미리보기에서 문제없이 보였던 코드가 특정 클라이언트에서는 다르게 보일 수 있습니다.

정리

HTML 이메일은 <table> 레이아웃과 인라인 style 속성으로 만드는 것이 클라이언트 간 편차를 줄이는 방식입니다. <div>+외부 CSS는 브라우저에서는 보여도 메일함에서는 다르게 그려질 수 있습니다.
이 도구는 입력한 코드를 iframe의 srcDoc에 그대로 넣어 브라우저가 직접 렌더링합니다. 코드를 수정하면 즉시 다시 그려지고, 코드는 서버로 전송되지 않습니다.
모바일(375px)·태블릿(768px)·PC(100%) 탭은 iframe의 CSS 폭만 바꿔, 같은 코드가 화면 크기별로 어떻게 반응하는지 보여줍니다.
브라우저 미리보기는 실제 Gmail·Outlook 렌더링과 완전히 같지 않습니다. 클라이언트마다 지원하는 CSS 범위와 렌더링 엔진이 다르기 때문이며, 최종 확인은 실제 발송 테스트로 하는 것이 정확합니다.
도구를 처음 열면 나오는 테이블 기반 예시 코드를 그대로 수정해 자신의 템플릿으로 바꿔 쓸 수 있습니다.

HTML 이메일 에디터 & 미리보기

브라우저 안에서만 렌더링되며 코드는 서버로 전송되지 않습니다. 로그인 없이 무료로 사용할 수 있습니다.

자주 묻는 질문

작성한 HTML 코드가 서버로 전송되나요?

아니요. 입력한 코드는 브라우저 안의 iframe에서만 렌더링되며, 외부 서버로 전송되거나 저장되지 않습니다.

`<div>`로 만든 코드는 왜 메일함에서 깨지나요?

메일 클라이언트마다 지원하는 CSS 범위가 다르기 때문입니다. 일부 클라이언트, 특히 Outlook 데스크톱은 일반 브라우저가 아닌 별도 렌더링 엔진으로 메일 본문을 그려 Flexbox나 position 같은 레이아웃 속성을 지원하지 않는 경우가 있습니다.

<table> 레이아웃은 더 오래전부터 지원돼 온 방식이라 편차가 상대적으로 적습니다.

이 도구의 미리보기가 실제 Gmail이나 Outlook 화면과 100% 같나요?

아니요. 이 미리보기는 사용자가 쓰는 일반 웹 브라우저 기준 렌더링입니다. 실제 Gmail·Outlook 등은 각자의 렌더링 엔진과 CSS 필터링 규칙을 적용하므로 결과가 달라질 수 있습니다. 발송 전 최종 확인은 실제 클라이언트로 테스트 메일을 보내보는 방법이 정확합니다.

처음 열었을 때 나오는 예시 코드를 그대로 써도 되나요?

네. 도구를 처음 열면 테이블 기반 뉴스레터 예시 코드가 미리 입력되어 있습니다. 이 코드를 그대로 수정해서 사용하셔도 됩니다.