CSS touch-action 한눈에 알아보기
touch-action
CSS touch-action 속성이 무엇이며 어떻게 동작하는지 테스트 및 gif로 보기 쉽게 정리해보았습니다.
1. touch-action 속성
기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역입니다.
touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있습니다.
표준 터치 제스쳐로는 터치를 사용한 스크롤(panning)과 여러 손가락을 사용한 확대/축소(pinch zoom)가 존재합니다.
touch-action 속성의 값으로 auto 이외의 값을 줄 경우, 해당 속성에 명시해준 터치 액션만이 브라우저에 의해 처리됩니다. 예를 들어, touch-action: pinch-zoom 속성을 갖는 엘리먼트에서는 터치를 사용한 스크롤이 (자바스크립트로 별도로 처리를 해 주지 않는 이상) 무시됩니다.
2. touch-action 값
1) auto
모든 패닝 및 확대 / 축소 제스처의 브라우저 처리를 활성화합니다.
.promotion {
touch-action: auto; /* 기본 값, 모든 터치 이벤트를 활성화 */
}2) none
모든 패닝 및 확대 / 축소 제스처의 브라우저 처리를 비 활성화합니다.
.promotion {
touch-action: none; /* 기본 값, 모든 터치 이벤트를 비활성화 */
}| auto | none |
|---|---|
 |  |
3) pan-x, pan-y
특정 객체를 터치한 후, 수직 혹은 수평 방향으로만 스크롤의 범위를 제한합니다.
/* example */
.promotion{
touch-action: pan-x; /* 한 손가락 수평(X축) 이동 제스처를 사용합니다. */
}
.promotion2 {
touch-action: pan-y; /* 한 손가락 수직(Y축) 이동 제스처를 사용합니다. */| pan-x | pan-y |
|---|---|
 |  |
4) pinch-zoom
여러 손가락을 통한 확대 & 축소 및 이동을 활성화 합니다.
.promotion {
touch-action: pinch-zoom; /* 핀치 줌(여러 손가락을 사용한 확대/축소)만 허용 */
}| pinch-zoom |
|---|
 |
5) pan-left, pan-right, pan-up, pan-down
지정된 한쪽 방향으로만 스크롤을 시작할 수 있습니다.
다만, 해당 방향으로 스크롤 시작 후, 반대 방향으로 스크롤 가능합니다.
.promotion {
touch-action: pan-left; /* 왼쪽 방향으로의 터치를 사용한 스크롤 허용 */
}
.promotion2 {
touch-action: pan-right; /* 오른쪽 방향으로의 터치를 사용한 스크롤 허용 */
}
.promotion4 {
touch-action: pan-up; /* 위쪽 방향으로의 터치를 사용한 스크롤 허용 */
}
.promotion3 {
touch-action: pan-down; /* 아래쪽 방향으로의 터치를 사용한 스크롤 허용 */
}| pan-left | pan-right | pan-up | pan-down |
|---|---|---|---|
 |  |  |  |
※ 여러 방향을 결합 할 수 있습니다.
다만, 더 간단한 표현이 있을 경우는 제외합니다.
예를 들어, pan-left와 pan-right를 사용할 경우, pan-x라는 더 간단한 표현이 있으므로 제외합니다.
/* example */
.promotion {
touch-action: pan-left pan-down; /* 왼쪽과 아래쪽으로만 끌기 시작할 수 있습니다. */
}
.promotion2 {
touch-action: pan-x pinch-zoom; /* 수평방향으로 끌기와 확대/축소 제스쳐만 가능 */
}
.promotion3 {
touch-action: pan-x pan-y; /* 수평방향과 수직방향으로만 끌기 가능 */
}
/* unavailable */
.promotion4 {
touch-action: pan-left pan-right; /* pan-x와 같으므로 불가 */
}6) manipulation
패닝 및 핀치 확대 / 축소 제스처를 활성화하지만 두 번 탭 하여 확대 / 축소하는 것과 같은 추가 비표준 제스처는 비활성화합니다.
manipulation은 pan-x, pan-y, pinch-zoom 의 세 속성을 합친 것과 같습니다.
.promotion{
touch-action: manipulation; /* 터치를 사용한 스크롤, 핀치 줌만 허용하고 그 외 비표준 동작 (더블 탭으로 확대 등) 불허용 */
}| manipulation |
|---|
 |
해당 예제 코드들은 codepen에서 직접 확인해 보실 수 있습니다.
3. 지원 범위
pan-x , pan-y, manipulation, none, pinch-zoom 은 현재 대부분의 브라우저에서 동작하지만, pan-up, pan-down, pan-left, pan-right 은 일부 브라우저에서만 동작합니다.
또한 double-tap-zoom 속성은 IE에서만 지원하기 때문에 적지 않았습니다.
자세한사항은 mdn 문서 참고하시길 바랍니다.
4. 활용 사례
아이폰12 모든기종에서 발생한 이슈입니다.
아이폰의 새로고침 제스쳐와 배너영역의 플리킹 제스쳐가 충돌이 생겨서, 네이버TV 메인 상단 배너 영역 플리킹시 아래와 같이 들썩임이 발생하였는데요.
상단 배너영역에 touch-action: pan-x;를 주어 스크롤을 수평으로 제한하여 해결하였습니다.
| 들썩임 이슈 | touch-action 처리 후 |
|---|---|
 |  |
5. 접근성
touch-action : none 의 선언은 브라우저의 확대 / 축소 작동을 제한하여 텍스트의 크기를 고정하기 때문에, 사용자의 접근성을 보장하지 못하는 문제를 가지고 있습니다.
WCAG 2.0 SC1.4.4의 Resize text 에서는 아래와 같이 말하고 있습니다.
작성자는 사용자가 콘텐츠를 확장하는 것을 방해하지 않는 웹을 만들 책임이 있으며 만약 이를 제한 할 경우, 텍스트 크기 조정 또는 레이아웃 변경에 대한 직접적인 지원이 있어야 접근성을 충족시킬 수 있습니다.
또한 IOS 10 beta release note 에서
해당 내용 관련하여 IOS 10버전 이후, 애플은 접근성 문제로 인해 user-scalable=no를 의도적으로 비활성화했습니다.
때문에 기존처럼 meta 태그에 user-scalable=no를 추가하여도 사용자 휴대폰 설정에 확대 축소 가능으로 되어있다면 이를 제한할 수 없게 되었습니다.
이 때 touch-action: pan-y 를 사용하면 확대 축소를 제한하고 세로로 스크롤은 유지할 수 있습니다.
하지만 확대 축소 관련하여 다른 방법으로의 지원을 고민해보아야 할 것입니다.
6. 참고
7. 마무리
사용자의 touch 방식을 자바스크립트 코드가 아닌 CSS touch-action을 사용해서 제한할 수 있다는 점이 정말 흥미로웠습니다.
하지만 사용자의 접근성을 해칠 수 있다는 점을 고려해 볼 때, touch-action을 사용해야 하는 경우가 생긴다면 주의 깊게 사용해야 할 것 같습니다.
0개의 댓글