[Frontend] dvh, svh, lvh 단위란?

들어가며

모바일 환경에서 CSS vh 단위를 사용하다 보면 예기치 않은 UI 흔들림이나 레이아웃 문제를 겪어본 적 있으신가요?
이 문제를 해결하기 위해 CSS에 새로운 뷰포트 높이 단위인 dvh, svh, lvh가 도입되었습니다. 이번 글에서는 이 세 단위가 무엇인지, 언제 어떻게 사용하면 좋은지 예시와 함께 정리해보겠습니다.

목차

1. 기존 vh 단위의 문제점
2. dvh, svh, lvh 개념 정리
3. 실전 예시 비교
4. 언제 어떤 단위를 써야 할까?
5. 브라우저 지원 및 참고 자료

1. 기존 vh 단위의 문제점

기존의 1vh는 현재 뷰포트 높이의 1%를 의미합니다.
하지만 모바일 브라우저에서는 주소창(또는 네비게이션 바)의 유무에 따라 뷰포트 높이가 계속 바뀌기 때문에 레이아웃이 튀는 문제가 발생합니다.

예시: 모바일 브라우저에서 vh 사용 시

.main-container {
  height: 100vh;
}
/* 
사용자가 스크롤하면 주소창이 사라지며 vh 값이 변함
레이아웃이 갑자기 늘어나거나 줄어드는 이슈 발생
*/

2. dvh, svh, lvh 개념 정리

| 단위 | 의미 | |——|——| | dvh | Dynamic Viewport Height: 현재 보이는 뷰포트 높이 기준. 주소창 등 UI가 바뀌면 실시간 반영됨 | | svh | Small Viewport Height: 뷰포트가 가장 작을 때 기준 (주소창이 보이는 상태) | | lvh | Large Viewport Height: 뷰포트가 가장 클 때 기준 (전체화면, 주소창 숨김) |

시각적으로 이해해보면:

|----------------------------| ← lvh
|         Viewport          |
|----------------------------| ← dvh (변동 가능)
|  주소창 + 네비게이션 바   |
|----------------------------| ← svh

3. 실전 예시 비교

✅ dvh 사용 예시: 유동적 UI

.section {
  height: 100dvh;
}
/* 
주소창 유무에 따라 높이가 실시간으로 변함
사용자에게 전체 공간을 즉시 반영하는 느낌 제공
*/

✅ svh 사용 예시: 안정적 레이아웃 유지

.section {
  height: 100svh;
}
/* 
항상 최소 뷰포트 기준으로 높이 설정
스크롤 중에도 레이아웃 떨림 없음
*/

✅ lvh 사용 예시: 전체 화면 활용 UI

.fullscreen-modal {
  height: 100lvh;
}
/* 
전체 화면을 활용하고 싶은 모달, 팝업, 인트로 섹션 등에 적합
*/

4. 언제 어떤 단위를 써야 할까?

상황	추천 단위	이유
주소창 변화에도 유연한 UI 필요	dvh	실시간 뷰포트 반영
떨림 없이 안정적인 높이 유지	svh	주소창 생략하지 않음
전체 화면 강제 사용	lvh	가장 큰 뷰포트 기준으로 공간 확보

예: 모바일에서 안정적인 Hero 섹션 만들기

.hero {
  min-height: 100svh;
  background: url('/hero.jpg') no-repeat center / cover;
}
/* → 주소창이 나타나도 배경이 깨지지 않도록 최소 높이 확보 */

5. 브라우저 지원 및 참고 자료

최신 Chrome, Safari, Firefox 등 대부분의 모바일 브라우저에서 지원됩니다. 다만 구형 브라우저에서는 미지원일 수 있으므로 @supports 사용을 추천합니다.

@supports (height: 100dvh) {
  .section {
    height: 100dvh;
  }
}

📚 참고 자료

• MDN - Viewport Units
• CSS Tricks - The Large, Small, and Dynamic Viewport Units
• Web.dev - Viewport units explained

모바일 UI에서 더 부드러운 사용자 경험을 만들고 싶다면, 이제는 vh 대신 dvh, svh, lvh를 적절히 선택해보세요!