웹 개발자로서 우리가 만드는 사이트는 모든 사용자가 불편 없이 쓸 수 있어야 합니다. 하지만 편리해서 자주 쓰는 VW(Viewport Width) 단위가 시력이 약한 사용자에게는 글자를 키울 수 없는 사이트를 만들 수도 있습니다. 웹 접근성(A11y) 관점에서 VW의 문제점과 해결책을 수치와 함께 살펴봅니다.
1. VW 폰트가 커지지 않는 이유
데스크톱 브라우저에서 Ctrl + 로 확대하면 CSS px 한 칸이 커지는 대신 뷰포트의 CSS 너비가 그만큼 줄어듭니다. 1440px 화면을 200% 확대하면 뷰포트는 720px이 됩니다. 그래서 font-size: 4vw처럼 VW로만 지정한 글자는 CSS 크기가 절반으로 줄고, 이것이 2배로 표시되어 결국 화면상 크기가 그대로입니다. 브라우저 설정의 "글꼴 크기"를 키워도 vw는 반응하지 않습니다.
2. 확대 전후 수치 비교
1440px 너비 브라우저 창에서 지정 방식별로 화면에 보이는 글자 크기를 비교하면 다음과 같습니다.
| 지정 방식 | 기본 | 200% 확대 | 400% 확대 | 글꼴 설정 32px |
|---|---|---|---|---|
4vw |
57.6px | 57.6px (1배) | 57.6px (1배) | 57.6px (1배) |
calc(1rem + 1vw) |
30.4px | 46.4px (약 1.53배) | 78.4px (약 2.58배) | 46.4px (약 1.53배) |
clamp(0.875rem, 0.5rem + 1.5vw, 1.25rem) |
20px | 37.6px (1.88배) | 56px (2.8배) | 37.6px (1.88배) |
1.25rem |
20px | 40px (2배) | 80px (4배) | 40px (2배) |
VW만 쓴 글자는 어떤 방법으로도 커지지 않습니다. rem을 섞으면 글자가 커지지만, vw 부분은 확대해도 커지지 않으므로 vw 비중이 클수록 커지는 폭이 줄어듭니다. 브라우저 최대 확대(대부분 500%)까지 써서 2배에 도달하면 기준을 충족한다고 보는 해석도 있지만, 점검할 때는 200% 확대 화면으로 확인하는 경우가 많으므로 vw 비중은 작게 두는 편이 안전합니다.
3. 해결책 1: REM + VW 조합
가장 간단한 방법은 사용자의 설정을 따르는 rem과 화면 너비에 반응하는 vw를 합치는 것입니다.
/* 1rem(기본 16px)에 화면 너비의 1%를 더함 */
h1 { font-size: calc(1rem + 1vw); }이렇게 하면 사용자가 브라우저를 확대하거나 기본 글꼴 크기를 키울 때 1rem 부분이 함께 커집니다. 다만 vw 부분은 커지지 않으므로, 위 표처럼 1440px 화면에서 200% 확대해도 글자는 약 1.53배만 커집니다. 최솟값·최댓값이 없어 큰 화면에서 계속 커지는 점도 단점입니다.
4. 해결책 2: clamp()와 REM
clamp()를 쓸 때는 세 값 모두 rem을 기준으로 정하는 것이 좋습니다.
/* 세 값 모두 rem을 포함: 400px 이하 14px → 800px 이상 20px */
p { font-size: clamp(0.875rem, 0.5rem + 1.5vw, 1.25rem); }최댓값은 최솟값의 2.5배 이하로 두세요. 500% 확대하면 글자는 최소한 최솟값의 5배로 표시되고, 원래 크기는 최댓값을 넘지 않으므로 최댓값이 최솟값의 2.5배 이하이면 확대 과정에서 반드시 2배 이상 커집니다. 위 예시는 20 / 14 ≈ 1.43배라 이 조건을 충족합니다. 원하는 화면 구간의 값은 Clamp 생성기에서 단위를 rem으로 두고 계산하면 됩니다.
5. 확대를 막지 마세요
viewport 메타 태그에 user-scalable=no나 maximum-scale=1을 넣으면 모바일에서 손가락으로 확대하는 기능이 막혀 접근성을 크게 해칩니다. iOS Safari는 iOS 10부터 이 설정을 무시하지만, 다른 브라우저에서는 실제로 확대가 막힐 수 있습니다.
<!-- 권장하지 않음 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 권장 -->
<meta name="viewport" content="width=device-width, initial-scale=1">6. 기타 접근성 고려사항
- 리플로우(WCAG 1.4.10): 너비 320 CSS px(1280px 화면을 400% 확대한 크기)에서도 가로 스크롤 없이 내용을 읽을 수 있어야 합니다. VW로 고정한 너비나
width: 100vw가 가로 스크롤의 흔한 원인입니다. 자세한 사례는 PX를 VW로 바꾸면 안 되는 6가지 경우를 참고하세요. - 충분한 대비(Contrast): 일반 글자는 배경과의 명도 대비를 4.5:1 이상으로 유지하세요. 큰 글자(24px 이상, 굵은 글씨는 약 18.7px 이상)는 3:1까지 허용되지만, 반응형으로 글자가 그보다 작아지면 4.5:1 기준이 적용됩니다. 대비 검사기로 확인할 수 있습니다.
- 줄바꿈(Word-break): 요소의 너비가 좁아질 때 단어가 어색하게 잘리지 않도록
word-break: keep-all이나overflow-wrap: break-word를 적절히 사용하세요.
결론
진정한 반응형 웹은 기기(Device)뿐만 아니라 사람(People)에게도 반응해야 합니다. VW의 편리함은 살리되 글자 크기에는 rem을 섞고, 확대를 막지 않으며, 200% 확대와 글꼴 설정 변경으로 직접 확인하는 습관을 들이세요. 시안의 px 값을 rem으로 바꿀 때는 PX to REM 변환기를, clamp()와 VW의 차이는 clamp() vs VW를 참고하세요.