통이미지는 그만. HTML로 뉴스레터 만들기

5 min readApr 5, 2016

“HTML로 뉴스레터 만들기” 미리 4줄 요약
1. 좋은 템플릿을 구한다.
2. 내용을 채워 넣는다.
3. css inline!
4. 코드 정리

기업이나 단체에서 받은 홍보용 이메일을 뒤져봅시다. 대게는 이미지 하나에 모든 내용을 잡지처럼 예쁘게 편집해 넣은 형태일겁니다. 이러면 보내는 사람도 (포토샵을 잘 다룬다면) 편하고 받는 사람도 뭐 그럭저럭 나쁘지 않습니다. 하지만 모바일에서 열어본다면? 예쁘게 편집된 이미지. 그 안에 글씨는 모니터:스마트폰 비율만큼 작아져 보기 힘들 것입니다. 엄지와 검지로 늘렸다 줄였다 하면서 봐야 합니다.

뉴스레터에 좀 신경쓰는 곳들은 메일침프나 스티비같은 이메일 전용 도구를 사용해 HTML로 만들어진 이메일을 보냅니다. 그런데 어떤 때는 이 것이 여의치 않고 귀찮고, 과할 경우도 있습니다. 10여명에게 보낼 메일인데 리스트를 만들고, 알림 메시지 설정하고, 캠페인이라는 것을 생성하고…

그래서 그냥 HTML로 바로 만들어 빠르게 보내는 방법을 함께 알아보고자 합니다. 앞서 말씀드린 4줄 요약처럼 4단계면 충분합니다. 마지만 코드 정리는 하면 좋고 안해도 됩니다. 뉴스레터 만들기 3단계로 끝내봅니다.

좋은 템플릿을 구한다.

템플릿은 참 고마운 도구입니다. 누군가 참 쓰기 쉽게 만들어 놓은 틀로서 우리는 거기에 내용만 채워 넣으면 됩니다. 좋은 이메일 템플릿을 구하는 방법은 어렵지 않습니다. 구글(네이버 아님) 검색창에 “email template”라고 검색합니다. 조금 더 나아가 모바일 최적화가 된 이메일 템플릿을 구한다면 “responsive email template”이라고 해봅니다. 검색 결과가 나왔습니다.

맨 위의 zurb로 들어갑니다. Available Templates이라고 해서 다운로드 가능한 템플릿이 나열되어 있고 그 중에 마음에 드는, 아니 준비된 콘텐츠에 어울리는 형태를 골라 다운로드 받습니다.

내용을 채워 넣는다

받은 압축파일을 해제하고 뭐뭐뭐.html파일을 엽니다. 펼쳐지는 코드에 머리가 아파오지만 우리는 이 코드를 직접 작성하는 것이 아니고, 편집만 할겁니다. 다시 그 뭐뭐뭐.html파일을 크롬브라우저에서 열고 F12를 누릅니다.

뭐뭐뭐.html을 개발자 도구를 통해 보면 앞서 봤던 머리아픈 코드가 마치 뼈대처럼 훤히 드러납니다. 여기서 고치고 싶은 부분을 골라 (1)‘마우스 우클릭 → 검사’를 눌러 찾아 내고, (2)소스코드에서 찾아 텍스트를 수정합니다. HTML코드에 익숙하지 않다면 쉽지 않을 수 있습니다. 계속적으로 소스 위치를 찾아서 수정하고 확인해 보는 방법밖에는 없습니다.

css inline

겨우겨우 소스를 수정하여 그럴 듯한 뉴스레터를 만들었습니다. 그런데 이거 뭘 어떻게 보내나요? 그냥 저 코드 복사해서 보내면 되나요? 할겁니다. 그런데 그냥 보내면 안됩니다. 왜냐하면 HTML말고 CSS라는 녀석이 아직 밖에 있기 때문입니다.
밖에 있다니요? 안은 어디고 밖은 어디인가요? 여기서 밖이라고 한 것은 우리가 편집했던 뭐뭐뭐.html파일의 안과 밖입니다. 지금 CSS파일은 다른 파일로 HTML파일 밖에 있고, 서로 링크되어 있습니다. 이걸 HTML 파일 안으로 가져와야 합니다.

메일의 <head>에 <style></style>을 추가하고 밖에 있는 .css파일 내용을 모두 복사해 붙여 넣습니다. 붙여 넣었으면 크롬에서 한 번 더 확인합니다. 잘 나오나요?

그리고 css inline이라는 작업을 할겁니다. 간단히 말해 class이름을 통해 연결된 형태(색상, 크기)를 모든 태그에 style=””라고 넣는 작업입니다. 모든 태그에 넣어줘야 하기때문에 매우 고된 작업입니다. 하지만 메일침프의 CSS inliner tool을 사용하면 손쉽게 해결됩니다.