이메일 뉴스레터는 HTML를 사용하여 코딩하는 방식과 보여질 뉴스레터 전부를 하나의 이미지로 만든 후에 연결하는 방식, 즉, 2가지가 있다. 이미지를 연결하는 방식이 조금 더 쉽지만, HTML으로 코딩하는 방식도 그리 어렵지는 않다. 이메일 뉴스레터에 대한 기본적인 사항은 하단 링크에 있으니, 그걸 먼저 보고 이번 파트를 보는게 수월하다.
Contents
HTML 이메일 템플릿 처음부터 제작하기
우선 html 코딩으로 이메일 뉴스레터를 만들 때, 예전 방식의 코딩을 사용하고 있다고 생각하면 이해하기가 수월하다. 지금은 table 태그로 웹페이지의 레이아웃을 설계하지 않지만, 과거에는 table 태그로 전체 레이아웃 구조를 설계했다.
즉, 여전히 과거 방식의 코딩으로 접근해야 한다는 것이다. 이건 브라우저와 css의 진화에 따라 table이 아니라 position, float로 레이아웃을 설계하던 시기를 지나 이제는 f lex로 모든 게 가능해진 오늘날의 편해진 레이아웃 설계에 비해 후진적 방식임은 사실이다.
하지만 여전히 수많은 이메일 플랫폼에서 제대로 구현되는 레이아웃은 table 태그 밖에 없기 때문에, 아직은 table 태그로 전체적인 레이아웃을 설계할 수 밖에 없다. 바로, 진화 이전의 과거 코딩 접근 방식 그리고 table 태그로 레이아웃을 설계한다는 점을 인지하고 접근하면 낯설지 않을 것이다.
XHTML doctype을 사용해 HTML 이메일 코드를 작성
아래는 XHTML 1.0 기본 문서 구조로, 과거에 사용하던 일명 독타입(!DOCTYPE)이다. 위에서 언급했듯이 이메일 뉴스레터의 코딩은 과거 전통적인 방식을 따라야 한다. 아래 코드에서 바뀌는 부분은 body 태그에 들어갈 부분이므로, 나머지 전체 코드는 외울 필요 없이 그냥 가져다 사용하면 된다.
<!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>
<body>
</body>
</html>
* 하위호환성을 위해 예전 XHTML1.0 양식 사용Body와 Main 테이블 작성
html 코딩으로 이메일 뉴스레터를 작성할 때, 위의 독타입이 들어간 전체 소스는 그냥 카피해서 사용하고, 그 안의 body 태그 부분만 작성하면 된다. * 일부 이메일 클라이언트는 <body>를 제거한다. 따라서 가장 바깥쪽에서 <body> 대신 사용될 Container로 <table>를 생성한다.
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr> <td>
<!-- 600px - 800px CONTENTS CONTAINER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr> <td> Hello! </td> </tr>
</table> </td> </tr>
</table>
</body>- 껍데기 TABLE 안에 하나의 행을 만들고 그 안에 진짜 TABLE를 만든다. 껍데기 테이블은 100% 크기를 유지하는 반응형 역할을 진짜테이블이 실제 크기인 600PX(최재800PX까지)를 지니게 한 후에 진짜 테이블 안에 작성한다.
- TD를 하나의 단락(DIV)이라고 생각하고 여기에 콘텐츠를 추가할 때 TABLE를 통째로 넣는 방식을 사용한다. 이러한 방식은 모든 곳에서 적용되므로 껍데기 TABLE 안에 진짜 TABLE이 있고, 이 진짜 TABLE 안에 다수의 TABLE이 TD 태그 안에 들어가 있는 구조로 이루어진다. 그래서 조금 복잡해 보일 수 있다. TD 안에 TABLE이 통째로 들어간다는 것만 유의하면 구조를 쉽게 파악할 수 있다.
<TABLE><TR><TD>ROW1</TD></TR></TABLE>구조 단순 예시
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr> <td> // TABLE(3개의 단락 DIV를 가짐)
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr> <td>
// 첫 번째 단락(헤드 영역)
<TABLE><TR><TD>
헤드 내용
</TD></TR></TABLE>
</td> </tr>
<tr> <td>
// 두 번째 단락(본문 영역)
<TABLE><TR><TD>
<tr> <td>
// 두 번째 단락 안의 (1번 콘텐츠 영역)
<TABLE><TR><TD>
1번 콘텐츠내용
</TD></TR></TABLE>
</td> </tr>
<tr> <td>
// 두 번째 단락 안의 (2번 콘텐츠 영역)
<TABLE><TR><TD>
2번 콘텐츠내용
</TD></TR></TABLE>
</td> </tr>
<tr> <td>
// 두 번째 단락 안의 (3번 콘텐츠 영역)
<TABLE><TR><TD>
3번 콘텐츠내용
</TD></TR></TABLE>
</td> </tr>
</TD></TR></TABLE>
</td> </tr>
<tr> <td>
// 3번째 단락(푸터 영역)
<TABLE><TR><TD>
푸터 내용
</TD></TR></TABLE>
</td> </tr>
</table>
</td> </tr>
</table>Html 이메일 뉴스레터 실례
아래는 이메일 뉴스레터 형식에 대입해 만든 코드이다. 책상 위에 이달의 신기술이라는 잡지가 있어, 이달의 신기술 뉴스레터 형식으로 로엠 텍스트와 무료 이미지를 활용했다.
html으로 코딩한 이메일 뉴스레터 예시로 코드는 아래와 같다. 현재 코드를 사용하면 이미지를 담은 서버의 주소가 https가 아니라 http로 시작하고 있어, 이미지가 제대로 보이지 않는 플랫폼도 발생한다. 이전 파트인 이메일 뉴스레터 기본에서 언급했듯이 이미지는 https가 가능한 서버에 올려놔야만 모든 플랫폼에서 구현된다. 다음 파트에서는 동일한 이미지를 만들어 서버에 저장한 후에 이미지매핑을 활용한 이미지 뉴스레터 방식을 다룬다.
<!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>CAT NEWLETTER</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin:0; padding:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border:1px solid #cccccc; margin:10px auto 0;">
<tr>
<td align="center" background="http://sphinx.dothome.co.kr/GASP/img/grooming.png" width="600" height="230"
style="padding:40px 0 30px 0; background-size:contain; background-repeat:no-repeat; background-position:center center;">
<!-- <img src="img/cat-bg.jpg" alt="big cat pating" width="600" height="230"
display="block"/> -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#fefefe; font-family: Arial, sans-serif; font-size: 32px; line-height:150px;">
<b style="background-color: #153643;">이달의 신기술 5월호</b>
</td>
</tr>
<tr>
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height:20px;">
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>
<tr>
<td bgcolor="#ffffff" style="padding:20px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:20px 0 30px 0; color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
<b>Lorem ipsum dolor sit amet!</b>
</td>
</tr>
<tr>
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;">
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>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="http://sphinx.dothome.co.kr/GASP/img/cat-hobak.png" 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">
</td>
<td width="260" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="http://sphinx.dothome.co.kr/GASP/img/halloween.png" 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>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="75%" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
® Someone, somewhere 2013<br/>
<a href="#" style="color: #ffffff;">Unsubscribe </a>to this newsletter instantl
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="https://magazine.hankyung.com/" target="_blank" >
<img src="http://sphinx.dothome.co.kr/GASP/img/book.png" alt="한국경제" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="https://blog.naver.com/keit_newtech/" target="_blank" >
<img src="http://sphinx.dothome.co.kr/GASP/img/postit.png" alt="이달의신기술" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</body>
</html>
