모바일 환경의 애플리케이션에서는 보통 두 손가락을 이용한 pinch zoom in/out 되지 않는다. 현재 진행하고 있는 프로젝트는 푸시 알림 지원을 위해 Next.js App Router + PWA 조합을 사용하고 있었다.
🤔문제
핀치 줌인/줌아웃에 대한 아무런 설정이 적용되어 있지 않아, 어느 화면에서나 두 손가락으로 확대/축소가 가능했다. 모바일에서 입력창 포커스 시 줌인되는 현상을 종종 경험한 적이 있을텐데, 이때 줌인으로 인해 네비게이션바가 뷰포트를 벗어나서 다시 줌아웃 하는 불편함을 느꼈을 수 있다.
현재 프로젝트에서도 특별히 줌인을 지원하는 페이지가 없었기 때문에 이러한 동작을 비활성화할 필요가 생겼다.
😎해결
<meta> 태그의 뷰포트를 조정하면 쉽게 해결할 수 있다.
<meta name="viewport" content="width=device-width, user-scalable=no" />Next.js에서는 layout.js(ts)에서 viewport를 지정할 수 있다.
// app/layout.ts
import type { Viewport } from "next"; // ts 사용하는 경우
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};이 방식은 PWA 환경에서는 잘 적용되었지만, Safari, Chrome 모바일 웹 브라우저에서는 동작하지 않았다. 찾아보니 iOS 특정 버전 이상부터는 해당 동작을 막았다고 한다. 따라서 CSS의 touch-action 속성을 사용하여 우회적으로 동작을 막아주어야 한다.
body {
touch-action: pan-x pan-y;
}해당 속성에 대해서는 이 블로그에 정말 자세히 설명되어 있다. 간단히 설명하자면 '한 손가락으로 터치 후 끌기'를 수직/수평 방향에 대해 활성화 하는 것이다.
주의할 점
이러한 동작은 저시력자 등의 사용자에게 좋지 않은 웹 경험 제공하여 접근성을 해칠 여지가 있다. 따라서 텍스트 사이즈를 조정 가능하게 하는 등의 대비책이 필요하다.
