이메일도 반응형 디자인이 가능할까요?
HTML 이메일이 까다로운 이유
이메일 뉴스레터에도 반응형 디자인을 적용할 수 있을까요? 가능하지만, 웹페이지를 만드는 것과는 전혀 다른 접근이 필요합니다. 이메일 클라이언트마다 HTML과 CSS를 해석하는 방식이 달라, 웹 표준을 그대로 적용하기 어렵기 때문입니다. 이 글에서는 HTML 이메일이 왜 필요한지, 이메일 코딩이 왜 웹과 다른지, 그리고 반응형 이메일을 만들 때 참고할 수 있는 방법을 정리합니다.
웹 기술과 HTML 코드에 익숙한 사람에게조차도, 이메일의 HTML 코딩은 골치 아픈 주제입니다. 웹 표준이 자리 잡으면서 웹에서의 HTML 코딩은 많은 발전이 있었고 효율적인 코딩과 다양한 기술 구현이 가능해졌지만, 이메일에서의 HTML 코딩은 상황이 많이 다릅니다. 웹 표준이 지켜지기 전의 뒤죽박죽이던 HTML 코딩의 세계, 그게 바로 지금의 HTML 이메일입니다.
HTML 이메일, 왜 필요할까요?
텍스트로만 구성된 이메일(Plain-text Email)로도 메시지는 충분히 전달할 수 있습니다. 그럼에도 이메일 마케팅에서 HTML 이메일을 사용하는 데에는 몇 가지 이유가 있습니다.
하이퍼링크. 다양한 요소에 하이퍼링크를 추가할 수 있습니다. 이미지나 버튼에 하이퍼링크를 넣으면 더 많은 사람을 랜딩페이지로 유도할 수 있습니다.
디자인. 잘 디자인된 HTML 이메일은 브랜드를 더 잘 표현합니다.
위계. HTML 이메일에서는 콘텐츠의 위계를 만들 수 있습니다. 단락을 구분하거나 정렬을 다르게 해 핵심 문구나 하이퍼링크를 쉽게 강조할 수 있습니다.
추적. HTML 이메일은 오픈과 클릭을 추적할 수 있습니다. 오픈과 클릭은 마케팅 성과를 측정하고 전략을 개선하는 데 참고할 수 있는 중요한 데이터입니다.
이메일 코딩, 왜 다른가요?
이메일 코딩이 웹 코딩과 다른 이유는, 이메일에는 통일된 웹 표준이 없고 클라이언트마다 HTML과 CSS를 다르게 해석하기 때문입니다. 웹 디자이너와 퍼블리셔에게 이메일 코딩은 테이블 기반의 레이아웃, 인라인 스타일, 논리적이지 않은 구조의 마크업, 각종 꼼수로 대표되는 90년대로 돌아가는 것과도 같은 작업입니다. 이유를 하나씩 살펴봅니다.
표준. 이메일에서 사용하는 HTML과 CSS는 웹 표준과 거리가 멉니다. 이메일 클라이언트들 간에 통일된 표준도 없습니다.
이메일 클라이언트. 아웃룩, Gmail 같은 이메일 클라이언트들은 HTML과 CSS를 모두 다른 방식으로 해석하고 표시합니다. 그 정도가 심해서, 어떤 클라이언트에서는 문제없이 표시되는 이메일이 다른 클라이언트에서는 제대로 표시되지 않기도 합니다.
꼼수. 잘 디자인된 이메일들도 다양한 클라이언트에 대응하기 위해 각종 꼼수에 의존할 수밖에 없습니다.
자바스크립트. 자바스크립트는 웹에서 가장 인기 있는 언어 중 하나지만, 이메일 코딩에는 자리가 없습니다. 보안 문제로 이메일 클라이언트들이 자바스크립트를 차단하기 때문입니다. 당연한 처사지만, 이 때문에 이메일에서 인터랙션은 포기해야 합니다.
인라인 스타일(Inline styles). 웹에서는 본문의 구조(structure)와 스타일을 분리해 스타일을 더 쉽게 관리할 수 있습니다. 하지만 대부분의 이메일 클라이언트는 인라인 스타일(HTML 태그에 직접 스타일을 정의하는 방식)만 지원하기 때문에, 이메일에서는 어쩔 수 없이 인라인 스타일을 사용해야 합니다.
다행히 많은 사람들이 시대에 뒤떨어진 이메일 코딩 환경에서 나름의 해법을 찾기 위해 노력하고 있습니다. 앞서 경험한 사람들이 그 결과물을 더 많은 사람들과 나누기 위해 공개하기도 합니다. 반응형 이메일을 직접 만들어보려 한다면 아래 자료들이 좋은 출발점이 됩니다.
Responsive Email Templates — 반응형으로 만든 다양한 유형의 이메일 템플릿을 무료로 내려받을 수 있습니다.
The Ultimate Guide to CSS — 이메일 클라이언트별로 지원하거나 지원하지 않는 태그가 일목요연하게 정리되어 있습니다.
Can Email Be Responsive? — 반응형 이메일이 가능한지, 어떤 방식으로 접근해야 하는지 다룬 글입니다. 이 글 또한 해당 글에서 참고했습니다.
스티비를 사용하면 코딩 지식 없이도 모바일까지 고려한 이메일 뉴스레터를 만들 수 있습니다. 드래그 앤 드롭으로 요소를 배치하면 데스크톱과 모바일 환경에 맞게 자동으로 최적화됩니다.