사용자의 모바일 웹뷰 경험을 개선시키는 꿀팁 3가지

모바일 웹뷰 개발 시 프론트엔드에서 적용하면 좋은 것들

올해 웹뷰를 처음 개발해보았는데, 모바일 웹뷰는 마우스 커서가 아닌 사람의 손으로 터치하는 거다보니 자잘하게 신경써야 할 것들이 은근 많았었다. 줄곧 PC 에서 사용하는 웹만 개발해왔던 터라 이런 부분들은 놓치고 갈 뻔 했는데, 같이 일하는 팀원들과 QA 분들 덕분에 신경써서 만들 수 있었다! 

나처럼 웹뷰가 처음인 사람인 사람들을 위해 아래 꿀팁 3가지를 정리해보았으며 많은 도움이 되었으면 좋겠다.

---

1. 모바일에서 두 손으로 확대/축소 못하게 하기

width=device-width : 현재 페이지 너비를 디바이스 스크린 너비로 지정

initial-scale=1.0 : 초기 배율

maximum-scale=1.0 : 늘릴 수 있는 최대 크기

user-scalable : 확대 축소 여부

2. Pinch Zoom 막기 (터치 여러번으로 확대/축소 되는 문제)

iOS 인 경우 모바일 브라우저나 웹뷰에서 터치를 연속으로 하게 되면 페이지가 확대 또는 축소되는 현상이 발견되는데, 위의 코드를 통해 이벤트를 막아 해결할 수 있다. 

3. 입력창을 제외하고 터치 막기

유저가 화면에 있는 텍스트나 이미지 등을 터치해 블록이 잡히지 않도록 입력창을 제외하고 터치를 막아준다.