[CSS] 모바일웹에서 터치 기능 제한하기

해당 기능이 왜 필요하게 되었는가?

태블릿에서 사용할 모바일 웹앱을 개발하던 도중, 가상키보드로 인한 스크롤 이슈를 접하게 되었습니다. 그 과정에서 알아본 내용을 정리하려 합니다. 돔의 이벤트 핸들러로 스크롤을 제한하는 방식도 찾아보았으나 해당 방법으로는 해결하지 못했고, 이 글에서는 자바스크립트를 핸들링하지 않고 CSS속성을 추가하여 해결하는 방법을 알려드리려 합니다. 

touch-action 사용하기

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

touch-action은 사용자의 터치 이벤트에 대한 브라우저의 기본 동작을 변경하는 CSS 속성입니다. 이 속성을 사용하여 터치 이벤트를 원하는 방식으로 조작하고, 사용자 경험을 개선할 수 있습니다.

 

touch-action의 속성을 정리하자면

1. auto: 브라우저가 가진 기본 동작을 수행

2. none: 터치 이벤트를 무시

3. pan-x: 좌우 드래그 허용

4. pan-y: 상하 드래그 허용

5. pinch-zoom: 핀치줌 허용

6. manipulation: 스크롤, 확대/축소, 드래그 등 동작을 허용하지만 브라우저의 기본동작(더블 탭을 통한 줌인 등)을 제한

 

일반적으로, 모바일 장치에서는 스크롤, 드래그, 확대/축소 등의 동작을 많이 사용하기 때문에 touch-action 속성을 이용하여 브라우저의 기본 동작을 제어하면 때에 따라서는 사용자의 경험을 개선할 수 있습니다.

 

하지만 모든 브라우저에서 지원하는 속성이 아니기 때문에, 브라우저와 버전을 확인하고 사용할 필요가 있습니다. 또한, touch-action과 overflow를 같이 사용할 때에는 touch-action이 동작하지 않는 문제도 있었기에 사용할 때는 주의해서 사용해야 할 것 같습니다.