HTML 메일 만들기
HTML Email Builder
블록을 쌓아 표 기반·인라인 스타일 HTML 메일을 만들고 VML 버튼까지 넣어 주며, 같은 블록에서 텍스트 대체본도 함께 만들어 냅니다.
메일 클라이언트가 모두 이해하는 형태만 만들어 내는 블록 편집기입니다. 중첩 표와 인라인 스타일을 쓰고, 버튼은 두 벌로 내보내 아웃룩 워드 엔진에서도 배경만 깔린 글자 링크가 아니라 실제 도형이 그려집니다. HTML과 텍스트 대체본을 함께 내보내며, 텍스트는 태그를 지워 만든 것이 아니라 블록에서 직접 생성합니다.
메일 설정
블록
- 제목
- 문단
- 버튼
- 구분선
- 두 칸
- 푸터
미리보기
클라이언트 화면을 찍은 것이 아닙니다. 작성한 HTML에 해당 클라이언트의 문서화된 제거 규칙을 적용한 결과를 이 브라우저가 그린 것입니다.
- 윈도우용 아웃룩은 마이크로소프트 워드 엔진으로 그립니다. 이 창은 브라우저입니다. 제거 규칙을 적용하고 워드에 남는 것이 무엇인지는 보여 줄 수 있지만, 워드가 그것을 어떻게 배치할지는 보여 줄 수 없습니다. 줄바꿈·간격·이미지 확대(워드는 120 dpi 화면에서도 96 dpi를 가정합니다)는 다르게 나옵니다.
이 클라이언트에서 제거된 것 · 2
선언: border-radius: 6px · border-radius: 8px
버튼은 두 벌로 나갑니다. 아웃룩 워드 엔진용 VML 도형과 나머지 클라이언트용 링크이며, 언제나 하나만 보입니다.
이 결과물에 대한 검사기의 판정
깨지거나 기능이 사라지는 항목이 없습니다. 이렇게 만드는 이유가 그것입니다.
5kB · 지메일 102 KB의 5%
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>이번 주 소식</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">이번 주에 바뀐 것들을 정리했습니다‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">이번 주 업데이트</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">안녕하세요.<br>이번 주에 바뀐 것들을 정리했습니다. 표 기반 레이아웃이라 아웃룩에서도 그대로 보입니다.</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">전체 내용 보기</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">전체 내용 보기</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">왼쪽 칸입니다. 두 칸은 표의 한 행으로 만들어집니다.</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">오른쪽 칸입니다. flexbox를 쓰지 않으므로 워드 엔진에서도 나란히 놓입니다.</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">보낸 사람 주소 · 서울특별시<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">수신거부</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>텍스트 본문
이번 주에 바뀐 것들을 정리했습니다 이번 주 업데이트 ========= 안녕하세요. 이번 주에 바뀐 것들을 정리했습니다. 표 기반 레이아웃이라 아웃룩에서도 그대로 보입니다. 전체 내용 보기: https://example.com/news —————————————————————————————— 왼쪽 칸입니다. 두 칸은 표의 한 행으로 만들어집니다. 오른쪽 칸입니다. flexbox를 쓰지 않으므로 워드 엔진에서도 나란히 놓입니다. —————————————————————————————— 보낸 사람 주소 · 서울특별시 수신거부: https://example.com/unsubscribe
태그를 지워 만든 것이 아니라 블록에서 직접 생성합니다. 그래서 링크가 주소 나열이 아니라 문장으로 읽힙니다.
사용 방법
메일 기본값 정하기
제목·프리헤더·너비·색을 정합니다. 프리헤더는 받은편지함 목록에서 제목 뒤에 붙는 회색 문장입니다. 비워 두면 클라이언트가 본문 맨 앞 글자를 가져가는데, 대개 “브라우저에서 보기”가 됩니다.
블록 쌓기
제목·문단·이미지·버튼·두 칸·구분선·여백·푸터를 순서대로 놓습니다. 두 칸 블록은 미디어 쿼리가 아니라 표의 한 행이므로, 미디어 쿼리를 무시하는 클라이언트에서도 두 칸으로 남습니다.
미리보기와 판정 확인하기
검사 도구와 같은 클라이언트별 화면이 그대로 있고, 그 아래에 이 결과물에 대한 검사기의 판정이 붙습니다. 비어 있어야 정상이며, 그러라고 이렇게 만드는 것입니다.
두 파트 모두 내보내기
multipart/alternative로 함께 보내세요. HTML만 보낸 메일은 스팸 필터 점수가 나빠지고, 소리로 읽어 주는 도구에서는 읽을 수 없습니다.
자주 묻는 질문
버튼이 HTML에 두 번 나오는 이유는?
한 벌은 <!--[if mso]--> 주석 안의 VML 도형으로 아웃룩 워드 엔진만 읽고, 다른 한 벌은 워드가 무시하는 주석 안의 평범한 링크입니다. 언제나 하나만 보입니다. VML 쪽이 없으면 아웃룩에서 padding이 무시되어 글자 부분만 눌립니다.
윈도우에서 한글이 제대로 나오나요?
글꼴 스택에 Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR을 라틴 글꼴보다 앞에 둡니다. 아웃룩은 웹 폰트가 실패하면 지정한 다음 글꼴이 아니라 Times New Roman으로 떨어지기 때문에, 라틴 글꼴이 앞에 오면 한글이 네모로 나옵니다.
내 HTML을 여기에 붙여 넣을 수 있나요?
아닙니다. 이 페이지는 만들기만 합니다. 이미 있는 HTML은 호환성 검사 도구로 가져가세요. 무엇을 고쳐야 하는지 알려 주고, 필요한 요소에는 대체 코드까지 만들어 줍니다.
이 도구로 이어지는 것
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
메일 클라이언트 지원 표
Email Client Support Table
지메일·아웃룩·애플 메일·야후·삼성 이메일·썬더버드가 HTML 메일에서 무엇을 지원하는지 caniemail의 기기 시험 결과로 보여 주며, 항목마다 마지막 시험 날짜가 붙습니다.
보낸 메일·도착 메일 비교
Sent vs Delivered Comparison
자기 계정에서 임시 주소로 초안을 보내면, 발송 경로가 무엇을 바꿨는지 보여 줍니다. 리다이렉트로 감싸진 링크, 사라진 style 블록, 추가된 추적 픽셀, 사용된 인코딩까지 비교합니다.
HTML 메일 호환성 검사
HTML Email Compatibility Check
메일 HTML을 클라이언트별 실제 지원 범위와 대조해 깨지는 요소를 직접 짚어 주고, 지메일·아웃룩 등에서 무엇이 남는지 나란히 보여 줍니다.
의심 링크 확인
Suspicious URL Check
링크를 열기 전에 주소 형태(혼동 글자·IP 호스트·@ 속임수·깊은 서브도메인·이상한 포트·단축 서비스)를 검사하고, 원하면 리다이렉트 경로와 도메인 등록 시점을 확인합니다. 평판 데이터베이스는 없습니다.
압축파일 구조 검사
Archive Inspector
압축을 풀지 않고 zip 내부를 열어 경로 이탈 항목·실행 파일·매크로·압축 폭탄을 표시합니다.
오디오 형식 변환
Audio Converter
MP3·WAV·FLAC·AAC·OGG·Opus 사이를 비트레이트와 샘플레이트를 정해 변환합니다.