[프론트엔드] dvh (CSS 단위)
최근 사내와 프로그래머스에서 진행한 프로젝트에서 공교롭게도 모바일 중심의 개발을 진행하며 바텀시트 컴포넌트를 자주 도입하게 되었다. 특히 바텀시트 하단에 input 태그를 배치해 댓글 입력과 같은 기능을 구현하는 형태가 많았다.
그러나 개발 중 키패드가 올라오면 바텀시트 컴포넌트 전체가 키패드의 높이만큼 위로 밀려 화면이 잘리는 문제가 발생했다.
이 문제의 원인은 기존 vh 단위가 브라우저가 초기 화면 높이를 계산한 후 고정된 값을 사용하기 때문에 키패드가 올라오는 상황을 반영하지 못한다는 점이다. 이를 해결하기 위해 검색하던 중 dvh(Dynamic Viewport Height) 단위에 대해 알게 되었다.
dvh (Dynamic Viewport Height)
- dvh는 키패드가 올라오거나 UI가 변동될 때, 실제로 사용 가능한 뷰포트 높이를 동적으로 반영한다.
- 결과적으로, 키패드가 올라와도 요소가 화면에 적절히 맞게 배치된다.
이렇게 dvh 단위를 활용하여 키패드가 올라오는 상황에서도 바텀시트가 적절히 표시되도록 수정할 수 있었다!!
하지만 모든 기술이 그렇듯 dvh가 좋은 점만 있는 것은 아닌데, 지금까지 알아본 문제는 다음과 같다.
1. 최신 브라우저에서만 지원
dvh는 최신 CSS 표준에 따라 도입된 단위이므로 구형 브라우저에서는 지원되지 않다고 한다.
예를 들어, Chrome은 108 버전부터 지원을 시작했고, firefox는 101버전부터, Safari는 15.4 버전부터 지원했다고 한다. 그러니 그 이하의 버전과의 호환성을 고려한다면 사용에 주의를 해야할 것 같다.
2. iOS에서의 동작
iOS는 키패드가 올라오거나 내려갈 때 dvh 단위가 좀 다르게 동작하는 경우가 있다고 한다.
현재까지 몇몇 아이폰 최신 기기에서 테스트를 진행해봤을때는 문제가 없었는데, 다른 기기에 경우에는 문제가 있을 수도 있겠다는 걱정이 된다.
3. 키패드 이외의 요소도 영향을 미침
dvh는 키패드뿐 아니라 주소창, 탭 바 등 모든 시스템 UI에 의해 변경된 높이를 반영한다는 것도 문제가 될 수 있는 것 같다.
아직까지 체감되지는 않지만 특정 기기에서 사용자가 화면을 스크롤하거나 화면을 축소/확장할 경우 예상치 못한 높이 변화가 발생할 수 있을 것 같다.