이메일은 인터넷 마케팅에서 가장 오랜 도구 중 하나지만 여전히 널리 사용되는 도구이기도 합니다. 과거의 이메일이 주로 텍스트 위주로 고객에게 정보를 전달하는 수단이었다면 최근의 이메일은 이미지와 링크를 잘 섞고 다양한 이메일 디바이스에 맞춘 최적화된 UI를 기반으로 고객과 커뮤니케이션하는 소통 수단으로 진화하고 있습니다. 그런만큼 이메일에서도 디자인과 UI의 비중이 커지고 있습니다.
그렇지만 다양한 이메일 클라이언트에 모두 대응할 수 있는 완벽한 이메일을 만든다는 건 생각만큼 쉬운 일은 아닙니다. 웹에서는 주로 IE(Internet Explorer) 브라우저에 어떻게 대응할지가 골치거리였다면, 이메일에서는 고려할 게 한 두 가지가 아닙니다. 웹표준과는 달리, 이메일에는 ‘표준’이라 할만한 게 없는데다 Outlook을 필두로 한 각종 데스크톱 이메일 프로그램들, GMail로 대표되는 각종 웹메일들, 그리고 모바일에서 사용하는 각종 모바일 메일 앱들이 모두 고려의 대상입니다. 여전히 table 태그 방식로 코딩을 해야 하고 이메일 클라이언트들마다 먹는 태그, 지원하는 CSS 속성값이 다 다르기 때문에, 이 모든 경우의 수를 고려하면서 멋진 이메일 문서를 만들어 내는 일은 실은 기술이라기 보단 예술(아니면 노동?)에 가깝습니다.
Foundation for Emails(이하 ‘F4E’)는 Foundation 프레임워크로 유명한 ZURB사에서 만든 오픈소스 반응형 이메일 생성 도구입니다. 이 도구를 이용하면 앞서 간단하게 얘기한 이메일 만들기의 까다로운 점들은 피하면서 쉽고 빠르게 멋진 반응형 HTML 이메일을 만들 수 있습니다.
F4E는 CSS 버전과 Sass 버전, 이렇게 2종의 버전을 제공하는데 F4E의 장점을 제대로 활용하기 위해서는 Sass 버전을 사용하는 게 좋습니다.
Sass 버전의 F4E는 반응형 HTML 이메일을 만드는 일종의 워크플로(workflow)입니다. Node.js 기반이며 빌드 도구로는 gulp를 사용합니다. Sass 버전의 F4E는 Node.js가 설치된 환경에서 다음과 같이 설치하면 됩니다.
$ npm install --global foundation-cli
HTML 이메일 프로젝트 시작하기
F4E 설치를 마쳤으면 이제 HTML 이메일을 만들기 위한 새 프로젝트를 하나 시작해 보겠습니다. 프로젝트를 만들 디렉터리에서 다음과 같이 명령을 주면 새 프로젝트가 생성됩니다.
$ foundation new --framework emails
프로젝트 생성이 완료되면 F4E가 자동으로 생성한 이메일 템플릿을 웹브라우저에 다음과 같이 띄웁니다.
이메일이 완성되었습니다! 이미지 없이 텍스트만 가득한 이메일이라 조금 볼품 없어 보이긴 하지만, 지금 보는 이 이메일은 대부분의 이메일 클라이언트에 잘 보이게끔 최적화된 반응형 이메일 메시지입니다. 그럼 이제 이 이메일의 소스를 조금 수정해 보기로 하겠습니다.
Inky, 이메일 템플릿 언어
프로젝트 디렉터리를 열면 src/pages 아래에 index.html 파일이 있습니다. 이 파일이 바로 지금 브라우저에 표시된 이메일의 소스코드입니다.
소스를 보면, table 태그는 온데 간데 없습니다. 하다 못해 그 흔한 div 태그 하나 보이질 않습니다. 이 코드는 Foundation for Emails에서 사용하는 Inky라는 일종의 템플릿 언어입니다. F4E에서는 이 Inky 언어로 이메일 템플릿을 작성하면 나머지 작업들, 즉 이 템플릿을 HTML 이메일로 변환하는 작업들은 F4E가 알아서 처리해 줍니다. 어떠 어떤 작업들을 거치는지는 소스코드 속 gulpfile에 자세히 나와 있습니다.
Inky는 이 글을 쓰는 현재 시점에서 다음 몇 가지 커스텀 태그만을 지원하는 아주 간단한 템플릿 언어입니다.
- Grid: <container>, <row>, <columns>
- Button: <button>
- Callout: <callout>
- Menu: <menu>, <item>
그렇지만 이 간단한 몇 가지 태그와 기존의 HTML 태그들을 결합하면 왠만한 HTML 이메일은 모두 간단하게 만들어 낼 수 있습니다. 예를 들어, 다음과 같은 이메일 메시지를 만들려면,
아래와 같은 Inky 코드를 작성하면 되는 식입니다.
<container>
<row>
<columns>
<spacer size="32"></spacer>
<center>
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9">
</center>
<spacer size="16"></spacer>`
<h4>맛있는 블루베리 즐거운 주말 여행!</h4>
<p>북아메리카 원산으로 알려져 있지만, 사실 북반구 전역에 여러 아종으로 분포하며, 이러한 아종들을 토대로 북아메리카 등지에서 품종 개량 등이 활발하게 이루어지고 있다.</p>
<center>
<menu>
<item href="#">Facebook</item>
<item href="#">Twitter</item>
<item href="#">LinkedIn</item>
</menu>
</center>
</columns>
</row>
<spacer size="16"></spacer>
</container>나머지 작업들
간단하죠? 지금처럼 Inky로 이메일 템플릿을 만들면 나머지 번거로운(?) 작업들은 F4E가 알아서 다 처리해 주기 때문에 더없이 편리합니다. 여기서 자세히 다루진 않지만, F4E 워크플로 속에는 생성한 이메일에 Inliner를 적용하는 부분과 심지어는 Litmus 서비스와 연동하여 다양한 이메일 클라이언트 환경에서 실제로 이메일을 테스트해 보는 부분까지 자동화되어 있어 더욱 편리합니다.
그럼 이제 이렇게 F4E를 사용하여 만든 이메일을 제 노트북에서 저의 GMail 계정으로 한번 발송해 보기로 하겠습니다.
$ cat dist/demo.html | mail -s "$(echo -e "Foundation Email Test\nContent-Type: text/html")" [email protected]
GMail로 확인해 보니, 제대로 도착했네요.
아이폰 메일앱에서도 잘 보이구요.
적은 노력치고는 괜찮은 결과 같습니다. 물론 “이태리 장인이 한땀 한땀 정성들여 만든” 이메일 — 직접 table 태그와 CSS 속성 등을 처리하여 수작업으로 작성한 이메일 —과는 비할 바 못되지만, 그래도 왠만한 이메일 프로젝트는 이렇게 템플릿 언어와 Inliner, 그리고 지금처럼 F4E 같은 간단한 워크플로를 적용하면 어렵지 않게 “쓸만한” 반응형 HTML 이메일로 만들 수 있는 세상입니다.
