HTML로 이메일 템플릿 제작하기

제가 활동하고 있는 문예 단체에서 문예지를 구독하는 독자들이 작품을 이메일에서 받은 즉시 볼 수 있도록 이메일 HTML 템플릿을 만들어 달라는 부탁을 받았습니다. 처음엔 단순한 퍼블리싱 작업인 줄 알았지만 생각 이상으로 장애가 많아서 혹시 저처럼 퍼블리싱을 통해 이메일 템플릿을 제작하고 싶은 개발자, 디자이너가 있다면 참고하실 수 있도록 글을 작성해보기로 했습니다.

 

 

염두에 두어야 하는 제한사항들

사실 조심성이 많은 사람이라면 이메일로 어느 정도의 컨텐츠를 보낼 수 있는지 궁금해하고 인터넷을 뒤져볼 것입니다. 그러나 정보들이 산발적으로 흩어져 있어서 이곳에서 어떤 것을 이메일 컨텍스트 내에서 구현할 수 없는지, 어떤 제한 사항이 있는지를 정리해보겠습니다.

 

자바스크립트 탑재 불가

일반적인 html 에는 <script> 태그 안에 자바스크립트를 넣을 수 있습니다. 그러나 이메일로 보낼 html 내부에는 그러한 자바스크립트를 넣을 수 없습니다. 이유는 스크립트가 이용자의 브라우저를 악의적으로 조작하는 위험을 방지하기 위해서인 것으로 보입니다.

 

iframe, form 태그 사용불가

엄밀히 말해서 사용은 할 수 있지만 동작이 제대로 되지 않습니다. form 태그는 post 요청을 보내는 등의 주요 기능이 비활성화 되고 iframe 은 그냥 빈 깡통이 되어버립니다. 그래서 자바스크립트가 동작하지 않는 문제를 두 태그를 이용해서 우회해보려고 해도 무용지물입니다.

 

이메일 리더기마다 허용되는 CSS 속성이 모두 다름

 

CSS Support Guide for Email Clients

CSS Support Guide for Email Clients

 

위의 웹사이트에서 이메일 리더기 마다 어떤 CSS 속성을 쓸수 있고, 쓸수 없는지를 체크해볼 수 있습니다. 하지만 모든 사항들을 다 염두에 두는 것은 아무래도 무리가 있죠. 제가 생각하기에 중요한 부분들만 추려서 설명드리도록 하겠습니다.

 

• 지메일 이메일 리더기 : 웹폰트(OS 내장 폰트만 가능), Flexbox, CSS Grid, transform, position 모두 제한됨
• 삼성 이메일 리더기 : line-height 와 font-size 제한됨
• 아이폰, 아이패드, 맥 이메일 리더기 : 거의 모든 CSS 속성을 지원
• 네이버 이메일 리더기 : media query 미지원, 태그에 inline 으로 넣은 CSS 속성만이 반영됨

 

 

가장 효율적이고 이상적인 제작 과정

 

1. 요소의 배치에는 오직 margin 과 padding 만을 사용하여(최대한 padding 을 활용하기를 권장) 1차적인 퍼블리싱을 완료한다.
2. 복잡한 그래픽은 최대한 이미지를 활용한다. 미디어 쿼리를 지원하지 않는 리더기 위해 이미지를 가능한 가운데 정렬하고 크기를 100% 보다는 줄이도록 한다.
3. 퍼블리싱을 완료했다면 메일 침프의 스타일 태그의 내용을 태그 안에 인라인으로 넣은 html 을 변환해주는 프로그램을 활용한다. (https://templates.mailchimp.com/resources/inline-css/)
4. 이제 테스트 메일을 보내어 확인 후 수정해야 할 사항을 확인한다. 보낼 때는 편의성을 위해 메일 침프, 스티비와 같은 이메일 전송 대행 서비스를 활용해주면 편하다. 직접 node.js 등을 활용해서 메일건을 통해 전송할 수도 있다.