모바일 웹 디자인 팁 : 모바일에서 먼저 디자인해야 하는 이유

우리가 App.을 개발할 때 PC 기반의 웹까지 포함하여 최소 2개의 스크린을 고려하는 경우가 많습니다.  타겟고객의 Usage가 모바일에 집중되어 있다 하더라도 PC에서 이메일 노티를 받고 클릭하면 이동할 수 있는 최소한의 Landing 페이지는 필요할 것이기 때문입니다.

그러나 Facebook이나 Twitter, 기존 포탈처럼 이미 대규모 트래픽이 발생하는 유선 사이트를 모바일로 포팅하는 것이 아니라 새로 시작하는 프로젝트라면 대개 Mobile Experience를 위주로 App. 또는 모바일 웹을 먼저 개발하게 됩니다. 앞선 글에서 멀티 스크린으로 서비스를 개발할  때 “모바일”을 먼저 디자인해야 한다는 애기가 있었는데 이번에는 “Mobile First“로 유명한 웹디자이너 Luke Wroblewski가 말하는 모바일에서 먼저 디자인해야 하는 이유에 대해 자세히 살펴 보도록 하겠습니다.

2010년도에 발표된 글을 2011년도의 Presentation 자료로 보완해서 정리했기 때문에 모바일 App.을 개발해 본 사람인 경우 상식차원에서 이미 알고 있는 것들도 많겠지만, 스마트폰이 제공하는 다양한 성능을 활용하여 모바일에 최적화된  Experience를 디자인한다는 것이 무엇을 의미하는지에 대해 보다 상세한 정보를 얻을 수 있을 것입니다.

※ 출처 : Mobile Web Design Tips : Mobile Web Should Come First (2010년 10월 28일, TechRadar)

By Luke Wroblewski

웹사이트나 웹 어플리케이션 개발시 모바일 버전을 먼저 설계해야 한다. 지금까지 많은 경우 Mobile Experience를 전혀 고려하지 않은 상태에서 먼저 Desktop 버전을 개발하고 이것을 모바일에 포팅하는 방식으로 작업해 왔다. 사실 오랫동안 모바일 단말에서 웹을 브라우징 할려면 많은 장애요소 – 모바일 단말에서 웹브라우징은 고통스러웠고, 이통사는 유저의 웹 브라우징을 통제했으며, 무선 네트워크의 속도가 너무 느려 중간에 멈추는 경우도 많았다 – 가 있었기 때문에 이렇게 작업하는 것이 절대적으로 옳은 방법이었다.

시대가 변하고 있다 (Changing Times)

그러나 지난 몇년간 상황이 극적으로 변화하여 데스크탑에서 먼저 시작하는 것은 시대 착오적인 시대가 되었다. 모바일 버전을 먼저 디자인해야 새로운 성장기회를 얻을 수 있을 뿐만 아니라 전반적으로 보다 개선된 User Experience를 제공할 수 있게 되었다.

모바일을 먼저 디자인해야하는 이유는 1) 모바일이 폭발적인 성장세를 보이고 있다는 점 2) 모바일에서 먼저 시작하면 핵심기능에 초점을 맞춰 작업할 수 있다는 점 3) 데스크탑에서는 부재한 성능을 모바일에서 활용할 수 있다는 점 등 3가지이다.

1.  모바일의 폭발적인 성장세

기존 웹 프로덕트의 모바일 버전을 만들면 모바일 시장의 폭발적인 성장세를 활용할 수 있을 뿐만 아니라 유저들에게 훨씬 더 개선된 경험을 제공할 수 있다.

예를 들어, 3.5억명의 Facebook 유저가 모바일 버전을 PC 버전 보다 2배나 더 Active하게 이용하고 있다. 모바일과 테스크탑 Experience의 결합을 통해  유저들은 두가지 단말을 오가면서 더욱 더 적극적으로 참여하게 된다 (resulted in more engaged users across both set of devices). 이것은 Facebook이 Mobile Experience를 단순히 데스크탑 버전의 모바일 포팅으로 생각하고 있지 않기 때문이다. 페이스북 전체의 경험을 개선하기 위한 방식으로 모바일이 적극적으로 활용되고 있는 것이다.

Facebook 아이폰 어플리케이션의 수석개발자인 Joe Hewitt에 따르면, “나의 목표는 우선 Facebook의 Mobile Companion을 만드는 것이지만, 모바일에서 데스크탑 웹사이트 보다 훨씬 더 나은 Facebook 버전을 만드는 것이 가능하다고 확신”하게 되었다.

