자바스크립트로 모바일 웹 핀치 줌 직접 구현하기

모바일 웹에서 **핀치 줌(Pinch Zoom)**을 구현하려면 브라우저가 제공하는 기본 터치 좌표 데이터를 직접 분석해야 한다. JavaScript는 터치 발생 위치만 제공할 뿐 제스처를 자동 인식하지 않으므로, 개발자가 직접 제스처 판단 로직을 구현해야 한다.

TouchEvent 기반 구현 원리

핀치 줌 구현을 위해 touchstart, touchmove, touchend, touchcancel 이벤트를 활용한다. 각 이벤트의 changedTouches 속성을 통해 터치 객체를 추적하며, clientX와 clientY 좌표를 이용해 두 손가락 사이의 유클리드 거리를 계산한다. 두 손가락 간 거리가 증가하면 확대, 축소되면 축소로 판단하여 타겟 요소의 scale 값을 조정한다.

기본 동작 차단 및 상태 관리

자체 핀치 줌 작동을 위해 브라우저의 기본 확대 기능을 차단해야 한다. touchmove 이벤트에서 touches.length > 1일 때 preventDefault()를 호출하거나, CSS의 touch-action: none을 적용하여 기본 UX를 차단한다. 또한, 터치가 끝날 때 identifier를 기준으로 터치 객체를 배열에서 제거하여 멀티 터치 상태의 일관성을 유지한다.

중심점 보정 및 정밀도 향상

단순 확대가 아닌 자연스러운 UX를 위해 확대 중심점(centerX, centerY)을 계산하여 translateX와 translateY 값을 보정한다. transform-origin을 left top으로 설정하고, 손가락 이동 거리에 따라 scale 값을 0.02 단위로 조절하여 부드러운 줌 인/아웃을 구현한다. 이를 통해 좌석 예매나 그림판 등 정밀한 조작이 필요한 UI에서 자연스러운 제스처 경험을 제공할 수 있다.