*본 포스트는 "SITE-POINT'에 게재된 " CHRIS COYIER"가 쓴 "5 Golden Rules For Mobile Email Design"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.
모바일용 이메일 디자인은 단순히 작은 크기를 고려하여 디자인하는 것이 아니라, 사람들이 모바일웹을 사용하는 다양한 방식들을 고려해서 진행되어야 합니다. 모바일용 이메일 디자인에 있어서 필요한 요소들을 알아 보겠습니다.
1. 이메일은 최대한 단순하게
복잡성은 모든 것을 망칩니다. 특별히 이메일에서는 더욱 그렇습니다. 작은 스크린 내에서 깨지기 쉬운 복잡한 구조는 언제든 피하도록 합니다. 또한 모든 모바일 스크린은 '미디어 쿼리(CSS)'를 지원하지 않는 다는 것을 명심하시기 바랍니다. CSS3와 같은 최신 테크닉에 의지해서 레이아웃을 구성할 수 없습니다.
1차원적이고 단순한 레이아웃이 가장 좋은 결과물을 낼 것입니다.
또한 이메일의 최종 사이즈 또한 매우 중요합니다. preset size인 100KB 정도를 넘지 않도록 해야 합니다.
용량이 넘었을 때 표시되는 아래 스크린샷과 같은 UI는 사용자들을 이탈하게 만들 수 있으니 지양하는 것이 좋습니다.
2. 이메일의 목표에 집중하고, 제목만 표시될 때의 상황을 고려하십시오.
모바일용 이메일 디자인에서 컨텐츠 최상위의 공간은 매우 중요한 역할을 합니다. 모바일은 위에서부터 읽히기는 플랫폼적 특성을 지니기 때문입니다.
특히 최상위의 컨텐츠는 이메일 목록 화면에서 내용에 대한 간략한 힌트를 제공하는데, 이 힌트는 사용자들을 유인할 수 있는 유효한 요소로 작용하기도 합니다. 이를 구현하기 위한 간단한 트릭은 <p>태그를 최상위에 삽입하는 간단한 방법으로 가능합니다.
특히나 Gmail과 같은 클라이언트에서 매우 효과적으로 작용함을 아래 스크린샷을 통해 확인할 수 있습니다.
3. 폰트와 이미지를 리사이즈하세요.
미디어쿼리를 지원하는 클라이언트에만 해당되는 이야기이긴 합니다. 이메일 클라이언트는 매우 다양하기 때문에 그 클라이언트들을 모두 통제하는 것은 불가능에 가깝습니다. 하지만 최근에 미디어쿼리는 iOS 디바이스들에 차용되기 시작했습니다. 또한 롤리팝 이후 버전의 안드로이드의 기본 이메일 앱에서도 미디어쿼리를 지원함을 확인하였습니다. 미디어쿼리를 지원하는 클라이언트들은 폰트와 이미지 사이즈를 변경해버리는 것과 같은 특이성을 보입니다.
iOS 디바이스들에서 확인되는 주요 속성으로는
- 작은 폰트 사이즈들이 기본적으로 크게 표현되어집니다.
- 이메일의 전체 폭이 가장 큰 html요소에 맞춰져서 리사이징됩니다.
이는 큰 문제가 아닐 수도 있지만, 복잡성을 증가시킬 수도 있습니다. 이런 경우 다음 코드를 삽입함으로써 폰트의 리사이징을 제어할 수 있습니다.
* { -webkit-text-size-adjust: none; }
아래 스크린샷에서 위 코드가 적용되고 안 되고의 결과 차이를 알 수 있습니다 (왼쪽이 적용된 것이고, 오른쪽이 적용되지 않은 것)
때로는 폰트 리사이징이 더 나은 UX를 제공하기도 합니다. 아래 스크린샷은 그러한 효과의 사례를 보여줍니다.
[이미지 리사이징의 경우]
모바일용 이미지 사이즈 설정의 경우 'max-width' 속성을 통해서 쉽고 효과적으로 정의가 가능합니다. 또한 제가 이전에 쓴 글들을 참고하여 미디어쿼리를 지원하는 기기들에 대해서 보내지는 이미지들을 별도로 설정할 수도 있습니다.
4. 링크와 버튼을 커스터마이지하십시오.
링크와 버튼들이 마우스커서가 아닌 손가락으로 눌려지는 상황에 대비해서 리디자인될 필요가 있습니다. (모바일 인간공학 관련 내용이 담긴 이전 포스트)
크기와 공간감은 버튼의 핵심적 요소입니다. 쉽게 터치가 가능하고, 쉽게 인지되도록 해야합니다. 또한 'a' 태그의 경우에는 많은 클라이언트들이 기본 스타일을 오버라이딩하는 경향이 있으니, 세세하게 inline coding을 해주는 것이 좋습니다.
또한 모바일 클라이언트의 경우 일부 숫자들을 전화번호로 인식해서 자동으로 푸른색 링크를 만들어 주는 경우가 있는데, 이런 경우에 대비하기 위해서는 다음과 같은 코드를 추가할 수 있습니다.
<meta name="format-detection" content="telephone=no">
보다 확실하게 전화번호 링크 생성 현상을 피하기 위해서 저는 다음과 같은 html 코딩 실험을 해 보았습니다. html elements tag의 조합을 다음과 같이 어떻게 하면 전화번호로 인식하고 또 안 하는지에 대해서 알아 본 결과입니다.
<p>800-234-5678</p>
<p>(800) 234-5678</p>
<p>http://mydomain.com</p>
<p>myemal@mydomain.com</p>
<p><span>800-234-5678</span></p>
<p><span>(800) 234-5678</span></p>
<p><span>http://mydomain.com</span></p>
<p><span>myemal@mydomain.com</span></p>
<p>800–234–5678</p>
<p>(800) 234–5678</p>
<p>http://mydomain.com</p>
<p>myemal@mydomain.com</p>
<p><span>800</span>-<span>234-5678</span></p>
<p><span>(800)</span> <span>234-5678</span></p>
<p>http<span>://</span>mydomain<span>.</span>com</p>
<p>myemal<span>@</span>mydomain<span>.</span>com</p>
5. 여백을 더하십시오.
많은 여백을 더하는 것이 모바일 상에서 쾌적화된 UX를 제공하는 가장 빠른 길일 수 있음을 마지막으로 명심하시기 바랍니다.
저작권 관련 정보 (License Info.)
|