반응형 웹을 개발할 때 VW 단위는 매우 편리합니다. 화면 크기에 맞춰 자동으로 크기가 조절되기 때문입니다. 하지만 숙련된 개발자들은 모든 PX를 무분별하게 VW로 바꾸지 않습니다. 특정 상황에서는 고정된 PX나 다른 상대 단위(REM 등)가 훨씬 나은 선택이기 때문입니다. VW를 피하는 편이 나은 6가지 경우를 정리합니다.
1. 보더(Border) 두께
가장 흔한 실수 중 하나가 테두리 두께를 VW로 설정하는 것입니다. 디자인 가이드에서 1px인 테두리를 VW로 변환하면 작은 화면에서 1px보다 얇아집니다. 예를 들어 1440px 시안의 1px(0.0694vw)은 375px 화면에서 약 0.26px이 되고, 375px 시안의 1px(0.2667vw)도 360px 화면에서는 0.96px이 됩니다.
2. 박스 그림자(Box-Shadow)
그림자의 오프셋(Offset)과 블러(Blur) 값도 VW로 변환할 때 주의해야 합니다. 그림자는 은은한 입체감을 위한 것인데, VW로 지정하면 화면에 따라 느낌이 크게 달라집니다. 아래의 0.5vw 0.5vw 1vw는 375px 화면에서 오프셋 약 1.9px·블러 3.75px로 거의 보이지 않고, 1920px 화면에서는 오프셋 9.6px·블러 19.2px로 지나치게 무거워집니다.
/* 권장하지 않음 */
.card { box-shadow: 0.5vw 0.5vw 1vw rgba(0,0,0,0.1); }
/* 권장 (고정 PX 사용) */
.card { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }3. 폰트 크기와 접근성
폰트 크기를 VW로만 지정하면 브라우저 확대(Ctrl +)나 기본 글꼴 크기 설정을 바꿔도 글자가 커지지 않습니다. 확대하면 뷰포트의 CSS 너비가 그만큼 줄어 vw 값이 상쇄되기 때문입니다. 이 경우 WCAG 1.4.4(텍스트 크기 조정, 200%)를 충족하기 어렵습니다.
- 문제점: 사용자가 브라우저를 확대하거나 기본 글꼴 크기를 키워도 VW 기반 폰트는 화면 너비에만 반응하므로 크기가 그대로입니다.
- 해결책: 최솟값·최댓값을 rem으로 두고 권장값에 rem과 vw를 섞으세요. 예:
clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem)(360px에서 16px → 1280px에서 18px). vw 비중이 클수록 확대 효과가 줄어드므로 최댓값은 최솟값의 2.5배 이하로 두는 것이 안전합니다. - 참고:
calc(1rem + 1vw)도 VW 단독보다는 낫지만, 1440px 화면에서 200% 확대해도 글자는 약 1.53배(30.4px → 46.4px)만 커집니다.
자세한 내용은 VW 단위와 웹 접근성을, rem 값 계산은 Clamp 생성기와 PX to REM 변환기를 참고하세요.
4. 최대·최소 제한이 없는 레이아웃
너비나 높이를 VW로만 설정하고 max-width를 지정하지 않으면, 울트라 와이드 모니터나 매우 큰 디스플레이에서 요소가 지나치게 커질 수 있습니다. 예를 들어 1440px 시안의 600px 카드(41.667vw)는 2560px 모니터에서 약 1067px이 됩니다.
5. 크기가 정해진 작은 아이콘
PNG 같은 비트맵 아이콘은 원본보다 커지면 흐려집니다. 폰트 아이콘이나 SVG는 벡터라서 깨지지는 않지만, 소수점 크기가 되면 가장자리가 번져 보일 수 있습니다. 예를 들어 375px 시안의 24px 아이콘을 6.4vw로 바꾸면 360px 화면에서 23.04px, 390px 화면에서 24.96px이 됩니다. 16px·24px처럼 픽셀 격자에 맞춰 디자인된 작은 아이콘은 PX로 고정하는 것이 더 선명합니다.
6. 100vw로 지정한 전체 너비
요소를 화면 전체 너비로 만들려고 width: 100vw를 쓰면, 세로 스크롤바가 공간을 차지하는 Windows 데스크톱 환경에서 가로 스크롤이 생깁니다. 100vw에는 스크롤바 너비(보통 15~17px)까지 포함되기 때문입니다. macOS와 모바일은 스크롤바가 콘텐츠 위에 겹쳐 표시되어 공간을 차지하지 않으므로, 맥에서만 확인하면 이 문제를 놓치기 쉽습니다.
/* 권장하지 않음: 스크롤바 너비만큼 넘침 */
.hero { width: 100vw; }
/* 권장 */
.hero { width: 100%; }결론
VW는 강력한 도구이지만 만능은 아닙니다. 레이아웃의 큰 틀은 VW로 잡되, 테두리·그림자·작은 아이콘은 PX로, 글자 크기는 rem을 섞은 clamp()로, 전체 너비는 100%로 지정하는 식으로 단위를 나눠 쓰세요. 각 단위를 언제 써야 하는지 아는 것이 유연한 디자인과 쉽게 깨지는 디자인을 가릅니다.