핵심만 지적하면 바로 이 점이야 말로 모바일이 우리에게 가져다 주는 진짜 기회이다.

2. 핵심에 초점을 맞춰야만 한다 (Forced To Focus)

작은 스크린, 느린 네트워크 속도, 유저가 모바일을 사용하는 컨텍스트 등 모바일 환경의 자연스러운 제약으로 인해 우리는 오히려 더 위대한 웹사이트를 만들 수 있게 되었다.

그 중에서도 특히 스크린 사이즈가 모바일 환경의 디자인에 큰 영향을 준다. 320 x 480 사이즈의 모바일 단말은 1024 x 768 해상도를 지원하는 데스크탑 컨텐트의  20%만 담을 수 있게 된다. 따라서 웹 개발팀은 고객 입장에서 그리고 사업적으로 가장 중요한 기능들에 초점을 맞출 수 밖에 없게 된다. 장식물이나 가치가 별로 없는 컨텐트를 배치할 공간적 여유가 없기 때문에 우리는 무엇이 가장 중요한 요소인지 알 필요가 있다 (You need to know what matters most).

Southwest Airline의 웹사이트와 모바일 버전을 예로 들어 보자. 아래 그림에서 보듯이 데스크탑 웹에서는 많은 여유공간이 있기 때문에 많은 프로모션과 기능과 옵션들로 도배를 해 놓았다.

Soutwest Airline Desktop Website

반면 모바일 Experience는 예약 (book travel), 체크인, 비행상태 (flight status), 비행거리, 알림 (alerts) 등 고객이 원하는 것과 Southwest의 사업에 필요한 것에만 레이저처럼 예리하게 초점을 맞추어 놓았다.

예약, 체크인, 리워드 등 핵심기능 위주로 디자인된 SouthWest Airline 아이폰버전

이와같이 가장 중요한 것에 초점을 맞추면 Kitchen Sink 문제를 포함하여 웹사이트 디자인시 오랫동안 우리를 괴롭혀 왔던 문제들이 깔끔하게 해결될 수 있다. 데스크탑에서는 공간적 여유가 많기 때문에 많은 이해 당사자들의 엇갈린 요구사항을 수용하기가 상대적으로 쉽다.

그러나 모바일 버전을 우선해서 디자인할려면 무엇이 가장 중요한지에 대한 이해당사자들간 사전 동의를 전제로 한다. 그러면 이러한 동의를 바탕으로한 동일한 원칙을 데스크탑 기반의 웹 프로덕트에도 적용할 수 있게 된다. 우리가 고객과 사업에 가장 중요한 기능 세트들과 컨텐트가 무엇인지에 대해 동의했다면 스크린 공간이 넓다고 해서 동일한 원칙을 적용하지 못할 이유는 없다.

물론 모바일과 데스크탑 컨텍스트에 차이가 있지만 어떤 웹사이트의 핵심 가치는 어떤 플랫폼에서 동작하든지 동일하다. 모바일을 먼저 디자인하면 오늘날  웹사이트를 어지럽히고 있는 많은 불필요한 요소들은 배제하고 유저가 성취하고자 하는 핵심과업에 초점을 맞춰 Experience를 제공할 수 있다 (When a team designs for mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter many of today’s websites).  320 x 480 화면에는 핵심고객 경험과 별로 관련이 없는 요소들을 배치할 공간이 없다. 우리는 중요한 것의 우선순위를 정해서 작업할 수 밖에 없다.

3. 퍼포먼스 최적화하기 (Network Performance Really Matters)

네트워크의 불안정성으로 퍼포먼스에 문제가 발생할 수 있기 때문에 모바일 Experience의 제공에 필요한 서비스 자원들은 덜 이상적인 네트워크 상황에서도 잘 동작할 수 있도록 최적화되어야 한다.

파일 리퀘스트의 숫자와 사이즈를 최대한 줄이는 동시에 어플리케이션 캐쉬와 같은 HTML5의 기능과 CSS3를 활용하면 다운로드 속도를 극적으로 개선할 수 있다. Google Code site에 가면 이런 테크닉들이 잘 정리되어 있으므로 이것들을 활용하면 당신 사이트의 모바일 퍼포먼스를 지금 당장이라도 개선할 수 있다.

