VW 단위와 웹 접근성(A11y) | 줌(Zoom) 문제 해결 방법

웹 개발자로서 우리가 만드는 사이트는 모든 사용자에게 평등해야 합니다. 하지만 편리함 때문에 사용하는 VW(Viewport Width) 단위가 때로는 특정 사용자의 경험을 완전히 망칠 수도 있습니다. 웹 접근성(A11y) 관점에서 VW의 문제점과 해결책을 알아봅시다.

1. VW의 치명적인 문제: 줌(Zoom) 무시

많은 사용자가 브라우저 설정에서 "글꼴 크기"를 크게 조절하여 웹을 이용합니다. 하지만 폰트 크기를 font-size: 4vw와 같이 고정해 버리면, 사용자가 글꼴 크기 설정을 아무리 바꿔도 글자 크기는 요지부동입니다.

⚠️ WCAG 2.1 가이드라인 위반

WCAG(Web Content Accessibility Guidelines)에 따르면, 사용자가 텍스트 크기를 200%까지 확대할 수 있어야 하며 컨텐츠가 손실되지 않아야 합니다. 순수 VW 폰트는 이 규정을 준수하기 어렵습니다.

2. 해결책 1: 하이브리드 단위 (REM + VW)

가장 권장되는 방법은 사용자의 설정을 따르는 rem과 화면 너비에 반응하는 vw를 합치는 것입니다.

        /* 1rem(기본 16px)을 보장하면서 화면 너비의 1%만큼 추가로 커짐 */
        h1 { font-size: calc(1rem + 1vw); }
      

이렇게 하면 사용자가 브라우저 폰트 설정을 키울 경우 1rem 값이 커지므로, 전체적인 폰트 크기도 함께 확대되어 접근성을 준수할 수 있습니다.

3. 해결책 2: clamp()와 REM 조합

clamp() 함수를 사용할 때도 기준값을 REM 기반으로 설정하는 것이 좋습니다.

        /* 최솟값과 권장값에 REM을 포함하여 사용자의 설정을 존중 */
        p { font-size: clamp(0.875rem, 0.5rem + 1.5vw, 1.25rem); }
      

4. 기타 접근성 고려사항

충분한 대비(Contrast): 반응형으로 글자 크기가 작아질 때, 배경색과의 대비가 더 중요해집니다. 글자가 작아져도 읽기 쉽도록 대비율을 4.5:1 이상으로 유지하세요.
줄바꿈(Word-break): VW 단위로 요소의 너비가 좁아질 때 단어가 어색하게 잘리지 않도록 word-break: keep-all이나 overflow-wrap: break-word를 적절히 사용하세요.

💡 접근성 체크리스트

작업을 마친 후 브라우저에서 [Ctrl + +]를 눌러 200%까지 확대해 보세요. 글자가 깨지거나 겹치지 않고 정상적으로 커진다면 접근성을 잘 고려한 것입니다.

결론

진정한 반응형 웹은 기기(Device)뿐만 아니라 사람(People)에게도 반응해야 합니다. VW의 편리함을 누리되, REM과 조합하여 접근성을 지키는 섬세한 개발자가 되어보세요.