HTML 이메일 템플릿 처음부터 제작하기

() translation by (you can also view the original English article)

모든 과정을 이해하는 최고의 방법은 처음부터 끝까지 직접 제작해보는 것입니다. 오늘은 HTML 이메일 템플릿을 처음부터 구축하면서 이메일 디자인에 그 방법을 실행해 보도록 하죠.

시작

시작하기에 앞서 제가 여기 사용한 소스의 출처를 알려드리겠습니다.

사랑스러운 2D 아이콘은 Dribbble에 있는 피에르 보로딘(Pierre Borodin)의 작품입니다.
Oil Can과 Source Sans Pro와 Mission Script 서체를 사용했습니다.
소셜 미디어 아이콘의 출처는 Metrize Icons입니다.

이전 튜토리얼에서 설명했듯이 여러분은 XHTML doctype을 사용해 HTML 이메일 코드를 작성할 것입니다.

<!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>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

위의 정리된 코드에 나머지 HTML 구조를 짜기 시작하면 됩니다.

Body와 Main 테이블 작성

우선, <body> 태그를 시작으로 이메일의 전반적인 구조를 작성하겠습니다. 예상 못 했던 공간이 생기지 않게 body 속성에서 margin과 padding 값을 0으로 합니다.

테이블의 width 값도 100%로 하겠습니다. body 태그의 스타일은 전혀 적용되지 않기 때문에 이렇게 하면 이메일에서 진짜 body 태그처럼 동작할 것입니다. 이메일의 body에 배경색을 입히고 싶으면 이 커다란 테이블에 관련 코드를 대신 적용하세요.

테이블에서 의도치 않은 공간이 생기지 않도록 cellpadding과 cellspacing 값을 0으로 합니다.

메모: 모든 테이블 속성에 border="1"을 남겨둘게요. 작업을 진행하면서 레이아웃 윤곽을 알 수 있거든요. 최종 단계에서 Find(찾기)와 Replace(대체하기) 기능을 이용해 이 속성을 뺄 것입니다.

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Hello!
   </td>
  </tr>
 </table>
</body>

HTML에서 사용 가능한 속성이 있는 경우에는 CSS 대신 그 속성을 사용하세요.

이제 컨테이너 테이블 안에 600픽셀 너비의 테이블을 가운데 넣습니다. 600픽셀은 이메일에 가장 안전한 최대 너비이며, 다양한 해상도의 데스크톱과 웹메일 클라이언트에서 문제없이 보입니다.

너비 속성을 이용해 CSS 대신 HTML로 테이블 너비를 입력합니다. HTML 이메일 개발에서의 황금률: HTML에 속성이 있다면 CSS 말고 그 속성을 사용하세요.

짧은 '안녕하세요!' 인사말을 이 테이블로 교체하겠습니다.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   Hello!
  </td>
 </tr>
</table>

border-collapse 값을 collapse로 지정하는 인라인 스타일 속성도 추가합니다. 그렇게 하지 않으면 아웃룩의 새 버전에서 border와 테이블 사이에 미세한 공간이 생깁니다.

구조와 헤더(Header) 작성

디자인에서 우리는 이메일이 논리적인 세 영역으로 구성되었음을 알 수 있습니다. 따라서 우리는 줄마다 제작해 보겠습니다.

작성한 줄 하나를 복사해서 총 3개를 만들죠. 저는 줄마다 쉽게 구분되도록 그 안에 있는 텍스트를 바꿨습니다.

1	<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
2	<tr>
3	<td>
4	Row 1
5	</td>
6	</tr>
7	<tr>
8	<td>
9	Row 2
10	</td>
11	</tr>
12	<tr>
13	<td>
14	Row 3
15	</td>
16	</tr>
17	</table>

이제 디자인에 맞춰 색상을 넣겠습니다. bgcolor는 유효한 HTML 속성이기 때문에 배경색을 적용하는데 CSS 말고 이 속성을 사용하겠습니다. 단축한 3글자는 때로 작동하지 않으므로 반드시 총 6글자인 헥스 코드(hex code)를 사용하세요.

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9">
   Row 1
  </td>
 </tr>
 <tr>
  <td bgcolor="#ffffff">
   Row 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#ee4c50">
   Row 3
  </td>
 </tr>
</table>

다음에는 Row 1에 집중하겠습니다. 셀에서 padding값을 변경하고 이미지를 삽입하도록 하죠.

패딩(Padding) 사용

이메일에서 padding을 사용할 때는 항상 (위, 오른쪽, 아래, 왼쪽) 값을 하나하나 명시해야 합니다. 그렇게 하지 않으면 예상치 못한 결과가 나올 수 있습니다. 여러분은 padding: 10px 10px 8px 5px; 같이 문장을 간단히 적을 수 있습니다. 다만 문제가 생기면 padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left:5px; 처럼 길게 작성하고 싶을 것입니다.

