모바일 사용자 UX의 시작, 터치 제스처

IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 

 

우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 

본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 

터치(Touch)

손가락이 화면 위에 올려진 상태를 말합니다. 예를 들어, 손가락 하나를 화면 위에 올려놓았을 경우 디바이스는 한 손가락의 제스처를 명령어로 인식합니다. 즉 터치의 개수는 손가락의 개수와 일치한다고 생각할 수 있습니다. 

제스처(Gesture)

혹시 떠오르는 장면이 있으신가요? 미래를 배경으로 하는 SF, 공상과학 영화에서 많이들 보셨을 겁니다. 바로 사람의 움직임, 가령 동작이나 표정, 근육의 변화 등을 얘기할 수 있습니다. 이를 디바이스가 수학적 알고리즘으로 변환 및 입력된 신호로 인식하는 과정의 인터페이스를 말합니다.

터치 제스처의 중요성

이러한 신체의 일부분이나 움직임을 기반으로 하는 인터페이스가 인터렉션 디자인에서 중요한 이유는 무엇일까요? 첫번째는 대중화 즉, 최근 가장 많은 사용자 사용하는 인터페이스 방식이기 때문입니다. 스마트폰이나 태블릿과 같은 휴대용 디바이스의 경우, PC 사용에 비해 사용하기 쉬운 인터페이스의 역할이 더욱 강조된다는 점을 생각해보면, 이는 가장 쉽고 직관적인 인터페이스 방법 중 하나입니다. 두 번째 이유는 바로 디자인의 효율성입니다. PC보다 작은 모바일 스크린에선 가능한 모든 픽셀을 콘텐츠 자체에 집중시켜 디자인하게 됩니다. 혹시 상단 혹은 하단에 배치됐던 내비게이션(Navigation) 탭 바(Tap Bar)를 기억하시나요? 요즘은 이 탭 영역을 스크린과 분리시켜 디바이스 자체에 배치하여 지문을 인식하거나 어떠한 제스처를 취하는 방식으로 바뀌었습니다. 현재 우리는 과거 탭 바가 차지하던 공간까지 디자인에 활용할 수 있다는 것입니다. 또한, 터치 제스처 인터페이스는 눈에 보이는 작은 스크린 자체가 뷰포트(viewport)의 전부라는 생각을 탈피하는 계기가 되었습니다. 메인 스크린의 위, 아래 혹은 양옆의 다른 공간을 잡아끌거나(Drag) 미는 (Swipe) 제스처를 취함으로써 스크린 자체보다 더 넓은 사이즈의 영역을 통해 콘텐츠를 효율적으로 선택하고 볼 수 있게 변화했습니다.

터치 제스처의 종류

사용자가 설명서 없이도 직관적으로 사용할 수 있는 모바일 UX / UI를 기획하기 위해서 해야 할 일은 무엇일까요? 기본적으로 다수가 사용하고 있는 터치스크린 중심의 인터렉션을 이해하는 것입니다. 터치 기능을 잘 활용한 디자인은 사용자가 더 빠르게, 효율적인 인터렉션을 경험할 수 있습니다. 

1. 탭(Tap) : 스크린을 한 손가락으로 한 번 터치한 후 즉시 들어 올리는 것을 말합니다. 보통 앱을 실행하거나 어떤 것을 선택할 때 사용됩니다. 손가락을 화면에 놓은 뒤 들어 올리는 순간, 이벤트가 발생합니다. 또한, 스크린을 터치하는 횟수에 따라서 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap) 등이 있습니다. 애플의 아이폰 6s부터 추가된 3D 터치의 경우, 1단계에 해당하는 기본 제스처입니다. 

처] [바이널 X] 디자이너와 개발자의 원활 한 소통을 도와줄 제스처 총정리!|작성자 바이널엑스

2. 더블 탭(Double Tap) : 탭의 종류 중 싱글 탭 다음으로 많이 사용되는 제스처입니다. 더블 탭은 화면에 손가락을 2회 연속 두드리기 때문에 싱글 탭과는 상대적으로 해당 제스처의 목적이 분명한 기능에 배치합니다. 예를 들어 브라우저 사파리 혹은 지도나 이미지를 화면에서 확대하거나 축소하기 위한 제스처로 사용합니다. 

