css 속성 dvh, svh, lvh 란 무엇인가요?
분야: 프론트엔드
CSS에서 dvh, svh, lvh는 뷰포트 높이를 측정하는 새로운 단위입니다. 기존 vh(viewport height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에서는 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어 정확한 높이를 계산하기 어렵다는 단점이 있었습니다. 이를 해결하기 위해 dvh, svh, lvh가 등장했습니다.
먼저 dvh(Dynamic Viewport Height)는 동적인 뷰포트 높이를 의미합니다. 사용자가 스크롤하거나 모바일 주소창과 같은 UI 요소가 나타나거나 사라질 때마다 뷰포트의 높이가 변하는 경우, 이를 반영하여 실시간으로 계산된 값을 제공합니다. 예를 들어, 모바일에서 주소창이 사라지면 뷰포트의 높이가 증가하는데, 이 변화를 즉시 반영하는 수치입니다.
svh(Small Viewport Height)는 뷰포트가 가장 작을 때의 높이를 의미합니다. 일반적으로 모바일 브라우저에서 주소창이 보이는 상태에서의 최소 높이를 기준으로 합니다. 따라서 svh를 사용하면, 화면의 공간이 최대로 제한되는 시나리오에서도 UI가 깨지지 않도록 레이아웃을 설계할 수 있습니다.
lvh(Large Viewport Height)는 반대로 뷰포트가 가장 클 때의 높이를 기준으로 합니다. 즉, 모바일에서 주소창이 사라진 후 전체 화면이 확장된 상태의 최대 뷰포트 높이를 나타냅니다. 이를 활용하면 전체 화면을 적극적으로 활용하는 UI를 구성할 수 있습니다.
dvh가 가변적이니 svh보다 더 유용할 것 같은데, 꼭 svh를 사용해야 하는 경우가 있나요?
말씀하신 대로 dvh가 가변적이라 더 자연스러운 경험을 제공합니다. 하지만 svh가 필요한 특수한 상황들이 있습니다.
예를 들면, 빠른 스크롤이나 주소창 토글이 자주 발생하는 상황이 있습니다. 이 경우 dvh는 주소창이 움직일 때마다 높이를 재계산하는데, 이때 레이아웃이 미세하게 흔들려 보일 수 있습니다. 반면, svh는 최소 높이로 고정이 되어 있어 이런 떨림 현상이 없습니다.
또, 성능이 중요한 상황에서도 svh가 유용하게 사용될 수 있습니다. dvh는 지속적으로 변하기 때문에 요소의 레아이웃을 변화시켜 리플로우를 자주 유발할 수 있습니다. 모바일과 같이 성능 차이가 민감하게 체감되는 환경에서 부드러운 사용자 경험을 제공하기 위해서는 svh가 더 안정적일 수 있습니다.