Mobile Gesture
이 포스팅에서는 스마트폰에서 사용하는 제스처에 대해 알아봅니다.
먼저 제스처(Gesture)의 사전적 정의는 다음과 같습니다.
- 상징적 기능을 하는 신체적, 음성적, 감정적 동작 또는 표현.
- 디바이스를 이용함에 있어서 사용자의 동작에 의해 반응할 수 있는 기본 요소.
Touch Gestures
위 사전적 정의에서 알 수 있듯, 제스처는 화면을 컨트롤 하는 UI(User Interface・사용자인터페이스)의 기본 요소 중 하나입니다.
사용자는 디바이스 화면을 누르거나, 쓸거나 하는 동작으로 콘텐츠를 이용합니다.
이러한 제스처의 종류로는 Tap(누르기), Double Tap(두 번 누르기), Drag(누른 채 움직임), Flick(빠르게 스크롤), Pinch(두 손가락으로 넓히기/좁히기), Press(오래 누르기), Rotate(회전하기) 등이 있습니다.
이러한 인터랙션은 UI 가이드 문서를 제작할 때 화면의 플로우(Flow)를 보여주기 위해 주로 사용합니다.
디자이너와 개발자의 소통에 있어서도 관련 용어의 정의를 정확히 알고 있다면 서로에게 명확한 단어로 의사를 전달할 수 있을 것입니다.
1. 탭(Tap)
화면을 한 손가락으로 짧고 가볍게 두드리는 제스처로 주로 콘텐츠를 선택할 때 사용되는 기본 동작 단위입니다.
한 손가락을 화면에 놓은 다음, 손가락을 화면에서 떼면 탭 이벤트가 발생하는데, 이 때 화면 상에서 다른 움직임이 없어야 합니다.
탭은 두드리는 횟수에 따라 싱글 탭(Single Tap), 더블 탭(Double Tap), 트리플 탭(Triple Tap), 쿼드루플 탭(Quadruple Tap) 등으로 구분됩니다.
2. 더블탭 (Double Tap)
화면을 재빨리 두 번 두드리는 제스처입니다.
화면이 확대된 상태에서 두 번 두드려 화면을 축소 시키거나, 화면이 축소된 상태에서 두 번 두드려 화면을 확대할 때 사용합니다.
이뿐만 아니라 화면의 특정 컴포넌트를 편집모드로 전환시킬 때도 사용합니다.
Double Tap은 한번 탭(Tap)하여 실수로 기능이 실행되는 것을 방지하기 위해 비교적 중요도가 높은 기능을 배치합니다
3. 프레스 (Press)
‘터치앤홀드(Touch and Hold)’라고도 사용되는 프레스는 화면에 손가락을 꾹 누르는 제스처입니다.
주로 말풍선, 팝업과 같은 화면의 컴포넌트를 나타나게 하거나, 글씨를 확대하기 위한 용도로 사용됩니다.
때로는 더블탭과 같이 숨겨진 메뉴(Hidden menu)로 존재하며 특정 컴포넌트를 편집 모드로 전환시킬 때 사용하기도 합니다.
4. 팬 (Pan)
손가락을 댄 후, 손을 떼지 않고 계속적으로 드래그하는 움직임을 말합니다.
움직이는 방향이나 시간의 제한은 없으며 손을 뗄 때까지 패닝(Panning)으로 인식합니다.
화면의 오브젝트를 이동시키거나 라인 그리기, 다중 개체 선택, 확대된 이미지 화면을 상하좌우로 움직여서 볼 때 사용합니다.
5. 드래그 (Drag)
화면의 특정 오브젝트에 손가락을 대고 있다가, 정해진 방향으로 움직인 후 손가락을 떼는 것을 말합니다.
특정 오브젝트를 특정 영역으로 이동시킬 때는 ‘드래그앤드롭(Drag & Drop)’ 이라고 표현하기도 합니다.
손가락의 움직임만 보면 스와이프(Swipe)나 팬(Pan)과 유사하지만 드래그는 오브젝트를 이동시킬 때 사용하며, 스와이프와 같은 직선 움직임이 아니라 팬과 같이 제한 없이 이동할 수 있는 것이 차이점입니다.
6. 스와이프 (Swipe)
한 손가락을 화면 위에 터치한 상태에서 일정 거리를 움직이는 제스처입니다.
직선 움직임이라는 제한이 있으나 시간의 제한은 없으므로 손가락을 뗄 때까지 스와이프(Swipe)동작을 인식합니다.
수직 방향의 스와이프는 스크롤(Scroll)이라고도 통용되며 일반적으로 화면 스크롤 내리기, 화면 전환 등에서 사용됩니다.
7. 플릭 (Flick)
손가락을 터치하면서 수평 또는 수직 방향으로 빠르게 스크롤 하는 제스처 입니다.
스와이프와 유사하게 사용될 수 있지만, 차이점은 플릭이 비교적 빠르고, 화면에서 손가락의 움직임이 멈추기 전에 화면에서 손가락을 뗀다는 것입니다.
화면을 빠르게 스크롤 하거나 회전할 때, 드로어 메뉴(Drawer menu)를 연다거나, 오브젝트를 무작위 방향으로 던질 때 사용됩니다.
각 동작은 팬 > 스와이프 > 플릭이라는 포함 관계를 가집니다. 팬이 가장 포괄적이므로 스와이프나 플릭은 팬으로 인식될 수 있으며, 플릭은 스와이프로 인식될 수 있겠지요. 따라서 UI를 설계, 개발할 때 이 점을 유의해서 진행해야 인터페이스가 꼬이는 일을 피할 수 있습니다.
8. 핀치 아웃 & 핀치 인 (Pinch Out & Pinch In)
두 손가락을 화면 위에 터치한 상태에서 서로 다른 방향으로 움직이는 제스처입니다.
확대(Pinch out) 또는 축소(Pinch in)를 위한 제스처이며, 두 손가락의 거리에 따라 확대 값이나 축소 값이 결정됩니다.
핀치 아웃(Pinch out)은 ‘핀치 오픈(Pinch open)’이나 ‘스프레드(Spread)’, 핀치 인(Pinch in)은 ‘핀치 클로즈(Pinch close)’로 통용되는데 이러한 제스처는 이미지를 확대, 축소할 때 뿐만 아니라 페이스북 페이퍼 앱(Paper)와 같은 카드 타입의 UI에서 컨텐츠에 진입하고 빠져나올 때 사용하기도 합니다.
9. 로테이트 (Rotate)
“Touch surface with two fingers and move them in a clockwise or counterclockwise direction"
화면을 수직에서 수평, 수평에서 수직으로 전환하는 제스처입니다. 이미지를 회전시킬 때 사용되는데, 로테이트(Rotate) 역시 두 손가락의 거리에 따라 회전값이 결정 됩니다.
위에서 모바일에서 자주 쓰이는 제스처들을 알아보았습니다.
이제 모바일 뿐만 아니라 랩탑의 트랙패드나 테이블 디스플레이와 같은 터치스크린을 비롯한 다양한 디바이스에서 쓰이는 제스처들을 알아보겠습니다.
인풋(Input)의 매개체가 마우스에서 손가락 터치로 바뀌면서 마우스가 수행했던 기능들에 대응하는 식의 제스처가 많지만, 멀티 터치의 경우 대부분 대응할 수 있는 마우스 제스처가 없어서 사용자 경험이 없는 새로운 제스처로 분류됩니다.
이 경우 설정에 따라 사용자가 원하는 기능을 제스처에 매치해 사용하곤 합니다.
각각의 제스처들이 적절한 기능과 연결되어 직관적인 사용을 유도하는 것은 편리한 사용성의 기반이 됩니다.
10. 두 손가락 탭 (Two Finger Tap)
두 손가락을 이용해 화면을 짧고 가볍게 두드리는 제스처 입니다. 트랙패드에서 두 손가락 탭은 일반적으로 마우스의 ‘우클릭’ 기능입니다.
윈도우 OS에서 트랙패드를 이용해 마우스 우클릭을 하기 위해서는 한 손가락으로 프레스(Press)를 사용하기도 하는데, 맥OS처럼 멀티 터치를 활용하여 두 손가락 탭으로 마우스 우클릭의 기능을 수행하기도 합니다.
또, 더블 탭으로 이미지를 확대했을 때 두 손가락 탭으로 이미지를 다시 축소할 때도 사용합니다.
11. 두 손가락 더블 탭 (Two Finger Double Tap)
두 손가락으로 화면을 재빨리 두 번 두드리는 제스처입니다.
두 손가락 탭이 마우스의 우클릭 기능이라면 두 손가락 더블 탭은 마우스의 오른쪽 버튼을 더블 클릭 하는 것에 대응하겠지만, 명확히 정해진 기능은 없습니다.
태블릿PC에서 두 손가락 더블 탭은 설정에 따라 음악, 영상, 사진을 재생하거나 멈출 때, 사진을 찍을 때, 녹화를 시작하고 멈출 때, 스톱워치를 시작하고 멈출 때 사용하곤 합니다.
12. 두 손가락 스와이프 (Two Finger Swipe)
두 손가락을 이용해 화면을 스와이프(Swipe)하는 제스처입니다. 두 손가락 스와이프는 일반적으로 화면 스크롤 기능입니다.
윈도우OS에서 트랙패드의 오른쪽 가장자리를 스와이프하여 화면을 스크롤 하기도 하지만, 주로 두 손가락 스와이프를 사용합니다.
이 외에도 좌우 가로 두 손가락 스와이프는 맥OS에서 사용자 설정에 따라 화면 가로 스크롤뿐 아니라 웹 화면의 페이지 뒤로, 앞으로의 기능을 수행하기도 합니다.
13. 세 손가락 스와이프 (Three Finger Swipe)
세 손가락을 이용해 화면을 스와이프하는 제스처입니다. 일반적으로 좌우 가로 세 손가락 스와이프는 탐색기나 웹 화면에서 페이지를 뒤로, 앞으로 이동할 때 사용합니다.
또, 세 손가락 스와이프는 지도앱의 로드뷰와 같은 3D 사진 보기 모드에서 이미지가 보이는 View (카메라 앵글)를 상하좌우로 움직일 때에도 사용합니다.
14. 네 손가락 스와이프 (Four Finger Swipe)
네 손가락을 이용해 화면을 스와이프하는 제스처입니다.
네 손가락 좌우 가로 스와이프는 세컨드스크린(Second screen), 서드스크린(Third screen)으로 이동할 때 사용하고, 상하 세로 스와이프는 현재 실행중인 프로그램들을 모두 드러내거나, 다시 이전 화면으로 돌아갈 때 사용합니다.
태블릿PC에서 홈 버튼을 더블 탭하여 멀티태스킹 바를 볼 때, 네 손가락 상하 세로 스와이프를 사용하기도 합니다.
15. 다섯 손가락 핀치 아웃 & 핀치 인 (Five Finger Pinch Out & Pinch In)
다섯 손가락으로 화면을 움켜잡거나(Grab) 다시 펼치는(Spread) 제스처입니다.
다섯 손가락을 모으는 제스처로 활성화되어 있는 창을 모두 최소화하여 데스크탑 화면을 볼 수 있고, 다시 펼치는 제스처로 최소화된 창을 펼쳐 이전 화면으로 돌아갑니다.
16. 프레스 & 탭 (Press and tap)
화면에 한 손가락을 대고, 다른 손가락으로 화면을 짧고 가볍게 두드리는 제스처 입니다.
자주 쓰이는 제스처는 아니지만 jitouch의 사례를 보면 웹 화면에서 좌우 방향을 구분해 탭 간 이동 시 유용하게 사용되고 있습니다.
17. 프레스 & 드래그 (Press and drag)
화면에 한 손가락을 대고, 다른 손가락을 화면에 터치한 상태에서 일정 거리를 움직인 후 손가락을 떼는 제스처 입니다.
마치며
지금까지 디바이스에서 자주 쓰이는 제스처에 대해서 알아보았습니다.
UI 시나리오 작성에 사용되는 제스처의 정의를 머릿속에 명확하게 정립해두면, 깔끔하고 탄탄한 UI 디자인을 제작할 수 있을 뿐만 아니라, 개발자와도 원활한 소통을 할 수 있으리라 생각됩니다.
참고 관련 링크
[출처] [바이널 X] 디자이너와 개발자의 원활한 소통을 도와줄 제스처 총정리
'Dev Environment > 개발 기타 자료' 카테고리의 다른 글
| 웹소켓이란? (3) | 2016.07.19 |
|---|---|
| 프레임워크와 라이브러리의 차이점 (25) | 2016.07.07 |
| Emmet(zen-coding) cheat sheet(에밋 단축어 모음) (0) | 2016.05.17 |
| 모바일 접근성 - Mobile accessibility (0) | 2016.05.11 |
| Web Accessibility(웹 접근성) (0) | 2016.04.28 |
