meta viewport

뷰포트 줄(name="viewport"인 meta 줄)은 휴대전화 브라우저에 '기기 화면 폭으로 배치하라'고 알리는 줄입니다. 이 줄이 없으면 휴대전화는 페이지를 980px 폭으로 배치한 뒤 화면에 맞게 줄여 보여, 글자가 작아집니다.

문서 뼈대에서 복사해 두는 줄 넷 가운데 하나로 뷰포트 줄을 넣었지만, 하는 일은 미뤄 두었습니다. 컴퓨터에서는 이 줄이 있으나 없으나 똑같이 보여 뜻을 알기 어렵습니다. 이 레슨은 휴대전화가 이 줄을 보고 무엇을 바꾸는지, 컴퓨터에서 그 차이를 어떻게 확인하는지 봅니다.

이 단원을 마치면 레시피 노트를 휴대전화에서는 좁은 화면에 맞게, 넓은 화면에서는 머리글을 한 줄로 보이고, 320~1280px 어느 폭에서도 가로 스크롤이 생기지 않게 할 수 있습니다. 이 단원(화면 폭에 맞추기)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

그림 준비 중

1뷰포트 줄이 없으면 980px로 배치한다

단위마다 기준에서 본 뷰포트(viewport)는 브라우저 창에서 페이지가 보이는 칸입니다. 블록은 너비를 적지 않으면 부모 내용 칸을 채우는데, 맨 바깥 상자가 채우는 폭이 뷰포트 폭입니다(브라우저 규칙 6). 컴퓨터에서는 창 폭이 곧 뷰포트 폭입니다.

휴대전화 화면은 좁습니다. iPhone 16의 화면 폭은 393px입니다 — 화면의 점(픽셀)은 가로 1179개이지만, CSS는 가로 점 세 개를 1px로 셉니다.

휴대전화가 나오기 전의 페이지는 넓은 화면을 생각하고 만들었습니다. 그런 페이지를 393px에 맞춰 배치하면 깨지기 쉬워서, 휴대전화 브라우저는 뷰포트 줄이 없는 페이지를 넓은 화면처럼 980px 폭으로 배치합니다. 그리고 그 980px을 화면 폭에 맞게 통째로 줄여 보입니다. 393 ÷ 980이라 약 0.4배 — 글자도 상자도 0.4배 크기로 보여, 손가락으로 벌려 키워야 읽힙니다.

2width=device-width — 기기 폭으로 배치한다

뷰포트 줄은 head 안 charset 줄 다음에 둡니다. content="width=device-width"⁠는 '뷰포트 폭을 기기 화면 폭으로'라는 뜻입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>레시피 노트</title>
</head>
<body>
  <h1>레시피 노트</h1>
  <p>내가 만든 요리를 기록하는 곳</p>
</body>
</html>

결과 화면을 393px 폭으로 그렸습니다. 이 페이지를 iPhone 16에서 열면 이 폭으로 배치합니다 — 줄이지 않으니 글자는 제 크기이고, 문단은 393px 안에서 줄을 바꿉니다. h1은 블록이라 body 내용 칸(393 − 8 × 2 = 377px)을 채웁니다.

width=device-width 뒤에 쉼표와 initial-scale=1을 붙여 쓰는 자료도 많습니다. 이 과목은 줄을 짧게 쓰려고 width=device-width만 씁니다 — 휴대전화 흉내에서 둘 다 393px 폭으로 배치합니다.

뷰포트 줄은 다음 레슨의 미디어 쿼리와도 이어집니다. 줄이 없으면 휴대전화도 980px 화면으로 여겨져, '640px 이상일 때' 같은 넓은 화면 조건이 휴대전화에서 맞습니다.

3컴퓨터에서 확인하기 — 기기 모드

컴퓨터 브라우저는 뷰포트 줄을 따르지 않습니다. 창을 393px로 좁혀도 줄이 있으나 없으나 393px 폭으로 배치합니다(크롬 기준). 그래서 창만 좁혀 보면 뷰포트 줄을 빠뜨린 것을 알아챌 수 없습니다.

휴대전화처럼 보려면 개발자 도구의 기기 모드를 씁니다.

1. 개발자 도구를 엽니다(개발자 도구로 요소 나무 보기).
2. 개발자 도구 맨 위 줄의 Toggle device toolbar 단추(한국어 화면에서는 '기기 툴바 전환')를 누릅니다. 페이지 위에 기기 줄이 생깁니다.
3. 기기 줄 맨 앞 Dimensions: Responsive 목록(한국어 화면에서는 '크기: 반응형')에서 휴대전화 하나를 고릅니다.

