모바일 친화적인 이메일 만들기

이 글은 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 북극곰 발자국