padding으로 더 큰 문제가 발생하게 되면 (가령, 전송 플랫폼에서 CSS를 제거하면) 사용하지 마세요. 차라리 빈 셀을 넣어 공간을 만드세요. 공간을 메울 용도로 GIF를 만들지 마세요. 해당 셀에 style="line-height: 0; font-size: 0;"를 적고, 셀 안에는  를 작성하고 셀의 정확한 높이나 너비 값을 지정하면 됩니다. 예제가 여기에 있습니다.

1	<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>

P 태그나 DIV가 아닌 TD 태그에 padding을 사용하면 안전합니다. P 태그와 DIV의 경우에는 예상을 넘어 더 크게 보입니다.

padding을 셀에 추가하기 위해 인라인 CSS를 이용하겠습니다. 그다음 이미지를 넣고 alt 텍스트를 입력합니다. 그리고 style="display:block;"을 추가하는데, 이는 몇몇 이메일 클라이언트에서 이미지 아래 여백이 보이는 것을 방지하는 일반적인 해결 방식입니다. td 태그에 align="center"를 넣어 이미지를 가운데 정렬합니다. alt 태그도 적습니다. 이는 대개 이미지가 뜨지 않는 채로 이메일이 로딩될 때 중요합니다.

메모: 헤더의 내용이 메시지에서 매우 중요하다면, 이미지만 있는 헤더는 사용하지 마세요. 대다수의 클라이언트가 자동으로 이미지를 차단한다는 것을 잊지 마세요. 그러니 이메일의 내용이 정말 중요하다면 그 내용을 이미지에 결코 담아서는 안 됩니다. 어쨌든, 이 예제에서 헤더는 중요하지 않네요.

1	<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
2	<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
3	</td>

콘텐츠 영역 제작

우선, 중간 셀에 padding을 넣습니다. 그러면 디자인에 맞춰 그 안에 있는 테이블 주변에 공간이 생기게 됩니다.

메인 콘텐츠용으로 3줄로 짜인 테이블을 추가하겠습니다. 한 줄에는 헤드라인이 있고, 다른 한 줄에는 소개 텍스트가 있으며, 마지막 한 줄에는 2개의 열이 들어갑니다. 테이블 너비를 픽셀 단위가 아닌 100%로 하겠습니다. 이메일을 반응형으로 만들고 싶다면, 너빗값을 추적하는 데 유용하기 때문입니다. 늘 모든 속성에 픽셀 단위로 값을 지정한다면 결국에는 미디어 쿼리에 수많은 값을 지정하는 일로 마칠 수 있습니다. 반면 중첩된 테이블 너비를 퍼센트로 지정하면, 부모 요소의 너비를 조정할 때 이에 맞춰 모든 값이 변경될 것입니다.

1	<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
2	<table border="1" cellpadding="0" cellspacing="0" width="100%">
3	<tr>
4	<td>
5	Row 1
6	</td>
7	</tr>
8	<tr>
9	<td>
10	Row 2
11	</td>
12	</tr>
13	<tr>
14	<td>
15	Row 3
16	</td>
17	</tr>
18	</table>
19	</td>

이제는 콘텐츠를 넣고 가운데 셀에 padding을 줍니다.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Lorem ipsum dolor sit amet!
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 30px 0;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

Row 3에 콘텐츠가 들어갈 열을 2개 추가하겠습니다. 2개 열 사이에 '여백'을 주겠지만, margin은 사용하지 못하므로 2개의 열 중간에 빈 열이 있는 3열짜리 테이블을 만들겠습니다.

퍼센트 사용을 고수하고 싶은데, 콘텐츠의 크기가 정확하다면 그 값을 퍼센트로 바꾸는 것이 어려울 수 있습니다. (이 예제에서는 열 너비가 48.1%가 될 터인데 혼동될 수 있겠지요.) 이런 이유로, 이미지 2개는 260px 너비이니까 우리는 가운데 20px 여분의 열과 260px 너비 열 2개를 만들 것입니다. (총 540px이 됩니다. 테이블의 600px 너비에서 양쪽 30px의 padding 값을 뺀 값이네요.) 잊지 말고 font-size와 line-height 값을 0으로 하고, 줄 바꿈 없는 공백인  를 가운데 여백 셀에 넣습니다.

한 셀에 있는 글의 양이 다른 셀보다 더 많을지라도 맨 위로부터 수직 정렬되도록 양쪽 셀에 valign을 "top"으로 지정해 줍니다. 수직 정렬의 기본 값은 "middle" 입니다.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   Column 1
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   Column 2
  </td>
 </tr>
