황규연
모바일의 뷰포트를 깊게 아실 필요는 없지만 알아 두시면 도움이 되리라 생각됩니다.
우선 뷰포트는 제조사에서 규정된 해상도를 기준으로 합니다.
"뷰포트(Viewport)"는 웹 페이지에서 사용자가 볼 수 있는 영역을 의미합니다.
뷰포트는 화면에 표시되는 웹 콘텐츠의 일부분으로, 사용자가 스크롤할 수 있는 영역입니다.
이는 웹 페이지가 다양한 디바이스와 화면 크기에 대응하기 위해 중요한 개념 중 하나입니다.
기획 용어로는 Above the Fold라고 지칭하는 경우가 있는데요 물론 뷰포트라는 기술적인 용어와는 다릅니다.
웹페이지에서 아무 행동(스크롤, 클릭 등)을 하지 않은 부분.
접은 신문의 첫 페이지의 상단에서 따옴
웹브라우저 기준에서의 뷰포트영역과 캔버스 영역
모바일 브라우저 기준에서의 뷰포트영역
예) 아이폰15 기준으로 설명
2556 x 1179 픽셀 해상도(460ppi)
모바일앱 기준 : 393 x 852
모바일웹 기준 : 393 x 659(741)
모바일에서 해상도라고 하면 위에 뷰포트 영역으로 이해해 주시면 됩니다.
보통 앱 작업을 한다면 흔히 말하는 해상도 기준으로 알고 계시면 됩니다.
그렇지만 모바일웹이라면 달라집니다.
모바일웹은 브라우저에서 보이는 화면 즉 주소표시줄과 네이게이션 영역을 제외한 부분입니다.
이해를 돕기 위해서 그림입니다.
iOS 사파리 브라우저는 스크롤에 따라서 주소표시줄과 네이게이션 영역이 숨어 있다가 나타나기도 합니다.
iOS 기준이긴 하지만 안드로이드 계열도 비슷합니다.
Samsung Galaxy S23 뷰포트
Samsung Galaxy Z Fold5 뷰포트
모바일앱과 모바일웹의 차이점
위의 예시 이미지처럼 높이에 차이가 있습니다.
스마트폰에서 height 영역은 주소표시줄과 네이게이션 영역를 제외하면 넓지 않다는 점입니다.
브라우저의 뷰포트 너비와 높이를 확인하는 방법
보유하고 계신 스마트폰에 뷰포트가 궁금하시면 아래 사이트로 접속해보세요.