아래 표에서 보는 바와 같이 아마존, 야후, MS 등이 테스트해 본 결과 데스크탑 사이트에서 조금만 지연이 발생하면 유저들은 바로 사이트를 떠나며, 구글이 더 오랫동안 조사한 결과에 따르면 퍼포먼스가 느릴 경우 그것이 개선되었다 하더라도 장기적으로 유저의 Activity를 축소시키는 부정적 결과를 낳는다.

웹사이트 퍼포먼스 저하가 이용과 매출에 미치는 부정적 영향

모바일을 먼저 디자인하면 불안정안 네트워크 퍼포먼스를 고려하여 스피드에 초점을 맞추게 된다.

4. 컨텍스트

작은 스크린과 느린 속도 못지 않게 모바일 컨텍스트 또한 중요한 제약사항이다. 간단히 말하면 사람들은 모바일 단말을 항상 휴대하고 다니면서 Location, Time, 소셜 셋팅 등 다양한 컨텍스트에서 사용한다.

그러므로 모바일에서 디자인을 한다는 것은 언제든지 사용할 수 있는 무엇인가를 디자인하는 셈이다. 어떤 리서치에 따르면 84%는 스마트폰을 집에서 사용하고, 80%는 하루종일 잡다한 용도로 사용하며, 74%는 줄서서 대기할 때, 60%는 일할 때도 사용한다 .

모바일은 PC 대비 저녁시간에 더 많이 사용 (회색이 PC, 그린이 모바일) / 모바일은 언제 어디서나 항상 사용한다

사람들은 시간 때우기가 필요하고 자신이 원하는 무엇인가에 체크인하고 싶어한다. 바로 그렇기 때문에 작고, 빠르고, 시간 때우기에 적합한 일을 가장 잘하는 Mobile Experience를 제공하는 App.이 가장 빠르게 성장하고 있다 (So mobile experiences doing the best job of providing small, quick, time-killing tasks are the ones growing the fastest).

이미 알고 있는 사람들로부터 직접 컨텐트를 제공받기 때문에 소셜 체크인 앱의 인기가 아마 가장 높을 것이다. 이런 류의 앱은 계속해서 친구들로부터 업데이트가 발생하기 때문에 회의도중 또는 심심할 때 신속하게 체크인하도록 유도한다. 이런 앱들은 헤드라인이나 짧은 글을 위주로 업데이트되기 때문에 서비스를 이용하는데 비용이 거의 발생하지 않는다. 바로 이런 이유로 2009년도 모바일 브라우저를 통해 Facebook에 접속하는 비율이 112%나 증가했으며, Twitter는 347%나 증가했다.

모바일에서 먼저 디자인하면 당신이 원하든 원하지 않든 유저에게 하루 종일 의미있는 정보를 신속하게 전달하는데 초점을 맞출 수밖에 없게 된다. 이러한 종류의 Engagement는 모바일 컨텍스트에서 잘 어울리긴 하지만 데스크탑에서도 재활용할 수 있다. 하루 종일 여러번 사용할 수 있도록 제품을 디자인하면 플랫폼이 무엇이든지 상관없이 재방문을 유도할 수 있다 (Products that are designed to be used many times throughout the day encourage repeat usage, no matter what the platform is).

모바일의 제약사항을 디자인 프로세스에 잘 적용한 결과로 무엇인가에 초점이 맞춰져 있고, 신속하고, 자주 이용되는 웹 프로덕트가  탄생하게 된다. 그러나  모바일 단말의 성능까지 고려하면 어떻게 될까 ?

5. 스마트폰 단말의 성능을 활용하라 (Mobile Capabilites)

기존 데스크탑 웹은 웹브라우저가 지원하는 page markup, styling, scripting 등 비교적 간단한 성능에 기초하여 구축되었다. 그러나 모바일 브라우저와 애플리케이션 플랫폼은 데스크탑 웹브라우저 보다 뛰어난 성능을 제공한다.

오늘날 모바일 단말에서 강력한 기능들이 새롭게 추가됨에 따라 사람, 데이타, 주변환경이 상호 인터액션하는 방식에 대해서도 지금까지와는 다르게 생각할 수 있게 되었다. 예를 들어,

