반응형
뷰포트(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 등 단위 | 비정상적으로 계산됨 | 실제 화면 기준 계산됨 |
반응형
'Responsive > Res-Basic' 카테고리의 다른 글
[Responsive] Mobile First vs Desktop First (4) | 2025.08.06 |
---|---|
[Responsive] 반응형 vs 적응형 (3) | 2025.08.06 |
[Responsive] 레티나(Retina) 디스플레이 (1) | 2025.07.31 |
[Responsive] 반응형 이미지 - 레티나(Retina) 이미지 (1) | 2025.07.31 |
[Responsive] 디바이스 해상도 (1) | 2025.07.31 |