이 글은 MailChilmp의 Mobile Friendliness 글을 번역한 내용입니다. 비전문가의 이해를 위해 일부 내용을 수정하거나 추가하였습니다. 


모든 인터넷의 “모바일화”가 시작된 지 2년 정도가 지났습니다. 그러나 모바일 환경에서 이메일 디자인은 아직인 것 같네요. “모바일 친화적인 이메일 디자인”은 아직 걸음마 단계입니다.  이메일은 아직도 구식의 <Table> 태그로 코딩되고 있는데, 사실 보통 웹사이트와 같은 기준으로도 모던하고, 모바일 친화적인, 반응형 웹이 적용된 이메일을 충분히 만들 수 있습니다. 





“모바일 친화적”과 “반응형 웹”은 좀 차이가 있습니다. 모바일 친화적인 이메일이 반드시 반응형 웹일 필요는 없지만, 보통 반응형 이메일은 모바일 친화적이죠. (반응형 웹에 대해 더 알아보기)



모바일 친화적 이메일의 특징을 보면 아래와 같습니다.

- 메일의 가로 크기가 고정되어 있지만, 모바일 환경에서 잘 보이는 경우가 있습니다. 이런 경우는 보통 320px의 가로 고정값을 가진 이메일인데요. 320px는 일반적인 스마트폰(아이폰)의 가로 크기입니다. (원문에는 320px을 일반적인 스마트폰의 가로 크기라고 했지만, 이후 출시된 스마폰은 화면의 크기가 점점 커지는 추세입니다. 기존 320px이던 아이폰 3~5의 화면은 레티나 기술이 적용되면서 2배인 640px이 되었으며, 최근 출시 된 아이폰6는 750px, 아이폰6+는 1080px입니다.)


- 사용자의 스크린 크기에 따라 폰트 크기가 변하지는 않지만 작은 화면에서 읽기에 충분히 크게 디자인되어 있습니다.


- 쉽게 읽을 수 있도록 각 내용을 탭 하거나 핀치 줌할 때 디자인이 망가지지 않고 칼럼(열)을 유지합니다.  


- 행동유도를 위해 엄지로 탭 할 수 있을 정도의 큰 버튼을 사용입니다. 



한편 반응형 이메일의 특징은 아래와 같습니다. 

- 미디어쿼리를 사용하여 보고 있는 기기의 스크린 크기에 따라 가로 크기가 조정됩니다. 그래서 어떤 크기, 비율에도 비슷한 비율이 적용되도록 합니다. 


- 폰트 크기가 화면의 크기에 따라 조정됩니다. 모든 모바일 기기에 맞추기는 힘들고 많이 사용하는 몇 가지 크기에 맞춰 폰트 크기가 설정되어 있습니다. 


- 다중 칼럼(열)에서 단일 칼럼으로 레이아웃이 변화합니다.


- 보이는 플랫폼에 따라 여러 요소(이미지로 된 버튼 등)들이 보이거나 감춰집니다. 



 “하나의 눈, 하나의 엄지 그리고 팔의 길이”

그럼 모바일 친화적 이메일을 위한 가이드라인이 있을까요?  모바일용 이메일을 디자인할 때, 한 가지만 명심하면 됩니다.  “하나의 눈, 하나의 엄지 그리고 팔의 길이”. 이는 작은 화면 안의 내용을 하나의 눈으로(아마 다른 눈은 한눈을 팔고 있을 듯) 볼 수 있어야 하고, 어떤 행동유도장치나 버튼도 엄지 하나로 쉽게 누를 수 있어야 하며, 모든 글자나 시각 요소들은 사용자의 팔 길이 안에서 편안히 읽힐 수 있도록 충분히 커야 한다는 것을 의미합니다. 



이런 목표들을 위한 세부 가이드라인은 다음과 같습니다. 

- 최저 폰트 크기는 16px로 하자 (애플은 17~22px을, 구글은 18~22px을 권장하네요)


- 버튼과 같은 행동유도장치(CTA; call to action)의 크기는 46px의 정사각형 보다 커야합니다. (애플은 44px, 구글은 48px을 권장하고 있습니다)


- 링크를 여러개로 쪼개는 것을 피해야 합니다. 가장 중요한 하나의 링크를 클릭하기 어려워 질 수 있습니다. 


완벽한 가이드라인은 아니지만 이런 가이드라인은 효과적인 모바일 이메일을을 만들 때 출발점이 될 수 있습니다. 더 깊게 알고 싶다면 역시 메일침프의 done some leg work를 참고해 주세요. 



다양한 기기의 크기

