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