가장 널리 쓰이는 HTML 뷰포트(viewport) 메타 설정을 그대로 사용하면, iOS 기기에서 입력 요소(input)를 탭하는 순간 화면이 자동으로 확대되는 현상이 발생합니다. 필자는 iPhone 4, 5, 6에서 Safari와 Chrome 브라우저로 직접 테스트해 보았고, 조사 결과 모든 iOS 기기에서 동일하게 나타나는 동작임을 확인했습니다.
자동 확대 효과를 유발하는 HTML 코드는 다음과 같습니다:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />하지만 이 자동 확대 기능이 항상 바람직한 것은 아닙니다. 경우에 따라서는 웹 앱의 사용성을 오히려 해칠 수 있으며, 전적으로 프로젝트의 맥락에 따라 달라집니다.
Safari와 Chrome에서 자동 확대 비활성화하기
두 브라우저 모두에서 이 효과를 끄려면 아래 코드로 교체하면 됩니다:
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>달라진 부분은 메타 태그의 content 속성에 maximum-scale=1 값을 추가한 것뿐입니다.
주의 사항
이 설정은 Safari에서 손가락으로 직접 확대·축소하는 기능까지 막지는 않습니다. 오직 자동 확대 기능만 비활성화됩니다.
반면 iOS용 Chrome 모바일 브라우저에서는 수동 확대·축소 기능마저 함께 비활성화됩니다. 서비스 특성에 따라 이 점이 문제가 될 수 있으니 반드시 고려해야 합니다.
아쉽게도 Chrome에서 수동 확대는 유지하면서 자동 확대만 차단하는 순수 HTML 솔루션은 아직 찾지 못했습니다. 방법을 찾게 되면 이 글을 업데이트하겠습니다.
훨씬 더 간단한 해결책: 16px 폰트 크기
입력 요소의 폰트 크기를 최소 16px로 지정하면(기본값은 약 11px), Safari와 Chrome 양쪽에서 자동 확대 효과가 사라집니다. 적어도 필자의 테스트 환경에서는 그랬습니다.
이 방법을 쓰면 maximum-scale=1 값을 추가할 필요가 없으므로, Chrome에서 수동 확대가 제한되는 부작용도 자연스럽게 피할 수 있습니다.
"잠깐, 왜 처음부터 이 방법을 소개하지 않았나요?"
모바일의 모든 입력 필드에 16px 폰트를 적용하고 싶지 않은 경우가 있기 때문입니다. 이 방식은 입력 필드에 맞춰 모바일 UI의 타이포그래피 전반을 조정해야 하는 부담이 따를 수 있습니다.
그리고 거의 모든 문제가 그렇듯, JavaScript를 활용하면 프로그래밍 방식으로도 해결할 수 있지만, 이는 이 글의 범위를 벗어나므로 다루지 않겠습니다.
또 한 가지 유의할 점은, 사용자의 확대 기능을 제한하는 것은 일반적으로 접근성 관점에서 권장되지 않는다는 것입니다. 자세한 내용은 W3Schools 등의 자료를 참고하세요. 물론 이 역시 상황에 따라 판단이 달라질 수 있습니다.
모든 기기에서 한 번에 이 문제를 해결해 주는 간단한 설정이 있다면 참 편리할 텐데요. 이 주제에 대한 인사이트나 다른 해결 방법을 알고 계시다면 아래 댓글로 공유해 주세요 :-)