Responsive/Res-Basic

[Responsive] 뷰포트(viewport)

ui-o 2025. 7. 31. 14:45
반응형

뷰포트(viewport)

  • 정의 : 사용자의 브라우저 화면에서 실제로 웹사이트가 보여지는 영역을 의미
  • 디바이스가 아무리 크더라도, 웹사이트가 보이는 건 뷰포트 크기 기준
  • meta vieport : 뷰포트를 디바이스 너비에 맞추는 설명
  • 디바이스 픽셀이 아니라 웹이 계산에 사용하는 단위(=CSS 픽셀)로 측정됨 

뷰포트 설정 방법

  • HTML <head>에 필수로 들어가는 메타태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">
속성 설명
width=device-width 뷰포트 너비를 디바이스 화면 너비에 맞춤
initial-scale=1.0 페이지 처음 로딩 시의 줌 배율 (100%)
maximum-scale=1.0 최대 확대 배율 제한
user-scalable=no 사용자가 확대/축소 못하게 막음

왜 <meta name="viewport">를 꼭 설정해야 할까?

실제로 뷰포트 미 설정 시 발생하는 문제는 개발자 도구가 아닌 디바이스에서 확인 가능 (개발자 도구에서는 정상 작동처럼 보임)

1. 모바일 브라우저의 기본 뷰포트는 PC 기준

  • 모바일 브라우저는 기본적으로 980px 정도의 넓은 뷰포트를 가상으로 만들어서 PC처럼 보여줌
  • 반응형 CSS(media query)가 적용돼도  모바일 기기에서 PC처럼 보이게 만드는 게 기본값으로 디자인이 깨짐

2. 유저는 확대하거나 가로 스크롤해야 제대로 볼 수 있음

  • 뷰포트를 설정하지 않으면:
     - 콘텐츠가 980px 기준으로 그려짐 / 모바일 화면 너비는 예: 360px 정도
    👉 유저는 확대/축소하거나 좌우로 스크롤해야 웹사이트를 볼 수 있음
          "폰트 작고, 버튼도 작고, 좌우 스크롤이 생김"

3. 반응형 디자인이 의미 없어짐

  • 뷰포트를 설정하지 않으면 CSS의 vw, media query, rem 등 모든 단위가 비정상적으로 작동함.
/*
디바이스 화면 너비가 360px인데, 브라우저는 980px로 인식하여
100vw가 실제 화면보다 훨씬 넓게 잡혀서 가로 스크롤이 생김
*/
.container {
  width: 100vw;
}

4. 실제 디바이스 화면에 맞는 크기로 콘텐츠가 렌더링되기 위해

제대로 viewport가 설정되어 있으면:

  • 브라우저는 실제 디바이스 너비 (예: 360px)를 기준으로 레이아웃을 잡음
  • media query도 잘 작동
  • vw, rem, %, flexbox 등도 기기 맞춤으로 적용됨
  • 확대/축소 없이 콘텐츠가 딱 맞게 보임

비교

항목 설정하지 않은 경우 설정한 경우( width=device-width)
화면 기준 PC처럼 980px 기기 실제 너비 (예: 360px)
글자 크기 너무 작음 적당하게 보임
버튼, 요소 너무 작아서 클릭 어려움 터치에 맞게 큼
스크롤 좌우 스크롤 생김 없음
media query 적용 안 됨 정상 작동
vw, rem 등 단위 비정상적으로 계산됨 실제 화면 기준 계산됨

 

반응형