터치 타깃 크기

왜 크기가 문제인가

손가락 끝의 접촉 면은 마우스 커서보다 훨씬 넓고, 누르는 순간 손가락이 목표를 가려요. 보겔과 바우디쉬(2007)는 이를 '팻 핑거' 문제로 부르며 작은 목표를 확대해 보여주는 기법을 제안했어요. 홀츠와 바우디쉬(2010)는 사용자가 누른다고 생각하는 점과 기기가 감지한 점 사이에 체계적인 어긋남이 있다는 것을 밝혔어요. 그래서 피츠의 법칙만으로는 모바일 오류를 충분히 설명할 수 없고, 손가락 오차를 따로 고려해야 해요(Bi et al., 2013).

얼마나 커야 하나

파르히와 동료들(2006)은 한 손 엄지 조작에서 목표가 약 9.2mm보다 작아지면 오류가 커진다고 보고했고, 박영서와 한성호(2010)는 화면 위치에 따라 필요한 크기가 다르다는 것을 보였어요. 대규모 야외 데이터인 헨체와 동료들(2011)의 1억 번 탭 분석도 작은 목표와 화면 가장자리에서 오차가 커지는 패턴을 확인했어요. 이런 근거를 바탕으로 플랫폼 가이드라인은 대략 44pt(iOS)나 48dp(안드로이드)를 권하고, W3C(2023)의 WCAG 2.2는 최소 24×24 CSS 픽셀(2.5.8), 강화 기준 44×44(2.5.5)를 둬요.

간격과 배치

크기만큼 중요한 것이 간격이에요. 작은 링크가 줄지어 붙어 있으면 각각이 충분히 커도 이웃을 잘못 누르게 돼요. 그래서 WCAG 2.5.8은 목표 주변에 24px 원이 겹치지 않으면 예외를 허용하는 '간격' 조건을 둬요. 실무에서는 시각적 크기와 터치 영역을 분리해, 아이콘은 작게 보여도 투명한 패딩으로 영역을 넓혀요. 엄지 영역 바깥이나 화면 모서리에 있는 버튼은 더 크게, 위험한 버튼은 다른 버튼과 떨어뜨려 두는 것이 좋아요. 이는 손떨림이나 시력 저하가 있는 사람에게 특히 중요해서 웹 접근성의 핵심 항목이기도 해요.

자주 묻는 질문

터치 타깃은 최소 몇 픽셀이어야 하나요?

WCAG 2.2 최소 기준은 24×24 CSS 픽셀이고, 편하게 쓰려면 44×44(iOS 44pt, 안드로이드 48dp) 이상을 권장해요.

아이콘이 작으면 어떻게 하나요?

아이콘 그림은 작게 두고 투명한 패딩으로 실제 누르는 영역만 넓히면 디자인을 해치지 않고 오탭을 줄일 수 있어요.

출처 검토일: 2026-10-27

참고문헌

1. Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of the 8th Conference on Human-Computer Interaction with Mobile Devices and Services (pp. 203–210). ACM. 약 9.2mm 전후에서 오류가 안정된다는 결과로 자주 인용돼, 최소 크기의 근거를 볼 때 참고하면 도움이 돼요.
2. Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. 키 크기와 위치의 상호작용을 보여줘, 화면 가장자리 버튼을 더 키울지 판단할 때 참고하면 도움이 돼요.
3. Vogel, D., & Baudisch, P. (2007). Shift: A technique for operating pen-based interfaces using touch. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 657–666). ACM. 손가락이 목표를 가리는 '팻 핑거' 문제와 해결책을 다뤄, 작은 목표 처리법을 볼 때 참고하면 도움이 돼요.
4. Holz, C., & Baudisch, P. (2010). The generalized perceived input point model and how to double touch accuracy by extracting fingerprints. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 581–590). ACM. 사용자가 '누른다고 생각하는 점'과 실제 접촉점의 차이를 밝혀, 터치 오프셋을 이해할 때 참고하면 도움이 돼요.
5. Henze, N., Rukzio, E., & Boll, S. (2011). 100,000,000 taps: Analysis and improvement of touch performance in the large. In Proceedings of the 13th International Conference on Human Computer Interaction with Mobile Devices and Services (pp. 133–142). ACM. 게임 앱으로 1억 번의 탭을 모은 대규모 연구라, 실제 사용 환경의 오차 패턴을 볼 때 참고하면 도움이 돼요.
6. Bi, X., Li, Y., & Zhai, S. (2013). FFitts law: Modeling finger touch with Fitts' law. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1363–1372). ACM. 목표 크기가 작아질 때 손가락 오차가 차지하는 몫을 계산해, 크기 결정을 수치로 볼 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation). 2.5.8 최소 목표 크기(24×24 CSS px)와 2.5.5(44×44) 기준이 있어, 접근성 기준을 확인할 때 참고하면 도움이 돼요.