Webview에서 핀치 줌(pinch zoom) 구현하기

본 글은 모바일 웹 환경에서 핀치 줌(Pinch Zoom) 기능을 직접 구현하는 방법을 다룹니다. 일반적인 모바일 브라우저뿐만 아니라 네이티브 앱의 특정 화면이나 PWA에서도 모바일 웹이 사용되지만, 자바스크립트는 데스크톱 웹에 비해 터치 제스처에 대한 지원이 부족합니다.

특히 핀치 줌은 두 손가락으로 확대/축소하는 동작을 의미하는데, 자바스크립트만으로는 사용자의 제스처를 직접 판단하기 어렵습니다. 이를 위해 터치 정보를 분석하는 로직이 필요하며, 복잡한 경우 use-gesture와 같은 라이브러리를 사용하기도 합니다.

하지만 직접 구현하면 정밀 조작에 대한 이해도를 높이고 이슈 발생 시 빠르게 대응할 수 있습니다. 본 글에서는 HTML과 Typescript를 기반으로 최소한의 기능만을 구현하여 핀치 줌을 구현하는 방법을 소개합니다.