더블탭 줌 차단, JS에서 CSS로 넘기다

🤖 440 in / 823 out / 1263 total tokens

모바일에서 더블탭 줌을 막으려고 JS로 touchend 이벤트를 감지하고 있었다. 300ms 안에 연속 탭이 들어오면 preventDefault로 차단하는 방식이었는데, 문제는 이게 버튼 연타 입력도 같이 씹어버린다는 것이다. 사용자가 빠르게 버튼을 누르면 정상적인 입력까지 막혀서 버벅거리는 현상이 발생했다.

결국 JS 핸들러는 제거하고 CSS touch-action 속성으로 처리하기로 했다. 핀치 줌 차단만 JS로 남겨두고, 더블탭 관련 로직은 전부 CSS에 맡겼다. 브라우저 네이티브 기능을 쓰는 게 훨씬 깔끔하다.

<script>
  // 핀치 줌 차단 (더블탭은 CSS touch-action으로 처리)
  document.addEventListener('touchmove', function(e) {
    if (e.touches.length > 1) e.preventDefault();
  }, { passive: false });
</script>

JS로 터치 제어할 땐 의도치 않은 부작용이 없는지 꼭 확인하자. 특히 연속 입력이 중요한 UI에서는 더 신중해야 한다.