brunch

터치 제스처 종류 싹 다 파헤치기

구글이 정의하는 제스처의 종류

by 김현준
02.png
03.png 다양하지만 언뜻 비슷하기도 한 제스처의 종류

탭, 드래그, 스와이프만 알고 계시다면?

제스처는 사용자가 터치를 통해 UI 요소와 상호작용하는 모든 방식을 의미합니다. 사용자는 제스처를 통해 화면을 탐색하고, 행동을 수행하며, 콘텐츠를 직접 변형할 수 있습니다. 제스처는 기기와 사용자 사이의 직관적인 언어로서, 별도의 설명 없이도 동작을 예측할 수 있게 합니다.


따라서 제스처는 단순한 조작 방식이 아니라, 전체 인터랙션 경험의 품질을 결정짓는 중요한 요소입니다. 본 글에서는 탭, 더블 탭, 롱 프레스, 스크롤, 팬, 스와이프, 예측 백, 드래그, 집어서 이동, 핀치, 복합 제스처와 같은 제스처의 종류에 대해 집중적으로 알아보도록 하겠습니다.






04.png 뉴스피드의 카드 영역을 탭 하면 전체 기사가 열립니다.

탭 (Tap)

탭은 가장 기본적인 제스처로, 사용자가 화면의 특정 요소를 가볍게 눌러 대상으로 이동하거나 동작을 실행하는 방식입니다. 이 제스처는 물리적 버튼을 누르는 행위에 가장 가까운 행동이기 때문에, 사용자는 별도의 학습 없이도 즉시 이해할 수 있습니다.


예를 들어 뉴스피드의 카드 영역을 탭 하면 전체 기사가 열리거나, 버튼을 탭 하면 명령이 실행됩니다. 탭 제스처는 앱의 전반적인 탐색 구조를 이끌어가는 주요 수단이며, 시각적 피드백(색상 변화나 리플 효과)을 통해 사용자에게 동작 인식 여부를 명확히 전달해야 합니다.



05.png 사진을 더블 탭하면 전체 화면으로 열립니다.

더블 탭 (Double tap)

더블 탭은 두 번 연속으로 빠르게 탭 하여 콘텐츠를 확대하거나 축소하는 제스처입니다. 주로 이미지나 지도, 문서 보기와 같이 세부 내용을 확인해야 하는 인터페이스에서 사용됩니다. 사용자는 한 번의 터치보다 더 명확한 의도를 표현할 수 있으며, 콘텐츠를 가까이에서 살펴보거나 전체 보기로 돌아가는 등 즉각적인 시각 변화를 경험할 수 있습니다.


예를 들어 사진을 더블 탭하면 전체 화면으로 확장되거나, 두 번째 더블 탭으로 다시 원래 크기로 돌아갑니다. 이 제스처는 시각적인 몰입감을 높이고, 작은 화면에서 세부 정보를 빠르게 접근할 수 있게 합니다.



06.png 리스트 항목을 길게 누르면 선택됩니다.

롱 프레스 (Long press)

롱 프레스는 화면의 요소를 일정 시간 동안 누르고 있어 추가적인 기능이나 메뉴를 노출하는 제스처입니다. 이 동작은 사용자가 단순한 클릭 이상의 의도를 가지고 있을 때 사용되며, 보조적인 옵션이나 컨텍스트 메뉴를 열 때 자주 활용됩니다.


예를 들어 리스트 항목을 길게 누르면 항목이 선택 상태로 전환되거나, 숨겨진 기능이 나타납니다. 롱 프레스는 사용자의 조작 흐름을 방해하지 않으면서도 깊이 있는 상호작용을 제공합니다. 다만, 누르고 있는 동안 즉각적인 시각적 반응(하이라이트, 진동 등)을 주어 시스템이 동작 중임을 명확히 인지시켜야 합니다.



07.png 피드를 세로로 스크롤하여 탐색합니다.

스크롤 (Scroll)

스크롤은 사용자가 화면을 세로, 가로 또는 자유롭게 이동하며 콘텐츠를 탐색할 수 있게 하는 제스처입니다. 이 제스처는 디지털 인터페이스에서 가장 자주 사용되며, 특히 콘텐츠가 화면 크기를 초과할 때 자연스럽게 이동할 수 있도록 돕습니다.


