본문 바로가기

Brand&Design

좋은 이메일 뉴스레터 디자인 파헤치기 <1>헤더편



이메일 뉴스레터 얼마나 자주 접하나요?


자주 가는 사이트를 직접 접속하지 않아도 여행정보, 쇼핑정보, 문화 정보 등 각자의 취미나 관심사에 맞는 뉴스레터를 받아봅니다. 하루에도 수십 통씩 쌓이지만 읽지 않고 바로 휴지통에 버리게 되는 이메일 뉴스레터. 이 많은 이메일 중에도 꼭 열어보게 되는 뉴스레터가 있습니다. 사용자의 입장도 생각하면서 디자이너의 마음까지 만족시킬 수 있는 뉴스레터 디자인은 어떤 특징이 있을까요? 3회에 걸쳐 좋은 뉴스레터 디자인을 머리부터 발끝까지(<헤더>부터 <푸터>까지) 살펴볼 예정인데요. 처음으로 파헤칠 이메일 뉴스레터는 뉴스레터의 머리, 헤더부분입니다.


헤더부분은 이메일이 시작하는 도입부이면서 가장 적은 내용을 담고 있는 부분입니다. 하지만 막상 뉴스레터를 만들려고 손을 대면 가장 머뭇거리게 되는 부분인데요. 뉴스레터를 클릭하자마자 보게되는 부분이고, 한번 정하면 바꾸기 어렵지 않을까 하는 생각에 부담감이 많이 생기는 곳입니다. 유형별 뉴스레터 헤더 디자인을 살펴보고, 이를 실제로 적용해보면 어떨까요?



1. 뉴스레터의 얼굴: 로고


전체 뉴스레터 보기


가장 일반적인 방법으로 로고를 활용한 뉴스레터 헤더입니다. 컬러 바에 로고를 좌측/가운데 정렬을 하여 깔끔한 시작을 준비합니다. 


전체 뉴스레터 보기


로고만 있어서 심심하다고 생각될 때는 “View Online”버튼이나 No Images? “Click here”같이 기능과 심미적 요인을 충족해주는 요소를 상단에 만들기도 합니다.


No Images? “Click here”는 아주 작은 크기의 회색 문구입니다. 하지만 그 역할은 단순하지 않습니다. 단순히 디자이너의 마음을 채워주는 심미적인 요소뿐 아니라 이메일 서비스(참조: Gmail 뭐가 문제일까요?)에서 읽지 못하는 뉴스레터의 경우 사용자가 클릭해 새 화면에서 뉴스레터를 볼 수 있게 해주는 기능적인 요소까지 갖췄습니다.


전체 뉴스레터 보기


로고가 눈에 띄지 않도록 활용하는 뉴스레터가 대부분이지만, 이렇게 로고와 발행일을 크게 강조한 뉴스레터는 그중에서 눈에 띕니다. 다른 디자인 요소가 없어도 서체의 크기 대비로 주목을 끄는 헤더 디자인입니다.




2. 웹사이트인줄 알았는데 뉴스레터네?!

전체 뉴스레터 보기


새로 런칭한 쇼핑몰 뉴스레터의 헤더입니다. 위에서 소개한 로고를 활용한 헤더에서 더 나아가 웹사이트 느낌이 나도록 디자인되었습니다. 하지만 웹사이트와는 조금 다른 링크들로 만들어졌는데요. 이렇듯 다양한 링크를 활용해 웹사이트 느낌이 나도록 헤더를 꾸며볼 수 있습니다.


전체 뉴스레터 보기


WARBY PARKER는 앞에 소개한 MARKETPLACE처럼 홈페이지 느낌만 나는 헤더가 아닌, 실제 웹사이트와 디자인과 기능이 같은 헤더입니다(현재는 좀 더 심플한 디자인으로 변경되었습니다). 복잡하지 않은 웹사이트라면 시도해 볼 만한 뉴스레터 헤더 디자인입니다.




3.  머리부터 사진!


전체 뉴스레터 보기


앞서 말씀드린 헤더에 표시하면 좋은 요소들 (“View Online”, No Images? “Click here” “View in Browser” 등)은 아예 상단에 올리거나 빼고 과감하게 전체를 아우르는 사진으로 뉴스레터를 시작하는 방법도 있습니다. 



전체 뉴스레터 보기


로고는 빼기도 하고, 이미지와 함께 넣기도 합니다.


전체 뉴스레터 보기


로고가 다 무슨 소용입니까? 일단 사진으로 시작합니다.



전체 뉴스레터 보기


전체 크기로 보면 더 좋은 뉴스레터. 헤더 영역을 굳이 말하자면 로고 부분이지만, 헤더만 보기 아까워서 조금 더 길게 잘라보았습니다.



전체 뉴스레터 보기


이미지가 좋다면 그 위에 로고를 얹고 내용을 시작해도 좋습니다. 헤더가 따로 필요 없는 뉴스레터의 전형적인 예입니다.


다양한 스타일의 뉴스레터 헤더 스타일을 살펴보셨는데요. 작은 공간이지만 다양한 방법으로 만들어 보는 것이 가능한 영역입니다.



여러분은 어떤 스타일의 뉴스레터 헤더가 마음에 드시나요?
뉴스레터의 얼굴: 로고
웹사이트인줄 알았는데 뉴스레터네?!
머리부터 사진!
Do Quizzes


출처 Really Good Emails


by 사슴발자국