사용자들은 스마트폰과 같은 모바일 기기를 어떻게 사용할까요?  “사람들의 행동”을 고려한 디자인이 되어야 합니다. 그래서 기기 환경은 매우 중요합니다. 우리가 만든 이메일을 누군가가 볼 때 그 환경이 스마트폰인지, 태블릿인지에 따라 다른 디자인으로 접근해야 합니다. 


사람들이 어떻게 기기를 쥐는지 생각해 봅시다. 스마트폰은 보통 한 손으로 쥡니다. 그리고 보통 하나의 엄지로 사용합니다. (스크린 내에서) 엄지를 사용하여 편안히 쓸 수 있는 영역은 사용자가 주로 쓰는 손의 반대편 영역입니다.즉, 오른손잡이는 왼쪽 영역을 탭하기 편한 것이죠.





반대로 태블릿은 보통 두 손으로 쥐고 사용합니다. 양 엄지는 스크린의 가장자리 영역을 쉽게 터치할 수 있지만 가운데 영역은 터치하기 어렵겠지요. 





가능하다면 당신의 디자인은 위의 두 가지 시나리오를 고려해야 합니다. 스마트폰에서 엄지 하나로 누르기 쉽게끔 화면의 가로를 꽉 채우는 큰 버튼과 같은 중요한 행동유발요소를 배치해야 합니다. 이렇게 하면 오른손잡이와 왼손잡이 모두를 수용할 수 있겠죠.


또한 반응형웹에서 이용되는 미디어쿼리를 이용해 기기의 가로 모드와 세로 모드를 고려하여 다양한 “중단점(break point)”을 만들 수 있습니다. 그리고 태블릿 환경에서도 같은 방법을 적용합니다. 

마지막으로 이메일의 가로 크기가 480px의 화면까지 작아질 수 있도록 디자인합니다. (가장 일반적인 가로 모드의 화면 크기, 세로 모드의 크기는 320px)


결론

이메일은 매우 오래되고, 중요한 소통 수단입니다. 이런 이메일의 환경도 모바일 친화적으로 변해야 하는 것은 당연하겠지요. 위의 간단한 가이드라인을 적용해서 데스크탑 환경과 모바일 환경에서 모두 잘 보일 수 있는 이메일을 디자인해 보는 건 어떨까요.



출처 : MailChimp



by 북극곰 발자국

Posted by slowalk





오늘도 어김없이 도착하는 수많은 메일, 그 중에서 대부분의 뉴스레터가 휴지통이나 스팸함으로 직행합니다. 어떻게 하면 고객의 받은편지함에 남아 있을 수 있을까요? 


뉴스레터 발송 서비스의 혁신, 메일침프(Mailchimp)가 권하는 “뉴스레터 디자인 가이드”의 내용을 번역해서 소개합니다. 뉴스레터의 내용, 아이덴티티, 색상, 이미지, 레이아웃, 글꼴 등에 대한 메일 침프의 고민이 이 한 페이지에 담겨 있습니다.



1. 내용


메시지에 집중하세요


가장 영향력 있는 이메일은 하나의 정돈된 메시지를 가지고 있습니다. 여러 개의 메시지를 하나의 이메일에 담고자 한다면, 차라리 여러 개의 시리즈로 나누는 것이 좋습니다.



간결하게


더 이상 줄일 수 없을 때까지 간결하게 내용을 줄입니다. 



계층 구조를 만드세요


시간이 없는 구독자를 위해 가장 중요한 정보를 처음에 배치합니다.



(정보를) 나누세요


이해하기 쉽도록 제목(heading)으로 나누고 목록으로 만듭니다. 대충 훑어보는 구독자에게 도움이 됩니다.



하이퍼링크를 이용하세요


많은 정보를 전달해야 할 때는 상세 정보가 있는 웹페이지로 링크하는 것이 좋습니다.



2. 아이덴티티



구독자로 하여금 누가 보냈는지 알 수 있도록 회사나 단체의 로고나 이름을 이메일 상단에 배치시킵니다.



3. 색상



팔레트(palette)를 선택하세요


이메일의 한두 개의 색상을 선택합니다. 적은 수의 색상은 받는 이를 메시지에 집중하도록 해줍니다. 회사나 단체가 어딘가에서 쓰고 있는 색상(예. 로고의 색상)을 선택합니다.




헤더와 푸터를 분리하세요


헤더와 푸터에 배경 색상을 넣어서 본문의 내용과 분리시키는 것이 좋습니다

*헤더(header)와 푸터(footer) : 일반적으로 본문이 아닌 로고, 메뉴등이 위치한 상단 부분을 헤더, 회사 정보, 링크 등을 담은 부분을 푸터라고 합니다



4. 이미지


