이 포스트는 반응형 이메일 템플릿 코딩하는 방법에 대해 다루고 있습니다. 이메일 마케팅이나 커뮤니케이션을 위해 반응형으로 디자인된 템플릿을 개발하고 싶은 사람들에게 유용한 가이드를 제공합니다. 이메일 템플릿 코딩의 기본 원리와 주요 기술, 코딩 팁과 테스트 방법 등을 알려드립니다.
반응형 이메일 템플릿 코딩: 고려해야할 점
HTML은 테이블 코드를 사용하여 마크업할 것
우리가 많이 사용하는 웹메일 서비스인 네이버, 다음, 구글, 네이트, 아웃룩 등의 이메일 클라이언트들은 각각 다른 이메일 렌딩 버전을 가지고 있습니다. 보안상의 이유로 일부 코드를 막아두거나 쓸 수 있는 태그와 태그 속성, CSS 속성에 제한을 두고 있습니다. 그래서 기존에 <div>를 사용한 웹표준 방식의 마크업을 하게 되면 구조가 틀어지는 일이 발생합니다. 하지만 테이블 태그는 대부분의 이메일 클라이언트에서 잘 나오기 때문에 크로스브라우징을 위해서는 테이블 코딩을 하는 것이 적합합니다.
CSS는 HTML 각 태그 안에 인라인 스타일로 넣어줄 것
CSS를 정의하는 방법은 총 3가지가 있습니다.
- 외부문서로 저장하여 연결하기 (Linked Style)
- 문서 내부에 정의하기 (Embedded Style)
- 태그에 직접 지정하기 (Inline Style)
이메일 클라이언트들은 보안상의 이유로 <head>나 <style> 태그를 막아버리기 때문에 메일 폼을 마크업할 때는 아래의 예제와 같이 각 태그 안에 직접 인라인 스타일로 CSS를 정의해줍니다. 이러한 이유로 미디어쿼리는 사용할 수 없습니다.
<tr>
<td style="color: #ffffff">
Hello, World!
</td>
</tr>CSS를 인라인 스타일로 바꿔주는 툴
이메일 템플릿이 하나라면 처음부터 인라인 방식으로 CSS를 정의하는 것도 나쁘지 않은 방법입니다. 하지만 이메일 템플릿이 여러 개가 된다면 향후 디자인 수정이 발생했을 때 템플릿마다 해당 태그를 하나하나 찾아서 스타일을 수정하는 것이 매우 번거로운 일이 될 것입니다. 그래서 저는 처음부터 CSS를 인라인 방식으로 처리하지 않고 외부 문서로 저장했습니다. 템플릿 전체 마크업이 완성된 후에 CSS를 HTML 내부에 <style>로 정의한 후, 아래 사이트에서 CSS를 인라인 스타일로 병합해 주는 작업을 했습니다. 구글에서 검색해 보면 CSS를 인라인 스타일로 변경해 주는 툴이 많이 나오기는 하는데 경험상 이 툴이 가장 쓸만했습니다.
Margin, Float 속성을 사용하지 말 것
웹메일을 마크업을 할 때는 <table> <tr> <td> 외의 다른 코드의 사용을 최소화하고, margin이나 float 값은 적용이 안 될 경우가 있으므로 사용하지 않습니다.
반응형 이메일 템플릿 코딩: Table의 구성요소와 스타일 변경하기
table의 구성 요소
| <table> | 테이블을 만드는 태그 |
| <th> | 테이블의 헤더부분을 만드는 태그 |
| <tr> | 테이블의 행을 만드는 태그 |
| <td> | 테이블의 열을 만드는 태그 |
table 태그에 넣어주어야 할 속성
일부 이메일 클라이언트는 <body>를 제거합니다. 따라서 가장 바깥쪽에서 <body> 대신 사용될 Container로 <table>를 생성합니다. 실제로 표를 만들기 위해 사용하는 태그가 아니라 그리드를 잡기 위한 것이므로, 테이블에 기본으로 적용되는 테이블의 cellpadding (셀과 데이터 사이의 간격)과 cellspacing(셀과 셀의 간격), border 값을 없애줍니다.
<table cellpadding="0" cellspacing="0" border="0"></table>
요소 간 간격(마진)을 주어야 할 때
1. <td> 태그에 padding 값을 주는 방법
아웃룩과 핫메일에서는 블록 요소에서 padding, margin을 주는 것이 지원되지 않는다고 합니다. 각 요소에 마진을 줘야 하는 상황에서는 <td> 태그에 패딩값을 주는 방법으로 간격을 줍니다. 코드는 padding: 10px 10px 5px 5px; 이런 식으로 축약하는 것보다는 padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px; 이런 식으로 하나하나 작성해 주는 것이 안전합니다.
<tr>
<td style="padding-bottom:20px;">
Hello, World!
</td>
</tr>2. <td> 태그에 height 값을 주는 방법
빈 셀을 넣어 공간을 만들어 주는 방법이 가장 안전한 방법입니다.
<tr>
<td height="20"></td>
</tr>
정렬
valign=”top”은 css 속성인 vertical align: top;과 같은 기능을 합니다. 셀 안의 공백을 최소화하기 위해서 넣어줍니다.
<!-- 좌측 정렬 -->
<tr>
<td align="left" valign="top">
Hello, World!
</td>
</tr>
<!-- 중앙 정렬 -->
<tr>
<td align="center" valign="top">
Hello, World!
</td>
</tr>
<!-- 우측 정렬 -->
<tr>
<td align="right" valign="top">
Hello, World!
</td>
</tr>
반응형 이메일 템플릿 코딩: 반응형 대응
미디어쿼리를 사용할 수 없기 때문에 모든 디바이스에 완벽하게 대응하는 반응형 코딩을 할 수 없으나, 구조를 잘 이용하면 어느 정도는 대응이 가능합니다.
구글링을 해보면 무료 반응형 이메일 마크업 파일들을 꽤 구할 수 있는데, 미디어쿼리가 작성된 파일들이 대부분이고 미디어 쿼리를 제거하고도 모바일에서 의도한대로 나오는 케이스는 많지 않았습니다. 그러던 중 메일링 서비스를 제공하는 mailto 라는 회사의 무료 파일을 다운받아 미디어쿼리를 제거한 후, 네이버 메일에서 “html 작성하기”로 네이버, 다음, 구글, 네이트, 아웃룩으로 발송 테스트를 해 본 결과 모든 플랫폼에서 깨짐 없이 잘 나오는 것을 확인할 수 있었습니다. 아래 사이트에서 파일을 다운받아 코드를 한번 분석해보세요. 어떤 방법으로 반응형을 지원하는지 파악할 수 있을 것입니다.
https://getmailto.com/free-email-templates
참고 사이트
https://webisfree.com/2015-10-02/edm-마케팅-메일-퍼블리싱할-경우-생각할-점들https://webclub.tistory.com/103
https://getmailto.com/free-email-templates
https://heropy.blog/2018/12/30/html-email-template/
