내 아내와 나는 몇 년 전에 새 식기를 구입한 적이 있다. 반짝이는 스테인리스로 만든, 크고 두꺼운 손잡이에 날이 예리한 제품이었다. 테이블에 놓으면 아주 멋있었다. 그러나 우리는 그것을 실제로 사용하지 않았다. 좋은 제품이 닳는 게 두려워서 우리가 그 식기를 아꼈기 때문이 아니라 사용하기에 너무 불편해서였다. 날카로운 날은 멋있게 보이지만 손을 베일 염려가 있었고, 화려한 손잡이는 무겁고 다루기가 힘들었다.
 
나는 모바일 디자인을 접할 때마다 가끔 이렇게 형편없고 사용하기 불편한 식기를 떠올린다. 겉으로 보기에는 멋지지만 막상 사용하고 보면 정말 필요한 조건들이 전부 간과되어 있음을 알게 된다. 특히 인체공학적 조건들이 말이다. 사람의 몸에 알맞은 디자인을 창조하는 것은 겉으론 잘 드러나지 않지만 정말 고귀하고 가치 있는 예술이다.
 
산업 디자이너들은 인체공학을 항상 중요하게 생각해왔다. 그런데 디지털 디자이너들 역시 점점 그것을 중요시하고 있다. 왜일까? 스마트폰과 태블릿이 우리가 디지털 디자인과 소통하는 방식을 바꿔 놓고 있기 때문이다. 우리는 디지털 기기를 다루는 데 있어 더 이상 귀찮은 키보드와 마우스 사용에만 의존하지 않는다. 이제는 보다 직접적이고 실재적인 방법을 쓴다. 디지털 기기를 손에 들고, 탭하고, 누른다. 사랑스럽게 쓰다듬기도 한다.
 
디지털 기기와의 신체적인 접촉이 점점 확장되는 상황에서 디자이너들은 이제 인터페이스가 어떻게 보이고 느껴지는지에 대해서만 생각하는 게 아니라 실질적인 사용의 측면을 고려하게 되었다. 즉 디자이너들은 사용자들이 스마트폰과 태블릿을 어떻게 들고 또 어떻게 조작하는지를 연구해야 하는 것이다. 편하게 사용할 수 있는 스크린의 크기는 얼마인지 또 디자인이 손 안에서 어떻게 느껴지는지 등을 말이다. 이처럼 디자이너들은 모바일 디자인의 인체공학적 성격에 대해 본격적으로 고민하게 된 것이다.
 
그렇다면 당신은 인체공학적이고 사용하기 편리한 모바일 디자인을 어떻게 창조해야 할까? 여기서 그 방법을 소개하고자 한다.
 
 
사무실을 벗어나라
나는 디자인을 구상하기에 앞서 사무실 밖으로 나가 직접적인 관찰과 조사를 하는 것을 즐긴다. 사람들이 어디서, 언제, 어떻게, 왜 모바일 기기를 들여다보는지 살펴보는 데에 아침과 오후 시간을 보내는 것이다. 나는 사람들이 기기를 어떻게 잡고 이용하는지를 관찰하고 기록한다. 그들은 기기를 가지고 주로 무엇을 하는가, 거기에 어떤 불편과 어려움이 존재하는가를 포함해서 말이다. 이렇게 얻은 정보들은 인체공학적 디자인을 구상하고 현실에서 실제로 일어날 법한 일들을 테스트하는 데 도움을 준다.
 
기기를 잡는 방식을 다양하게 디자인하라
사람들이 모바일 기기를 사용하는 방식을 관찰하다 보면 그들이 다양하게 기기를 잡는다는 것을 발견하게 될 것이다. 사람마다 기기를 다르게 잡고 또 잡는 자세를 자주 바꾼다는 것을 고려하면 기기를 잡는 방식은 다양하게 디자인될 필요가 있다. 나는 보통 스마트폰 디자인을 시작할 때 먼저 한 손 잡기부터 고려한다. 가장 까다로운 디자인이다. 그리고 난 뒤 점차 여러 가지로 잡는 형태들을 구상하고 그 각각에 어떤 편리함이 있는지를 시험한다.
 