</table>

양쪽 열에 이미지와 콘텐츠를 넣어봅시다. 줄이 여러 개 필요한데 colspan이나 rowspan 태그를 사용하지 못하기 때문에 다른 테이블을 중첩시키겠습니다. 각 열에서 이미지와 카피 글 사이에 padding도 어느 정도 줄 것입니다.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

여기에서는 열 너비가 100%인 HTML을 이용하여 이미지 너비를 지정하겠습니다. 한 번 더 말하지만, 이 이메일을 반응형으로 만들고 싶다면 부모 요소의 너비 값을 바꿔주는 미디어 쿼리를 사용하면 됩니다. style="height: auto"를 사용해도 모든 클라이언트에 적용되지 못하므로 높이값을 픽셀 단위로 변경해야 합니다. (에헴 에헴, 아웃룩) 그러니까 픽셀로 지정하겠습니다. 이는 이미지가 픽셀값을 상속받지 못 하려면 미디어 쿼리에서 이미지에 height: auto !important가 있어야 한다는 의미입니다. 그러나 단 하나의 클래스로 이 작업이 가능합니다. 너빗값을 퍼센트로 했기 때문에 변경하지 않아도 됩니다. 변경하는 것이 적을수록 더 좋답니다.

푸터(Footer)

이제는 푸터 열에 padding을 넣겠습니다.

1	<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
2	Row 3
3	</td>

셀 안에 2개의 열이 들어가도록 또 하나의 테이블을 중첩시킵니다.

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Column 1
  </td>
  <td>
   Column 2
  </td>
 </tr>
</table>

소셜 미디어 아이콘을 위한 작은 테이블을 만들겠습니다. 부모 셀의 속성을 align="right"로 지정합니다. (파란색 링크 테두리가 생기지 않도록) 이 이미지 링크에 border="0"으로 적혀있는지 확인하고 display:block도 잊지 말고 적용하세요.

<td align="right">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
   <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
  </tr>
 </table>
</td>

이제는 텍스트를 입력하고, 셀 간의 여백이 커질 경우를 대비해서 셀에 너빗값을 지정합니다. 이 셀을 75%로, 다른 셀은 25%로 지정하겠습니다.

1	<td width="75%">
2	® Someone, somewhere 2013<br/>
3	Unsubscribe to this newsletter instantly
4	</td>

해냈습니다! 레이아웃이 완성됐어요.

검증

코드에 문제가 없는지 작업한 문서를 W3C Validator에서 돌려봅시다. 여러분이 튜토리얼을 정확하게 따랐다면 무사 통과할 것입니다.

다음에는 이메일의 구조가 잘 되어 있는지 확인하기 위해 리트머스(Litmus)에서 테스트를 하겠습니다. 제가 실행한 테스트 결과에 대한 요점은 다음과 같습니다.

텍스트 꾸미기

첫째 줄은 헤딩(heading)입니다. 글씨를 굵게 하려고 <b> 태그를 쓰겠습니다. 알다시피 HTML에 속성이 있다면 CSS 말고 그 속성을 사용하기 때문입니다.

1	<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
2	<b>Lorem ipsum dolor sit amet!</b>
3	</td>

또한, 텍스트가 있는 모든 셀에 이 인라인 스타일을 넣겠습니다.

1	style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

다음에는 푸터 텍스트에 스타일을 적용하고, 구독 해지(unsubscribe) 링크를 정돈할 것입니다. CSS와 HTML <font> 태그를 사용해 구독 해지 텍스트 링크를 꾸며보겠습니다. 둘을 함께 쓰는 것은 링크의 기본색인 파란색이 절대로 나타나지 않게 하기 위한 최선의 방법입니다.

1	<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
2	® Someone, somewhere 2013<br/>
3	<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly
4	</td>

해냈습니다! 모두 들어갔습니다. 테두리를 없애고 나서 예쁘게 보이는지 보지요. 코드를 세심히 보면서 모든 border="1"를 border="0"으로 바꿔 주세요.

현재는 여백에서 좀 슬피 떠 있는 듯 보이네요. 첫 번째 600픽셀 너비의 테이블로 가서 아래의 코드를 적습니다.

1	style="border: 1px solid #cccccc;"

자, 더는 떠 있는 듯이 보이지 않습니다. 마무리 손질로 (애플 메일처럼) 몇몇 웹메일 클라이언트에서 하단이 갑자기 끊기는 현상을 방지하기 위해 첫 셀 하단의 padding 값을 30픽셀로 하겠습니다. 그리고 상단 padding 값을 10픽셀로 주고요. 그러면 파란 헤더에 숨 쉴 틈이 조금 생깁니다.