1. 간단함
모바일 환경은 데스크탑 환경에 비해 한 화면에 보여줄 수 있는 내용이 제한되고 (작은 스크린 크기 때문에) 인터넷 연결이 원활하지 않습니다. 그래서 중요한 내용과 기능을 압축해서 간단하게 보여줄 수 있는 방법이 사용되고 있습니다.

2. 적절한 공백의 사용
웹 디자인에서 공백은 보여줄 정보를 조직화 하고 그 흐름을 조절하는데 중요한 요소로 활용됩니다. 스크린 크기가 작아진 모바일 환경에서는 웹 사이트를 잘 정돈하여 사용자에게 보여주는 것이 더욱 중요하다고 합니다.

3. 이미지 사용 줄이기
원활한 인터넷 연결이 보장되는 데스크탑 환경과는 달리 모바일 웹 사용자들은 느린 속도 때문에 과도한 이미지 사용을 선호하지 않습니다.

4. 서브 도메인의 사용
모바일 전용 웹 사이트의 도메인을 추가하기 위한 방법으로 크게 독립적인 도메인 사용 (예. http://me2day.mobi)과 서브도메인 사용 (http://m.me2day.net) 두가지가 있습니다. 보통 사용자의 혼동을 줄이기 위해 기존 웹 사이트의 도메인의 서브 도메인을 사용한다고 합니다. me2day 는 서브도메인을 사용하고 있네요 :) 

5. 우선순위가 높은 컨텐츠 중심으로
한번에 보여줄 수 있는 정보가 제한되기 때문에 모바일 웹 사이트들은 우선순위가 높은 컨텐츠 중심으로 내용을 구성합니다. 그래서 배너광고와 같은 부가적인 컨텐츠는 보통 내용으로 구성되지 않으며, 주 컨텐츠 중에서도 중심 내용을 간추려 보여주게 됩니다. 그 예로, 아래 두 사이트 (TheOnion 의 일반/모바일 용 웹 사이트) 를 비교해보시기 바랍니다.

모바일 웹 디자인의 극복해야 할 사항들

모바일 웹 디자인 분야에서 도전해볼 만한 과제로 제시한 다섯가지 문제를 소개합니다.

1. 다양한 스크린 크기
모바일 기기의 스크린 크기문제는 데스크탑  모니터 크기문제와는 또 다른 방법이 필요합니다. 모바일 기기의 스크린 크기는 아래 그래프를 보면 알 수 있듯이 다양한 크기로 존재하고, 또 항상 변하고 있습니다. 이 스크린 크기 변화에 대한 추가내용은 "Mobile screen size trends" 를 참고하시기 바랍니다.

연도별 모바일 기기의 스크린 크기 변화

2. 새로운 디자인에 대한 사용자의 이해부족
많은 디자이너들이 직면하고 있는 문제로 새로운 디자인에 대한 사용자의 이해부족을 들 수 있습니다. 모바일 웹 브라우징은 데스크탑과 꽤나 다른 환경이기 때문에 새로운 인터랙션의 도입이 필요함에도 불구하고, 무턱대고 도입할 수 없는 상황입니다. 그 이유로 사용자가 모바일 웹 브라우징 환경을 데스크탑 환경의 연속이라 인식하는 경향을 들 수 있겠습니다. 디자이너들에게 사용자의 기존 경향을 최대한 보존하며 새로운 인터랙션을 창조하는 지혜가 필요할 것입니다.

3. 기술의 빠른 변화
모바일 기기에는 다양한 기술이 빠르게 도입되고 있습니다. 좋은 예로, 오페라 브라우저에서 활용되고 있는, 기울기 센서를 활용해 화면을 위와 옆으로 기울일 수 있는 기술을 들 수 있겠습니다. 디자이너들은 빠르게 변화하는 기술에 맞서 부지런히 새로운 트렌드를 만들어 나가야 할 것입니다. 

그리고 극복해야 할 사항 4,5 번 내용으로 "테스트 환경"과 "어떤것이 가장 중요한 내용인지를 결정하기" 가 제시되고 있습니다. 자세한 내용은 원문(2009년 모바일 웹 트렌드) 을 참고하시기 바랍니다.

모바일 웹 디자인에서 고려해야 할 사항들

지금까지 현재의 모바일 웹 디자인 트렌드와 극복해야 할 사항에 대해 살펴보았습니다. 이번에는 모바일 웹 디자인에 있어 고려해야 할 아홉가지 세부지침을 소개합니다.

1. 깔끔한 Markup 구현하기
2. CSS 를 활용한 내용/디자인의 분리하기
3. ALT 태그의 사용함으로 이미지를 볼 수 없는 사용자 배려하기
4. Form filed 라벨링 하기
5. Headings 을 사용함으로 사용자가 웹 페이지의 흐름을 이해할 수 있도록 돕기
6. Floats 사용을 자제하기
7. Margin 과 Padding 을 최대한 줄이기
8. Navigation 메뉴를 가능한 꼭 필요한 것으로만 구성하기
9. 사용자가 내용을 쉽게 읽을 수 있도록 배경/글자 색을 결정하기

이 밖에도 Sitepoint가 Designing for the Mobile Web  에서 모바일 웹 디자인에 대한 추가적인 지침을 소개하고 있으니 참고하시기 바랍니다.

마지막으로 아래 링크에 대표 모바일 웹 사이트 링크와 스크린 샷들을 첨부합니다. 이번 리뷰가 모바일 웹 디자인을 이해하는데 조금이나마 도움이 되었길 바라겠습니다 :) 그럼, 다음번에도 UX의 재미난 주제와 함께 찾아 뵐께요.

사이트 보기