확대되면 레이아웃이 깨진다고 user-scalable=no를 넣었다가 되돌린 이유

문제 발생

모바일에서 사용자가 두 손가락으로 확대하면 고정 헤더가 화면 밖으로 밀려나 보기 나빴습니다. 그래서 확대를 막았습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

증상은 사라졌지만, 접근성 점검에서 지적을 받았습니다.

원인 분석

이 뷰포트 메타 태그는 원래 좁은 화면 기기가 페이지를 980px 같은 넓은 뷰포트로 그린 뒤 축소해 보여 주던 문제를 해결하기 위한 것입니다.

• width=device-width — 뷰포트 폭을 기기 화면 폭(CSS 픽셀)에 맞춘다
• initial-scale=1 — 로드 시 확대 배율을 1로 둔다

문제는 user-scalable=no와 maximum-scale=1입니다. MDN이 경고합니다 — 확대를 막으면 저시력 사용자가 내용을 읽고 이해할 수 없게 됩니다. WCAG는 최소 2배 확대를 요구하며, 5배까지 허용하는 것이 모범 사례입니다.

게다가 실효도 없습니다. iOS 10부터는 이 제한을 기본적으로 무시하고, 다른 브라우저도 점차 같은 방향입니다. 즉 접근성만 잃고 목적은 달성하지 못합니다.

해결 방안

1. 확대 제한을 걷어냅니다. 필요한 것은 두 값뿐입니다.

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. 확대 시 깨지는 레이아웃을 고칩니다. 그게 원래 문제였습니다. 고정 요소가 화면 밖으로 밀리는 것은 대개 position: fixed와 뷰포트 단위를 함께 쓴 결과이므로, 그 부분을 다시 봅니다.
3. 노치가 있는 기기에는 viewport-fit=cover와 safe-area를 씁니다. 화면을 가장자리까지 채우되 중요한 내용이 잘리지 않게 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

.bottom-bar { padding-bottom: env(safe-area-inset-bottom); }

이 저장소의 모바일 고정 버튼도 같은 방식으로 하단 여백을 계산합니다.

4. 가상 키보드가 레이아웃을 밀어야 한다면 interactive-widget을 씁니다. 기본값은 시각 뷰포트만 줄이는 resizes-visual이고, 레이아웃까지 줄이려면 resizes-content를 지정합니다.
5. 입력 시 자동 확대가 문제라면 글자 크기를 봅니다. iOS는 폰트가 16px 미만인 입력 필드에 포커스하면 자동으로 확대합니다. 확대를 막을 게 아니라 입력 필드의 font-size를 16px 이상으로 두면 됩니다.

공식 문서

• MDN: 뷰포트 메타 요소
• MDN: env() — safe area inset
• WCAG: 콘텐츠를 보고 듣기 쉽게