반응형 이메일 만들기는 매우 고통스러운 일이고 결코 쉽지 않다.
최근에 업무로 들어온 일 중 하나가 반응형 이메일 템플릿을 만드는 것이었다.
사실 이메일 코딩한다고 하여서 처음 든 생각은
“아 그래 뭐 이메일 코딩 그까짓거 css를 inline으로 쓰고
table td 형식으로 짜면 되는 것 아니야? 간단하네?”라고 생각했었다.
그리고 잘 알아보지 않고 Zurb에서 만든 이메일 템플릿을 몇 번 테스트 해보고 이메일도 반응형으로 쉽게 만들 수 있다고 결론을 내려 말을 한 것이 화근이었다.
나는 지금 모든 Html과 CSS를 모두 다 알지 못한다. 모두 다 사용하지도 못한다.
하지만 내가 원하는 정도의 코딩을 하는 데에 있어 어려움을 겪지는 않는다. 그래서 조금 안일하게 생각했었다.
근 2주일간 죽을 쓰면서 연구해본 결과 결론부터 말하자면 이메일 코딩은 어렵고 굉장히 비효율적이다.
도대체 왜 이메일 코딩이 왜 어렵다는 것일까?
표준이 정해지지 않아서 기기, OS 버전 등등에 따라서 전부 보여지는 것이 다르다
다른 건 전부 제쳐두고 일단 이게 가장 큰 이유다.
툴을 쓰지 않고서는 모든 클라이언트에게 완벽하게 대응하기란 불가능에 가깝다.
이메일이 어떻게 보여줄 것이냐는 무슨 정해진 표준이 없다. 따라서 내가 만든 이메일이 어디에서 어떻게 보일지는 장담할 수 없다.
예시로 아래는 MailChimp에서 제공하는 css 지원 여부이다. 같은 css 문법이라도 지원하는 게 저렇게 다르다!
저것 뿐만이 아니라 Apple mail, Gmail, IOS용 Gmail 앱, 안드로이드용 Gmail 앱부터 시작해서,
크롬에서 gmail을 들어갔을 때, safari에서 들어갔을 때, 삼성 인터넷으로 들어갔을 때 등등, 다 조금씩 다르게 보인다.
심지어 프로젝트가 거의 끝나갈 때 쯤 클라이언트가 네이버나, 다음, 네이트온에서도 고려를 해달라고 했다. 이 뭐 x
아무튼 고려해야 할 것이 저렇게 많기 때문에 litmus라는 사이트에서는 아래와 같이 미리보기를 지원해준다.
무료일까? 절대 아니다. 최저 한달에 약 11만원 정도나 하며 저렇게 Preview를 볼 수 있는 개수도 정해져 있다.
일주일 Free trial 기간을 사용해보았는데 상당히 편리하긴 한 툴이다. free trial 기간에는 200개의 Preview를 주는데 몇 번 테스트해보면 금방 사라진다.
코딩을 한다면 그래도 그나마 괜찮은게 Zurb 프레임워크다.
Zurb foundation for Email 에서는 scss 버전과 일반 css 버전으로 만들 수도 있고 Inky라는 이메일용 문법을 사용해 만들 수도 있다.
npm run build로 코딩된 html 파일이 컴파일 되어 나온다.
하지만 주 타겟인 Gmail에서 원하는대로 미디어 쿼리를 먹지 않아 결국 사용하지 않기로 했다.
Gmail은 파일 크기가 일정 이상이 되면 제대로 보이지 않는다.
Gmail은 파일 크기에 굉장히 민감한 듯하다.
체감 상 100kb를 넘게 되면 이제 원하는 대로 거의 보이지 않는다고 생각하면 된다.
미디어 쿼리를 Gmail에서 자꾸 무시하는 듯한 생각이 들거나
갑자기 이메일에 자신의 코드가 그대로 보이는 오류가 발생한다면 자신의 파일 크기를 체크해보자.
이 사이트에서는 email 압축을 제공한다.
내가 찾은 대안 BEE pro
내가 찾은 대안은 결국 Bee Pro이다.
BEE pro는 이메일 에디팅 툴이다. 돌고 돌아서 결국 이메일 에디팅 툴을 이용해서 만드는 것으로 돌아왔다.
매우 직관적으로 잘 만든 에디터로 코딩하느라 영혼까지 털털 털린 나에게 있어서 참 구세주 같은 존재이다.
Litmus는 너무 비싸서 사용하기가 꺼려지지만 Bee pro는 어느 정도 회사에 제안할 수 있는 합리적인 가격을 제공했다.
template message에서 바로 테스트용 이메일을 만드는 것도 그렇고 다 만들고 난 후
html로 소스를 뽑고 그 것을 수정하면 되기 때문에 참 편해졌다.
아무튼 Email을 코딩한다는 것은 참 어려운 일이다.
MailChimp나 Litmus 등 이메일 용 솔루션을 제공하는 주요 회사들이 가격을 높게 책정하는 것도 그 이유가 있다.
그리고 이런 툴들이 잘 만들어져 있기 때문에 사실 날코딩을 직접 하는 것은 정말 비효율적이라는 생각이 든다.