모바일 뷰포트 문제를 해결하는 신규 뷰포트 단위

date

Sep 3, 2024

thumbnail

slug

new-css-viewport-units-2023

author

status

Public

뷰포트 (viewport)

뷰포트 (viewport)

컴퓨터 그래픽스에서 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역을 말한다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말한다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않는다.

뷰포트 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는, 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.

https://developer.mozilla.org/ko/docs/Glossary/Viewport

기존의 뷰포트 유닛

vh와 vw

vh(viewport-height)

높이를 기준으로 하는 뷰포트 유닛

vw(viewport-weight)

너비를 기준으로 하는 뷰포트 유닛

CSS에서 각 단위는 절대 값인 단위와 상대 값이 단위로 나뉜다. 예를 들어 CSS 속성의 값으로 px, cm, pt는 절대 값이고, em, rem은 상대 값이다. vh와 vw는 상대 값으로, 현재 문서를 보고 있는 뷰포트의 초기 블록 너비를 1에서 100(%)까지 백분율로 만든 값이다. 즉, 1vh는 높이의 1%를 의미하고 1vw는 너비의 1%를 의미한다.

기존 뷰포트 유닛의 문제점

모바일 디바이스에서 vh는 이상하게 작동함

웹 페이지를 개발할 때 화면의 크기를 고려하는 것은 매우 중요하다. 100vh, 100vw는 꽉 찬 전체 화면을 의미한다. 그러나 이 방식은 모바일 디바이스에서 브라우저의 툴 바나 주소 표시줄 같은 UI의 크기를 고려하지 않는다는 문제점이 있다.

이런 문제 때문에 모바일 디바이스를 고려하고 개발한 반응형 웹 페이지에서는 의도와는 다르게 뷰포트가 구성되었다. 아래 이미지를 보자.

툴바가 표시된 모바일 브라우저에서 뷰포트 상태 (https://web.dev/blog/viewport-units?hl=ko)

모바일 브라우저에서 툴 바, 주소 표시줄은 동적으로 표시된다. 처음에는 표시되었다가 사용자가 아래로 스크롤하면 사라진다. 다시 위로 스크롤하면 표시된다.

이러한 문제를 해결하기 위해 CSS 또는 Javascript를 이용해서 동적으로 뷰포트를 수정하는 일종의 CSS Trick들이 존재한다. 아래 사이트 링크들은 위 문제들의 해결법을 소개하고 있다.

모바일 브라우저에서의 뷰포트 문제 해결법

The Trick To Viewport Units On Mobile | CSS-Tricks

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

Error | 모바일 브라우저에서 100vh 적용 오류 해결 (ios/android)

100vh가 PC 웹에서는 제대로 작용하나 모바일 웹에서 제대로 적용되지 않는 문제를 JavaScript과 CSS로 해결해봅니다.

https://velog.io/@edie_ko/Tip-모바일-브라우저에서-100vh-적용-오류-해결-iosandroid

Error | 모바일 브라우저에서 100vh 적용 오류 해결 (ios/android)

문제 해결을 위한 New Feature (Google I/O 2022)

이러한 문제를 해결하기 위해 CSS Working Group이 새로운 단위를 소개했다. 구글 I/O 2022년 발표에 State of CSS라는 이름으로 소개되었다.

새로 추가된 뷰포트 유닛

svh와 svw

Small Viewport : 브라우저에서 가장 작게 인식될 수 있는 뷰포트 단위

svh (small viewport-height)

높이를 기준으로 하는 뷰포트 유닛

svw (small viewport-weight)

너비를 기준으로 하는 뷰포트 유닛

작은 뷰포트는 화면의 최소 사이즈를 고려한 뷰포트 단위다. 브라우저에서 주소 표시줄과 도구 모음 등을 고려한 크기다. 브라우저 UI가 표시된 상태의 뷰포트를 의미한다.

lvh와 lvw

Large Viewport : 브라우저에서 가장 크게 인식될 수 있는 뷰포트 단위

lvh (large viewport-height)

높이를 기준으로 하는 뷰포트 유닛

lvw (large viewport-weight)

너비를 기준으로 하는 뷰포트 유닛

큰 뷰포트는 화면의 최대 사이즈를 고려한 뷰포트 단위다. 브라우저 UI가 사라져 있을 때의 크기를 기준으로 한다. 브라우저에서 사용자가 스크롤하여 주소 표시줄이 사라진 상태 등을 의미한다.

dvh와 dvw

Dynamic Viewport : 브라우저를 사용하며 사이즈가 동적으로 변화하는 뷰포트 단위

dvh (dynamic viewport-height)

높이를 기준으로 하는 뷰포트 유닛

dvw (dynamic viewport-weight)

너비를 기준으로 하는 뷰포트 유닛

동적 뷰포트는 화면의 사이즈가 변화하는 것을 고려한 뷰포트 단위다. 사용자가 브라우저를 사용(스크롤 등)하여 주소 표시줄 등 UI가 사라졌다가 생기면서 뷰포트 사이즈가 변경되는 것을 따라 뷰포트를 svh에서 lvh, svw에서 lvw 등으로 실시간 업데이트한다.

지원 여부 확인

Caniuse

Small, Large, and Dynamic viewport units | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

https://caniuse.com/viewport-unit-variants

새 뷰포트 단위는 Chrome 108부터 지원한다. 구형 브라우저에서는 지원하지 않기 때문에 사용에 주의가 필요하다. Caniuse에서 지원 사항을 꼭 확인하고 사용하자.