핵심 요약
카카오엔터테인먼트가 HTML과 TypeScript를 활용해 WebView에서 핀치 줌 제스처를 직접 구현하는 방법을 소개했다.
구현 방법
- 스크린과 타깃 영역을 분리하고 touchstart, touchmove, touchend, touchcancel 이벤트를 사용해 다중 터치를 추적
- 두 손가락 간의 거리 차이로 확대/축소를 판단하고, 중심점을 따라 확대되도록 scale과 x,y 보정을 적용
- transform: translateX, translateY, scale로 렌더링하고 transform-origin를 left top으로 설정해 중심 보정을 용이하게 처리
주요 결과
- 중심점 기반 확대를 위한 보정식으로 자연스러운 핀치 줌이 구현됨
- 기본 핀치 확대 차단과 안정적 제스처 처리로 모바일 WebView UX가 향상될 수 있음
