Webview에서 핀치 줌(pinch zoom) 구현하기
프론트엔드
Webview에서 핀치 줌(pinch zoom) 구현하기
두줄요약
웹뷰에서 핀치 줌을 직접 구현하는 방법을 설명했습니다. TouchEvent와 좌표 보정을 활용해 확대 중심을 유지하는 로직을 소개했습니다.
핵심 내용
- 모바일 웹과 웹뷰에서 핀치 줌을 직접 구현하는 방법 소개
- TouchEvent의 touchstart, touchmove, touchend, touchcancel와 changedTouches, identifier, clientX, clientY 활용
- 기본 브라우저 확대를 막고, 두 손가락 거리 변화로 zoom in/out 판단
- 확대 중심점을 기준으로 x, y 보정해 자연스러운 줌 동작 구현
적용해볼 점
- 라이브러리 의존 대신 기본 제스처 로직을 직접 제어하는 방식 고려
- 원격 디버거와 모바일 실기기 기반으로 터치 제스처 검증
- transformOrigin, getBoundingClientRect, 터치 히스토리 관리로 정밀한 제스처 구현