브랜드 자산을 이용하세요


이메일 상단에 회사의 로고나 마크를 넣습니다. 구독자에게 어디서 온 이메일인지 알 수 있게 해줍니다.



사진을 넣으세요


사진과 함께 설명하는 것이 좋습니다. 사진을 사용한다면 시선집중을 위해 주변 디자인에 맞추어 색상을 조정합니다. 포토그래퍼가 될 필요는 없습니다. 대신 좋은 품질의 사진을 구하면 됩니다. 사진을 찾거나 구입할 수 있는 많은 스탁 웹사이트들이 있습니다. Unsplash, Stocksy,New Old Stock, Can Stock Photos, Little Visuals.

완전 무료 사진 사이트 7선



이미지 사이즈 조정


이미지가 찌그러지거나 늘어지지 않게 정확한 사이즈로 조절하세요. 중요한 이미지는 반드시 파일 사이즈를 줄여서 넣는 것이 좋습니다.



5. 레이아웃



빠른 독해를 위한 정리


보통 사람들은 마케팅 목적의 이메일을 읽는데 15분이 걸린다고 합니다. 그래서 짧고 달콤하게 전달해야 합니다. 위에서 아래로 우선 순위에 따라 정리합니다.



여백을 만드세요


내용 사이에 여백을 주어 내용이 숨을 쉴 수 있도록, 디자인이 더욱 가까이 다가가도록 합니다.



내용을 정렬합니다


하나의 큰 사진과 적은 문장의 단순한 내용이라면 중앙 정렬이 좋습니다. 더 많은 내용이 있다면 왼쪽 정렬이 보다 더 읽기 쉽습니다. 디자인 전체적인 조화를 위해 정렬은 일관되게 적용하는 것이 좋습니다.



섹션을 만드세요


이메일 안에 다른 종류의 내용이 함께 있다면, 가로 선으로 깔끔하게 섹션으로 정리해 줍니다.



6. 글꼴



가독성이 중요합니다


본문 글꼴 크기는 14~16px이 적당합니다. 긴 이메일에는 14px로 하는 것이 좋고, 2~3줄의 짧은 이메일에는 16px로 하는 것이 좋습니다.



글꼴을 선택하세요


전달하려는 메시지에 맞추어 글꼴을 선택합니다. “세리프(serif)”라는 말은 글자의 끝 부분에 장식이 되어있는 것을 말합니다. 어떤 글꼴은 세리프가 있고 어떤 것은 없습니다. 세리프가 있는 것은 보다 지적이고, 세리프가 없는 것은 보다 캐주얼해 보입니다. 이 둘을 섞어서 사용해도 되지만 되도록 2개의 글꼴을 넘지 않도록 합니다. 최대 3개로 사용합니다.



7. CTA(행동유도장치)

*CTA(행동 유도 장치)는 사용자가 클릭을 유도하는 장치로 링크, 버튼, 배너 등을 말합니다. 



원하는 CTA는 뭔가요


CTA(Call To Action: 행동 유도 장치)에 외부 링크를 넣거나 무언가를 요청할 수 있습니다. 이미지나 버튼, 텍스트에 링크를 걸 수 있습니다. 목적에 맞추어 장치를 선택하면 되지만 너무 많은 장치를 넣는다면 받는 이들은 무엇을 클릭할지 알기 어렵습니다. 



간결하게 


사람들의 행동을 유발하기 위해 CTA는 짧고 간결하게 합니다. “Buy now(즉시 구매)”나 “Sign up(가입)”처럼요. 살아있는 언어로 구독자들에게 정확히 해야하는 것이 뭔지 알려줘야 합니다.



명확하게 


중요도에 따라 행동 유도 장치의 크기를 조절합니다. 클수록 중요한 것이고 읽어야할 것처럼 보여야 하니까요. 본문과 다른 색상, 스타일, 위치로 명확하게 구분되어 보이도록 합니다. 주변에 여백을 주고  잘 보일 수 있는 장소에 배치합니다.



기대감을 주세요


구독자에게 버튼을 클릭하기 전에 무엇을 얻을 수 있을지 알려줘야 합니다. 버튼 주위에 간단한 글귀를 넣을 수도 있습니다.



마치며


하루에도 몇 통 씩 받는 이메일, 뉴스레터. 이 중 전달하고 싶은 메시지를 정확하고 효과적으로 전달하려면 이러한 이메일 디자인 전략이 반드시 필요합니다. 메일침프가 제안하는 이메일 디자인 가이드를 통해 더욱 효과적인 이메일 마케팅을 할 수 있겠죠.


출처: MailChimp


by 북극곰 발자국 



Posted by slowalk