모바일 UX디자인 에센셜

모바일 전문가인 "루크 로블로스키Luke Wroblewski"가 2015년 봄에 "컨버전스@구글Conversion@Google 2015"에 강연한 영상을 토대로 정리해 봤습니다.  

먼저 "컨버전스@구글"은 구글의 연중행사로 구글 고객들을 초대해 강연하는 이벤트로써 아일랜드 더블린에 위치한 유럽/중동/아프리카 담당 구글 본사(EMEA HQ)에서 열립니다. 

이 강연에서 루크는 모바일 전문가답게 모바일에 관한 방대한 조사자료를 토대로 모바일 기기에 대한 이해 뿐만 아니라 모바일 디자인과 UX 등 많은 내용을 담고 있습니다.

루크 워블로스키(Luke Wroblewski)

1. 스크린 이해하기 

2007년 6월, 아이폰이 처음 출시된 이래로 현재는 스마트폰에서 스마트왓치, VR기기까지 엄청나게 다양한 크기의 스크린 사이즈와 해상도를 가진 기기들이 널려 있습니다.

PC와 모바일의 전세계 판매량 그래프를 보면 PC 판매성장이 그닥 인상적이지 못한데 비해 모바일 기기의 판매는 단기간에 엄청났습니다. 물론 각기 다른 스크린 사이즈들이 모두 섞인 판매량 입니다.

스마트폰에서 태블릿까지의 사용빈도 현황을 살펴보면 3 - 5인치 크기의 디바이스가 월등히 높다는 것을 알 수 있습니다.

연도별 평균 폰 스크린 사이즈의 변화를 보면 3 - 5인치 사이의 사용빈도가 높은 만큼 그 사이의 적정 크기인 4인치 후반대로 잡혀가고 있음을 알 수 있습니다. 

모바일 디바이스 크기별로 2014년의 트래픽을 전반기와 후반기로 나누어 볼 때, 3 - 4인치 크기의 디바이스는 감소한 반면, 4 - 5인치는 이미 최고를 달리고 있음에도 불구하고 더 늘어났습니다.

미국과 유럽은 4 - 4.5인치 크기의 디바이스를 선호하고, 아시아는 4 - 5.5인치까지 광범위하게 골고루 선호하고 있습니다. 하지만 전 세계적으로 4 - 4.5인치가 선호도에서 제일 높다는 것을 알 수 있습니다.

portrait vs landscape 사용빈도

스마트폰에서 수직모드 대 수평모드의 사용빈도수는 수직이 94%로 압도적으로 높습니다.

스마트폰 포스쳐 사용빈도

길거리에서 모바일 기기를 사용하는 1,333명의 사람들을 관찰한 결과 49%가 한손에 검지로, 36%가 양손에 검지로, 15%가 양손 엄지로 사용하고 있었습니다.

그리고 양 손을 사용했을 경우만을 관찰한 결과는 72%의 압도적인 수치로 엄지가 검지보다 사용빈도수가 높았습니다. 

결국 엄지가 들어가는 포스쳐의 비율이 총 75%나 됩니다. 그만큼 모바일 기기에서 엄지의 사용은 우리가 디자인을 할 때 주목해야 할 사항일 것입니다. 

모바일 디자인시 고려해야 할 3가지 

1. 4 - 5.5 인치

2. 수직모드

3. 한 손으로 사용

2. 아웃풋(output)

반응형을 중심으로 디자인 하기 - 하지만 너무나 많은 해상도별 구획점(breakpoint)들이 존재합니다. 과연 저걸 다 구현해야할까요?

해결책은 바로 컨텐츠를 중심으로 구획점을 잡는 겁니다.

각각의 스크린 사이즈를 신경쓰면서 구획점을 잡기보단, 현재의 레이아웃이 물 흐르듯 서서히 변화하다가 더이상 현재의 컨텐츠를 유지할 수 없는 시점에 이를 때 구획점을 잡아야 합니다. 

