프론트엔드
Webview에서 핀치 줌(pinch zoom) 구현하기
두줄요약
TouchEvent와 두 터치 간 거리 변화를 이용해 Webview 핀치 줌을 구현했습니다. 기본 확대 차단, 중심점 보정, 멀티터치 처리 시 주의점을 함께 설명합니다.
구조와 흐름
touchstart·touchmove·touchend·touchcancel기반 멀티터치 처리changedTouches의identifier로 진행 중인 두 터치 객체 추적- 두 터치 좌표의 유클리드 거리와 이전 거리 차이로 확대·축소 방향 판별
해결 방법
- 브라우저 기본 핀치 줌 방지를 위한
preventDefault와touch-action: none적용 - 터치 입력 영역과 확대 대상 영역 분리
- 상태 객체의
scale을 갱신하고 CSStransform: scale()렌더링
주의할 점
changedTouches의 유사 배열 및 복수 터치 이벤트 처리 필요- iOS Safari에서 viewport meta만으로 기본 확대 제어 불가
- 기본 확대 차단에 따른 성능·접근성·UX 부작용 검토 필요
적용해볼 점
- 핀치 중심점과
translateX·translateY보정으로 중심 기준 확대 구현 transformOrigin: top left와 대상 기준 좌표 계산의 조합- 드래그, 이동 범위 제한, 최대 확대 비율 추가 가능성
