오늘 소개해드릴 책은 조시 클라크의 <터치를 위한 디자인하기>입니다. 저자는 디바이스 전문가이자 모바일 경험 및 반응형 웹디자인 분야의 대가입니다. 그는 철저하게 가상이던 디자인에 물성을 입히며 사용자 경험에 대한 ‘쉽게, 쉽게!’라는 그의 좌우명을 '터치'에 그대로 적용하고 있습니다.

자, 여러분이 갖고 있는 핸드폰의 키패드를 상상해 보세요. 아마 위와 같겠죠? 지금 우리에게는 매우 익숙하고 또 당연한 키패드 레이아웃입니다. 다이얼을 돌리는 방식에서 누르는 방식으로 대체되던 1963년, 벨 텔레폰 사의 연구원들은 가장 빠르고 안정적으로 작동하는 새로운 버튼을 디자인하기 위해 어떻게 했을까요? 그들은 16종류의 키패드를 디자인하고, 누르는 속도를 최적화하기 위해 1초 이하의 단위까지 측정하면서 버튼의 크기와 간격, 글자의 형태를 변경해가며 테스트했다고 해요.

여러분이 방금, 혹은 어제 화면을 디자인할 때 고민했던 것과 다르다고 느껴지시나요?

아니죠. 놀랍도록 유사합니다. 왜 그럴까요? 손가락과 화면 사이에 상호작용이 존재하기 때문이죠. 저자는 터치를 다루게 되는 순간, 우리가 물리적 형태를 다루는 산업디자인 분야로 들어가는 것이라고 표현합니다. 그럼, 어떻게 터치스크린을 디자인해야 할까요? 개인적으로 인상 깊었던 법칙 몇 가지를 소개해드릴게요!

저자는 제일 먼저 ‘어떻게 디바이스'를 잡는가에 주목합니다. 핸드폰, 패블릿, 태블릿, 노트북.. 다양한 디바이스들에는 그에 맞는 UI 기준이 있지만, 이 중 특히 엄지손가락은 공통적으로 중요한 역할을 한다는 것은 모두가 알고 있습니다.

‘엄지 존에 맞춰 배치하면 사용성이 높아질 거야'   정말 그럴까요?

물론, 엄지손가락이 대부분의 터치를 도맡고 있다는 사실은 변함이 없습니다. 하지만, 이 책에서는 사람들이 편의성과 특정 상황에 맞추어 그립을 자주 바꿔가며 사용한다는 사실에 주목하고 있습니다. 한 손만 쓰다가 두 손을 모두 쓰기도 하고, 오른손잡이가 잘 쓰지 않는 왼손으로 바꾸는 것처럼 말이죠. 여기서 ‘사람들이 디바이스를 쥐는 방식에 상관없이 가장 불편한 손 위치로도 사용할 수 있는 인터페이스를 제공해야 한다’는 가장 중요한 엄지손가락 법칙이 도출됩니다. 즉 가장 좋은 솔루션은 핵심 기능을 양손의 엄지 존 중 겹치는 화면 중앙에 배치하고, 양 손 모두 편하게 쓸 수 있는 화면 하단을 활용하는 것입니다. 디바이스 사용성을 보장하는 최소한의 범위를 지키는 것이죠. 수없이 봐 왔고 또 익숙했던 엄지 존이 이상적인 해결책이 아니였다는 사실이 무척 흥미로웠습니다. 

(위의 솔루션이 만능 치트키는 아닙니다! 책에서는 iOS나 Android, 브라우저 환경을 고려한 터치 디자인 방법에 대해서도 이어서 설명하고 있습니다)

화면 크기는 변하지만, 손가락은 그렇지 않습니다. 그렇다면 얼마나 커져야 할까요? 

‘사람들의 평균 손가락 크기를 측정해야 할까'   다행스럽게도 그러지 않아도 된다네요.

저자에 의하면, 중요한 것은 손가락 자체의 크기가 아닌 화면에 접촉하는 손가락 끝의 너비라고 말합니다. 손가락이 얼마나 두껍고 가는지에 상관없이 화면에 닿는 손가락 끝의 표면적은 놀라울 정도로 일정하다고하니- 정말 신기하죠. 여기서 탭 타겟의 중요한 법칙을 도출할 수 있습니다. ‘디바이스와 상관없이 터치 타겟을 7mm(44px)보다 절대 작아서는 안 된다’는 것입니다. 이외에도 실수로 눌렀을 때, 후회할 기능일수록, 엄지 존에서 멀어질수록 11mm(69px)까지 키워도 좋다고 합니다. 예를 들면 ‘삭제' 같은 버튼이겠죠.

책에서는 이외에도 다양한 제스처 디자인과 구구절절 설명하지 않아도 알 수 있는 터치 UI를 만드는 방법 등 다양한 내용이 담겨있습니다. 또한 단순히 디자인에 그치는 것이 아니라, 책 전반적으로 구현에 대한 간략한 예제 코드가 포함되어 있어 디자이너와 개발자가 함께 북스터디하기에 좋은 책입니다. 저도 동료 개발자분들께 함께 읽자고 제안해보고 싶네요.

디독
d.dok.newsletter@gmail.com
-
수신거부 Unsubscribe