The New CSS Viewport Units That Finally Fix Mobile Layouts

Context

모바일 브라우저의 동적 UI(주소창, 툴바)로 인해 100vh가 실제 보이는 영역보다 크게 계산되어 콘텐츠가 화면 아래로 잘려나가는 문제가 발생했다. 기존 JavaScript 해킹(window.innerHeight 감지 + resize 이벤트)은 레이아웃 시프트를 유발하고 초기 렌더링 전에 JS 로드를 요구했다.

Technical Solution

• Large Viewport Units(lv): lvh, lvw, lvmin, lvmax를 정의해 브라우저 UI가 모두 숨겨진 상태를 가정(최대 크기)하며, 모달과 오버레이에 사용
• Small Viewport Units(sv): svh, svw, svmin, svmax를 정의해 브라우저 UI가 완전히 확장된 상태를 가정(최소 보장 공간)하며, 스티키 헤더·배너·플로팅 액션 버튼에 사용
• Dynamic Viewport Units(dv): dvh, dvw, dvmin, dvmax를 정의해 주소창 표시·숨김에 따라 실시간 업데이트되며, 히어로 섹션과 풀스크린 앱 레이아웃에 사용
• 브라우저 UI 애니메이션 시 60fps 업데이트를 의도적으로 디바운싱해 레이아웃 지터 방지

Key Takeaway

모바일 개발자는 요소가 브라우저 UI와 함께 어떻게 동작해야 하는지 명확히 정의한 후 적절한 단위를 선택해야 한다: 화면을 완전히 덮어야 하면 lv, 항상 가시 영역에 있어야 하면 sv, 현재 보이는 영역과 정확히 일치해야 하면 dv를 사용한다.