주요 제어 기능들을 손 닿는 곳에 배치하라
나는 버튼이나 링크 같은 자주 사용되는 제어 기능들을 엄지나 다른 손가락들이 쉽게 닿을 수 있는 곳에 배치하려고 노력한다. 화면의 중간과 아래가 좋다. 그러나 아래 모서리들은 기기를 한 손으로 잡을 때 누르기 불편할 수 있다. 메뉴의 경우는 여전히 화면 상단이 선호된다. 그러나 손가락이 닿기 어려울 수 있으므로 화면을 밀어서 메뉴를 가져오는 방식도 괜찮은 것으로 보인다.
 
제어 기능 위에 콘텐츠를 배치하라
화면을 탭할 때 손가락이 콘텐츠를 가리게 되는 것을 당신은 원치 않을 것이다. 그래서 나는 언제나 콘텐츠를 제어 기능들 위에 배치한다. 또한 핵심적인 내용이 손가락에 의해 쉽게 가려지는 부분에 놓이지 않게 하려고 주의한다. 예를 들면, 아래 모서리들은 한 손으로 스마트폰을 잡을 때 자주 가려지는 부분이다.
 
세로 모드를 우선으로 디자인하라
기기를 잡는 자세가 자주 바뀐다 해도 스마트폰과 태블릿 모두에 일관되게 적용되는 한 가지 사실은 사람들이 대체로 세로로 기기를 잡는다는 것이다. 가로보기는 영상이나 사진 감상 같은 데에 종종 사용되지만 이는 예외적인 경우지 표준적인 것은 아니다. 물론 모바일 디자인은 세로와 가로, 둘 다를 이상적으로 소화해야 하지만, 영상이나 사진이 주가 되는 사이트나 어플리케이션을 디자인하는 게 아니라면 나는 세로 모드의 디자인을 우선으로 고려한다.
 
엄지를 중심으로 디자인하라
사람들은 스마트폰을 사용할 때 압도적으로 엄지를 많이 쓴다. 한 손으로 잡을 때는 당연히 엄지만 가능하고, 두 손으로 잡을 때도 주로 엄지를 쓰기 때문이다. 누구나 엄지는 다른 손가락들보다 약간 크기 때문에 탭 영역이 넓을 필요가 있다. 나는 언제나 탭 영역을 적어도 44×44포인트(16x16mm)로 잡고 간격은 7포인트(2.5mm)를 두려고 한다. 탭 영역은 클수록 좋다. 적어도 44×30포인트(16x11mm)보다 작아서는 안 된다. 또한, 나는 태블릿 디자인에서도 항상 엄지를 중요하게 고려한다. 태블릿에서 엄지를 어쩌다 사용하게 되는 경우라도 정확한 터치 방식이 필요하기 때문이다. 큰 탭 영역은 단순히 엄지만을 위한 것이 아니라 다른 손가락들에도 유용하다.
 
큰 제스처를 포함해라
앞서 나는 탭 영역이 클수록 좋다고 말했다. 그런데 화면 자체보다 더 큰 탭 영역이 있을까? 사용자가 화면을 밀면서 사진을 앞뒤로 넘겨서 보거나 메뉴를 불러올 수 있도록 하는 큰 제스처를 디자인에 포함해라. 이런 제스처를 사용할 수 있다는 사실을 사용자가 모를 경우를 고려해, 화살표 아이콘을 탭해서 다음 사진을 불러오는 것과 같은 대안적인 방법을 함께 제공하는 것이 좋다.
 
어려움에 맞서라
인체공학과 관련해서 당신은 종종 적어도 95%의 사용자들에게 맞는 디자인을 하라는 조언을 들을 것이다. 백분위로 말하면 2.5부터 97.5까지에 해당하는 사용자들이 편안하게 느낄 수 있는 디자인이어야 한다는 것이다. 여기에 포함되지 않는 까다로운 사용자들은 언제나 존재하기 마련이다. 다들 알다시피 모두를 만족시키기란 불가능하다. 그러나 까다로운 사용자들도 편하게 사용할 수 있는 디자인이라면, 이 디자인은 보통의 사용자들 모두에게도 적합한 것이기 쉽다. 그래서 나는 까다로운 사용자들을 염두에 두고 디자인을 한다. 예컨대, 한 손에는 커피를 들고 다른 손에는 핸드폰을 들고 바쁘게 집과 일터를 오가거나 관절염을 앓는 사람들을 우선적으로 떠올리는 것이다.
 
