회사에 email html template 을 작성해야될일이 있었다.
딱히 제약이 있는줄 모르고 무작정 html css 로 작업했었는데
작업하고나니 제한이 좀 많다는걸 알게 되었고
유의사항들을 알아본다음 다 갈아엎은뒤 작업한내용을 기록해본다.
only html file
서버에 file 을 보낼때 html 로만 전달하기때문에 html file 에 다담아 작성해야된다. (font, css)
가변값처리(data, img url, font url)
이메일을 보낼때 가변값처리를 해야될때가있다.
img 나 font 같은건 html file 에 못담아서 외부 값이 필요할때나
구매정보 data 같은걸 담아야될떄가 있는데
Amazon Simple Email Service 의 template 을 사용해 구현하게되서
html 작업할때 key-mapping 할 값들을 {{name}} 형식으로 작성했었다.
참고사이트(Amazon Simple Email Service) : https://docs.aws.amazon.com/ko_kr/ses/latest/dg/send-personalized-email-api.html
font 지원
처음 head css 에 font-face 로 폰트처리를 해봤는데 gmail 에서 폰트적용이 안되는 이슈가 생겨서 알아봤는데
기본적으로 gmail 에서는 외부폰트를 지원을 안한다는 글을 봤다.
또 @font-face, @import 들을 지원을 안해서 외부폰트가 적용이 안된다
그래서 백업폰트를 지정해주거나, 기본폰트로 해야된다
ex)
font-family: Pretendard, 'Arial';html, css
기본적인 html tag 나 css 속성을 사용할때도 제약이 많다
권장하는건 이메일 플랫폼들이 다 지원하는 tag, style 을 사용하는거다
check site(canimail) : https://www.caniemail.com/
html tag 는 div 보단 table, tr, td 로 하는게 좋다.
display, margin 보단 padding 을 사용해 layout 구성해야된다.
스타일은 각 태그 내 인라인 스타일로 정의해야좋고
스타일은 단축 속성이 아닌 개별 속성을 사용해야좋다.
padding: 0 10px 15px 10px //x
padding-top: 0px; padding-right: 10px; padding-bottom: 15px; padding-left: 10px; //o
<img> 태그는 width, height, alt 필수다.
<p> <h1> 과 같은 단락, 제목 태그의 사용지양한다.
<table> 태그는 초기화해서 사용하는거 권장한다 (border="0" cellpadding="0" cellspacing="0" width="100%")
html file 에 live server 크기랑 이메일화면 크기가 좀 다르다. 그래서 반응형 단위를 쓸때 주의해야된다. (%, vw)
W3C Validator 에 검사하면 좋다.
W3C Validator : https://www.w3.org/developers/tools/
이렇게 html tag 나 css 속성에 제약사항이 많아서 기존 layout 구성할때보다 많이불편했다.
세로정렬을 해야될때는 display 속성을못써서 td 안에 ul 을 써서하는식으로 처리해야됬고
요소간의 여백을 줘야될때 바로 margin 으로주는게 아니라 상위요소에 padding 을 줘서해야되는등 많이 번거러웠다.
요약
폰트는 외부폰트 호환성이 안좋아서 백업폰트를 지정하거나 기본폰트 사용
layout은 table, tr, td 들로 권장
여백처리는 margin 말고 padding 사용
inline style 사용권장
단축 속성보단 개별속성사용 권장
기타
tech 가 잘정리된 글 : https://heropy.blog/2018/12/30/html-email-template/
