분류: 개발 도구
뷰포트 메타 생성기
반응형 뷰포트 메타 태그를 생성하고 각 옵션의 의미 이해하기
페이지의 뷰포트 메타 태그를 위한 너비, 초기 배율, 확대/축소 제한, 핀치 줌 허용 여부, 뷰포트 맞춤을 설정하면 각 옵션에 대한 짧은 설명과 함께 완성된 태그를 <head>에 복사할 수 있습니다. 브라우저에서 로컬로 생성됩니다.
이 옵션을 끄면 핀치 줌이 차단되어 접근성이 떨어집니다 — 대부분의 사이트는 켜두는 것이 좋습니다.
메타 태그
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
뷰포트 메타 태그는 모바일 브라우저에 페이지 크기와 배율을 조정하는 방법을 알려줍니다 — 이것이 없으면 휴대폰은 페이지를 고정된 데스크톱 같은 너비로 렌더링하고 축소해 표시하는데, 이 때문에 모바일 친화성 검사기가 가장 먼저 확인하는 항목 중 하나입니다. width=device-width와 initial-scale=1을 설정하면 일반적인 경우는 대부분 해결되지만, 확대/축소를 완전히 막는 것은 저시력 사용자에게 접근성 문제가 되므로 배율 제한과 뷰포트 맞춤 옵션은 그대로 복붙하기보다 이해하고 사용할 가치가 있습니다.
사용 방법
- 특별한 이유가 없다면 너비는 "device-width"로 두세요.
- 초기 배율을 설정하고, 필요하면 최소/최대 확대/축소 제한을 추가하세요.
- 핀치 줌을 허용할지 결정하세요 — 켜두는 것을 권장합니다.
- 디자인이 노치나 세이프 에어리어 영역까지 확장되어야 한다면 뷰포트 맞춤 값을 선택하세요.
- 생성된 태그를 페이지의 <head>에 복사하세요.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- "의도치 않은" 확대/축소를 막으려면 user-scalable을 꺼야 하나요?
- 일반적으로는 아닙니다 — 핀치 줌을 막으면 저시력 방문자가 콘텐츠를 읽기 위해 확대할 수 없게 되어 접근성 지침(WCAG 1.4.4)에 위배됩니다. 확대/축소를 막는 대신 레이아웃 문제를 고치세요.
- viewport-fit=cover는 실제로 무엇을 하나요?
- 노치나 둥근 모서리가 있는 기기에서 검은 여백을 남기는 대신 페이지 배경이 해당 세이프 에어리어 영역까지 확장되도록 하며, env(safe-area-inset-*) CSS 함수를 사용해 콘텐츠 자체는 노치를 피하도록 유지할 수 있습니다.
- width=device-width는 항상 맞는 설정인가요?
- 대다수의 반응형 사이트에서는 그렇습니다 — CSS 뷰포트를 기기의 실제 너비와 일치시켜 반응형 브레이크포인트가 예측 가능하게 동작하도록 만듭니다.