인터랙션을 최소화하라
모바일 기기와의 가장 편한 인터랙션은 과연 무엇일까? 탭이나 스와이프나 누르기 등을 할 필요가 없는 것이다. 즉, 아무런 상호작용을 하지 않는 것이다. 모바일 디자인이 인터랙션을 적게 요구할수록 당신은 인체공학에 대한 걱정을 줄일 수 있다. 나는 언제나 인터랙션을 최소화하려고 노력한다. 모바일 폼을 가차 없이 줄이고, 자동입력을 활용하며, 사용자들이 반드시 알아야 할 정보만 제한적으로 알린다.
 
디자인을 프로토타입하라
모바일 기기를 직접 손에 들고 다양하게 잡아보기 전까지는 인체공학적인지를 판단하기 어렵다. 그래서 나는 가능하면 디자인을 프로토타입 해보려고 노력한다. 내가 가장 잘 사용하는 툴은 액슈어(Axure)인데 다른 훌륭한 프로타이핑 툴들도 많이 있다. 과거에 나는 간단한 종이 프로토타입으로 사용자 테스트를 진행하기도 했다. 종이에 스케치나 프린트를 해서 모바일 기기에 붙여 보는 것만으로도 인체공학에 대해 많은 것을 확인할 수 있다.
 
테스트하고 또 테스트하라
인체공학적 모바일 디자인을 창조하기 위한 확실한 비법을 알고 싶은가? 그것은 끊임없이 되풀이해서 테스트하는 것이다. 다양한 사람과 여러 기기를 대상으로 해당 디자인이 사용하기 편리하다는 것을 확인하면 된다. 간단하다. 모바일 기기들은 말 그대로 ‘이동성(mobile)’에 적합하게 디자인되어야 하므로 나는 될 수 있으면 사무실 밖으로 나가서 평소에 사용되는 환경과 조건 안에서 시험을 진행한다. 특별히 내가 좋아하는 장소는 커피숍이다. 거기서 가능한 많은 사람, 적어도 대여섯 명을 대상으로 디자인을 시험하고, 한 손으로 스마트폰을 사용하는 경우처럼 어려운 조건들에 특히 더 초점을 맞춘다. 제한적인 인터랙션에서도 디자인이 훌륭하게 기능한다면 그 디자인은 대체로 괜찮은 것으로 봐도 무방할 것이다. 진정한 인체공학적 모바일 디자인을 창조하고 싶다면 지속해서 테스트를 반복하는 것이 우선이다.
 
마지막으로 모바일 인터페이스 디자인에 쉽게 활용할 수 있는 요령과 조언, 통찰력을 추가로 얻고자 한다면 조쉬 클라크(Josh Clark)의 명저 <Designing for Touch>를 추천한다.
 
 
 
위 이미지: 디자인 테스트를 위해선 직접 손으로 들어볼 필요가 있다. 액슈어(Axure)를 비롯하여 이에 활용할 수 있는 프로토타이핑 툴이 다수 존재한다.
 
 
 
NET280.tut_ux.david_bowie_shuffle_play c3da46ef45584a8db10330167
 
스포티파이 앱은 넉넉한 탭 영역을 갖춘 엄지 친화적인 디자인을 보인다.
 
 
NET280.tut_ux.iplayer 242dde4cca0e422693ba6e2a4b44b07d
 
BBC 아이플레이어 아이패드 앱에서 제어 기능들은 콘텐츠 밑, 손가락이 쉽게 닿을 수 있는 위치에 배치된다.
 
 


 
 
■ 심층 탐구

사람들은 모바일 기기를 어떻게 잡는가

당신은 보통 모바일 기기를 어떻게 잡는가? 한 손으로? 아니면 두 손으로? 내 경우엔 이미 오래전부터 주로 한 손으로 잡고 다른 손으로 탭한다. 사람들이 모바일 기기를 잡는 방식은 매우 다양하다. 2013년에 실시된 한 연구를 보면(UXFORTHEMATTES.COM), 조사대상자들은 모바일 기기 사용시간의 절반 정도(49%)를 한 손으로만 사용하고, 삼분의 일 정도(36%)는 한 손으로 잡고 다른 손으로 탭하며, 나머지 15% 정도는 두 손으로 잡고 엄지로 탭한다. 스마트폰의 크기가 커지면서 한 손 잡기가 어려워지고 있는 만큼 오늘날에는 두 손 사용의 비율이 점점 커지고 있다고 나는 생각한다.
 