예를 들어 사용자는 피드를 세로로 스크롤하며 새로운 항목을 확인하거나, 이미지 갤러리를 가로로 이동할 수 있습니다. 스크롤은 콘텐츠의 깊이나 양을 인식하게 하며, 스크롤 속도와 애니메이션의 부드러움은 사용자의 전체적인 인상에 큰 영향을 줍니다.



08.png 리스트 항목을 스와이프 하면 추가 작업(삭제, 보관 등)이 표시됩니다.

스와이프 (Swipe)

스와이프는 손가락을 빠르게 이동시켜 화면 간 전환을 수행하거나, 숨겨진 기능을 드러내는 제스처입니다. 예를 들어 리스트 항목을 왼쪽으로 스와이프 하면 삭제나 보관 같은 추가 동작이 나타납니다. 또한 탭 간 전환, 슬라이드 쇼 이동 등에도 자주 사용됩니다.


스와이프 제스처는 직관적이며 속도감 있는 사용자 경험을 제공합니다. 그러나 화면 내 여러 요소가 동시에 스와이프에 반응하지 않도록 조정해야 하며, 제스처 수행 중 시각적 피드백을 통해 진행 상황을 보여주는 것이 중요합니다.


스크롤과 스와이프의 차이점

스크롤과 스와이프는 모두 한 방향으로 쓸어내리는 제스처로 유사해 보입니다. 그러나 일반적으로 스크롤은 연속적이고 느린 제스처를 의미하며 피드 내에서의 콘텐츠 탐색 등에 사용됩니다. 반면 스와이프는 단발적이고 빠른 제스처를 의미하며 사진을 넘기거나 항목을 삭제하는 등의 단순한 액션 실행에 사용됩니다.


팬(Pan)이란?

팬(Pan) 역시 화면을 터치한 상태로 드래그한다는 점은 스크롤과 동일하지만, 팬은 일반적으로 화면에서 손을 떼지 않고 움직인다는 점에서 차이가 있습니다. 화면의 오브젝트를 이동시키거나 무언가를 그리는 데 사용됩니다.


플릭(Flick)이란?

플릭(Flick) 역시 스와이프와 유사하게 한 방향으로 동작하는 제스처이지만, 일반적으로는 브라우저를 새로고침 하거나 드로어를 여는 등 더욱 빠르고 단발적인 제스처를 말합니다.



09.png 하단 시트에서 예측 백 제스처를 사용하면 이전 화면으로 돌아갑니다.

예측 백 (Predictive back)

예측 백은 Android에서 제공하는 제스처로, 사용자가 화면의 가장자리에서 스와이프 하여 이전 화면으로 돌아갈 수 있도록 설계되었습니다. 이 제스처는 하단 시트(Bottom sheet), 내비게이션 바, 내비게이션 레일, 검색 바, 사이드 시트 등과 같은 특정 컴포넌트에서 동작합니다.


사용자는 스와이프를 완전히 마치기 전, 이전 화면으로 이동할지 혹은 현재 화면에 머물지를 결정할 수 있습니다. 이 과정에서 시스템은 미리 보기 애니메이션을 통해 전환 결과를 예측적으로 보여주며, 사용자가 더 명확한 판단을 내릴 수 있게 돕습니다. 예측 백 제스처는 물리적 버튼이 없는 최신 모바일 환경에서 중요한 내비게이션 방식으로 자리 잡고 있습니다.



10.png 리스트 항목을 드래그하여 순서를 변경할 수 있습니다.

드래그 (Drag)

드래그는 사용자가 손가락을 화면에 대고 끌어 요소의 위치를 변경하거나 화면 간 이동을 수행하는 제스처입니다. 예를 들어 리스트의 항목을 드래그하여 순서를 바꾸거나, 객체를 다른 영역으로 옮길 수 있습니다.


이 제스처는 사용자가 직접 무언가를 ‘움직인다’는 물리적 감각을 전달하며, 콘텐츠를 조정할 때 주로 사용됩니다. 드래그가 성공적으로 인식되기 위해서는 손가락의 이동 거리, 속도, 그리고 드롭 위치의 명확한 반응이 중요합니다.