휴대전화를 고르면 그 기기의 화면 폭과 뷰포트 줄 처리를 흉내 냅니다 — 뷰포트 줄을 지운 페이지는 980px로 배치해 줄여 보입니다. 기기 모드도 흉내이므로, 다 만든 페이지는 실제 휴대전화에서도 한 번 열어 봅니다.

예제

휴대전화에서 본 할 일 화면

할 일 화면의 .app 카드는 가운데 모으기에서 본 상한 520px과 margin: 0 auto를 씁니다. 뷰포트 줄이 있는 할 일 화면을 iPhone 16 폭으로 그립니다.

<div class="app">
  <h1>오늘 할 일</h1>
</div>

* {
  box-sizing: border-box;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px;
}

• 393px 폭으로 배치하니 카드가 상한 520에 닿지 못하고 body 내용 칸 377px을 채웁니다.
• 뷰포트 줄이 없으면 휴대전화는 980px 폭으로 배치합니다. 카드는 520px에서 멈춰 가운데에 뜨고, 그 화면 전체가 0.4배로 줄어 보입니다 — 카드가 화면 폭의 반 남짓만 차지하고 글자는 작습니다(iPhone 16 흉내 재현).

자주 틀리는 곳

틀린 생각: 휴대전화는 저절로 화면 폭에 맞춰 배치한다.

<head>
  <meta charset="utf-8" />
  <title>레시피 노트</title>
</head>
…

뷰포트 줄이 없는 이 페이지를 iPhone 16에서 열면 980px 폭으로 배치하고 약 0.4배로 줄여 보입니다. 휴대전화는 폭을 맞추지 않고, 넓은 화면의 페이지를 통째로 작게 보였습니다.

맞는 규칙: 휴대전화가 기기 화면 폭으로 배치하는 것은 뷰포트 줄이 있을 때입니다. 줄이 없으면 980px 넓은 화면처럼 배치합니다.

틀린 생각: 컴퓨터 브라우저 창을 휴대전화만큼 좁히면 휴대전화에서 보는 것과 같다.

위 코드처럼 뷰포트 줄이 없는 페이지도 창을 393px로 좁히면 393px 폭으로 배치되어 멀쩡해 보입니다. 컴퓨터 브라우저는 뷰포트 줄을 보지 않기 때문입니다. 같은 페이지가 휴대전화에서는 980px로 배치되어 작게 줄어 보입니다.

맞는 규칙: 창을 좁히는 것은 휴대전화 흉내가 아닙니다. 기기 모드에서 휴대전화를 고르거나 실제 휴대전화에서 열어 봅니다.

틀린 생각: 화면이 흐트러지지 않게 content에 user-scalable=no를 더해 확대를 막는다.

content에 더한 user-scalable=no는 손가락으로 벌려 키우는 것을 막으려는 값입니다. 작은 글자를 키워 읽어야 하는 사람이 페이지를 읽지 못하게 됩니다. 그래서 브라우저가 이 값을 따르지 않기도 합니다 — iOS 10 이후의 사파리는 처음부터 따르지 않습니다(MDN).

맞는 규칙: 확대는 막지 않습니다. 뷰포트 줄의 content는 width=device-width만 둡니다. 웹 접근성 지침(WCAG)은 글을 두 배까지 키울 수 있기를 요구합니다.

확인 문제

1. 화면 폭이 360px인 휴대전화에서, 뷰포트 줄이 있는 예제의 할 일 화면을 엽니다. .app의 너비는 몇 px일까요?

• ① 344px
• ② 360px
• ③ 520px

<div class="app">
  <h1>오늘 할 일</h1>
</div>

* {
  box-sizing: border-box;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px;
}

2. 휴대전화가 기기 화면 폭으로 배치하도록 뷰포트 줄의 ____ 자리를 채우세요.

<meta
  name="viewport"
  content="____"
/>

3. 여행 일정 페이지가 휴대전화에서 글자가 작게 줄어 보입니다. 컴퓨터에서 기기 모드로 열어 보니 980px 폭으로 배치되어 있습니다. head에서 고칠 곳을 고르세요.

<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="device-width"
  />
  <title>여행 일정</title>
</head>
…

• ① name="viewport"를 name="device"로 바꾼다.
• ② content="device-width"⁠를 content="width=device-width"⁠로 바꾼다.
• ③ 뷰포트 줄을 body 안 맨 위로 옮긴다.

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절의 문서를 index.html로 저장해 크롬에서 엽니다. 개발자 도구에서 기기 모드를 켜고 휴대전화 하나를 고른 뒤, 글자 크기를 봅니다. 이번에는 뷰포트 줄(5~8번 줄)을 지우고 저장 · 새로고침합니다 — 페이지 전체가 작게 줄어 보입니다. 기기 모드를 끄고 창만 좁히면 줄이 없어도 그대로라는 것도 견줘 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.