좋은 이메일 디자인을 위한 가이드와 체크리스트 - 4편. 뉴스레터 구성

이 글은 Campaign Monitor의 The Really Good Guide to Email Design (+ Bonus Checklist)를 저자의 허락을 받고 번역, 편집한 글입니다.

이 글의 저작권은 원문의 저작자에게 있으며 문맥을 고려하여 표현을 수정한 부분이 있습니다. 정확한 내용이 궁금하신 분은 원문을 읽어보시기를 추천합니다.

원문에는 Campaign Monitor의 기능을 소개하는 링크가 많이 포함되어있는데 글의 내용과 무관한 링크는 모두 생략했습니다.

* 보충 설명이 필요한 부분에는 주석을 달았습니다.

* 좋은 이메일 디자인을 위한 가이드 칼럼은 이메일 제목과 미리보기 텍스트, 이메일의 개인화, 디자인, 구성, 기타로 나누어 연재할 예정입니다.

디자인도 멋지고 사람들이 미친듯이 클릭하는 이메일을 만들고 싶은가? Really Good Emails의 능력자들과 함께, 어떻게 하면 끝내주는 이메일을 만들 수 있는지에 대한 고민을 해결하기 위해, 당신의 이메일을 훨씬 더 멋지게 만들어줄 이메일 디자인 가이드와 체크리스트를 만들었다.

이 가이드는 이메일 캠페인의 각 요소에 대한 디자인 모범 사례를 다루고, 보너스 체크리스트도 제공할 것이다.

CTA 버튼

다음의 세 가지 측면을 함께 고려하면 유효한 전환을 발생시키는 이상적인 CTA 버튼을 만들 수 있다.

• 문구 — 구체적이고 독자가 얻는 혜택에 집중하여 작성한다
• 디자인 — 눈에 잘 띄고 크기가 적당하며 주위에 여백이 있어야 한다
• 위치 — CTA 버튼의 이상적인 위치는 제공하는 내용의 복잡성에 따라 다르다. 내용이 복잡하다면 CTA 버튼 앞에 충분한 설명이 필요할 수 있다.

내용의 중요도에 따라 서로 다른 버튼 유형을 사용하는 것이 좋다. 예를 들어, 중요한 CTA 버튼에는 오렌지 색 배경과 하얀색 텍스트를 사용하고, 그 외의 CTA 버튼에는 연회색 배경과 어더운 텍스트를 사용하는 것이다. 하지만, CTA 버튼의 수를 최소화하는 것도 중요하다. 독자가 클릭했으면 하는 것에 집중하고 그 외의 불필요한 요소는 제거하자. CTA 버튼을 만들 때 고려해야할 것이 몇 가지 있다.

• 크기 — 독자가 모바일 환경에서 탭할 수 있도록 버튼 크기를 충분히 크기 만들어라. 보통 높이가 50px은 되어야 한다.
• 색상 — 대부분의 브랜드들은 브랜드 색상을 버튼에 사용하여, 배경 색상이나 주변의 다른 영역과 대비시킨다. 커서를 올렸을 때 버튼 색상을 바꾸는 호버 효과(hover effect)를 많은 이메일 클라이언트가 지원하고 있고 점점 더 많이 사용되고 있다.
• 버튼 수 — 이메일에서의 버튼의 수는 이메일에서 얼마나 많은 행동을 할 수 있는지에 따라 정해진다. 쇼핑몰에서는 여러개의 상품을 소개하면서 각 상품마다 버튼을 제공할 수 있다. 아니면 가장 중요한 메시지 하나에 집중하여 하나의 버튼만 제공할 수도 있다.
• 문구 — 버튼은 독자의 행동을 유도하기 위한 것이다. 따라서 행동을 유도할 수 있는 능동형 동사가 일반적으로 사용된다.

