제스처는 사용자가 애플리케이션과 상호작용하는 방법을 나타낸다. 웹에서는 마우스와 키보드를 활용한 클릭, 마우스오버, 마우스 인아웃, 프레스, 키 다운, 키 업 등이 있으며, 모바일 앱에서는 손가락을 활용한 탭, 스크롤, 팬, 드래그, 스와이프, 핀치 등의 제스처가 있다.
앱에서 사용되는 제스처의 종류
- 탭(Tap): 사용자가 한 번 손가락으로 화면을 누르는 동작. 버튼을 누르거나, 특정 항목을 선택하는 등의 동작에 사용된다.
- 더블 탭(Double Tap): 사용자가 빠르게 두 번 화면을 누르는 동작. 확대, 축소 등의 동작에 사용된다.
- 드래그(Drag): 사용자가 손가락으로 화면 위를 일정 방향으로 끄는 동작. 스크롤이나, 객체의 위치 이동 등에 사용된다.
- 스와이프(Swipe): 사용자가 손가락으로 화면을 빠르게 밀어내는 동작. 페이지 넘김이나 목록에서 항목 삭제 등에 사용된다.
- 핀치(Pinch): 사용자가 두 손가락을 화면 위에서 벌리거나 모으는 동작. 화면의 확대, 축소에 주로 사용된다.
사용 예시
웹사이트에서 사용자는 마우스를 사용해 버튼을 클릭하거나, 메뉴에 마우스를 올려 메뉴를 펼치는 등의 동작을 수행한다. 모바일 앱에서는 사용자가 손가락으로 화면을 탭하여 버튼을 누르거나, 화면을 드래그하여 스크롤하는 등의 동작을 수행한다.
주의점
- 앱에서는 사용자가 손가락으로 화면을 조작하기 때문에 클릭 가능한 요소의 최소 사이즈가 중요하다. 일반적으로 이 사이즈는 44x44px 또는 48x48px로 설정되어야 한다. 이는 사용자가 요소를 쉽게 조작할 수 있도록 하기 위함이다.
- 제스처는 사용자의 경험에 크게 영향을 미치므로, 사용자가 쉽게 이해하고 사용할 수 있는 제스처를 선택하는 것이 중요하다. 사용자가 예상치 못한 제스처에 당황하거나, 필요 이상으로 복잡한 제스처는 사용자 경험을 저하시킬 수 있다.
- 제스처를 사용해야만 접근할 수 있도록 만들어선 안된다. UI 내 기능이 우선적이고, 제스처는 좀 더 빠르게 기능 접근을 위한 후순위로 봐야 한다.
참조
머티리얼디자인 : https://m2.material.io/design/interaction/gestures.html