-
[HTML] 이메일 템플릿 구축하기HTML 2023. 12. 27. 14:42
HTML, CSS를 작성할 때는 표준을 준수해야 한다. 표준은 일종의 작성 가이드 역할을 하는데 이메일에는 표준이 없다.
웹메일 제공 서비스인 구글, 네이버, 다음, 네이트 등은 보안상의 이유로 지극히 낮은 웹/앱 호환성을 갖고 있다.이런 수수많은 클라이언트의 랜더링 화면 또한 상이하기때문에 각각의 랜더링 가능성을 고려해야 하며, 제공하는 이메일(서비스)의 성격에 따라 고려해야 하는 클라이언트가 늘어나거나 줄어들 수 있다.
따라서,일반적인 표준 HTML과 CSS의 작성 방식으로는 메일 템플릿을 소화하기 어려워진다.
구축 전 유의사항
1. 마크업(Markup)
- 몇몇의 이메일 클라이언트는 div 태그나 margin 속성 같이 표준 코딩에서 자주 사용하는 개념을 미지원하기때문에 정상적인 이메일 구조를 제공하기 위하여 하위 호환성을 고려하는 것이 좋다.
- 특히 table 구조로 마크업을 하는 것이 좋다. table구조의 마크업 시에는 스타일을 초기화 한 후 사용한다.
- 가장 가볍고 안전한 방법으로는 <table>, <tr>, <td> 태그만 사용하는 것이 좋다.
- p, h1 과 같은 단락, 제목 및 colspan, rowspan 속성 또한 사용하지 않는 것이 좋다. 셀 병합이 필요할 땐, 테이블을 중첩하여 사용한다.
2. 스타일(Style)
[공통]
- 스타일은 각 태그 내 인라인 스타일을 추천한다.
- 속성 값은 단축이나 다중으로 작성하지 않고 단일 값으로 작성한다.
- margin값은 사용할 수 없고, padding값으로 작성해야하는데 top, bottom, left, right 값을 모두 작성 해야 한다.
- 테이블 구조는 중첩되어 사용되는 경우가 많아 수정이 까다롭기 때문에 레이아웃이 확정된 이후에 스타일을 정의하는 것이 좋다.
- width, height, align, vertical-align, background-color 등의 속성은 스타일 보다 HTML 테이블 속성으로 사용하는 것이 안전하다.
- 만약 NPM을 사용할 수 있는 환경이라면 <link>로 연결된 CSS 파일이나 <style>로 더 쉽게 작성하고, inline-email 같은 라이브러리를 통해 추후 간단하게 인라인 방식으로 병합이 가능하다.
[사이즈]
- 메일 컨텐츠의 가로 너비는 600px ~ 800px 사이에서 사용하는 것이 좋다. 600px이 가장 안전한 최대 너비로, 다양한 해상도 이메일 클라이언트에 최적화 되어 있다.
[여백]
- margin 값 또한 미지원되는 경우가 있기때문에 여백 값을 줘야 할 땐 td에 padding을 추가하거나, height 값으로 빈 셀을 넣어 공간을 생성하는 것이 좋다.
- 빈 셀의 경우, 영역 내에 공백 코드  를 넣어주는 것이 좋다.
[색상]
- 'RGB, RGBA, HSV'는일부 이메일 클라이언트에서 지원하지 않는다.
- #ffffff처럼 작성하는 'Hexadecimal Colors'를 사용(#fff 같은 축약형은 사용하지 않는 것이 좋다.)
[폰트]
- 클라이언트마다 기본으로 선언되는 폰트는 모두 다르기 때문에 font-family와 line-height 속성은 필수 선언해 주는 것이 좋으며, 부모 속성을 상속받지 못할 땐 각 태그마다 선언한다.
- 스타일이 들어가는 텍스트는 <font>, <b>, <i> 등과 같은 스타일을 내포하는 태그와 함게 사용할 때 더 안전하다.
3. 이미지(Imaga)
- 이미지 랜더링 시 생기는 여백을 제거하기 위해선 display:block을 추가한다.
- 이미지의 경로는 절대 경로 사
- width, height, alt 값은 필수 입력
- GIF의 용량은 250kb 미만으로 유지하는 것이 좋다.
- 정확한 정보는 못 찾았지만 svg 파일은 불안정할 수 있어 사용하지 않는 것이 좋다.
모바일 이메일 클라이언트
- Android 2.3 및 4.0
- iPhone 5 iOS 6
- iPhone 4S iOS 6
- iPhone 3GS iOS 5
- iPad 2 iOS 6
- BlackBerry OS 4 & 5
- Symbian S60
- Windows Phone 7.5
데스크톱 이메일 클라이언트
- Apple Mail 4, 5, 6
- Lotus Notes 8.5
- Lotus Notes 8
- Thunderbird
- Windows Live Mail
- Outlook 2013 (v15)
- Mac 용 Outlook 2011
- Outlook 2010 (v14)
- Outlook 2007 (v12)
- Outlook 2003 (v11)
- Outlook 2002 / XP (v10)
- Outlook 2000 (v9)
웹 메일 클라이언트
- AOL Mail (on any browser)
- Gmail (on any browser)
- Outlook.com (on any browser)
- Yahoo! (on any browser)
이메일 템플릿 구축하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Email</title><meta name="viewport" content="width=device-width, initial-scale=1.0" /></head>
<body style="margin: 0; padding: 0; background-color: #ffffff;"><div style="font-family:'맑은 고딕';"><table border="0" cellpadding="0" cellspacing="0" width="640px" style="margin:0 auto 0 auto; background-color: #ffffff;" bgColor="#ffffff"><tr><td style="width:100%; height:80px" width="100%"> </td></tr><tr></tr><tr><td style="width:100%; height:48px" width="100%"> </td></tr><tr><td><font color="#000000" style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:32px; font-weight: 700; letter-spacing: -1px;">안내사항</font></td></tr><tr><td style="width:100%; height:41px" width="100%"> </td></tr><tr><td><font color="#000000" style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:16px; font-weight: 400; letter-spacing: -1px; line-height: 24px;">안녕하세요 <font color="#000000" style="font-family:'Arial'; font-size:16px; font-weight: 400; letter-spacing: -1px; line-height: 24px;">test</font> 입니다.<br>요청하신 <b style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:16px; font-weight: 700; letter-spacing: -1px;">인증코드</b>는 다음과 같습니다.</font></td></tr><tr><td style="width:100%; height:32px" width="100%"> </td></tr><tr><td><table border="0" cellpadding="0" cellspacing="0" width="640px" style="margin:0 auto 0 auto; background-color: #ffffff; border-top:2px solid #000000; border-bottom:1px solid #E5E5E5;" bgColor="#ffffff;"><tr><th style="width:140px; padding:10px 20px 10px 20px; background-color: #F7F7F7; text-align: left; height: 44px"><font color="#000000" style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:16px; font-weight: 700; letter-spacing: -1px;">test</font></th><td style="width:436px; height: 44px; padding:10px 32px 10px 32px;" width="100%;"><font color="#000000" style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:16px; font-weight: 400; letter-spacing: -1px;">test</font></td></tr></table></td></tr><tr><td style="width:100%; height:32px" width="100%"> </td></tr><tr><td><font color="#000000" style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:16px; font-weight: 400; letter-spacing: -1px; line-height: 24px;">이 인증코드는 유효합니다.</font></td></tr><tr><td style="width:100%; height:72px" width="100%"> </td></tr><tr><td style="background-color: #F7F7F7; padding:24px 24px 24px 24px; width:100%;"><font color="#666666" style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:14px; font-weight: 400; line-height: 21px; letter-spacing: -1px;">본 메일은 발신전용 메일로 회신 되지 않습니다.<br>문의사항은 <b style="font-family:'Noto Sans KR', '맑은 고딕'; font-size:14px; font-weight: 700; color:#000000;"><font color="#000000" style="font-family:'Arial'; font-size:14px; font-weight: 700; letter-spacing: -1px; line-height: 21px;">test</font> 고객센터를</b> 이용하시기 바랍니다.</font></td></tr><tr><td style="width:100%; height:104px" width="100%"> </td></tr></table></div></body></html>