11.png 캘린더 이벤트를 집어 다른 시간대로 이동할 수 있습니다.

집어서 이동 (Pick up and move)

집어서 이동은 롱 프레스와 드래그를 결합한 제스처로, 사용자가 콘텐츠를 잡아 올린 뒤 새 위치로 옮길 수 있도록 설계되었습니다. 예를 들어 사용자는 캘린더 이벤트를 집어 다른 시간대로 이동하거나, 앱 내 카드 순서를 재배치할 수 있습니다.


이 제스처는 실제 물건을 옮기는 것과 유사한 감각을 제공하여, 사용자가 디지털 공간에서도 물리적 직관을 경험하도록 돕습니다. 움직임이 시작되는 순간부터 도착 지점까지의 애니메이션이 자연스럽게 연결되어야 하며, 손가락이 떼어지는 순간 최종 위치가 확정되는 방식으로 설계됩니다.



12.png 사진을 바깥쪽으로 핀치 하면 전체 화면으로 확대됩니다.

핀치 (Pinch)

핀치는 두 손가락을 이용해 화면을 확대하거나 축소하는 제스처입니다. 손가락을 벌리면 확대되고, 오므리면 축소되며, 이미지·지도·차트와 같이 세부 확인이 필요한 콘텐츠에서 자주 사용됩니다.


핀치 제스처는 사용자가 공간적인 깊이와 스케일을 조절할 수 있게 해 주며, 콘텐츠를 더 넓은 시야에서 파악하거나 특정 영역에 집중할 수 있도록 합니다. 자연스러운 확대·축소 속도와 중심 축의 이동은 사용자의 몰입도를 높이며, 물리적 제스처와 디지털 반응이 일치할 때 더 큰 만족감을 제공합니다.


로테이트란?

핀치와 같이 두 손가락으로 터치한 상태에서 손가락을 회전시키는 제스처를 로테이트(Rotate)라고 합니다. 이미지를 회전시킬 때 주로 사용됩니다.



13.png 지도 UI에서 핀치로 확대하고 팬으로 위치를 이동하며 탐색할 수 있습니다.

복합 제스처 (Compound gestures)

복합 제스처는 사용자가 여러 제스처를 연속적이거나 동시에 수행하며 콘텐츠를 제어하는 방식입니다. 예를 들어 지도 UI에서 손가락 두 개로 핀치해 확대하면서 동시에 팬으로 위치를 이동할 수 있습니다.


이 제스처는 사용자가 화면을 더 자유롭게 조작할 수 있게 하며, 하나의 행동으로 여러 명령을 자연스럽게 연결할 수 있게 합니다. 그러나 복합 제스처가 많아질수록 제스처 간 충돌 가능성이 커지므로, 시스템은 가장 중요한 입력을 우선적으로 인식해야 합니다. 복합 제스처는 직관적인 몰입감과 함께 사용자에게 ‘직접 제어하는 느낌’을 극대화합니다.






15.png 모바일과 터치 인터페이스에서 가장 자연스럽고 직관적인 상호작용 방식인 제스처

마치며

제스처를 통해 사용자는 손끝의 움직임만으로 화면을 탐색하고, 콘텐츠를 조작하며, 시스템과 감각적으로 소통할 수 있습니다. 하지만 그만큼 제스처는 명확한 피드백과 일관된 동작이 수반되어야 합니다. 같은 동작이 앱마다 다르게 반응하거나, 피드백이 부족하면 사용자는 혼란을 느끼고 신뢰를 잃게 됩니다.


또한 제스처는 편리하지만, 보이지 않는 인터랙션이라는 점에서 한계를 지닙니다. 버튼이나 메뉴처럼 눈에 보이지 않기 때문에, 사용자가 제스처의 존재를 학습하지 못하면 오히려 접근성을 떨어뜨릴 수 있습니다. 따라서 핵심 기능은 제스처에만 의존하지 않고, 명시적인 조작 경로를 함께 제공해야 합니다.


클릭(Click)과 같은 인풋에 대해서는 다음 글에서 이어서 알아보도록 하겠습니다. 제스처에 대한 더 자세한 내용은 아래 글에서 확인하실 수 있습니다.



keyword
이전 13화UI에서 문장 부호 제대로 쓰는 방법