dvh, svh, lvh

1. 등장 배경 (기존 vh의 문제점)

기존의 100vh는 모바일 브라우저에서 상단 주소창이나 하단 네비게이션 바의 영역을 고려하지 않고 화면의 물리적 최대 높이를 기준으로 계산됩니다. 이로 인해 모바일 기기에서 height: 100vh를 적용하면 화면 하단 콘텐츠가 브라우저 UI에 가려져 스크롤해야만 볼 수 있는 문제가 발생했습니다. 이 현상을 해결하기 위해 브라우저 UI의 상태를 반영하는 새로운 뷰포트 단위가 도입되었습니다.

2. svh (Small Viewport Height)

• 정의: 브라우저의 UI(주소창, 도구 모음 등)가 화면에 가장 많이 확장되어 있는 상태를 기준으로 계산한 뷰포트 높이입니다.
• 특징: 브라우저 UI가 차지하는 공간을 제외한, 순수하게 콘텐츠가 보여질 수 있는 가장 작은 화면 높이 값을 가집니다.
• 사용 환경: 주소창이 떠 있는 상태에서도 중요한 버튼이나 콘텐츠가 화면 밖으로 밀려나거나 잘리지 않고 정확히 화면 내에 배치되어야 할 때 적용합니다. 가장 안전하게 모바일 100% 높이를 보장하는 단위입니다.

3. lvh (Large Viewport Height)

• 정의: 브라우저의 UI가 화면에서 가장 작게 축소되거나 완전히 숨겨진 상태를 기준으로 계산한 뷰포트 높이입니다.
• 특징: 기존에 사용하던 vh 단위와 동일하게 동작합니다. 브라우저 주소창이 사라졌을 때 확보되는 전체 물리적 디스플레이 높이를 의미합니다.
• 사용 환경: 사용자가 화면을 스크롤하여 브라우저 UI가 숨겨졌을 때를 기준으로, 기기 전체 화면을 가득 채우는 배경 이미지나 레이아웃을 구현할 때 사용합니다.

4. dvh (Dynamic Viewport Height)

• 정의: 사용자의 스크롤 액션에 따라 브라우저 UI가 나타나거나 사라지는 상태를 동적으로 실시간 반영하는 뷰포트 높이입니다.
• 특징: 브라우저 주소창이 보일 때는 svh 값과 동일하고, 스크롤을 통해 주소창이 사라지면 lvh 값으로 매끄럽게 변경됩니다.
• 사용 환경: 화면 크기가 변하는 상황에서도 항상 브라우저 창 높이에 완벽하게 꽉 차는 풀스크린 섹션을 만들 때 사용합니다.

5. 실무 적용 시 주의사항

• dvh는 스크롤 과정에서 브라우저 UI 크기가 변할 때마다 요소의 높이를 실시간으로 재계산합니다. 이는 리페인트(Repaint)와 리플로우(Reflow)를 유발하여 화면이 버벅거리는 등 렌더링 성능 저하를 일으킬 수 있습니다.
• 성능이 중요한 페이지이거나 단순히 처음 로드될 때 콘텐츠가 잘리는 것을 막는 것이 목적이라면, 계산 비용이 적고 안전한 svh를 우선적으로 사용하는 것이 권장됩니다.