Blog

테크

CSS Viewport 사이즈 상대 길이 단위

#Frontend#CSS

2023-06-12

CSS Viewport 사이즈 상대 길이 단위

CSS Viewport 사이즈 상대 길이 단위

마지막 수정시간
Last updated October 25, 2023
블로그_관련제품
checkbody
카테고리
테크
제품
전체
작성자
생성일
Jun 12, 2023 08:50 AM
생성자
상태
완료
블로그게시
게시
태그
Frontend
CSS
마지막 수정자
게시자
jujeong
블로그카테고리
tech
업로드표시날짜
Jun 12, 2023
요약
블로그_이벤트

모바일 화면에서 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입니다.

문제점

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

새로운 Viewport 사이즈 상대 길이

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

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

dvh, dvw는 Viewport 사이즈 변화에 따라서 동적으로 변화하는 단위입니다.
출처: GoogleIO 2022 (link)
출처: GoogleIO 2022 (link)
모바일 브라우저에서 스크롤을 하면 Viewport 사이즈가 동적으로 svh ~ lvh, svw ~ lvw 사이로 변화합니다. 이 사이즈를 각각 dvh, dvw로 구할 수 있습니다. 그래서 dvh와 dvw를 사용하면 꽉 찬 모바일 웹 화면을 보다 안정적으로 구현할 수 있습니다.
iOS Safari에서 본 100 dvh
iOS Safari에서 본 100 dvh
iOS Chrome에서 본 100 dvh
iOS Chrome에서 본 100 dvh
macOS Chrome에서 본 100 dvh
macOS Chrome에서 본 100 dvh

Viewport 최소 사이즈 상대 길이 단위: svh, svw

Viewport 최소 사이즈는 브라우저에서 가장 작게 인식될 수 있는 Viewport 크기를 의미합니다.
iOS Safari에서 본 100 svh
iOS Safari에서 본 100 svh
iOS Chrome에서 본 100 svh
iOS Chrome에서 본 100 svh
macOS Chrome에서 본 100 svh
macOS Chrome에서 본 100 svh

Viewport 최대 사이즈 상대 길이 단위: lvh, lvw

Viewport 최대 사이즈는 브라우저에서 가장 크게 인식될 수 있는 Viewport 크기를 의미합니다.
iOS Safari에서 본 100 lvh
iOS Safari에서 본 100 lvh
 iOS Chrome에서 본 100 lvh
iOS Chrome에서 본 100 lvh
macOS Chrome에서 본 100 lvh
macOS Chrome에서 본 100 lvh

브라우저 호환성 확인

대부분의 최신 브라우저 (22년 중순 ~ 말 출시)에서 dvh와 dvw를 지원합니다.[2] 그러나 구형 브라우저 (22년 중순 이전 출시)에서는 지원하지 않기 때문에 사용에 주의가 필요합니다.

테스트용 프로젝트

notion image
NextJS로 만든 Viewport 상대 길이 단위 테스트 프로젝트입니다. yarn dev로 서버를 실행할 수 있습니다.
viewport-test-app
wodndbUpdated Jun 29, 2023

참고자료


[1] What is a viewport?, Viewport concents, MDN web docs, link
[2] Samll, Large, and Dynamic viewport units, Can I use…, link
 

jujeong

관련된 이야기