TasOn Logo
가격 안내
|
고객센터
로그인 회원가입
GUIDE

HTML 이메일 템플릿 만들기

타스온 팀 타스온 팀

웹 표준과 달리 이메일에는 정해진 표준이 없어요. 수많은 메일 클라이언트(Gmail, Outlook 등)의 렌더링 엔진 차이를 극복하기 위해, 하위 호환성을 최우선으로 고려한 전문가용 제작 지침을 확인해 보세요.

1. 렌더링 환경 이해하기

이메일 템플릿은 최신 웹사이트에서 사용하는 <div> 기반 레이아웃을 제대로 표현하지 못하는 경우가 많아요. 거의 모든 구조를 <table>과 <td>에 의존해야 안전하답니다.

주요 고려 클라이언트 리스트

2. 문서 준비 및 기본 구조

DOCTYPE 및 Head 선언

가장 신뢰할 수 있는 XHTML 1.0 Transitional 방식을 권장해요. 빈 태그(link, img, br 등)는 반드시 />로 닫아주셔야 오류를 방지할 수 있어요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>HTML Email Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Body 컨테이너 설계

일부 클라이언트는 <body> 태그를 임의로 제거하곤 해요. 그래서 id="bodyTable"을 가진 테이블을 가장 바깥에 배치하여 전체 영역을 제어해야 한답니다. 가로 너비는 600px~800px 사이가 가장 안전해요.

600px 가로 너비를 준수한 심플한 이메일 테이블 구조 예시

3. 스타일링 전략 (CSS)

이메일에서는 외부 CSS 파일보다 태그 안에 직접 적는 인라인 작성 방식이 필수예요.

<style type="text/css">
  /* 일반 리셋: 테이블 붕괴 방지 및 텍스트 조정 */
  body, #bodyTable { width:100% !important; height:100% !important; margin:0; padding:0; }
  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { -ms-interpolation-mode: bicubic; border:0; outline:none; text-decoration:none; display:block; }
  body, table, td, p, a { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
</style>

4. 지원하지 않는 태그와 미디어 제한

⚠️ 주의: 이메일 보안 정책상 아래 태그들은 원천 차단되거나 메일이 스팸함으로 이동될 수 있어요.

  • <iframe>: 보안상 차단돼요. 유튜브 영상을 직접 넣을 수 없답니다.
  • <script>: 자바스크립트는 아예 동작하지 않아요.
  • <video>, <audio>: 대부분의 클라이언트에서 지원하지 않아요.
유튜브 썸네일 이미지를 활용한 심플한 페이크 플레이어 예시

💡 유튜브 영상 삽입 대안 (이미지 링크 방식)

영상 플레이어를 직접 넣는 대신, 재생 버튼이 합성된 썸네일 이미지를 링크로 연결하는 것이 정석이에요.

<td align="center">
  <a href="유튜브주소" target="_blank" style="text-decoration:none;">
    <img src="썸네일주소" alt="영상 재생" width="600" style="display:block; border:0; width:100%;" />
    <p style="font-family:sans-serif; font-size:14px; color:#444;">▶ 영상을 보시려면 클릭하세요</p>
  </a>
</td>

5. 고급 작성 기법

중첩 테이블 (Nested Table)

colspan이나 rowspan 지원이 불안정하므로, 테이블 안에 또 다른 테이블을 넣는 중첩 방식으로 레이아웃을 구성해 보세요.

조건부 주석을 활용한 아웃룩 VML 버튼과 HTML 버튼의 분리 설계 개념도

방탄 버튼 (Bulletproof Buttons)

이미지가 차단되어도 버튼이 보이게 하려면 Microsoft VML 코드를 섞어 쓰는 것이 좋아요.

<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1caeba" fillcolor="#2bcae3">
    <w:anchorlock/><center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Button</center>
  </v:roundrect>
<![endif]-->
<a href="#" style="background-color:#2bcae3;border:1px solid #1caeba;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Button</a>

6. 이미지 사용 및 고정 이미지 기법

HTML 이메일에 이미지를 사용할 수 있지만 몇 가지 주의사항이 있어요. 이미지를 제거하는 일부 클라이언트를 위해 속성을 꼭 입력해 주세요. 

<img src="https://example.com/image.jpg" alt="이미지 설명" width="200" height="100">

💡 고정 이미지 삽입 (Layout Anchor)

많은 경우 이메일은 고정된 레이아웃을 유지하지만, 일부 클라이언트에서는 기기 너비에 맞춰 레이아웃을 임의로 수정하기도 해요. 이럴 때 지정한 너비와 같은 너비의 이미지를 삽입하면 문제를 해결할 수 있답니다.

고정 이미지 사용 차이

단순히 지정한 테이블의 너비를 유지할 용도이므로, 화면에 표시되지 않도록 아래와 같이 설정해 보세요. 

<!-- 고정 레이아웃 유지를 위한 스페이서 이미지 -->
<td style="font-size: 0; line-height: 0; height: 0;" height="0">
  <img alt="" src="https://example.com/600x1.png" style="display: block;" width="600" height="0"/>
</td>

고정 이미지를 삽입하면 모바일에서도 데스크톱과 동일한 레이아웃을 유지할 수 있어요. 600px 기준이라면 화면 축소 현상도 큰 문제가 되지 않는답니다.

7. 이미지 최적화 및 용량 가이드

본문에 너무 무거운 이미지를 사용하면 수신 서버에서 스팸으로 분류하거나 로딩 지연으로 사용자 경험을 해칠 수 있어요.

용량 및 파일 수

해상도 및 픽셀(Pixel) 가이드

💡 전문가 팁: 이미지 비중이 너무 높으면 스팸 필터에 걸릴 확률이 높아요. 텍스트와 이미지 비율을 7:3 정도로 유지하는 것이 가장 안전하답니다.

8. 실무 체크리스트 및 마무리

💡 TIP: 꼼꼼한 검증과 테스트만이 완벽한 이메일을 만들어요. 아웃룩 구버전의 경우 GIF의 첫 프레임만 보일 수 있으니 중요한 정보는 첫 장에 배치해 주세요!

알림

내용이 여기에 표시됩니다.