[DM] HTML Email Template Markup (이메일 마크업)

다양한 이메일 클라이언트

이메일 클라이언트는 정말 다양하기 때문에 우선순위를 정해서 적용하는 것이 바람직하다. Gmail을 쓰는 유저의 경우에도 모바일 웹(크롬, 사파리, 삼성브라우저, 웨일 브라우저)에서 열어보는지, 앱(지메일, 메일앱에 지메일연동, Outlook앱에 지메일 연동)을 통해 열어보는지 바로 알 수는 없습니다. 그래서 테스트 해야할 양도 늘어나게 된다. 하지만 모든 테스트 환경을 갖추고서 확인하기는 쉽지 않기 때문에 메일링 서비스가 매우 중요하다면 아래와 같은 유료 서비스를 통해서 검증할 수도 있다.

HTML Email Check and Validation Tool | HTML Email Check

 

 

최소한의 테스트 범위

※ 데스크탑 웹/앱

	Web(기본 브라우저)	Web(크롬)	Desktop App
윈도우10	IE11	Chrome	Outlook
맥OS	Safari	Chrome	Mail

 

※ 모바일 웹/앱

	Web(기본 브라우저)	Web(크롬)	Mobile App
iOS	Safari	Chrome	네이버, 다음, 지메일
Android	Samsung Browser	Chrome	네이버, 다음, 지메일

 

 

 

디자이너와의 공유를 위한 정리

매번 이렇게 정리하는 건 아니지만 시간이 있다면 초기에 한 번 정도는 정리해서 공유한다. 주로 맥에서 작업하는 디자이너분들에겐 윈도우에서 보여지는 느낌이 다르기 때문에 실제 결과물과 디자인과의 차이를 인지시키는게 중요하다.

이메일 최소 테스트 환경 (안드로이드 스샷 미첨부 상태)

 

제일 하기 싫은 작업을 손 꼽자면 단연 이메일 템플릿 작업이라 할 수 있다. 클라이언트 환경도 무궁무진하게 많고 사용할 수 없는 CSS도 많아서 삽질의 반복이다. 예전에는 모든 걸 테이블 코딩으로 짜는게 당연했지만 테스트 해본 결과 큰 틀만 테이블로 잡고 내부는 <div>로 어느정도 해결 할 수 있었다. (하지만 아웃룩 테스트를 해보니 와장창...) 테스트 20번만에 일정 수준 이상으로 맞출 수 있었다. 

 

진행하다가 잘 해결이 되지 않는 부분이 있다면 기본에 받은 메일들을 참고한다. 나는 네이버 페이 이메일을 참고했다.

정답이라고 생각하진 말고 참고하자

 

 

개발관련 히스토리

호환성이 좋은 대부분의 환경에서는 스타일 상속이 꽤 잘되는 편이라 이렇게까지 반복적으로 적어줄 필요가 없다. 진짜 크롬만 대응한다고 깔끔하게 생각하면, 테이블로 덕지덕지 하지 않고 최소한의 큰 틀만 테이블로 잡고 내부는 다 <div>로 짜도 거의 무너지지 않는다. 하지만 윈도우 대응을 생각하면 돌다리도 두세번씩 두드려보고 건너는 마음으로 작성해야 한다.

 

셀 패딩값을 0으로 주지 않으면 td 마다 임의 여백이 발생해서 매번 <td style="padding: 0;"> 처리를 해야한다.

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>Hello World!</td>
  </tr>
</table>

 

특히 폰트 속성은 매번 적어주는 것이 안전하다. 웹폰트를 넣을 수 없으니 시스템 기본 폰트를 우선 순위에 맞추어 적어준다. 아래 코드는 대부분 Mac 최적화 폰트다. (윈도우는 사실상 뭘 써도 못생겨서 포기..) <p> 태그는 특히나 기본적으로 마진값이 발생하기 때문에, margin: 0; 을 적어줘야 한다.

<p style="margin: 0; font-family: BlinkMacSystemFont, 'Apple SD Gothic Neo', '맑은 고딕', sans-serf; font-size: 24px; font-weight: 700; line-height: 1.42; letter-spacing: -0.21px; color: #222; -webkit-text-size-adjust: 100%;"></p>

 

이미지 값도 width, height 속성에 추가로 적어준다.

<img src="" alt="" style="display: block; margin: 0 auto; width: 127px; height: 16px;" width="127" height="16">

 

 

그 외에 흥미로웠던 부분이 있었다면, 인증코드를 숫자 N자리로 하려고 했지만 그러면 사용할 수 있는 조합의 수가 많지 않아서 [0~9][a~z][A~Z] 를 사용하려고 했다.

그러나 폰트 이슈 때문에 역시나 l(소문자 엘), I(대문자 아이), 0(숫자 영), O(대문자 오)가 구분이 가질 않아서 이 4가지는 제외하고 사용하기 했다. 일반 웹이었다면 이것들이 모두 구분이 가능한 폰트를 사용하면 되지만 이메일 마크업에서는 웹폰트를 사용할 수 없기 때문이다.

 

 

---

 

후기; 한참 작업할 때는 적을 내용이 많았는데 그때 그때 정리하지 않으니까 또 많이 까먹었다ㅠㅠ 꿀팁 있으면 댓글로 알려주세요 :)