본문으로 바로가기

아이폰의 등장과 함께 웹 디자인의 판도가 뒤집혔다. 아이폰 이후 스마트폰이 어마어마한 속도로 확산되기 시작하며, 이제 대부분의 신흥국에까지 확산되었다. PC가 없더라도 스마트폰은 가지고 있는 세상이 온 것이다. 물론 스마트폰 이전에도 휴대전화에서 제공하는 웹 브라우저가 있긴 했따. 하지만 이는 형편 없는 수준이었으며 사용성도 최악이었다. 


지금은 PC를 사용해 인터넷에 접속하는 시간보다 모바일 기기를 사용해 접속하는 시간이 훨씬 많다. 단적으로 블로그에 방문하는 사용자의 로그만 봐도 모바일 기기를 통해 방문하는 사용자가 더 많다.



그렇다면 스마트폰의 등장과 웹 사용성이 무슨 관계가 있는 것일까?

스마트폰의 브라우저는 이미 PC의 크롬이나 IE만큼의 수준으로 성장했다. HTML5는 물론 대부분의 스크립트 언어까지 해석을 한다. PC 브라우저에서 보이는 그대로를 스마트폰에 보여준다는 이야기이다.

문제는 PC의 출력장치 역할을 하는 모니터와 휴대폰의 액정 크기와 데이터 부담 이다.

과거의 웹 디자이너들도 웹 브라우저 한 페이지가 자신이 활용하기에 작다고 느꼈다. 하지만 오늘날의 모바일 표준에 비하면 매우 여유로울 것이다. 여기서 문제는 과거의 디자이너들도 수많은 고민을 거쳐서 하나의 페이지를 채워 넣었다는 것이다.


1. 모바일의 트레이드오프


모바일 환경에서의 웹 디자인은 명백하게 트레이드오프가 발생한다. 웹을 떠나 어떤 종류의 디자인이더라도 제약을 잘 다루는 것이 관건이다. 디자인에서의 제약이란 해야만 하는 일과 할 수 없는 일을 뜻한다. 모바일 환경은 이 제약과 이에 따른 트레이드오프가 극명하다. 여기서 트레이드오프란 제약을 고려해 디자이너나 이해관계자의 이상을 버리고 선택해야만 하는 현실적인 대안이다.

화면에 많은 것을 담기 위해서는 속도나 데이터, 사용성을 포기 해야만 한다. 속도를 높히고 데이터를 최소화 하기 위해서는 화면에 보여줄 수 있는 정보를 최소화 해야 한다.


2. 좁은 화면의 문제와 대안


스마트폰이 막 확산되던 초기에는 수많은 웹 기업에서 모바일 전용 버전을 내놓았다. 아직도 많은 사이트들은 모바일 상황에서 접근시 작은 화면을 위한 버전의 화면을 따로 준비해 보여준다. 하지만 이 때 많이 했던 착각이 있다. 모바일 기기는 '이동 중'에 사용하기 때문에 꼭 필요한 기능만 구성하면 된다고 생각했던 것이다. 알다시피 지금 이 블로그의 글 역시 지하철, 버스에서 또는 쇼파에 앉거나 침대에 누워서 보고있는 분들이 계실 것이다. 사람들이 그 때 휴대폰을 사용해 인터넷에 접속하는 것은 모든 작업을 다 하기 위해서이다. 따라서 모바일 전용 버전이라고 하더라도 원래의 기능을 많이 덜어내서는 안된다.

그렇다면 대체 그 좁은 화면에 어떻게 모든 기능을 다 쑤셔 넣으라는 것일까?

자주 사용하거나 급하게 사용해야 하는 기능을 가까이에 둔다. 다른 요소들은 접근할 경로만 명확히 주어진다면 몇 번의 탭을 더 거쳐도 용납할 수 있다. 예를 들어 날씨 앱의 경우 첫 화면은 현재의 날씨를 보여 주고 탭을 통해 시간 단위, 일 단위, 주 단위의 날씨를 보여주는 식이다.

최근에는 HTML5의 등장과 각종 스크립트 언어의 발전으로 '반응형 웹'이 각광받고 있다. 어떤 방법을 사용해서 디자인하던 딱 하나만 잊이 않으면 된다.


"화면 공간 부족을 핑계로 사용성을 희생시켜서는 절대 안 된다."


위에서 이야기 했던 것 처럼 많은 웹 사이트가 모바일 전용 버전의 페이지를 따로 관리했다. 특히 반응형 디자인 이전에는 거의 필수적이었다. 하지만 시간이 지나며 개발자들은 한 개의 대상을 두개 이상의 버전으로 분리해서 관리한 다는 것은 지옥과도 같은 것이라는 것을 깨우쳤다. 관리에 따르는 공수는 배가 되고 결국 버전이 서로 달라지는 사태가 발생하기도 한다. 따라서 모바일 버전의 앱은 확대해서 볼 수 있게끔 만들고, PC용 풀 버전 사이트로 가는 링크를 반드시 제공해야 한다.




3. 모바일 웹앱 디자인 팁



- 어포던스(시각적인 힌트)를 활용하라

버튼은 버튼답게, 텍스트 박스는 누가 봐도 글상자 인것을 알 수 있게끔 시각적으로 힌트를 주어 디자인 해야 한다.


- 커서, 호버, 힌트가 없음을 항상 염두하라

웹 디자인을 할 때 가장 많이 사용했던 방식 중 하나는 커서를 가져다 대면 요소가 변하는 호버 기능을 제공하거나, 한트를 제공하는 것이었다. 모바일 환경은 커서가 없기 때문에 호버와 힌트를 사용할 수 없다는 점을 명심해야 할 것이다.


- 속도가 가장 중요하다.

화려한 디자인이지만 로딩하는데 많은 시간을 기다려야 하는 사이트보다 단순하지만 빠르게 볼 수 있는 사이트가 훨씬 뛰어나 보인다. 모바일 사용자들의 인내심은 없다고 봐도 될 정도이다. 속도가 빠르면 모든 것이 좋게 느껴질 것이다.


- 재미있는게 최고다.

앱 시장의 경쟁이 포화 상태에 도달하며 사용자가 재미를 느낄 수 있게 하는게 매우 중요해졌다. 만약 지금 간직하고 있는 기발한 아이디어가 있다면 구글 플레이 스토어나 애플 앱스토어에 검색해 보라. 아마 누군가 이미 만들어놓은 당신의 상상이 몇 개는 반드시 있을 것이다. 최대한 같은 기능이라도 재미있게 보이도록 만들어라. 대신 사용성과 편의성은 절대 잃지 않도록 주의해야 할 것이다.


- 학습 용이성과 기억 용이성이 있어야 한다.

앱의 첫 한두 페이지로 전체 앱의 사용 방법을 익힐 수 있도록 디자인을 제공해야 한다. 앱의 첫 화면에서 가장 중요한 사용법을 제공하는 것이 좋다. 사용자는 첫 화면에서는 어떻게 하는 것인지 모르더라도 알기 위해 도전할 것이다. 하지만 사용 중간에 혼란이 오면 진퇴양난에 빠질 것이다.

또한 사용자가 기껏 알아낸 사용 방법을 기억하기 쉬워야 한다. 관용적인 방법으로 사용법을 디자인하고, 기억하기 쉽게 만들어야 한다는것을 염두해야 한다.



참고서적 : Don't Make Me Think [Steve Krug]


 Other Contents 

댓글을 달아 주세요

티스토리 툴바