많은 이메일 클라이언트가 기본적으로 이미지 표시를 차단하기 때문에 이미지로 된 버튼을 사용하는 것은 바람직하지 않다. “만능 버튼(bulletproof button)”(간단한 HTML, CSS 코드 스니펫)을 사용하면 이미지가 표시되지 않더라도 버튼이 표시되게 할 수 있다. 이 툴을 사용해서 만들 수도 있다.

링크

이메일에 있는 모든 링크가 모바일과 데스크톱에서 잘 열리는지 확인해봐야 한다. 그리고 의도한 페이지로 잘 이동하는지, 추적을 위한 UTM 정보가 달려있는지, 클릭할 수 있는 링크라는 것이 잘 표현됐는지, 이메일 브라우저에서 링크의 색상을 변경하지는 않는지 확인해보자.

이메일에 날짜 표기가 있다면 그 부분도 확인해봐야 한다. 따로 링크를 하지 않았더라도, Gmail과 Apple 메일은 날짜 표기에 자동으로 클릭할 수 있는 링크를 추가한다. 이를 피하고 날짜 표기도 일반 텍스트처럼 표시되게 하려면 CSS로 링크 스타일을 따로 지정해야한다.

Apple 메일에서 링크가 파란색으로 표시되는 것을 막으려면 CSS에 아래 정의를 추가한다.

동영상

이메일에서 동영상을 사용할 때 동영상이 이메일에서 바로 재생될 것이라고 생각하기 쉽다. 하지만 그것은 거의 불가능한 일인데, Gmail, 아웃룩, 썬더버드 등 대부분의 이메일 클라이언트가 기술적으로 이메일에서의 동영상 재생을 지원하지 않기 때문이다.

절반 이상의 이메일 클라이언트가 지원하는 HTML5를 사용하면 이메일 안에 동영상을 삽입할 수 있다. 많은 이메일마케팅 서비스가 이미지 위에 재생 버튼을 표시하고 동영상 원본으로 링크하는 방식으로 동영상 재생을 지원하기도 한다. 움직이는 GIF를 사용하는 것도 좋은 방법이다.

팁: 재생 버튼이 있는 동영상 썸네일 이미지를 사용하거나 GIF 미리보기 이미지를 사용하면 더 많은 클릭을 유도할 수 있다.

GIF

이메일에 동영상 콘텐츠를 넣고 싶다면, 움직이는 GIF를 동영상 대신 활용하는 것도 좋은 방법이다.

움직이는 GIF는 길이가 길고 색상이 많을 수록 용량이 커질 수 있다. 용량을 작게 유지하려면, 움직임이 꼭 필요한 부분만 GIF로 만들고, 가능한 짧게 만들고, 색상을 효율적으로 사용하자.

GIF 파일 용량은 가능하다면 1MB에 가깝게 만드는 것이 좋다. 1MB보다 작다면 더할나위 없다. 조금 넘어가는 것은 괜찮다.

문체

어떤 문체가 가장 효과적인지 알려면 구독자를 이해해야한다. 어떤 구독자는 격식을 갖춘 문체를 좋아할 수도 있고 어떤 구독자는 좀 더 친근한 문체를 좋아할 수도 있다. 비속어를 사용하는 것도 괜찮을 수 있다. (물론 정말 괜찮을지 100% 확신이 없다면 이 내용은 무시해라.) 브랜드에 충실하고 이메일의 핵심요소를 잘 최적화한다면, 높은 성과를 내는 이메일 캠페인 글쓰기도 어려운 일은 아니다.

맞춤법

항상 적어도 두 명에게 테스트 메일을 발송해서 이메일 전체를 검수 받아보자. 제3자의 눈으로 오탈자, 문법 오류, 그 외의 자잘한 실수를 찾아낼 수 있다. 이 체크리스트를 활용하면 발송 전에 일반적인 오류를 피할 수 있다.

ⓒ 스티비 

매주 수요일, 당신의 뉴스레터를 변화시키는 이야기를 받아보세요.