반응형 웹 디자인: 뷰포트 이해하기 (모든 것을 결정하는 작은 태그)
Source: Dev.to
반응형 웹 디자인은 멋져 보이지만, 대부분의 레이아웃 재난이 HTML 한 줄이 빠진 것에서 시작된다는 것을 깨달을 때까지는 그렇다.
맞아요, 바로 이거죠.
이를 무시하면, 아름답게 만든 사이트가 모바일에서 확대‑스크롤 악몽으로 변합니다. 올바르게 포함하면, 레이아웃이 마치 마무리 학교를 졸업한 듯 부드럽게 동작합니다.
뷰포트가 왜 중요한지, 이 메타 태그가 실제로 무엇을 하는지, 그리고 사용자가 사이트를 화내며 떠나지 않도록 콘텐츠 크기를 어떻게 조절해야 하는지 살펴보겠습니다.
뷰포트란?
viewport는 기기에서 웹 페이지가 보이는 영역을 말합니다. 바로 그거죠. 별다른 비밀은 없습니다.
- 데스크톱에서는 넓고 여유롭습니다.
- 모바일 폰에서는 좁고 냉정합니다.
- 태블릿에서는 그 사이 어딘가에 위치하며 약간은 까다롭습니다.
가이드가 없으면 브라우저는 “도움을 주려”는 의도로 페이지를 데스크톱용으로 설계된 것처럼 렌더링합니다. 모바일에서는 그 결과가 작은 텍스트, 강제 확대/축소, 가로 스크롤 등으로 이어집니다. 즉, 고통 그 자체입니다.
Source: …
뷰포트를 올바르게 설정하기
모든 반응형 웹사이트는 “ 태그 안에 다음을 포함해야 합니다:
이 라인이 실제로 의미하는 바
width=device-width– 브라우저가 페이지 너비를 장치의 실제 화면 너비에 맞추도록 합니다. 가짜 데스크톱 크기가 아닙니다.initial-scale=1.0– 초기 확대 수준을 기본(1배)으로 설정합니다. 확대되지도, 축소되지도 않습니다. 그냥 정상적인 상태입니다.
이 두 설정을 함께 사용하면 레이아웃이 다양한 장치에서 제대로 동작할 가능성이 높아집니다. 이 태그가 없으면 CSS 미디어 쿼리를 완벽하게 작성했더라도 조용히 실패할 수 있습니다.
With vs without the viewport meta tag
Without the viewport tag:
- 모바일 브라우저는 화면이 약 980 px 넓다고 가정합니다.
- 콘텐츠가 축소되어 맞춰집니다.
- 사용자는 핀치, 줌, 눈을 가늘게 뜨고 떠납니다.
With the viewport tag:
- 레이아웃이 실제 디바이스 너비에 맞게 조정됩니다.
- 텍스트가 읽기 쉬운 상태를 유지합니다.
- 가로‑스크롤 서커스가 없습니다.
데스크톱에서는 “잘 보이는데 모바일에서는 깨진다”고 느낀 적이 있다면, 이 태그가 보통 첫 번째 용의자입니다.
뷰포트에 맞게 콘텐츠 크기 조정 (또는 그 외)
사용자는 수직 스크롤을 기대하고, 수평 스크롤은 문이 반대 방향으로 열리는 것과 같은 웹의 불편함입니다. UX를 구원하는 규칙을 소개합니다.
1. 큰 고정‑폭 요소는 피하기
고정 폭은 상황에 따라 괜찮지만, 그렇지 않을 때는 문제를 일으킵니다.
잘못된 예시:
img {
width: 1200px;
}올바른 예시:
img {
max-width: 100%;
height: auto;
}어떤 요소라도 뷰포트보다 넓으면 브라우저는 수평 스크롤을 추가할 수밖에 없습니다. 이는 사용자 탓이 아니라 우리 탓입니다.
2. 한 화면 너비에 맞춰 디자인하지 말기
웹은 다음과 같은 고정 너비가 아닙니다.
- 1440 px 너비
- 375 px 너비
- 혹은 여러분 모니터가 가진 임의의 너비
한 너비에서만 잘 보이는 레이아웃을 설계하는 것은 현실에 맞서 베팅하는 것입니다.
대신에:
- 유연한 레이아웃을 사용하세요.
- 콘텐츠가 자연스럽게 흐르도록 하세요.
- 화면 크기가 크게 다를 수 있음을 받아들이세요.
반응형 디자인은 적응에 관한 것이지 픽셀 완벽함에 관한 것이 아닙니다.
3. 미디어 쿼리를 올바르게 사용하기
미디어 쿼리는 모든 화면에 하나의 레이아웃을 억지로 맞추지 않게 해줍니다.
예시:
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}핵심 아이디어
%,vw,em,rem같은 상대 단위를 선호하세요.- 절대 위치 지정은 조심해서 사용하세요.
- 작은 화면에서 큰 고정 마진이나 오프셋을 피하세요.
레이아웃은 반응해야 하며, 저항해서는 안 됩니다.
뷰포트는 기본이다
반응형 디자인은 Flexbox, Grid, 혹은 화려한 프레임워크에서 시작되지 않습니다. 다음부터 시작합니다:
- 뷰포트를 존중하기.
- 콘텐츠가 자연스럽게 스케일되도록 하기.
- 스크린샷이 아니라 실제 기기를 손에 들고 있는 사람을 위해 디자인하기.
그 하나의 메타 태그만으로 사이트가 반응형이 되는 것은 아니지만, 이 태그가 없으면 다른 모든 것이 제대로 작동하지 않습니다. CSS를 초대하기 전에 문을 여는 것이라고 생각하면 됩니다.
최종 생각
viewport 메타 태그는 작고 지루하며 쉽게 잊혀집니다. 바로 그 때문에 많은 웹사이트가 깨지는 것입니다.
한 번만 설정하세요. 제대로 이해하세요. 그러면 레이아웃이 실행 중인 기기와 싸우는 일을 멈춥니다.
그것은 마법이 아닙니다. 단지 좋은 웹 디자인일 뿐입니다.