새로운 CSS 뷰포트 단위: svh, lvh, dvh, svw, lvw, dvw 이해하기

모바일 웹 개발을 하다 보면 한 번쯤 겪어봤을 문제가 있습니다. 100vh로 높이를 설정했는데 모바일에서 스크롤하면 주소창이 사라지면서 레이아웃이 어색해지는 경우 말입니다. 이런 문제는 웹 개발자들이 오랫동안 직면해 온 고질적인 이슈였습니다.

새로운 뷰포트 단위의 탄생 배경

이 문제의 해결책이 바로 2022년 3월에 등장한 새로운 CSS 뷰포트 단위들입니다. 이들은 Apple, Bocoup, Google, Igalia, Microsoft, Mozilla가 공동으로 진행한 'Interop 2022' 프로젝트의 일환으로 개발되었습니다.

Interop 2022란? 2019년부터 시작된 MDN 개발자 요구사항 조사와 브라우저 호환성 보고서를 바탕으로, 주요 브라우저 벤더들이 웹 개발자들의 가장 큰 고충을 해결하기 위해 함께 진행한 대규모 협력 프로젝트입니다. 특히 뷰포트 단위 분야에서는 모든 브라우저의 통과율이 0%에서 100%로 1년 만에 급상승하는 놀라운 성과를 보였습니다.

왜 새로운 단위가 필요했나? MDN 브라우저 호환성 보고서 2020과 State of CSS 2021 설문조사에서 뷰포트 크기 조정 문제가 가장 큰 개발자 고충 중 하나로 드러났기 때문입니다. 특히 모바일 브라우저의 동적 UI 요소(주소창, 툴바 등)로 인한 레이아웃 문제를 해결하는 것이 시급했습니다.

이제 이런 문제를 깔끔하게 해결할 수 있는 새로운 뷰포트 단위들을 살펴보겠습니다!

기존 뷰포트 단위의 문제점

기존의 vh, vw가 가진 한계점: • 모바일 브라우저의 동적 UI 요소(주소창, 탭 바 등)를 고려하지 못함 • 100vh로 설정한 요소가 실제로는 화면을 벗어나거나 부족하게 표시됨 • 스크롤 시 브라우저 UI가 변할 때마다 레이아웃이 어색하게 변함

새로운 뷰포트 단위 소개

Small Viewport (sv*) - 작은 뷰포트

브라우저 UI가 모두 표시된 상태의 뷰포트 크기를 기준으로 함

• svh: 브라우저 UI가 모두 보일 때의 높이의 1% • svw: 브라우저 UI가 모두 보일 때의 너비의 1% • svmin: svh와 svw 중 작은 값 • svmax: svh와 svw 중 큰 값

언제 사용하나요? • 중요한 콘텐츠가 절대 잘리면 안 되는 경우 • 모바일에서 항상 안전한 영역 내에 콘텐츠를 표시하고 싶을 때

Large Viewport (lv*) - 큰 뷰포트

브라우저 UI가 숨겨진 상태의 뷰포트 크기를 기준으로 함

• lvh: 브라우저 UI가 숨겨질 때의 높이의 1% • lvw: 브라우저 UI가 숨겨질 때의 너비의 1% • lvmin: lvh와 lvw 중 작은 값 • lvmax: lvh와 lvw 중 큰 값

언제 사용하나요? • 전체 화면을 최대한 활용하고 싶을 때 • 브라우저 UI가 숨겨졌을 때의 크기를 기준으로 디자인하고 싶을 때

Dynamic Viewport (dv*) - 동적 뷰포트

현재 브라우저 UI 상태에 따라 실시간으로 변하는 뷰포트 크기

• dvh: 현재 상황에서의 뷰포트 높이의 1% • dvw: 현재 상황에서의 뷰포트 너비의 1% • dvmin: dvh와 dvw 중 작은 값 • dvmax: dvh와 dvw 중 큰 값

주의사항: • 스크롤할 때마다 크기가 변하므로 성능에 영향을 줄 수 있음 • 사용자에게 어색한 경험을 줄 수 있으므로 신중하게 사용해야 함

실제 사용 예시

히어로 섹션 만들기

/* 기존 방식 - 모바일에서 문제 발생 가능 */
.hero-old {
  height: 100vh;
}

/* 새로운 방식 - 안전한 영역 보장 */
.hero-safe {
  min-height: 100svh; /* 항상 안전한 높이 */
}

/* 최대 화면 활용 */
.hero-large {
  min-height: 100lvh; /* UI 숨겨질 때 최대 활용 */
}

모달 창 만들기

.modal {
  /* 작은 뷰포트 기준으로 안전한 크기 설정 */
  max-height: 90svh;
  width: 90svw;
}

풀스크린 콘텐츠

.fullscreen-content {
  /* 현재 상황에 맞는 동적 크기 */
  height: 100dvh;
  width: 100dvw;
}

권장 사용법

1. 히어로 섹션이나 중요한 콘텐츠

svh 사용을 권장 • 콘텐츠가 절대 잘리지 않음 • 모든 디바이스에서 안정적인 표시 • 부드러운 스크롤 경험 보장

2. 풀스크린 배경이나 이미지

lvh 사용 고려 • 최대한 큰 화면 활용 • 시각적 임팩트 극대화

3. 특별한 상황에서만 dvh 사용

• 실시간으로 변하는 레이아웃이 필요한 경우 • 성능과 사용자 경험을 충분히 테스트한 후 사용

브라우저 지원 현황

현재 지원 상황 (2025년 6월 기준): • Chrome: 108+ 버전부터 지원 • Safari: 15.4+ 버전부터 지원
• Firefox: 101+ 버전부터 지원 • Edge: 108+ 버전부터 지원

모바일 지원: • iOS Safari 15.4+ • Chrome for Android 108+ • Samsung Internet 21+

폴백(Fallback) 전략

새로운 단위를 지원하지 않는 브라우저를 위한 안전장치:

.hero {
  /* 폴백: 기존 방식 */
  height: 100vh;
  
  /* 지원되는 브라우저에서는 새로운 단위 사용 */
  height: 100svh;
}

마무리

새로운 CSS 뷰포트 단위들은 모바일 웹 개발의 오랜 숙제였던 브라우저 UI 변화 문제를 깔끔하게 해결해줍니다. 특히 svh는 안정적이고 예측 가능한 레이아웃을 만들 수 있어 대부분의 경우에 추천됩니다.

핵심 포인트:

svh/svw: 안전하고 안정적인 기본 선택
lvh/lvw: 최대 화면 활용이 필요할 때
dvh/dvw: 특별한 경우에만 신중하게 사용 • 항상 폴백을 고려한 점진적 향상 적용

이제 모바일에서도 완벽한 뷰포트 높이 제어가 가능해졌습니다!