• Device positioning & motion from an accelerometer : 단말의 기울기와 모션을 감지하는 액셀로미터
• Gyroscope (360 degrees of motion0) : 360도 회전을 감지하는 자이로 스코프
• Location detection : GPS, WiFi, 기지국을 활용한 위치정보 취득
• Multi-touch sensors : 한개 또는 이상의 손가락 제스쳐를 동시에 지원하는 멀티터치 인풋
• Orientation (direction from a digital compass) : 디지털 나침반을 활용한 동서남북 방향 정보 취득
• Video & image (capture/input from a camera) : 카메라로 이미지를 읽어서 검색을 하거나(구글 이미지 검색), QR코드를 읽어서 특정 웹사이트로 이동할 수 있으며, 결제시 카드 번호를 읽을 수 있고(Cardio), 명함의 정보를 읽어서 주소록에 입력할 수도 있음
• Audio ( input from a microphone; output to speaker) : 오디오 인풋과 아웃풋도 지원
• Dual cameras (front and back) : 앞뒷면을 지원하는 듀얼 카메라
• Device connections (through Bluetooth between devices) : 블루투쓰를 통한 단말간 연결
• Proximity (device closeness to physical objects) : 물리적인 오브젝트와 단말간 근접성
• Ambient Light (light/dark environment awareness) : 빛과 어둠의 인지 (스마트폰이 조명이나 빛의 밝기도 인지하나요 ? )
• NFC (Near Field Communications through RFID readers) :

모바일에서 먼저 개발하면 낡아 빠진 개발 옵션에 자신을 가두지 않고 모바일의 강력한 성능을 온전하게 활용하여 사용자 컨텍스트를 인지할 수 있는 새로운 어플리케이션을 만들어 낼 수 있다 (to create rich, context-aware applications).

모바일 단말의 중요한 성능 중 하나로 멀티 터치를 꼽을 수 있는데 2009년도 멀티터치를 지원하는 단말은 하루 100만대 꼴로 증가하고 있다.  사람들은 이제 마우스 포인터 대신 자신의 손가락을 사용하여 컨텐트와 직접 인터액션하기 때문에 디자이너들은 이 터치 인터페이스를 활용하여 어떻게 혁신적인 경험을 제공할지에 대해 고민해야 한다 (※ 역주 : 최근 런칭된 clearly라는 앱은 버튼을 전혀 사용하지 않고 오직 멀티터치 제스쳐만을 사용하여 일정을 추가, 수정, 삭제할 수 있게 만들어 화제가 되고 있습니다.)

Multi Touch Gesture의 종류

터치를 활용하여 디자인하려면 보다 큰 타겟 사이즈, 시각적인 컨텐트와 액션이 필요하다. 터치로 인해 기존의 웹에서 일반적인 활동을 훨씬 더 쉽고 재미있게 만들어 주는 인터액션의 새로운 형식이 가능해 졌다.

손가락으로 영역을 지정하면 장소들의 위치가 표시

Yahoo의 “Sketch-a-Search”는 멀티터치를 활용하여 음식점을 찾는 절차를 단순화시킨 대표적인 사례이다. 앱을 열고 손가락으로 원을 그리거나  선을 그으면 유저가 찾는 음식점들이 지도상에 바로 표시된다. 즉 손가락으로 몇가지 제스쳐만 하면 되기 때문에 타이핑이나 복잡한 인터액션은 필요없다.

Bill Buxton에 따르면 멀티터치 제스쳐를 활용할 수 있게 됨에 따라 우리가 실제세계에서 살아가면서 평생 획득한 스킬들을 자연스럽게 활용할 수 있는 유저 인터페이스, 즉 “NUI (Natural User Interface)“가 탄생하였다 (NUI exploits skills that we have acquired through a lifetime of living in the World).

• 컨텐트는 UI (즉 Action)이다.
• User와 컨텐트간 거리를 최대한 축소시킬 수 있게 되었다.
• 오브젝트와 컨텐트에 대한 직접적인 조작이 가능해 졌다.
• 멀티터치 제스쳐로 인해 (U/I나 내비게이션, 기능버튼 등이) Guessable, Predictable, Physical, Realistic해 졌다.
• 컨텐트가 아닌 비쥬얼은 삭제해도 무방하다.

6. 위치정보를 활용하라 (Location Awareness)

모바일을 우선적으로 설계할 때 멀티터치뿐만 아니라  Yelp와 같이 위치정보도 활용할 수 있다. Yelp는 지역의 소매점이나 서비스에 관한 온라인 리뷰를 제공하는 사이트다.