이 연구는 또한 조사대상자들이 사용시간의 90% 동안 스마트폰을 세로로 잡고, 사용 목적에 따라 잡는 방식을 자주 바꾼다고 밝혔다. 예컨대 문자를 보낼 때는 두 손의 엄지를 사용하고 술을 마실 때는 한 손으로 잡는 식이다.
 
당신도 예상하듯 사람들이 태블릿을 잡는 방식은 스마트폰과는 또 다르다. 최근의 연구에 따르면(LEARNINGSOLUTIONSMAG.COM), 사용자들의 대다수(88%)가 앉아서 태블릿을 사용한다. 태블릿 사용자들은 태블릿을 바닥에 놓거나 어딘가에 기대 세워놓을 때 양손으로 탭하고, 태블릿을 잡아야 하거나 다른 사람들이 보지 못하도록 할 때는 한 손을 사용한다. 태블릿 사용자들 역시 세로를 선호한다. 60% 정도가 세로 모드로 태블릿을 사용한다고 한다.
 
 
NET280.tut_ux.mobile_holds f1721b15779d45b690dc256f55b4907f
 
UXMATTERS.COM에서 발췌한 이미지와 수치로 사람들이 스마트폰을 잡는 일반적이고 흔한 세 가지 방식을 보여준다.
 
 
NET280.tut_ux.mobile_reach_zones_mobile_holds b11763136e22495b89
 
같은 곳에서 발췌한 이미지로 초록색은 손이 닿기 쉬운 범위이고 황색은 약간 불편하며 빨간색은 닿기 어려운 곳이다.
 
 


 
 
■ 사례 연구

페이스북의 모바일 앱

모바일은 페이스북에서 아주 중요한 의미를 지닌다. 날마다 거의 10억에 가까운 사람들이 핸드폰으로 페이스북에 들어가고, 폰으로만 들어가는 사람들도 점점 더 많아진다. 다행히 페이스북 팀은 인체공학의 가치를 잘 인지하고 있다. 그래서 페이스북 앱은 인체공학적 모바일 디자인의 좋은 사례를 보여준다.
 
페이스북 팀은 기기를 다양하게 잡을 수 있도록 디자인해야 하고 사용자들이 한 손을 쓰거나 두 손을 쓰거나 또는 세로로 보거나 가로로 보거나 관계없이 디자인이 잘 기능하는지를 확인하는 게 중요하다는 것을 이해하고 있다. 주요 피드는 엄지로 탭하거나 빠르게 튕겨서 쉽게 찾아볼 수 있고, 오른쪽이나 왼쪽으로 밀어서 화면을 넘기는 큰 제스처 입력기능도 지원된다.
 
제어 버튼은 화면 중간과 아랫부분에 크게 자리 잡고 있는데 손가락들이 쉽게 닿을 수 있는 범위다. 특정 포스트를 보기 위해 드롭다운 화살표를 탭하는 것과 같은 다른 많은 기능을 화면 아래에 띄워놓을 수 있다. 콘텐츠는 언제나 제어 버튼들보다 위에 있어서 사용자들이 현재 인터랙션 중인 대상을 확인할 수 있고 링크와 아이콘이 옆에 작지만 충분한 공간을 확보한 채 배치되어 있다. 커다란 콘텐츠 블록들이 넉넉한 탭 영역을 제공한다.
페이스북이 간과한 것이 있다면 그것은 바로 인터랙션의 최소화다. 이용자들이 최대한 오래 머물러 있기를 바라는 페이스북의 입장에서 이는 뜻밖의 실책이 아닐 수 없다. 이 유일한 결점만 보완된다면 인체공학적으로 가히 최고의 디자인이라 할 수 있다.
 
 
없음-1
 
페이스북 앱은 인체공학적 모바일 디자인의 훌륭한 사례로서 한 손 또는 양손 사용이 모두 편리하다
 
 
 
 
 
글쓴이

네일 터너
NEIL TURNER

UXFORTHEMASSES.COM

아스트라제네카(AstraZeneca)에서 UX 디자이너로 근무하고 있으며 UX 디자인, UX 리서치, 애자일 UX 등에 관심이 많다.
 
 
 
 
 
 
 
 
 
 
 
이 기사는 ‘CA 2016년 7월호 : 개척하거나 사라지거나’에 실린 내용입니다.
 
CA_224_201607_WEB