CSS Viewport 사이즈 상대 길이 단위

모바일 화면에서 100vh의 문제

모바일 웹 앱에서 풀사이즈 화면을 만들어야 할 일이 있었습니다. 그래서 100vh를 사용했음에도 불구하고 모바일 chrome과 safari에서는 컨텐츠가 브라우저 세로 크기보다 커서 스크롤이 생기는 문제가 생겼습니다. 이 문제 때문에 많은 개발자들이 고통받고 있었습니다.

오랜 시간이 지나서야 dvh와 같은 새로운 단위가 추가되어 문제를 쉽게 해결할 수 있게 되었습니다.

Viewport란?

MDN 문서에 의하면 Viewport란 컴퓨터 그래픽스 분야에서 현재 보이는 화면 영역을 의미합니다.[1] 그리고 웹 브라우저 용어로는 일반적으로 UI, 메뉴 바, 등을 제외한 브라우저 창의 영역입니다.

Viewport 사이즈 상대 길이 단위: vh, vw

1 vh는 Viewport 높이의 1%를 의미합니다. 예를 들어 80 vh는 Viewport 높이의 80%를 의미합니다. 만약 Viewport 높이가 1080 px라면, 1 vh는 1080 px의 1%인 108px, 80 vh는 1080 px의 80%인 864 px입니다.

1 vw는 Viewport 너비의 1%를 의미합니다. 예를 들어 40 vw는 Viewport 너비의 40%를 의미합니다. 만약 Viewport 너비가 1920 px라면, 1 vw는 1920 px의 1%인 192px, 40 vw는 1920 px의 40%인 768 px입니다.

문제점

모바일 웹에서 Viewport 사이즈를 100vh로 설정하면 브라우저의 일부 UI가 무시되어 의도한 것 보다 더 큰 영역이 Viewport 사이즈로 잡힙니다. 그 결과 의도했던 것 보다 세로로 더 길게 화면이 생성되고 스크롤이 생기는 문제가 발생합니다.

새로운 Viewport 사이즈 상대 길이

이러한 문제를 해결하기 위해 dvh, dvw라는 개념이 나왔습니다. vh 대신 dvh를 사용합니다.

동적인 Viewport 사이즈 상대 길이 단위: dvh, dvw

dvh, dvw는 Viewport 사이즈 변화에 따라서 동적으로 변화하는 단위입니다.

모바일 브라우저에서 스크롤을 하면 Viewport 사이즈가 동적으로 svh ~ lvh, svw ~ lvw 사이로 변화합니다. 이 사이즈를 각각 dvh, dvw로 구할 수 있습니다. 그래서 dvh와 dvw를 사용하면 꽉 찬 모바일 웹 화면을 보다 안정적으로 구현할 수 있습니다.