이 포스팅에서는 웹 앱 서비스 구현 중 모바일에 최적화된 환경을 위한 기법들을 정리했다.
당겨서 새로고침 막기
크롬, 사파리와 같은 모바일 브라우저에서는 아래로 당겨서 새로고침을 할 수 있는 기능을 지원한다.
문제
SIGKILL 서비스에서는 웹소켓으로 실시간 기능을 구현했다. 이때, 모바일 브라우저에서 당겨서 새로고침으로 인해 웹소켓 연결이 끊기는 문제가 발생했다.
해결
아직 웹소켓 재연결 로직이 완성되지 않아 최소한의 방어를 위해 당겨서 새로고침을 막고자 했다. 이는 CSS로 쉽게 구현할 수 있다.
body {
overscroll-behavior-y: none;
/* 또는 */
overscroll-behavior: none;
}핀치 줌인/줌아웃
모바일 타겟의 애플리케이션에서는 보통 두 손가락을 이용한 pinch zoom in/out 되지 않는다.
문제
핀치 줌인/줌아웃에 대한 아무런 설정이 적용되어 있지 않아, 어느 화면에서나 두 손가락으로 확대/축소가 가능했다. 모바일에서 입력창 포커스 시 줌인되는 현상을 종종 경험한 적이 있을텐데, 이때 줌인으로 인해 네비게이션바가 뷰포트를 벗어나서 다시 줌아웃 하는 불편함을 느꼈을 수 있다.
현재 프로젝트에서도 특별히 줌인을 지원하는 페이지가 없었기 때문에 이러한 동작을 비활성화할 필요가 생겼다.
해결
<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;
}해당 속성에 대해서는 이 블로그에 정말 자세히 설명되어 있다. 간단히 설명하자면 '한 손가락으로 터치 후 끌기'를 수직/수평 방향에 대해 활성화 하는 것이다.
주의할 점
이러한 동작은 저시력자 등의 사용자에게 좋지 않은 웹 경험 제공하여 접근성을 해칠 여지가 있다. 따라서 텍스트 사이즈를 조정 가능하게 하는 등의 대비책이 필요하다.
