앱 UX 디자인: 터치 제스처 종류&설계방법 총정리
디자이너가 꼭 알아야 할 모바일 제스처 UX 가이드
안녕하세요, 7년차 UX/UI 디자이너 지밍리입니당~ :)
앱 화면을 설계할 때 단순하게만 생각해보면
제스처는 보통 탭, 스와이프, 드래그 정도만 많이 사용하기 때문에
그렇게 많지 않다고 생각하기 쉬운데요...!!
막상 화면을 자세히 보면 롱 프레스, 핀치, 네비게이션 제스처까지 다양하게 들어가 있어서
생각보다 훨씬 더 많은 움직임들이 앱 경험을 만들고 있더라구요~ㅎㅎ
그래서 오늘은 다양한 터치 제스처들을 한 번에 정리하고,
디자이너가 꼭 기억해두면 좋은 설계 기준까지 함께 알아보려고 해요!ㅎㅎ
앱 터치 제스처 종류 총정리
1. 탭 / 더블 탭
탭은 가장 기본적인 제스처예요.
버튼 클릭, 카드 선택, 링크 이동처럼 대부분의 행동이 탭으로 시작되죠!
그래서 탭 영역을 만들 때는
터치 타깃 크기와 간격을 먼저 확인하는 게 좋아요.
한 손으로 잡고 쓰다가도 실수 없이 누를 수 있는지가 중요하거든요 ㅎㅎ
더블 탭은 빠르게 좋아요 누르기나 이미지 확대처럼
'빠른 보조 액션'에 잘 맞는 제스처예요.
다만 실수 탭이랑 헷갈릴 수 있어서 중요한 기능을 맡기기에는 위험해요...!!
2. 롱 프레스
롱 프레스는 길게 눌러서 숨겨진 옵션을 여는 제스처예요.
편집 모드, 멀티 선택, 보조 메뉴 열기 등에 많이 쓰이죠.
하지만 발견성이 확 떨어지는 제스처라서
사용자가 아예 시도조차 하지 않는 경우도 많아요 ㅠㅠ
그래서 롱 프레스를 넣을 때는 더보기 아이콘 같은
'보이는 진입 경로'를 반드시 함께 두는 편이 좋아요.
모르는 사람도 쓸 수 있고, 아는 사람은 빠르게 들어갈 수 있고… 딱 좋더라구요 ㅎㅎ
3. 스크롤 / 스와이프
스크롤은 리스트나 피드를 탐색할 때 가장 자연스러운 제스처죠.
하지만 세로 스크롤 안에 가로 슬라이더가 많아지면 방향 충돌이 생기기 쉬워요 ㅠㅠ
그래서 구조적으로 가로 스크롤 컴포넌트는
공간을 넉넉히 두고 배치하는 편이 좋아요.
스와이프는 액션을 빠르게 실행할 때 유용해요.
메일 삭제, 보관, 카드 넘기기 같은 패턴이 대표적이죠.
하지만 스크롤과 스와이프가 같은 영역에서 동시에 가능해지면
오작동이 자주 생겨서 꼭 민감도와 방향을 명확하게 정리해두는 게 필요해요!!
4. 드래그
드래그는 요소를 집어서 이동시키는 제스처예요.
순서 변경, 그룹 이동, 블록 편집 등에서 많이 보이죠.
여기서 중요한 건 '피드백'이에요.
드래그 중인 요소가 살짝 떠오르거나,
도착 지점이 하이라이트되면
사용자가 지금 어떤 행동을 하고 있는지 명확히 느낄 수 있어요.
드래그 취소할 때 원래 자리로 자연스럽게 돌아오는 애니메이션도
사용자가 안정감을 느끼는 데 정말 큰 역할을 하겠죠?!
5. 핀치 / 줌
핀치는 두 손가락을 모으거나 벌려서 확대·축소하는 제스처예요.
사진, 지도, 차트처럼 정보 밀도가 높은 화면에서 기본처럼 쓰이죠.
이때는 확대·축소의 최소·최대 배율을 어디에 둘지 먼저 정하는 게 좋아요.
너무 축소하면 정보가 안 보이고, 너무 확대하면 사용자가 길을 잃기 쉬워요.
그래서 몇 번 반복해서 확대·축소를 해보면서
가장 자연스러운 범위를 잡아두는 과정이 꼭 필요해요 ㅎㅎ
6. 네비게이션 제스처
iOS와 Android는 각각 OS 차원에서
뒤로 가기 제스처를 제공하고 있어요.
왼쪽 엣지 스와이프나 화면 가장자리에서 중앙으로 끌어오는 방식 등이죠.
사용자는 이 패턴에 이미 익숙해서
앱에서도 자연스럽게 시도하곤 해요.
그래서 앱 고유 제스처보다 우선순위를 높게 두는 게 안전해요!!
예측 백처럼 뒤로 가기 제스처를 시작하면
어디로 이동할지 미리 보여주는 방식도 늘어나고 있어서
모달 닫기와 화면 이동을 어디서 나눌지 처음부터 정리해두면 좋아요.
7. 복합 제스처
마지막으로는 복합 제스처에요!
두 손가락 탭, 세 손가락 스와이프, 특정 패턴 그리기 등
조금 더 숙련자용 제스처도 있어요.
에디터나 전문 도구에서 자주 등장하죠.
다만 초반에는 사용자 대부분이 발견하지 못한다는 점을 꼭 기억해야 해요...ㅠ
그래서 복합 제스처는 '없어도 모든 기능이 가능한지'를 먼저 체크한 뒤
추가 단축키처럼 넣는 것이 가장 안정적이에요 ㅎㅎ
터치 제스처 설계 기준
기본 플로우 먼저, 제스처는 그다음
제스처만 믿고 버튼·메뉴를 줄이면
사용자가 어느 순간 '어디를 눌러야 하지...?'라는 상태가 돼요 ㅠㅠ
그래서 기본 플로우는 반드시
버튼과 메뉴만으로도 완주할 수 있게 설계해두고,
그 위에 제스처를 덧입히는 방식이 좋아요.
이렇게 하면 사용자층 전체를 안정적으로 커버할 수 있어요!!
발견성과 피드백 함께 설계하기
제스처는 눈에 잘 보이지 않기 때문에
힌트나 반응이 꼭 필요해요.
스와이프 가능한 리스트는 살짝만 밀어도 아이콘이 보이게 하기
롱 프레스 시 색 변화, 진동, 하이라이트 추가하기
이 정도만 있어도 사용자는 제스처를 금방 학습할 수 있어요! ㅎㅎ
실수 터치 대비하기
모바일은 이동 중 사용이 많아서
실수 터치가 자주 일어나요.
그래서 삭제·전송처럼 리스크가 큰 기능에는
실행 취소
추가 확인 단계
이 둘 중 하나는 넣어주는 게 좋다구요~ㅎㅎ
충처: 디자인베이스플랫폼 가이드와 내부 규칙 맞추기
iOS·Android 가이드만 잘 따라도
제스처 충돌 위험을 상당히 줄일 수 있어요.
또 리스트 카드, 타일 등 반복되는 컴포넌트에는
어떤 제스처를 허용할지 간단한 규칙을 만들어두면
서비스 전체 일관성이 훨씬 좋아져요 ㅎㅎ
터치 제스처 설계를 완벽하게!
터치 제스처는 눈에 잘 보이지 않지만
앱의 속도감과 안정감을 크게 결정하는 요소예요.
탭, 스크롤, 스와이프, 드래그, 핀치, 네비게이션까지
어떤 조합을 선택하느냐에 따라
사용자는 전혀 다른 앱처럼 느끼기도 하죠...!
오늘은 다양한 터치 제스처들의 종류와
그걸 설계하는 기준에 대해서 설명드렸는데요~
정말 다양한 터치 제스처가 있기도 하고
매번 디자이너 입장에서는 어떻게 설계할 지 고민이 많이 되더라구요 ㅎㅎ
여러분들께 도움이 됐다면 공감도 부탁드려요!
감사합니당 :)
