모바일 기기 터치 화면 디자인 A to Z
를 다룬 책을 소개합니다!
*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
Overview
오늘 소개해드릴 책은 조시 클라크의 <터치를 위한 디자인하기>입니다. 저자는 디바이스 전문가이자 모바일 경험 및 반응형 웹디자인 분야의 대가입니다. 그는 철저하게 가상이던 디자인에 물성을 입히며 사용자 경험에 대한 ‘쉽게, 쉽게!’라는 그의 좌우명을 '터치'에 그대로 적용하고 있습니다.
Insight
자, 여러분이 갖고 있는 핸드폰의 키패드를 상상해 보세요. 아마 위와 같겠죠? 지금 우리에게는 매우 익숙하고 또 당연한 키패드 레이아웃입니다. 다이얼을 돌리는 방식에서 누르는 방식으로 대체되던 1963년, 벨 텔레폰 사의 연구원들은 가장 빠르고 안정적으로 작동하는 새로운 버튼을 디자인하기 위해 어떻게 했을까요? 그들은 16종류의 키패드를 디자인하고, 누르는 속도를 최적화하기 위해 1초 이하의 단위까지 측정하면서 버튼의 크기와 간격, 글자의 형태를 변경해가며 테스트했다고 해요.
여러분이 방금, 혹은 어제 화면을 디자인할 때 고민했던 것과 다르다고 느껴지시나요?
아니죠. 놀랍도록 유사합니다. 왜 그럴까요? 손가락과 화면 사이에 상호작용이 존재하기 때문이죠. 저자는 터치를 다루게 되는 순간, 우리가 물리적 형태를 다루는 산업디자인 분야로 들어가는 것이라고 표현합니다. 그럼, 어떻게 터치스크린을 디자인해야 할까요? 개인적으로 인상 깊었던 법칙 몇 가지를 소개해드릴게요!
(스마트폰 사용 방식은 3가지의 기본 그립으로 분류되는데, 사람들은 그립을 바꾸어 가며 사용한다고 하네요. 자세한 내용이 궁금하시다면, 여기)
사용성을 보장하는 최소 범위
저자는 제일 먼저 ‘어떻게 디바이스'를 잡는가에 주목합니다. 핸드폰, 패블릿, 태블릿, 노트북.. 다양한 디바이스들에는 그에 맞는 UI 기준이 있지만, 이 중 특히 엄지손가락은 공통적으로 중요한 역할을 한다는 것은 모두가 알고 있습니다.
‘엄지 존에 맞춰 배치하면 사용성이 높아질 거야' 정말 그럴까요?
물론, 엄지손가락이 대부분의 터치를 도맡고 있다는 사실은 변함이 없습니다. 하지만, 이 책에서는 사람들이 편의성과 특정 상황에 맞추어 그립을 자주 바꿔가며 사용한다는 사실에 주목하고 있습니다. 한 손만 쓰다가 두 손을 모두 쓰기도 하고, 오른손잡이가 잘 쓰지 않는 왼손으로 바꾸는 것처럼 말이죠. 여기서 ‘사람들이 디바이스를 쥐는 방식에 상관없이 가장 불편한 손 위치로도 사용할 수 있는 인터페이스를 제공해야 한다’는 가장 중요한 엄지손가락 법칙이 도출됩니다. 즉 가장 좋은 솔루션은 핵심 기능을 양손의 엄지 존 중 겹치는 화면 중앙에 배치하고, 양 손 모두 편하게 쓸 수 있는 화면 하단을 활용하는 것입니다. 디바이스 사용성을 보장하는 최소한의 범위를 지키는 것이죠. 수없이 봐 왔고 또 익숙했던 엄지 존이 이상적인 해결책이 아니였다는 사실이 무척 흥미로웠습니다.
(위의 솔루션이 만능 치트키는 아닙니다! 책에서는 iOS나 Android, 브라우저 환경을 고려한 터치 디자인 방법에 대해서도 이어서 설명하고 있습니다.)
(아.묻.따 7mm(44px)를 기억하세요!)
탭 타겟의 최소 크기
화면 크기는 변하지만, 손가락은 그렇지 않습니다. 그렇다면 얼마나 커져야 할까요?
‘사람들의 평균 손가락 크기를 측정해야 할까' 다행스럽게도 그러지 않아도 된다네요.
저자에 의하면, 중요한 것은 손가락 자체의 크기가 아닌 화면에 접촉하는 손가락 끝의 너비라고 말합니다. 손가락이 얼마나 두껍고 가는지에 상관없이 화면에 닿는 손가락 끝의 표면적은 놀라울 정도로 일정하다고하니- 정말 신기하죠. 여기서 탭 타겟의 중요한 법칙을 도출할 수 있습니다. ‘디바이스와 상관없이 터치 타겟을 7mm(44px)보다 절대 작아서는 안 된다’는 것입니다. 이외에도 실수로 눌렀을 때, 후회할 기능일수록, 엄지 존에서 멀어질수록 11mm(69px)까지 키워도 좋다고 합니다. 예를 들면 ‘삭제' 같은 버튼이겠죠.
책에서는 이외에도 다양한 제스처 디자인과 구구절절 설명하지 않아도 알 수 있는 터치 UI를 만드는 방법 등 다양한 내용이 담겨있습니다. 또한 단순히 디자인에 그치는 것이 아니라, 책 전반적으로 구현에 대한 간략한 예제 코드가 포함되어 있어 디자이너와 개발자가 함께 북스터디하기에 좋은 책입니다. 저도 동료 개발자분들께 함께 읽자고 제안해보고 싶네요.
여러분은 사람들이 터치스크린에 훨씬 친밀감과 직접적인 느낌을 받는다는 것을 아시나요? 마우스 커서가 주는 가용성과 정확성에도 불구하고, 사람들은 자신의 ‘손'으로 터치한 제품에 더 많은 가치를 부여한다고 합니다. ‘터치'가 이루어질 때 차가운 유리판에 불과했던 대상에 감정 이입이 일어나는 것이죠. 책을 다 읽고 보니, 제가 하고 있는 업무가 사실 알고 보면 무척 감성적인 일이란 생각이 들었습니다.
자, 여러분이 방금, 혹은 어제 디자인한 화면을 떠올려 보세요. 그 화면을 ‘사용하는 느낌'은 어떨 것 같나요? 혹은 어떻게 느끼게 하고 싶으신가요?
One more
터치 인터페이스보다 더 포괄적인 주제지만, 연결 지어 시청하면 좋을 영상 몇 가지를 추천드리려고 합니다.
당신 주변의 모든 것이 컴퓨터가 될 수 있습니다 - 이반 퓨피레프
본 영상에서는 기술과 일상 속 사물의 물리적 세계를 통합하여 미래에 어떤 인터페이스 세계에 도달할 수 있는지에 대해 설명하고 있습니다. 문 손잡이를 손으로 잡거나 꽉 쥐는 인간의 자연스러운 행동조차도 인터페이스가 된다는 점이 흥미롭습니다. ‘터치를 위한 디자인하기' 4장 제스처와 동일한 맥락을 이어가고 있기 때문에 책과 함께 영상을 시청하시면 도움이 될 것 같습니다.
디자인의 첫 번째 비밀은 알아채는 것입니다 - 토니 페델
토니 페텔은 애플에서 오랜 시간 스티브 잡스와 함께 일하며 아이팟 3을 제작한 제품디자이너입니다. 인간은 기본적으로 주변의 환경에 매우 빠르게 적응하는 ‘습관화’ 특징을 갖고 있다고 말합니다. 사람들의 불편을 알아내고 제품에 반영해야 하는 디자이너로써 이런 습관화에서 벗어나는 방법을 제시하고 있는데요. 터치와 제스처의 규범을 앞으로 새롭게 정의해야 할 우리가 어떤 자세로 임해야 할지 근본적인 마인드셋을 위한 영상으로 봐주시면 좋을 것 같습니다.
이번 아티클도 함께해주셔서 고맙습니다. 지금까지 디독 에디터 효정이었습니다.
*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
