🚀 왜 새로운 뷰포트 단위가 생겼을까?
CSS에서 vh, vw 단위는 반응형 웹의 핵심 요소였지만, 모바일 브라우저 환경에서는 주소창의 등장/숨김 등으로 인해 예기치 못한 동작이 발생하곤 했다
이를 해결하고자 W3C에서 2021~2022년 사이 새로운 뷰포트 단위를 제안했고, 2023년 이후부터는 크롬, 사파리 등 주요 브라우저가 이를 지원하기 시작하여 svh, lvh, dvh 사용이 점차 확대되고 있다!
🚀 기존 vh, vw 단위의 한계
기존 vh는 뷰포트 높이의 1%를 의미하는데,
모바일에선 주소창이 나타났다 사라졌다 하면서 뷰포트 크기가 달라지면서 아래와 같은 케이스들이 발생하게 되었어
1️⃣ 페이지가 로드될 때 주소창이 보임
2️⃣ 사용자가 스크롤을 내리면 주소창이 사라짐
3️⃣100vh로 설정한 영역이 갑자기 줄어들며 어색한 여백 발생
이로 인해 많은 나와같은 퍼블리셔들은 window.innerHeight 기반 JS 계산, CSS 변수 조작 등 다양한 트릭을 사용해야만 했지만 현재는 그럴 필요가 없다는 점😁
🚀 새로운 뷰포트 단위
이제는 보다 정확하게 뷰포트 상태를 구분해서 단위를 사용할 수 있게 되었습니다.
| 단위 | 의미 |
|---|---|
svh/svw | Small Viewport – 주소창이 보이는 상태 기준 |
lvh/lvw | Large Viewport – 주소창이 사라진 상태 기준 |
dvh/dvw | Dynamic Viewport – 현재 상태에 따라 자동 계산됨 (실제 화면 기준) |
💡
dvh는 기존vh의 직관적인 업그레이드 버전이라고 한다
🚀 시각적으로 비교해보기 - 데모사이트
기존 vh를 사용할 때와 svh, lvh, dvh를 사용할 때의 차이를 데모파일로 만들어서 확인해보았어!
예시 이미지의 경우 ios 사파리 환경이야
🔗 데모 사이트 바로 가기 – 각 단위를 직접 토글하며 확인 가능
🚀 상대 길이 단위 전체 정리
| 단위 | 설명 |
|---|---|
em | 요소의 글꼴 크기 |
rem | 루트 요소의 글꼴 크기 |
ex | 요소 글꼴의 x-height |
ch | "0" 글리프의 너비 |
lh | 요소의 line-height |
rlh | 루트 요소의 line-height |
vw | 뷰포트 너비의 1% |
vh | 뷰포트 높이의 1% |
vmin | 뷰포트의 작은 쪽 1% |
vmax | 뷰포트의 큰 쪽 1% |
vb | 블록 축 기준 뷰포트 1% |
vi | 인라인 축 기준 뷰포트 1% |
svw | 작은 뷰포트 너비 1% |
svh | 작은 뷰포트 높이 1% |
lvw | 큰 뷰포트 너비 1% |
lvh | 큰 뷰포트 높이 1% |
dvw | 동적 뷰포트 너비 1% |
dvh | 동적 뷰포트 높이 1% |
🚀 마치며
vh는 모바일 환경에서 불안정하게 동작할 수 있지만,
이제 svh, lvh, dvh와 같은 정교한 뷰포트 단위 덕분에 더 이상 자바스크립트에 의존하지 된다!
특히 PWA나 풀스크린 웹앱을 개발 중이라면,
이러한 새로운 단위들을 활용해 더욱 안정적이고 예측 가능한 레이아웃을 만들 수 있으므로 꼭 사용해보길 추천!
🔗 참고 자료
뷰포트 단위를 잘 알 수 있었고 새로운 단위들도 알게 되어서 좋았습니다~