이메일 광고를 통해 자주 볼 수 있는 이메일 뉴스레터는 html 코딩으로 제작하지만, 이미지 하나를 연결하는 소위 통이미지 연결 방식의 이메일 뉴스레터도 많이 사용하고 있다. 개관에 해당하는 이번 파트에서는 이메일 뉴스레터만의 독특한 특징을 위주로 기본을 살펴본 후에, 하단 링크로 이어지는 후속 과정을 통해 실제로 이메일 뉴스레터를 제작하는 소스를 공개한다.
Contents
이메일 뉴스레터 기본
이미지는 웹 서버에 올려놓아야 한다. 그래야 이메일로 보냈을 때 다른 사람에게 이미지가 보인다. 대량의 이메일 뉴스레터를 보내는 경우가 아니라면, 무료로 이미지를 저장할 수 있는 많은 사이트가 있으므로 그 곳을 서버로 활용할 수 있다.
이미지를 담은 서버를 연결한 주소가 http로 시작한다면 모바일에서만 이미지가 보인다. 컴퓨터로 이메일 뉴스레터를 열면 이미지가 보이지 않으므로, 반드시 https를 지원하는 서버를 사용해야 한다.
가급적 스타일을 주는 CSS는 최소화하고 불가피한 경우에는 인라인스타일을 방식을 적용한다.
table 태그로 제작하는데, 이 부분이 HTML로 이메일 뉴스레터를 제작하는 코딩의 핵심이다. 이와 관련해서는 하단의 링크로 연결한 컨텐츠에 담겨 있다. 또한 Margin, Float 속성을 사용하지 말아야 한다. 많은 경우 colspan, rowspan 속성 지원이 되질 않는다. 따라서 웹메일을 마크업을 할 때는 table, tr, td 태그 외의 다른 태그의 사용을 최소화하고, margin이나 float 값은 적용이 안 될 경우가 있으므로 사용하지 않는다.
색상은 #ffffff처럼 작성하는 Hexadecimal Colors를 사용한다. 이때 #fff와 같은 축약형은 사용할 수 없다.
이미지 사용과 관련해서
HTML 이메일 이미지
<img src="http://via.placeholder.com/200x100"
alt="Some image" width="200" height="100" />
절대경로를 사용하고 용량은 250kb 미만으로 유지한다.
가로/세로 너비(width, height)를 입력하고/ 대체 텍스트(alt)를 입력한다.
고정 이미지 삽입
많은 경우 table 태그는 반응형 레이아웃에 적합하지 않기 때문에 고정된 레이아웃을 유지하여 작성하는데, 일부 이메일 클라이언트에서는 지정한 너비와 상관없이 디바이스 너비로 표시되도록 수정되는 경우가 있다. 이럴 때는 지정한 너비와 같은 너비의 이미지를 삽입하여 문제를 해결할 수 있다. 단순히 지정한 테이블의 너비를 유지할 용도로 사용하는 것이기 때문에 화면에 표시되지 않도록 다음과 같이 설정한다.
<td style="font-size: 0; line-height: 0; height: 0" >
<img src="http://via.placeholder.com/600x1" alt="asmple"
width="600" height="0" style="display:block" /> < /td>
Margin과 관련하여
요소 간 간격(마진)을 주어야 할 때
1)margin은 사용할 수 없다. 대신 padding과 셀의 너비로 여백을 생성할 수 있다.
td 태그에 padding 값을 주는 방법 < td style="padding: 0 0 30px 0" > </td>
2) 내부 여백이 아닌 외부 여백을 활용할 경우는 여백 위치(여백으로 사용할)에 빈 셀을 추가한다. 빈 셀은 공백 문자( )를 가지고 있다.
td 태그에 height 값을 주는 방법으로 빈 셀을 넣어 공간을 만들어 주는 방법이 가장 안전한 방법이다.
!-- 가로 마진 HORIZONTAL MARGIN 30px --
< td width="30" style="font-size: 0; line-height: 0;" > < /td >
!-- 세로 마진 VERTICAL MARGIN 30px --
< tr > < td height="30" style="font-size: 0; line-height: 0;" > < /td > < /tr >
정렬
valign="top"은 css 속성인 vertical align: top;과 같은 효과를 준다. 셀 안의 공백을 최소화하기 위해서 넣어준다.
!-- 중앙 정렬 --
< tr > < td align="center" valign="top" > Hello < /td > < /tr >
테이블 속성
< table border="0" cellpadding="0" cellspacing="0" width="100%" >
< /table >
Text
font, b, i, u 같은 스타일을 내포하는 태그와 같이 사용하면 더 안전하다. 스타일과 font 태그를 함께 쓰는 것은 링크의 기본색인 파란색이 절대로 나타나지 않게 하기 위한 최선의 방법이다.
<td>
<a href="https://google.com" style="color: #ff0000">
<font color="#ff0000"> GOOGLE </font>
</a> </td>
p, h1, h2… 같은 단락, 제목 태그는 사용하면 안 된다. 이는 이메일 클라이언트 전체에서 스타일 일관성이 없이 렌더링 되며 수정하기 매우 까다롭다. 대부분의 경우 td 태그로 작성하면 된다.
텍스트 꾸미기 추가
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px">
<b> Lorem ipsum dolor sit amet! </b> </td>
뉴스레터에 대해 더 알아볼 내용
