이메일 eDM HTML 코딩 가이드

이메일 코딩은 보통의 코딩 방식과 다릅니다. 이메일 서비스(아웃룩, 지메일, 네이버 등)마다 아웃룩의 버전마다 렌더링 되는 화면은 상이합니다. 테스트를 하며 디자인과 맞춰야 하기 때문에 생각보다 쉽지 않은 작업입니다.
이 글은 최근에 아웃룩 이메일 템플릿 작업을 하며 느꼈던 특징들을 정리합니다.

👮🏻‍♀️ 공통 규칙

Inline Style

스타일시트를 별도로 작성하지 않고 인라인 스타일로 작성합니다.

Table

<div>가 아니라 로 레이아웃을 설계해야 합니다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들이

를 지원하지 않습니다. border와 table 사이 공간 제거를 해줍니다.

 

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
</table>

Width

width는 버전마다 인라인 스타일 적용 여부가 다르기 때문에 table 태그의 속성으로도 기재하여 명확하게 해줍니다.
테이블 태그의 속성에 width와 height에는 px 단위를 쓰지 않습니다.

<td width="100" style="width: 100px;"></td>

Align

정렬 역시 HTML 태그의 속성으로 지정해 줘야 합니다.

<td valign="middle"></td> // vertical 정렬
<td align="center"></td> // horizontal 정렬

Image

이미지 태그는 렌더링되면서 이미지 아래에 여백이 생깁니다. 여백을 없애려면 아래 스타일 추가합니다.

<img src="/" style="display: block;" alt="대체텍스트">

Background

CSS background 속성보다 HTML 속성으로 지정해 줍니다. 또한 보통 #fff; 로 축약하는게 좋은 방법이지만 이메일 코딩에는 축약형은 사용하지 않습니다.

<td bgcolor="#ffffff;"></td>

Word Break

table-layout: fixed로 테이블 열 너비를 고정할 수 있지만 outlook 2010에서는 이 속성을 무시하고, 긴 문장은 범위를 벗어나서 한 줄로 길어집니다.

<table style="word-break: break-all;"></table>

👻 조건부 CSS

아웃룩 버전 별로 적용되는 내용이 달라서 버전 별 최적화를 위해 상단 head에 조건부 CSS를 선언할 수 있습니다.

// 아웃룩 2010의 경우 
`<!--[if mso 14]> your code <![endif]-->`

📚 참조

Email Design at Stack Overflow
Campaign Monitor - 이메일 클라이언트 별 적용되는 CSS Guide
HTML Email Template 만들기 - 한글로 잘 작성된 가이드^^
HTML 이메일 템플릿 처음부터 제작하기