표준 제스처가 되기까지
워브록과 동료들(2009)이 사용자에게 직접 제스처를 정하게 했더니, 확대는 두 손가락을 벌리는 동작으로 많이 모였어요. 애플(n.d.)도 핀치를 확대·축소의 표준 제스처로 안내해요. 노먼(1999)의 말처럼 굳어진 관습은 지켜야 해요. 핀치를 다른 기능에 쓰면 사용자는 당황해요. 다른 표준 제스처는 제스처 내비게이션에서 볼 수 있어요.
웹에서 확대를 막지 마세요
일부 모바일 웹은 viewport 메타 태그에 user-scalable=no나 maximum-scale=1을 넣어 확대를 막아요. MDN(n.d.)은 이것이 저시력 사용자에게 큰 문제가 된다고 경고해요. WCAG 2.2(W3C, 2023)의 1.4.4는 글자를 200%까지 키울 수 있어야 한다고, 1.4.10은 확대해도 가로 스크롤 없이 내용이 다시 배치돼야 한다고 해요. 레이아웃이 깨질까 봐 확대를 막기보다 반응형으로 만드는 것이 맞아요.
지도·사진 뷰어 설계
지도나 사진에서는 손가락 사이를 중심으로 확대돼야 자연스러워요. 최대·최소 배율에 닿으면 살짝 튕기는 피드백을 주고, 확대 중에는 캐러셀의 좌우 넘기기와 충돌하지 않게 해요. 브래그던과 동료들(2011)이 보였듯 걷는 중이나 한 손 사용(Parhi et al., 2006)에서는 두 손가락이 어려워요. 그래서 두 번 탭 확대나 +/− 버튼을 함께 두고, WCAG 2.5.1처럼 여러 손가락 제스처엔 한 손가락 대안을 마련해요. 버튼은 터치 타깃 크기를 지켜요.
자주 묻는 질문
- 웹에서 확대를 막으면 안 되나요?
- 저시력 사용자가 내용을 못 읽게 되므로 막지 않는 게 좋아요. 반응형 레이아웃으로 해결해요.
- 핀치 말고 어떤 대안이 있나요?
- 두 번 탭 확대, +/− 버튼, 글자 크기 설정 같은 한 손가락 방법을 함께 둬요.
출처 검토일: 2026-10-27
참고문헌
- Apple. (n.d.). Gestures. Human Interface Guidelines. 핀치를 확대·축소의 표준 제스처로 설명하는 지침이라, 표준 동작을 바꾸지 말아야 할 이유로 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.). Viewport meta tag. user-scalable=no와 maximum-scale이 확대를 막는 문제를 다뤄, 웹에서 확대를 허용할 때 참고하면 도움이 돼요.
- Wobbrock, J. O., Morris, M. R., & Wilson, A. D. (2009). User-defined gestures for surface computing. In Proceedings of CHI 2009 (pp. 1083–1092). ACM. 사용자가 직접 정의한 제스처 연구에서 확대·축소가 두 손가락 벌리기로 모였다는 점을 참고하면 도움이 돼요.
- Bragdon, A., Nelson, E., Li, Y., & Hinckley, K. (2011). Experimental analysis of touch-screen gesture designs in mobile environments. In Proceedings of CHI 2011 (pp. 403–412). ACM. 걷는 중 같은 모바일 상황에서 제스처 성능을 비교해, 한 손 사용 시 핀치의 한계를 설명할 때 참고하면 도움이 돼요.
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. 관습이 된 동작을 지키라는 논의라, 핀치를 다른 기능에 쓰지 말아야 할 이유로 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 한 손 엄지 사용 연구라, 핀치 대신 두 번 탭이나 확대 버튼을 함께 둘 이유로 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 200% 글자 확대(1.4.4)와 리플로(1.4.10), 다중 포인터 제스처 대안(2.5.1) 기준을 확인할 때 참고하면 도움이 돼요.