Mobile/Web방식

[펌]Mobile web design을 위한 글.

saltdoll 2010. 5. 25. 15:27
반응형
출처: http://stonefocus.thoth.kr/

모바일 웹은 점점 급증해 가고 있다. 인터넷과 Web이 PC의 전유물이라는 사람들의 생각은 점점 없어져 가고 있는게 사실이다. 작년, 한해동안 미국에서만 6천3백만명이 넘는 사람이 모바일을 통해 웹에 접속하였다. 이는 2013년이 되면 전 세계적으로 17억명이 될것이라는 예견도 있다. 영국에서의 예만 보더라도 그 사실은 극명해 진다. 20%의 모바일폰 사용자들이 그 모바일 폰으로 인터넷을 즐기고 있다는 조사 결과도 나오고 있다.(Source : http://www.3g.co.uk/PR/Feb2007/4267.htm) 이게 불과 몇년 사이에 벌어진 일이다. 

그래서 모바일 웹의 Design을 위한 Guide line의 필요는 절실했다. 그리고, 이곳 저곳에서 모바일 웹을 위한 정보들을 쏟아내기 시작했다.

모바일 웹 design을 위한 Guide line

1, 사용자가 원하는것을 빨리 내놓아라.

Mobile과 PC에서의 방문 목적은 다르다. 모바일 네이버 사용자는 길거리 이동중일 가능성이 높다. 그 말은 어떤 정보 검색을 원한다는 것이다. 그러나 PC에서는 네이버를 접속할때 카페에 들어가거나 기사를 검색하려는 목적이 있다. 자신이 처한 상황에 따라서 같은 사이트라 하더라도 목적이 달라지는 것이다. 그래서 모바일 유저들은 목적지를 찾거나 주위에서 어떤 이벤트가 펼쳐지고 있는지 등의 자신의 위치나 시간과 관련된 정보를 찾기 원한다. 또한 짧은 시간내에 빠르게 볼 수 있는 엔터테인먼트 거리를 찾을수도 있다. 그러나 주의하라. 그들은 이동중이다. 기다릴 여유가 없는 사람들이다. PC라면 Alt +Tab신공을 펼치겠지만, 모바일에서는 그런게 어디 있는가. 그들의 인내력의 한계는 길어봐야 10초 이내이다. (무언가를 다운로드 하는 경우가 아니라면..)

아래에 두 검색 포털의 모바일 웹 페이지 이미지를 붙여 놓았다. 어떠한가? 구글은 모바일로 웹 페이지에 접속하고자 하는 사람들이 원하는것은 검색이라는것을 알았다. 그리고 다른 서비스들은 위에 조그많게 링크를 걸어 놓았다. 반면 야후의 페이지는 사용자가 이곳에 접속한 목적이 뉴스검색이라고 생각했는지 뉴스가 가장 먼저 눈에 들어온다. 그리고 상단 부분에 검색이 있긴 하지만, 거기에 검색어를 넣으면 뉴스 검색이 될 것 같은 느낌이다. 사용자가 원하는것을 빨리 내놓아야 한다는 1원칙에 조금은 빗겨 나간듯한 느낌이다. 

Google과 Yahoo의 모바일 웹 페이지

2, 선택된 아이템은 구분되어야 한다.

모바일 사용자들은 컨트롤이 정확하지 않다. 우리 손가락의 면적은 어쩔 수 없이 일정한 면적을 차지해야 하기 때문이다. 동시에 모바일 웹에서 하는 행동들은 스크롤, 하이퍼 링크 클릭, 버튼 클릭, 폼 필드 작성 등이다. 이런것들을 조작하는데 부족한 사용자의 컨트롤을 보완하기 위해서는 정확한 피드백이 필요하다. 이는 눌렸을때 버튼의 색깔등을 달리 함으로써 가능하다. 

아래는 BBC의 모바일 웹 사이트로 이 두번째 가이드 라인 적용이 잘 되지 않은 예이다. 두번째줄인 "Greeks stage fresh general strike"라는 기사가 보이는가? 지금 저 기사를 클릭한 상태이다. 그러나 내가 클릭했다는 사실은 글자에 밑줄이 그어지는것 밖에는 알수가 없다. 또한 아래에 있는 텍스트로 된 기사들은 클릭할 수 있는것인지 조차 인지하기 어렵다. 

BBC의 모바일 웹 사이트

아래 네이버의 모바일 웹 사이트는 이 두번째 가이드 라인을 잘 지킨 사례라고 볼 수 있다. 버튼 크기를 크게 늘려놔서 미스 클릭을 줄였을 뿐만 아니라 클릭시에 회색으로 아이콘을 덮게 되어서 내가 클릭했다는 사실을 정확히 인지할 수 있다. 

3, 사용자가 입력해야 하는것은 최대한 줄여라.

텍스트를 입력하는 방식 외에 선택하는 방식을 취하라는것이 3원칙이다. 

모바일 웹에서 텍스트 입력은 곤혹이다. 나도 로그인을 필요로 하는 페이지가 모바일에서 나타나면 꺼버리기 일수였다. 그 조그마한 에디터로 무언가를 치기 시작하면 오타도 많이 났을 뿐만 아니라 느렸다. 그래서 휴대폰으로 블로그를 작성하는 사람들은 당최 이해할 수 없었던것이 나의 입장이다. 

텍스트 입력을 줄이기 위해서는 어떤 방안이 필요할까? "선택" 혹은 "미리 예상된 링크" 로 텍스트 입력을 줄일 수 있다. 

맥도날드의 모바일 홈페이지 이다. 검색 창 아래쪽에 있는 "Find Restaurants by state"가 보이는가? 굳이 City이름을 텍스트로 입력하지 않더라도 저 버튼을 이용하며 State를 선택하고 City를 선택할 수 있는 것이 제공되어 내가 머무르고 있는 도시의 맥도날드를 쉽게 찾을 수 있다. 

맥도널드 Mobile이 텍스트 입력을 최소화한 사례

4. 쓸데 없는 정보는 덜어내라.

모바일 폰의 스크린은 작다. 그야말로 Tidy하다. PC모니터의 몇분의 몇 정도밖에 안되는 픽셀밖에는 없다. 이런 특성을 가진 탓에 모바일 웹 페이지는 중요한 정보만을 담아야 한다. 중요한 정보를 선별하기 위해서는 사용자가 이 페이지에서 원하는게 무엇인지를 규정하는 작업이 선행되어야 한다. 그렇지 않으면 정작 중요한 정보들은 다른것들에 밀려서 찾기 어렵되 될것이 뻔하기 때문이다. 

또한, 대부분의 모바일 폰 사용자들은 돈을 내고 페이지에 접속하고 있다. 그 말은 페이지에 수록된 정보의 양이 많으면 많을수록 사용자는 더 많은 돈을 지불해야 한다. 사용자는 자신이 원하는 정보를 로딩하는데 드는 비용은 충분히 감수하지만, 필요하지 않은 정보를 로딩하는데 내는 돈은 액수와 상관없이 불쾌한 경험을 가져다 준다. 

아래의 Creative ink모바일 홈페이지를 보라. 이 홈페이지의 목적은 자회사의 포트폴리오를 홍보하고 주문을 따내는데 그 목적이 있다. 그렇기에 그 정보에만 집중하여 6가지 메뉴를 정확히 보여주고 있다. 기타 다른 메뉴나 작업물들의 그림은 다 덜어내었다. PC에서 접속했을때의 홈과 모바일에서 접속했을때의 홈을 비교해보면 어떻게 정보들을 덜어내고 트래픽을 최소화 했는지 볼 수 있다.

반면, 우리나라 대표 포털인 Daum과 Naver의 모바일 웹을 살펴보면 그 차이점도 극명하게 알 수 있다. Daum은 PC에서 접속했을때와 동일하게 모든 정보들을 제공하려다 보니 사용자는 홈에 들어갔을때 무엇을 클릭해야 할지 모른다. 하지만, Naver는 한눈에 내가 원하는 정보에 Access할 수 있다. 만약 뉴스를 보고 싶다면 한 뎁스 더 들어가서 확인하라는 것이다. 홈에서 뉴스를 열거하는것은 쓸데 없는 정보라 판단하였고 덜어내었기에 Simple하고 사용성이 높은 모바일 웹을 만들 수 있었다. 

Creative ink 모바일 홈페이지

Daum과 Naver의 모바일 웹 페이지

5. 스크롤은 한방향으로만 제한하라.

수직 스크롤? 수평 스크롤? 이 둘중 한가지만을 사용해야 한다. 물론 스크롤을 사용하지 않도록 설계할 수 있다면 금상첨화다. 

PC에서 웹 페이지를 탐색할때 수직 스크롤이 아닌 수평 스크롤까지 해야 하는 상황이라면 사용자는 웹 페이지의 내용을 탐독하기 힘들어 진다. 이는 모바일에서도 똑같이 적용된다. 아니, 모바일에서는 더 심각한 불편을 초대한다. 특히나 터치 스크린 폰을 사용할때는 의도한 방향이 아닌 다른 방향으로 스크롤 하기 쉽다. 그러므로 사이트 자체에서 스크롤을 한방향만 지원한다면 이런 장애물을 사전에 없앨 수 있다. 

Google의 모바일 웹 페이지

아래 구글의 모바일 웹 사이트는 스크롤에 관해서는 최적화 되어 있다 할 수 있다. 수직 스크롤만을 지원하며, 모바일 화면에 딱 맞도록 설계되어 있다. Calendar에서 날짜를 클릭하는 일도 버튼이 적당한 크기로 설계 되었기 때문에 정보를 탐색하는데 무리가 전혀 없다. 

Epilogue

출처 : Google image 검색

PC와 Mobile은 다르다. 처음에도 언급했듯이 같은 Naver에 접속한다 하더라도 PC에서 접속하는 목적과 모바일에서 접속하는 목적은 근본적으로 다르다. 그렇기 때문에 모바일 웹 페이지를 디자인 할때 위 5가지 원칙은 반드시 지켜져야 한다. 

  • 사용자가 원하는것을 빨리 내놓아라.
  • 선택된 아이템은 구분되어야 한다.
  • 사용자가 입력해야 하는것은 최대한 줄여라.
  • 쓸데 없는 정보는 덜어내라.
  • 스크롤은 한방향으로만 제한하라.

※ 위 5가지 원칙은 여러 모바일 웹 사이트를 돌아다니다 모바일 웹 뿐만이 아니라 일반적인 UI에도 적용되어야 하는 항목들을 추출한 것이다. 


모바일웹? 모바일 어플리케이션? 그 둘 중 누가 더 점유율을 잡을 수 있을지는 아직 미지수다. 비용적인 측면에서 본다면 모바일 어플리케이션은 구매시에 비용을 지불 vs 모바일 웹은 이용할때마다 데이터 통신료를 지불해야 한다는 점이 존재한다. 그러나 이 두가지는 비용이나 점유율을 떠나서 사용자가 사용하기 편리한 UX를 제공해야 한다는 점은 일치한다. 

또한, 위 다섯가지 원칙들은 모바일 웹에서만 한정 지을것이 아니라 일반 휴대폰 UI디자인 시에도 활용될 수 있다. 

Reference
반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)