dvh, svh, lvh - 뷰포트 높이를 측정하는 새로운 단위

기존 vh 단위의 문제점

vh(Viewport Height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만,

모바일 환경에서는 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어

정확한 높이를 계산하기 어렵고, 레이아웃이 의도치 않게 깨지는 현상 발생할 수 있음

⇒ 이를 해결하기 위해 dvh, svh, lvh가 등장

dvh(Dynamic Viewport Height) : 동적인 뷰포트 높이

• 뷰포트의 높이가 변할 때 실시간으로 계산된 값을 제공
• 모바일에 주소창이 사라지면 뷰포트의 높이가 증가할 때의 변화를 즉시 반영

svh(Small Viewport Height) : 뷰포트가 가장 작을 때의 높이

• 일반적으로 모바일 브라우저에서 주소창이 보이는 상태에서의 최소 높이를 기준으로 함
• shv를 사용하면 화면의 공간의 최대로 제한되는 시나리오에서도 UI가 깨지지 않도록 레이아웃을 설계할 수 있음

lvh(Large Viewport Height) : 뷰포트가 가장 클 때의 높이

• 모바일에서 주소창이 사라진 후 전체 화면이 확장된 상태의 최대 뷰포트 높이
• 전체화면을 적극적으로 활용하는 UI를 구성할 때 유용

---

dvh vs svh, svh를 사용해야하는 경우

svh가 필요한 특수한 상황

1. 빠른 스크롤이나 주소창 토글이 자주 발생하는 상황

   → dvh는 주소창이 움직일 때마다 높이를 재계산하는데, 이때 레이아웃이 미세하게 흔들려보일 수 있음

   → svh는 최소 높이로 고정이 되어 있어 이러한 떨림 현상이 없음

2. 성능이 중요한 상황

   → dvh 는 지속적으로 변하기 때문에 요소의 레이아웃을 변화시켜 리플로우를 자주 유발

   → 모바일과 같은 성능 차이가 민감하게 체감되는 환경에서는 svh가 더 안정적인 부드러운 사용자 경험을 제공

---

정리

반응형 웹 디자인에서 레이아웃 안정성 고려 ⇒ svh

전체화면을 활용하는 UI ⇒ lvh

실시간으로 동적인 높이를 반영 ⇒ dvh