3. 프레스(Press) : 화면 위를 일정 시간 동안 약간의 힘을 가한 상태로 탭 하는 제스처를 프레스라고 합니다. 화면 전체가 바뀌는 것이 아니라, 주로 팝업과 같이 숨겨진 메뉴를 불러오거나 기능을 실행할 때 사용됩니다. 프레스는 '터치 앤 홀드(Touch and Hold)'라는 용어로 불리기도 하며, 추가로 아이폰 6s부터 추가된 3D 터치 중 2단계 제스처(Peek 엿보기)입니다. 

3-2. 세게 누르기 (Deep press) : 프레스보다 더 힘을 줘 길게 누르는 방식으로, 아이폰 6s부터 추가된 3D 터치 중3단계에 해당하는 제스처(Pop 튀어나오기)입니다.

4. 팬(Pan) : 손가락을 떼지 않고 계속 드래그(Drag) 하는 제스처로, 시간과 방향의 제한 없이 사용자가 손가락을 뗄 때까지 패닝(Panning)으로 인식합니다. 가령, 화면에서 오브젝트를 이동할 때, 라인 그리기 혹은 확대된 이미지를 상하좌우로 움직여 탐색할 때 사용하는 제스처 방식입니다.

5. 스와이프(Swipe) : 스와이프는 손가락을 댄 후, 일직선으로 드래그하는 것을 말합니다. 시간의 제한은 없으나 직선 움직임이라는 제한이 있습니다. 보통 화면 탐색 시, 스크롤(Scroll) 기능으로 사용합니다.

6. 플릭(Flick) : 스와이프에서 좀 더 빠르게 한 방향으로 미는 것을 말합니다. 가령 탐색하던 브라우저 화면을 불러오거나 다른 화면으로 넘길 때 혹은 숨겨진 드로어 메뉴(Drawer menu)를 열 때 사용됩니다.

위 동작 UI를 기획 및 배치할 때 주의해야 할 점은 바로 팬 > 스와이프 > 플릭 제스처라는 포함 관계입니다. 즉 스와이프나 플릭의 경우 팬으로 명령어를 인식할 수 있고 플릭의 경우 스와이프로 인식될 수 있으므로 터치 UI를 설계할 때 제스처의 각 포함관계와 특징을 살펴 구성해야 합니다.

7. 드래그 (Drag) : 손가락의 제스처만 보면, 스와이프나 팬과 유사하지만, 드래그는 오브젝트를 이동할 때나 정해진 방향으로 움직인 후 손가락을 떼는 행동을 말합니다. 팬처럼 제한 없이 이동할 수 있지만, 스와이프처럼 직선 움직임이 아니어도 인식이 가능합니다. 오브젝트를 이동시킬 때나 텍스트를 복사할 때 주로 사용하고 있습니다.

8. 핀치 인/아웃 (Pinch in/out) : 위 동작들과 다르게 손가락 두 개를 화면에 댄 상태에서 두 손가락 사이를 넓히거나(out) 좁히는(in) 제스처를 말합니다. 더블 탭 외에 지도나 이미지를 볼 때 확대/축소 기능으로 사용됩니다. 핀치 아웃은 핀치 오픈(Pinch Open) 혹은 스프레드(Spread)로, 핀치 인은 핀치 클로즈(Pinch Close)라는 용어로도 알려져 있습니다. 

 

9. 로테이트 (Rotate) : 로테이트도 핀치처럼 두 손가락을 이용하는데, 오브젝트가 도는 회전 값을 인식하는데 차이가 있습니다. 보통 화면에서 이미지를 회전시킬 때 사용되는 제스처 입니다. 

지금까지 모바일에서 자주 쓰이는 기본적인 제스처에 대하여 알아봤습니다. 모바일 플랫폼에 따라 약간의 차이가 있지만, 기본적인 제스처에 대한 정의와 이해는 개발자와 원활한 소통뿐 아니라 깔끔하고 체계적인 UX, UI 디자인을 완성할 수 있는 기본기가 될 것입니다. 

by 고양이 발자국