현대적인 뷰포트 단위(SVH, LVH, DVH)를 활용한 반응형 웹 디자인 마스터링
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 반응형 디자인에 관심 있는 개발자
난이도: 중급 이상 (CSS 및 뷰포트 개념 이해 필수)
핵심 요약
svh,lvh,dvh뷰포트 단위는 모바일 브라우저 UI 변화에 따른 레이아웃 불안정 문제를 해결svh는 브라우저 UI가 보일 때의 최소 뷰포트 높이(1% 기준)를 기준으로 계산dvh는 브라우저 UI 상태에 따라 동적으로 높이 조정 (사용자 스크롤 시 자동 조절)- 브라우저 지원: Chrome 108+, Firefox 101+, Safari 15.4+, Edge 108+
섹션별 세부 요약
1. 뷰포트 문제의 이해
- 모바일 브라우저에서 주소창 등 UI 요소의 출입으로 뷰포트 높이가 변동
- 기존
vh단위는 브라우저별로 계산 방식이 달라져 레이아웃 불안정 유발
2. 전통적인 `vh` 단위의 한계
1vh = 1% 뷰포트 높이로 정의되지만,
- 일부 브라우저는 UI 숨김 시 최대 높이 계산
- 다른 브라우저는 UI 보일 때 최소 높이 계산
- 결과적으로 모바일에서 레이아웃 오류 발생 가능성
3. 새로운 뷰포트 단위 소개
svh: UI가 보일 때의 최소 뷰포트 높이 기준 (예:.header { height: 100svh; })lvh: UI가 숨길 때의 최대 뷰포트 높이 기준 (예:.full-screen-image { height: 100lvh; })dvh: 브라우저 UI 상태에 따라 동적 높이 조정 (예:.hero-section { min-height: 100dvh; })
4. 브라우저 지원 및 호환성
- 지원 브라우저: Chrome 108+, Firefox 101+, Safari 15.4+, Edge 108+
- 호환성 대응:
```css
.container {
height: 100vh; / Fallback for non-supporting browsers /
height: 100dvh; / Modern browsers will use this /
}
```
5. 실무 적용 예시
dvh활용:
```css
.modal {
max-height: 90dvh;
overflow-y: auto;
}
```
svh활용:
```css
.bottom-nav {
bottom: calc(100% - 100svh); / UI가 보일 때 하단 고정 /
}
```
6. 최적화 팁 및 주의사항
- Fallback 제공 (기존
vh단위로 기본값 설정) - 실제 기기 테스트 (브라우저별 레이아웃 차이 확인)
- 메디어 쿼리와 조합 (더 정교한 반응형 디자인 구현)
- 성능 고려:
dvh는 레이아웃 재계산 빈도가 높을 수 있으나, 최신 브라우저는 최적화 완료
결론
dvh는 브라우저 UI 변화에 따라 자동 높이 조정으로 사용자 경험 개선svh는 UI가 보일 때의 최소 높이로 필수 요소 노출 보장- Fallback 적용과 실제 기기 테스트는 필수이며, 2025년 기준 최신 브라우저 지원 정보 반영
dvh는 JavaScript 없이 네이티브로 처리되어 보다 효율적 (FAQ 참고)