예 1)

예 2) 

모든 기기에서 69% 수익 증가, 전환율 17% 증가, 스마트폰에서 359% 수익 증가, 태블릿에서 178% 수익증가

예 3)

아이폰/아이팟에서 101% 수익 증가, 안드로이드에서 591% 수익 증가, 모바일 외의 기기에서 41% 수익 증가.

모바일에서는 새로 찾아들어오는 고객의 비율이 PC에 비해 높습니다. 왜냐하면 모바일로는 어디서든 검색하고 정보를 찾아다니기 때문이죠.

아래 수치를 보면 PC는 반복해서 다시 찾아오는 고객의 비율이 월등히 높습니다. 이것은 모바일로 새로운 것을 찾아본 것에서 내가 계속 관심을 기울이고 싶은 것은 PC로 옮겨가는 현상을 보입니다.

해상도

5인치와 27인치, 이렇게나 다른 크기의 기기가 지닌 해상도는 같습니다. 27인치의 디스플레이에서 5인치만 떼어내어 모바일로 쓰고 있는 셈이죠.

하지만 디자이너는 이 거대한 사이즈의 차이를 극복하고 하나의 웹사이트가 가지고 있는 모든 컨텐츠를 동일하게 보이도록 디자인해야 합니다.

태블릿에서 반응형과 미디어쿼리

태블릿은 모바일만큼 수직모드에 쏠려있지 않습니다. 여전히 수직모드가 높지만 차이는 미비하지만 수직과 수평모드 둘 다 고루 사용하고 있음을 알 수 있습니다.

  

폰트 사이즈의 변화는 스크린의 너비가 아니라 높이와 관련이 있습니다. 스크린의 높이가 줄어들수록 폰트 사이즈와 행간은 작아져야 합니다.

예 1)

예 2)

3. 인풋(Input)

기기마다 가지고 있는 다양한 인풋 환경

인풋은 PC와 모바일 양쪽 모두를 고려해야 합니다. 

4. posture

사람들은 어떻게 아웃풋과 인풋으로 상호 작용을 할까요.

같은 해상도지만 스크린 사이즈에 따라 보게 되는 적정거리가 다릅니다. 50인치 스크린은 10피트(약15m) 정도의 거리에서, 5인치 모바일에서는 1피트(30.5cm) 거리에서 보게 됩니다.

같은 해상도의 같은 사이즈라도 적정거리를 생각한다면 폰트 사이즈, 이미지의 크기 등 UI 요소를 다르게 디자인해야 합니다.

구글 글래스로 웹페이지를 본다면 아마 이런 식의 UI를 생각해볼 수 있겠죠.

스크린 사이즈당 엄지손가락이 닿는 부위의 영역을 나눠본 이미지 입니다. UI 요소를 디자인할 때 반드시 숙지해야 할 사항입니다. 초록 부분이 편하게 사용할 수 있는 범위이고, 주황색은 엄지를 뻗는 듯하게 사용해야 하는 범위, 붉은색은 불편함을 느끼거나 왼손의 도움을 받아야 하는 범위 입니다.

사례 1)

플로팅 버튼이 터치하기 불편한 오우존(ow zone)에 있습니다.

사례 2)

주 버튼이 터치하기 불편한 오우존(ow zone)에 있었던 것을 가운데 아래에 배치함으로써 사용성 측면에서 훨씬 나아진 것을 볼 수 있습니다.

5. 모바일의 미래는?

모바일이 나타났을 때 PC/랩탑의 사용빈도수가 현저히 떨어집니다. 이제 손목시계가 나타났습니다. 손목시계는 언제나 차고 다니고 켜져 있죠. 그렇다면 그 후 모바일은 어떻게 될까요?

휘어지는 플렉서블 유리는 1달러 지폐보다 얇다는데요, 앞으로 다가올 모바일의 미래에 어떠한 변화가 있을지 지켜봐야 할 것 같습니다.

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.