[Design] 뉴스레터 레이아웃 개선하기
뉴스레터 이메일 템플릿을 디자인하면서 배운 것
좋아보이는 디자인과 좋은 디자인은 다르다.
이메일 디자인은 처음이라서
현재 유저에게 발송되는 이메일 템플릿은 10여년 정도된 오래된 디자인이였기에 가독성 개선 사용자 유입을 위해서 개선이 필요한 상태였다. 이에 사내 뉴스레터 이메일 디자인을 개선하는 작업을 담당하게 되었다.
사내 뉴스레터 이메일 템플릿 개선 작업을 맡으면서 Figma로 새 디자인을 그려야 했다. 개발을 하면서 Figma를 사용해본 적은 있었지만, 부족한 부분이 있다고 판단해 디자인 강의를(Codeit) 찾아서 들었다. 강의를 통해서 피그마 심화, Primary 컬러로 버튼을 강조하는 방법, 폰트 굵기와 색상으로 위계를 만드는 방법을 배우며 기초를 다졌고 클론 디자인을 해보면서 디자인 과정을 익혔다.
디자인에 앞서서 레퍼런스 찾아보기
디자인을 시작하기 전에 좋은 이메일 디자인이 어떤 것인지 감을 잡기 위해서 레퍼런스를 최대한 많이 봤다. 검색을 해보다가 Really Good Emails라는 사이트를 알게 됐는데, 실제로 발송된 이메일 디자인 모음 사이트였다. 여기서 좋은 이메일 디자인들을 보면서 공통점을 찾으려 했다.
또 Medium 뉴스레터도 직접 구독해서 받아봤다. 이메일을 받는 사람 입장에서 어떤 레이아웃이 자연스럽게 읽히는지, 어디서 시선이 멈추는지, 어디서 스크롤을 멈추게 되는지를 직접 경험해보고 싶었다.
보다 보니 하나의 패턴이 보였다. 잘 읽히는 이메일은 독자에게 전달하고자 하는 부분에만 집중하고, 나머지에서는 힘을 빼고 있었다.
첫 디자인: 시선이 분산된다.
담당자님이 주신 레퍼런스는 제목, 글, 태그 정도만 있는 심플한 디자인이었다. 많은 걸 넣지 않아야겠다고 생각했는데, 막상 Figma를 열고 나니 잘 만들고 싶은 마음에 이것저것 넣기 시작했다. 사실 완성하고 나서 스스로 꽤 만족했지만 다시 보니 뭔가 이상했다.
이메일을 받는 사람 입장에서 다시 보기
뉴스레터 이메일의 목적은 단순하다. “이런 글이 있어요, 읽어보세요.” 독자가 이메일을 열었을 때 바로 글로 시선이 가야 클릭으로 이어질텐데, 디자인한 이메일을 열었을 때 시선이 글에 집중되지 않고 분산되는 느낌을 받았다. 그래서 디자인 요소를 조금 덜어내고, 더 통일감있는 디자인으로 수정했다.
두 번째 디자인: 덜어내기
변경한 것들을 하나씩 정리하면 이렇다.
태그는 하나만
태그가 글 작성의 필수 항목이라 중요한 정보라고 생각해 추가했다. 하지만 이메일에서 독자한테 태그가 필요한가?라는 생각이 들었지만, 독자 입장에서 어떤 종류의 글인지는 파악할 수 있어야 한다고 판단했다. 그래서 장 첫 태그 1개를 글의 세부 카테고리를 나타내는 요소로 활용했다.
헤더와 푸터 처리 방식 변경
푸터를 색상으로 강하게 구분하던 색상 대비를 낮춰서 전체 서비스 디자인과 통일감 있도록 수정했다. 읽을거리를 제공한다는 메세지를 전달하고 싶어 히어로를 만들어 구분선 하나로 바디와 분리했다.
Primary 컬러 사용 범위 좁히기
처음엔 히어로나 콘텐츠 영역에 primary 컬러를 쓰지 않았다. 그랬더니 이 메일이 어떤 곳에서 보내는 정보인지 독자에게 전달하기가 어려웠다. 이에 “Explore More” CTA 버튼과 히어로 문구의 “today.” 한 단어에만 추가해서 위계를 주었다.
디자인을 처음 해보면서 배운 것
개발을 하면서도 가장 많이 중요하게 생각했던 “사용자 입장에서 생각하라”는 것은 디자인에서는 더욱 중요하다는 것을 이번 작업을 하면서 실감했다.
내가 처음 이 이메일을 받는 사람이라면 어떻게 볼까를 계속 상상해보고 시선이 자연스럽게 강조되는 곳에 가도록 주변 디자인 요소에 힘을 빼는 것 이번 이메일 템플릿 작업을 해보면서 배웠다.
다음 글에서는 이 디자인을 실제 이메일로 구현하는 과정에서 만난 이메일 HTML의 제약들을 다룬다.
