Gmail 에서 HTML 보내기

* HTML 형태로 메일을 보내고자 함.

1) Gmail 에서 HTML 메일 보내는 방법

- 웹브라우저의 개발자 도구(단축키 F12)에서 보내는 메일에서 보내고자 하는 내용이 있는 위치를 선택해서 Edit As HTML 메뉴를 통해 HTML 코드를 넣는다.

HEAD 태그 안에 있는 Style 과 외부 Style 링크를 삭제하고, inline 안의 style(css)만 남겨놓기 때문에, 이런 형식의 HTML 으로 변환할 필요가 있다.

Google에서 "email inline css generator" 으로 Google 검색을 해 보면 이런 형식의 HTML 로 변환시켜 주는 인터넷 사이트를 다수 발견할 수 있다.

변환하고 나서 Gmail에 붙여보고, 잘 작동하는지 테스트 해 본다.

여기가 변환이 제일 잘 되는것 같다. 

http://premailer.dialect.ca/

* 변환하기 전에 링크를 http:// 혹은 https:// 로 시작하는 링크로 다 바꾸고, html 페이지가 잘 보이는지 확인해 봐야 한다.

2) Outlook 에서의 문제점

Gmail 에서는 잘 보여도, Outlook 에서는 반응형 웹 코딩이 이상하게 적용되는 것인지 Gmail 과는 다르게 보인다. (너비가 좁게 인식)

HTML 메일의 내용을 Mouse로 드래그해서 Copy 한 후, Outlook 서명 란에 Paste 해 보았는데, 가로가 좁은 모바일 환경에서는 이미지가 가로, 세로의 비율이 원본과 달리 길쪽하게 보이는 현상이 생긴다.

3) 해결책 - 

이미지 부분을 HTML 코드로 넣는 것이 아니라 캡쳐한 이미지를 사진 추가로 Mail 안에 넣었음.

HTML 코드처럼 글자 부분이 선명하지는 않지만, Gmail 과  Outlook 에서 그나마 보기가 괜찮은것 같다.

[참고] 

Responsive Email Design Training - http://foundation.zurb.com/emails/inliner.html (Responsive Email Templates도 있음.)

How to Create a HTML Email in Gmail - https://www.youtube.com/watch?v=MsMSqhMlfao

How to Code a Responsive HTML Email - https://www.youtube.com/watch?v=XnWIperMy08