Webview PinchZoom 구현하기

오늘날에는 다양한 곳에서 모바일 웹이 사용되고 있습니다. 일반적인 모바일 브라우저에서 사용되는 것뿐만 아니라, 네이티브 앱의 특정 화면을 담당하기도 하고, 혹은 PWA 같이 앱 전체가 모바일 웹으로 구성되는 경우도 있습니다. 자바스크립트 또한 이에 맞춰 모바일 웹을 지원하는 여러 가지 신규 스펙들이 등장하고 있지만 데스크톱 웹에 비해 비교적 지원이 아쉽습니다. 대표적으로 핀치 줌(Pinch Zoom, 두 손가락으로 대상을 확대하고 축소하는 동작)을 구현하는 상황을 예시로 들 수 있을 텐데요. 자바스크립트는 스크린의 어느 지점에 터치가 발생했다는 정보를 제공할 뿐, 어떤 제스처인지 판단을 해주지 않기 때문입니다. 따라서 각 지점의 터치 정보를 분석하여 사용자가 어떤 제스처를 의도했는지 판단하는 로직을 작성해야 하고, 그 과정이 복잡하기 때문에 use-gesture 같은 라이브러리를 사용하여 구현하곤 합니다. drag and pinch zoom. by use-gesture library (출처: https://www.npmjs.com/package/@use-gesture/react) 물론 잘 알려진 라이브러리를 사용하는 건 좋은 품질의 기능을 제공하고 개선 작업도 많은 컨트리뷰터에 의해 이루어지기 때문에 충분히 합리적입니다. 하지만 한 번쯤은 직접 구현해 본다면, 정밀 조작에 대한 이해도가 높아지고 이슈에 부딪혔을 때 빠르게 대응할 수 있을 것입니다. 저도 사용하던 라이브러리가 deprecated 되어 더 이상 터치 제스처의 기능이 유지보수가 불가능하게 된 적이 있었고, 간단한 로직은 직접 구현하는 것으로 대체함으로써 이슈가 발생하거나 기획의 변경이 있을 때 직접 터치 로직을 개선함으로써 즉각적으로 대응할 수 있도록 변경했던 경험이 있습니다. 터치에 의한 제스처를 판단할 때 상황에 따라서 많은 요소와 최적화를 고려해야 하기 때문에 해당 글에서는 최소한의 기능만 구현하여 핀치 줌(Pinch Zoom)을 구현하는 방법을 알아보도록 하겠습니다. 해당 글은 HTML과 Typescript 기반으로 작성되었습니다. 타입 정의에 대한 내용은 생략합니다. 개발 환경 개발하기에 앞서 해당 글에서는 어떤 방식으로 개발과 디버깅을 진행했는지 설명이 필요할 것 같습니다. 멀티 터치 이벤트를 직접 확인하는 과정은 마우스를 사용하는 데스크톱에서는 일반적으로는 불가능하며, 터치 이벤트의 다양한 휴먼에러를 확인하기 위해서는 직접 모바일 환경에서 사용해 보는 것이 최선이라 생각합니다. 따라서 크롬의 원격 디버거를 활용하여 개발을 진행하도록 하겠습니다. 사파리를 활용해야 하는 아이폰의 경우 web inspector라는 기능을 통해 원격 디버깅을 해야 합니다. 관련 글이 있어 첨부합니다 1. Local Network 사용하여 개발 서버 접근하기 수정 내용이 바로 반영되는 것을 확인하기 위해 Local Network를 이용하도록 하겠습니다. 각자의 개발 서버를 구동하고 모바일 브라우저에서 로컬 ip:포트 번호를 이용해 접근합니다. 해당 글에서는 html을 Live Server 익스텐션으로 구동하여 서빙하고 있으며 5500 포트 번호를 사용합니다. 로컬 네트워크로 접속한 화면 2. 원격 디버거로 모바일 화면 동기화 모바일 디바이스를 유선으로 본체(노트북)에 연결합니다. 무선 연결도 가능하나 이 글에서는 생략합니다. 크롬 주소창에 chrome://inspect/#devices를 입력하여 DevTools에 접속합니다. Remote Target에 연결된 디바이스를 inspect 하여 모바일 화면을 크롬으로 송출합니다. 이제 크롬의 다양한 도구들을 활용하여 웹 뷰 환경을 실시간으로 디버깅이 가능합니다. chrome 원격 디버거 오픈 TouchEvent 사용자가 웹 뷰의 HTMLElement를 터치하면 다양한 터치 이벤트가 발생합니다. 제스처를 구현하기 위해 사용할 이벤트는 아래 네 가지입니다. touchstart (터치가 시작되는 순간 발생) touchmove (터치한 상태에서 움직이면 발생) touchend (터치가 끝났을 때 발생) touchcancel (터치가 취소되면 발생) touchstart에 의해 발생하는 TouchEvent 객체 각 이벤트에서 changedTouches 값을 가져오면 이벤트가 등록된 엘리먼트로부터 시작된 터치 정보를 가져올 수 있는데요. 중요한 점은 터치 객체가 유사 배열 객체로 들어온다는 것입니다. 기본적으로 터치는 멀티 터치를 지원하기 때문에 여러 개의 터치 정보가 담겨있을 수 있습니다. 따라서 이벤트를 처리할 때 해당 부분을 고려하여 처리해야만 오작동을 방지할 수 있습니다. property 중 touches와 targetTouches는 바뀌지 않은 정적인 터치 정보도 가져오기 때문에 핀치 줌에는 적합하지 않습니다. zoom in을 구현하기 위해 touch 객체에서 사용하고자 하는 값은 다음과 같습니다. identifier : 각 터치 객체의 고유 id 값 clientX : 브라우저 화면에서 터치된 지점의 X 좌표 clientY : 브라우저 화면에서 터치된 지점의 Y 좌표 구현하기 1. 기본 확대 축소 막기 핀치 줌을 구현하기 위해서는 원하는 부분만 zoom in이 돼야 하므로 브라우저의 기본 핀치 줌 기능을 막아야 합니다. 모든 화면이 확대되어 버리는 이슈 일반적으로 대부분의 브라우저는 핀치 줌을 하면 전체 브라우저가 확대되는데요. 과거에는 viewport meta 태그를 설정하는 방법을 통해 자체 핀치 줌을 막을 수 있었습니다. Webview PinchZoom 구현하기 ... 하지만 ios 버전이 올라가면서 더 이상 safari에서는 viewport를 통해 브라우저를 확대하지 못하게 하는 방법이 불가능하게 되었습니다. 이는 반드시 확대해야 하는 유저들의 경험을 해칠 수 있다고 판단했기 때문입니다. 이에 따라 삼성 브라우저 등 몇몇 브라우저들도 마찬가지로 제어가 불가능하게 되었으며, 따라서 좀 더 hacky 한 방법으로 브라우저의 자체 확대 축소를 제어해야 합니다. // 자바스크립트로 기본 핀치 줌 제어 // 상황에 따라 wheel, touchstart 등 다른 이벤트도 막아야 할 수 있다. export default function preventZoom() ( function listener(event: TouchEvent) ( // 핀치 줌의 경우 두 개 이상의 이벤트가 발생한다. if (event.touches.length > 1) ( event.preventDefault() ) ) document.addEventListener('touchmove', listener, ( passive: false )) ) preventZoom() 또는 /* css로 핀치 줌 제어, body 혹은 자동으로 scale 되는 대상에 적용 */ .preventTouch ( touch-action: none ) 핀치가 발생하는 경우 JS를 통해 기본동작을 제어하도록 설정하거나, CSS로 터치 이벤트를 막는 등의 방식을 사용해야 합니다. 성능을 비롯해 여러 가지 사이드 이펙트가 없는지 고려해야 하고, 공식적으로 권장하는 UX가 아니라는 것을 염두에 둬야 합니다. 2. Pinch Zoom 핀치 줌을 구현하기 위해 터치 이벤트를 받는 스크린 영역과 실제 확대되는 영역을 구분하도록 하겠습니다. 두 영역을 구분하는 이유는 UX 적인 측면에서 좀 더 낫기 때문입니다. 타겟에 이벤트가 걸려있다면, 가령 너무 작아져 버린 타겟을 확대하는 데 어려움을 겪을 것입니다. 이때 타겟의 기본 사이즈(scale(1))는 스크린과 동일하게 설정하는 것이 계산에 용이하기에 본 글에서는 img-wrapper를 추가했습니다. 스크린과 타겟의 관계(타겟이 확대된 상태) //index.ts const screen = document.getElementById('screen') as HTMLElement const target = document.getElementById('img-wrapper') as HTMLElement // 터치 이벤트 리스너 제어 touchInit(screen, target) //touch.ts export function touchInit(screen: HTMLElement, target: HTMLElement) ( // 타겟의 상태 값 const state: TransformState = ( scale: 1, ) // 타겟의 상태 값 수정 및 랜더링 const setState = (( scale ): TransformState) => ( state.scale = scale target.style.transform = `scale($(scale))` ) // 상태 값을 가져오는 함수 const getState = () => ( return state ) pinchZoom(( screen, target, setState, getState )) ) 엘리먼트를 바로 핀치 줌으로 연결하지 않고 한 touchInit으로 래핑 하여 사용하는 이유는 추후에 드래그 이벤트가 추가될 때 상태 값을 공유하기 위함입니다. 스코프에 대한 개념은 생략하도록 하겠습니다. 다음으로 핀치 줌 함수에서는 각 터치 이벤트에 핸들러를 연결하고 zoom이 발생할 때마다 ±0.02 만큼 타겟의 크기를 조절하도록 하겠습니다. 좀 더 정밀하게 구현한다면 zoom이 발생한 정도에 맞춰서 크기를 조절할 수 있을 것입니다. //pinchZoom.ts export default function pinchZoom(( screen, target, setState, getState ): Parameters) ( const handlePinch = (( zoom ): ( zoom: number )) => ( if (zoom === 0) ( return ) const ( scale ) = getState() const zoomWeight = 0.02 const nextScale = scale + (zoom > 0 ? zoomWeight : -zoomWeight) const nextState = ( scale: nextScale, ) setState(nextState) ) screen.addEventListener('touchstart', ev => touchStartHandler(( ev ))) screen.addEventListener('touchmove', ev => touchMoveHandler(( ev, onPinch: handlePinch ))) screen.addEventListener('touchend', ev => touchEndHandler(( ev ))) screen.addEventListener('touchcancel', ev => touchEndHandler(( ev ))) ) 이제 엘리먼트와 이벤트 핸들러를 연동하는 작업은 마무리되었고 본격적으로 핀치 줌 제스처를 캐치하는 작업이 필요합니다. 여기서부터는 핀치 줌을 판단하기 위한 몇 가지 동작을 이해하고 코드를 살펴봐야 합니다. 핀치 줌은 두 개의 점이 이동하고 있을 때 발생한다. 핀치 줌은 두 점 사이의 거리가 더 멀어질 경우 zoom in, 좁아질 경우 zoom out으로 판단한다. 두 점이 이동하는 동안 자신의 이전 위치를 기억해야 한다. 1번과 2번은 수학적으로 두 점 사이의 거리 공식을 통해 구현되며, 3번은 배열에 각 터치 객체를 저장하고 id 값을 통해 가져옴으로 해결할 수 있습니다. d가 커질수록 zoom in으로 판단 핸들러 구성과 필요한 데이터를 살펴보도록 하겠습니다. let prevDiff = -1 const evHistory: Touch[] = [] 핀치 줌이 진행되는 동안의 두 점 사이의 거리와 진행 중인 터치 객체들을 저장하는 배열을 생성합니다. // 터치 시작 function touchStartHandler(( ev ): TouchStart) ( const touches = ev.changedTouches if (evHistory.length + touches.length <= 2) ( for (let i = 0 i < touches.length i++) ( const touch = touches[i] evHistory.push(touch) ) ) ) // 터치 끝 function touchEndHandler(( ev ): TouchEnd) ( const touches = ev.changedTouches for (let i = 0 i < touches.length i++) ( const touch = touches[i] const index = evHistory.findIndex(cachedEv => cachedEv.identifier === touch.identifier) if (index > -1) ( evHistory.splice(index, 1) ) ) ) 터치가 시작하고 끝날 때 진행 중인 멀티 터치를 제외한 다른 터치가 간섭하지 않도록 설정합니다. 이때 앞서 설명해 드렸던 대로 changedTouches는 여러 개의 터치 이벤트가 들어올 수 있으므로 반드시 고려해야 합니다. // 터치 이동시 핀치 발생 체크 function touchMoveHandler(( ev, onPinch ): TouchMove) ( const touches = ev.changedTouches for (let i = 0 i < touches.length i++) ( const touch = touches[i] const index = evHistory.findIndex(cachedEv => cachedEv.identifier === touch.identifier) if (index !== -1) ( evHistory[index] = touch // 두 개의 터치가 진행중인 경우 핀치 줌으로 판단한다 if (evHistory.length === 2) ( const xDiff = evHistory[0].clientX - evHistory[1].clientX const yDiff = evHistory[0].clientY - evHistory[1].clientY const curDiff = Math.sqrt(xDiff * xDiff + yDiff * yDiff) // 첫 핀치의 경우 비교군이 없으므로 prevDiff가 -1인 경우 생략한다. if (prevDiff > 0) ( const zoom = curDiff - prevDiff onPinch(( zoom )) ) prevDiff = curDiff ) ) ) ) 우선 터치가 움직이면서 발생하는 터치 객체가 현재 핀치 줌을 위해 사용되고 있는 터치 객체인지 id 값을 통해 판단합니다. 핀치가 진행 중인 터치 객체로 판단되면 변경된 위치로 터치 객체를 갱신해 주고 유클리드 거리 공식을 통해 거리를 계산합니다. 마지막으로 이전 거리와의 차를 계산하여 콜백 함수를 호출합니다. 핀치 줌 인 3. Advanced Pinch Zoom 위에서 가장 간단한 방식으로 핀치 줌을 구현해 봤습니다. 하지만 조금 아쉬운 부분이 있는데요. 사용자가 핀치 줌을 사용할 때는 확대하는 중심 지점을 기준으로 확대하길 원할 것입니다. 따라서 x, y 값을 조정하여 해당 기능을 구현해 보도록 하겠습니다. 확대될 때 x, y 값을 보정해준다. 확대/축소를 하는 경우 핀치 줌을 하는 두 손가락의 중심점이 확대/축소 방향으로 멀어지기 때문에 그 차이를 계산하여 보정해주는 공식이 필요합니다. 그리고 이에 맞춰 코드를 수정하도록 합니다. // touch.ts const state: TransformState = ( x: 0, y: 0, scale: 1, ) const setState = (( x, y, scale ): TransformState) => ( state.x = x state.y = y state.scale = scale target.style.transform = `translateX($(x)px) translateY($(y)px) scale($(scale))`) 해당 코드를 위와 같이 수정하여 x, y 값에 따른 위치 변화를 가능하도록 합니다. //pinchZoom.ts target.style.transformOrigin = 'top left' const handlePinch = (( zoom, x: centerX, y: centerY ): ( zoom: number x: number y: number )) => ( if (zoom === 0) ( return ) const ( x, y, scale ) = getState() const zoomWeight = 0.02 const nextScale = scale + (zoom > 0 ? zoomWeight : -zoomWeight) const biasX = ((centerX - x) * nextScale) / scale - (centerX - x) const biasY = ((centerY - y) * nextScale) / scale - (centerY - y) const nextX = x - biasX const nextY = y - biasY const nextState = ( x: nextX, y: nextY, scale: nextScale, ) setState(nextState) ) 그 후 위와 같은 공식을 추가하여 핀치 줌을 하는 중심점을 기준으로 확대되었을 때 확대되는 지점은 동일한 위치에 존재하도록 유지합니다. 여기서 중요한 것은 위의 공식은 좌상단을 기준으로 scale을 조정하게 되었을 때의 공식이므로 transformOrigin을 left top으로 반드시 설정해 줘야 합니다. // touchMoveHandler ... if (prevDiff > 0) ( const zoom = curDiff - prevDiff const x = (evHistory[0].clientX + evHistory[1].clientX) / 2 const y = (evHistory[0].clientY + evHistory[1].clientY) / 2 const ( top, left ) = (ev.currentTarget as HTMLElement).getBoundingClientRect() onPinch(( zoom, x: x - left, y: y - top ))) 마지막으로 핀치 줌의 중심 지점이 어느 지점인지 좌표를 가져오도록 touchMoveHandler 값을 수정합니다. 여기서 터치 이벤트는 뷰포트 기준의 좌표를 제공할 뿐 스크린 객체 기준의 좌표를 제공하지 않기 때문에 객체의 getBoundingClientRect()를 활용해 직접 계산해 줍니다. 해당 값은 스크린이 고정인 이상 값이 변하지 않으므로 객체 참조를 줄이기 위해 미리 저장해서 사용하는 것도 좋은 방법입니다. 개선된 핀치 줌인 맺음말 이번 글에서는 핀치 줌을 구현해 보았습니다. 여기서는 설명하지 않았지만 드래그, 좌우 이동 제한, zoom in 최댓값 설정 등 여러 가지 기능을 추가해서 좀 더 UX 적인 측면을 보완할 수 있을 것입니다. 핀치 줌은 좌석 예매 시스템, 그림판 등 여러 분야에서 사용하는 작은 기능 하나일 뿐이지만 해당 기능

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

댓글 0개