터치를 위한 디자인
디바이스에 따른 레이아웃
'터치를 위한 디자인' 터치에 관한 이슈를 중심으로 웹과 앱의 사용성에 대한 이론과 사례에 대해 소개하는 책이다. 디바이스별로 테스트를 통해 얻은 터치 영역에 대한 데이터와 그에 따른 인터페이스 설계에 관해 참고할 만한 정보들이 많이 있다. 이 글에서는 디바이스별 엄지 존(Thumb zone)에 따른 레이아웃 부분을 요약하였다. 이 외에도 간편한 입력방식을 위한 컴포넌트 활용, 터치 외 입력방식, 제스쳐, 학습을 위한 튜토리얼 등에 대한 내용도 흥미로운 내용이 많다. 모바일 인터페이스를 디자인 한다면 꼭 한번 읽어보길 권장한다.
https://book.naver.com/bookdb/book_detail.nhn?bid=12248621
1장은 디바이스의 물리적 특징에 따른 레이아웃에 관한 내용으로 스마트폰, 태블릿, 패블릿, 하이브리드 등 크기와 입력장치가 다른 디바이스들의 터치 영역 및 사용성에 관해 다루고 있다.
스마트폰
한 손으로만 사용하는 경우가 49%, 한 손으로 핸드폰을 받치고 다른 손으로 화면을 탭하는 경우가 36%, 두 손으로 핸드폰을 감싸고 양 손의 엄지손가락을 사용하는 경우가 15%
오른 손 엄지만으로 사용하는 경우가 49%+36% = 75%이다.
엄지손가락으로 대부분의 화면 영역을 사용할 수 있지만, 편하게 사용할 수 있는 영역은 화면의 1/3 정도이다.
녹색으로 표시된 엄지 존이 한 손 그립의 사용자가 가장 편안하고 정확하게 터치할 수 있는 영역이다. 빨간 색으로 표시된 곳은 사용을 피하거나, 사용 시 다른 곳보다 터치 영역을 크게 확보해야 한다.
패블릿
크기가 큰 패블릿은 화면 전체를 사용하기 위해 그립을 자주 바꾸거나 양손을 모두 사용하는 경우가 많다. 양 손을 사용할 경우에도 엄지 손가락을 주로 사용하게 되며, 디바이스의 크기 때문에 엄지 존은 더욱 작아진다.
한 손으로 잡는 방법에 따라 엄지 존의 크기와 모양이 변하기도 한다.
그립별로 보면 검지를 사용하는 비율이 높지만 전체적으로는 엄지를 사용하는 그립이 더 많다.
디바이스의 크기 때문에 새끼손가락으로 받쳐서 사용해야 할 경우 엄지 존의 크기가 더 작아진다. 
한 손으로 패블릿의 높은 곳을 쥐는 경우 엄지존은 더 커지지만 화면 하단 절반은 사용을 할 수 없게 된다.태블릿
태블릿은 앉은 자세로 사용하는 경우가 88%이다. 책상에 앉은 자세일 경우 디바이스 하단의 1/3 지점을 한 손으로 잡고 다른 손으로 화면을 누른다.
태블릿은 크고 무거워서 한 손으로 쓰기 어려우므로 대부분의 경우 양 손을 모두 사용한다.
보통 양쪽 가장자리를 잡고 사용하기 때문에 엄지에 가까운 화면의 양쪽 사이드와 상단 코너가 터치하기에 편하다. 특히 하단은 엄지가 거의 닿지 않으며 누운 자세에서는 아래쪽 배젤이 이불이나 옷 등에 가려 보이지 않을 수도 있다.
하이브리드와 노트북
터치 스크린을 제공하는 하이브리드 노트북에서도 전체 사용 시간의 77%를 터치 스크린으로 사용한다. 마우스 커서가 주는 가용성 및 정확성에도 불구하고 터치스크린을 훨씬 친밀하고 직접적으로 느끼는 것이다.
터치, 키보드, 마우스, 트랙패드 사이에서 손을 움직이며 조작흘 하는 것은 힘들 뿐 아니라 피로감이 쌓이게 된다. 대부분의 사용자는 팔을 들지 않고 팔과 키보드를 나란히 바닥에 내려둔 채 화면 하단 코너 부근에서 느슨히 풀고 있는 자세를 취한다고 한다. 역시 화면 크기와 관계 없이 모든 일을 처리하는 것은 엄지손가락인 것이다.
다음은 디바이스별 엄지존에 따른 레이아웃 배치 방식에 대한 내용이다.
컨트롤을 터치하는 손이 컨텐츠를 가리지 않도록 컨트롤은 컨텐츠 아래에 배치해야 한다. 콘텐츠는 화면 중앙과 상단으로, 컨트롤은 코너나 양쪽 에지 및 하단으로 배치해야 한다. 그러나 OS 및 브라우저가 터치가 쉬운 해당 영역을 이미 차지하고 있기 때문에 그 영역을 피해서 작업해야 한다.
핸드폰
iPhone에서 Tab bar나 Toolbar가 화면 하단에 있어서 엄지손가락이 쉽게 닿을 수 있다. Edit 버튼은 화면 상단 오른쪽 위에 위치하며, 사용 가능한 위치이지만 닿기 위해서는 약간의 노력이 필요하다. 편집 버튼은 데이터를 변경하기 때문에 손이 잘 닿지 않는 곳에 둔 것이다. 사람들이 실수로 잘못 누르거나 후회할 만한 기타 액션을 피할 수 있다. 그러나 정보를 변경하는 컨트롤이 주요 기능이라면 해당 컨트롤도 하단에 배치해야 한다.
Android의 경우에는 시스템 버튼이 화면 하단에 위치하기 때문에 컨트롤을 아래에 둘 경우 시스템 버튼과 인접하여 오동작을 불러 일으키기 쉽다. 화면 상단에 컨트롤을 배치하는 것이 해결책이지만, 손이 화면 전체를 가리게 되므로 이상적인 해결책은 아니다. 그러나 불편함과 오동작 중 하나를 선택해야 한다면 불편한 것이 낫다.
안드로이드 디자인 가이드라인에는 앱 내비게이션과 컨트롤을 화면 상단에 배치하도록 제시하고 있다.
콘텐츠를 상단에 두는 법칙은 항상 유효하지만, 누가 먼저 이 영역을 차지하느냐에 따라 달라진다.
안드로이드는 OS버튼이 차지하고 있기 때문에 앱이 이 자리를 양보해야 한다. iOS는 앱이 화면 하단을 차지할 수 있다.
하지만 웹에서는 내비게이션을 상단이나 하단에 고정해서는 안된다. 브라우저 자체의 버튼이 이미 화면의 상하단을 차지하고 있기 때문이다. 특히 가로모드에서는 컨텐츠가 표시되는 영역이 현격히 줄어들게 된다. 그래서 웹에서는 콘텐츠를 우선하고 내비게이션은 화면 하단 고정이 페이지 하단에서 나타나게 하는 것이 좋다.
정리하자면 아래와 같다.
- 아이폰의 경우 앱 컨트롤을 화면 하단에 배치한다.
- 안드로이드의 경우 앱 컨트롤을 화면 상단애 배치한다.
- 웹의 경우 화면 하단이 아닌 웹페이지 하단에 내비게이션을 배치한다.
패블릿
패블릿 화면 상단은 어떤 방식으로 잡든 항상 닿기가 어렵습니다. 핸드폰에서와 마찬가지로 '콘텐츠는 상단에 법칙'에 따라 탭 타깃은 엄지손가락이 닿을 수 있는 동시에 콘텐츠를 방해하지 않는 하단에 배치하면 된다.
안드로이드에서는 크기가 작은 핸드폰에서처럼 화면 상단에 컨트롤을 모아두지 않고, 하단에 별개의 툴바를 만들어서 컨트롤을 옮겨야 한다.(Split Action Bar)
이미지 출처 : Hide Action Bar while showing Split Action Bar
이 방법도 핸드폰에서처럼 OS의 하단 버튼과 탭 실수를 유발하기 쉽기 때문에 좋은 방법은 아니다. 그러나 한 손으로 패블릿을 사용할 때에는 화면 상단에 있는 컨트롤을 탭하는 것은 거의 불가능하기 때문에 컨트롤을 엄지손가락이 닿을 수 있는 영역 안으로 옮기는 것이 그나마 나은 선택이다.
플로팅 트리거 버튼(Floating Trigger Button)도 유용한 해결책이다. 이 버튼은 작고 확장 가능하기 때문에 가로로 화면을 꽉 채우는 툴바를 쌓아 올릴 때 생기는 단점을 줄일 수 있다. 안드로이드에서는 Floating Action Button이라고 한다.
Floating Action Button이미지 출처 : Material.io
그리고 컨트롤 버튼은 화면 상단에 두고 대체할 수 있는 인터렉션을 같이 제공하여도 된다. 예를 들면 탭 컨트롤은 상단에 두고 스와이프 제스처로 탭을 이동할 수 있게 하거나, Pull to refresh 제스처를 이용하여 버튼을 누를 필요 없이 화면을 아래로 당기면 새로고침을 할 수 있도록 해주는 것이다.
태블릿
태블릿에서는 엄지 존이 위와 바깥쪽으로 이동하여 화면 양쪽 에지와 상단 코너 부근을 자주 사용한다.
화면 상단 코너는 자주 사용되는 터치 타깃을 두기 적합하지만, 상단 중앙에 두는 것은 절대 안된다.
닿기 어려운 위치이기도 하고, 이 영역을 탭하는 과정에서 화면과 콘텐츠 전체를 손으로 가리게 되기 때문이다.
페이지 내비게이션 등 콘텐츠를 둘러보거나 바꾸기 위한 컨트롤인 경우, 절대 콘텐츠의 위가 아닌 아래나 사이드에 배치해야 한다.
노트북과 하이브리드
화면이 바로 서 있고 키보드를 사용할 수 있다면 화면 하단 에지가 훨씬 더 사용하기 편해진다. 하이브리드와 노트북의 엄지 존은 화면 하단과 코너 부분에 있다. 주요 컨트롤과 제스처 영역을 하단 코너와 양쪽 사이드에 모아두어야 한다.
터치에 가장 최적화된 윈도우 앱은 자주 사용되는 컨트롤을 화면 중앙에서 에지로 옮겨 놓는다. 화면 오른쪽 에지에서 당기듯 스와이프하면 윈도우의 액션바가 나타난다. 하단 바닥에서 위로 스와이프하면 태스크바가 올라온다.
내용 출처
https://book.naver.com/bookdb/book_detail.nhn?bid=12248621
https://alistapart.com/article/how-we-hold-our-gadgets
https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