데스크탑에서 Yelp에 접속하여  주변의 좋은 레스토랑을 찾으려면 당신의 위치정보를 입력한 후 출력되는 결과값을 필터링하고, 다시 찾고자 하는 구체적인 지역을 찾아야 한다.

그러나 모바일에서는 이야기가 다르다.  Yelp 앱을 열고 탭 한번만 하면 당신 주변의 톱 레스토랑의 리스트를 볼 수 있다. 타이핑하고 필터링하고 맵을 조작하지 않아도 어플리케이션이 유저의 현재 위치를 활용하여 자동으로 필요한 정보를 바로 찾아 준다.

이와같이 Location Awareness를 활용하면, 주변의 레스토랑 뿐만 아니라 지역의 날씨나 뉴스, 교통이나 친구 등의 정보가 바로 유저에게 전달된다. 위치정보는 대부분의 모바일 단말에서 제공하는 강력한 기능이지만 데스크탑으로 활용 범위가 점점 더 확장되고 있다.

GPS, WiFi, 기지국 등에 따른 단말 위치의 정확도, 시간, 밧데리 소모량 비교

모바일 우선으로 생각하면 위치정보 인지 기능을 활용하여 당신의 프로덕트 Experience를 어떻게 개선할 수 있을지에 대해 결정할 수 있는 기회가 생긴다. 유저의 현재 위치를 알 수 있는 강력한 기능에 디지털 나침반까지 활용하면 더 나은 경험을 제공할 수도 있다.

Orientation Display On the Location Map and First Person UI With Digital Compass

디지털 나침반을 활용하면 모바일 단말에서 유저의 방향을 소프트웨어적으로 잡아 낼 수 있다. 다른 말로 하면 모바일 단말은 당신이 어디에 있는지 뿐만 아니라 어디로 향하고 있는지도 알 수 있다. 이것은 매우 작은 디테일에 불과하지만 이로 인해 그림을 그릴 때 원근법을 활용하는 것처럼 유저가 현재 시점에서 바라 보는 새로운 인터페이스를 설계 (First Person UI) 할 수 있는 가능성을 열어 주었다.

현재 세상을 바라보는 유저의 시각 위에 다른 디지털 정보가 덧입혀질 수 있으며 (Digital information can be layered on top of people’s immediate view of the world), 주변에 있는 오버젝트와 사람들을 Interactive한 요소로 바꿔 놓을 수 있다. 이런 종류의 Experience를 전달하는 프로덕트는 아직 초창기에 불과하지만 우리가 주변 세상과 인터액션하는 방식을 변화시킬 수 있는 잠재력을 가지고 있다.

모바일에서 먼저 디자인하면 멀티터치, 위치나 방향성 감지와 같은 모바일 Capabilities를 고려하여 웹 프로덕트에 대한 그림을 그릴 수 있게 된다.  유저들에게 어떤 Experience를 전달할 수 있는 새로운 방식이 열리게 된다. 데스크탑 웹에서는 이런 기능을 지원하지 않기 때문에 여기에서 먼저 시작하면 기존 사고의 한계를 넘어설 수 없다.

모바일에서 먼저 시작해야만 이와같이 강력한 테크놀로지들을 활용하여 최고의 Experience를 만들어 낼 수 있다. 이전과 같이 데스크탑의 제한적인 성능에서 시작한 후 완성된 솔루션을 모바일에 포팅할 때보다 훨씬 더 혁신적인 솔루션을 탐색할 수 있게 된다는 점은 의심의 여지가 없다.

데스크탑 보다 모바일 플랫폼에서 먼저 웹 어플리케이션을 설계하면 모바일의 폭발적인 성장세와 쓸모있는 제약요소, 그리고 혁신적인 성능들을 활용할 수 있다.  모바일의 성장으로 인해 유저의 참여(engagement)를 증대시킬 수 있는 기회가 만들어지고 전반적으로 개선된 User Experience를 창조할 수 있다.

모바일에 제약요소가 많기 때문에 더 중요한 것에 초점을 맞추고, 신속하게 반응하며, 자주 이용되는 웹 프로덕트를 기획할 수 있게 된다. Mobile Capabilites로 인해 사람, 데이타, 주변환경들 간의 인터액션에 대해 다른 방식으로 생각할 수 있는 길이 열렸다. 무엇을 더 기다릴 것인가 ?  모바일에서 먼저 시작하라 (Go Mobile First!).