01DEFINITION
한 줄로 말하면
viewport 메타 태그가 없으면 모바일 브라우저는 화면 폭을 데스크톱으로 가정하고 페이지를 통째로 축소해 보여 줍니다. 글자가 깨알같이 작아지고 손가락으로 확대해야 읽히는 그 화면입니다. 구글은 모바일 화면을 기준으로 색인하기 때문에 순위에도 그대로 영향을 줍니다. 반응형 CSS 를 다 짜 놓고 이 한 줄만 빠져 있는 경우가 실제로 있습니다.
02RISK
없으면 무슨 일이 생기나
이 태그가 없으면 모바일 브라우저는 화면 폭을 980픽셀 정도로 가정합니다. 실제 기기 폭은 그 절반도 안 되니 페이지 전체를 축소해서 보여 줍니다. 글자가 깨알같이 작아지고, 읽으려면 손가락으로 벌려 확대해야 하며, 확대하면 좌우로 밀면서 읽어야 합니다. 대부분의 방문자는 거기서 나갑니다.
더 답답한 경우는 반응형 CSS 를 이미 다 짜 놓고 이 한 줄만 빠진 것입니다. 미디어 쿼리는 화면 폭을 기준으로 동작하는데 브라우저가 폭을 980으로 알고 있으니, 모바일용 스타일이 아예 발동하지 않습니다. 개발자 도구에서 창을 줄여 보면 잘 되는데 실제 기기에서만 안 되는 상태가 이것입니다.
검색 쪽 손해가 함께 옵니다. 구글은 모바일 화면을 기준으로 페이지를 평가하기 때문에, 축소되어 읽기 어려운 화면이 그 페이지의 기본 모습으로 기록됩니다. 데스크톱에서 아무리 잘 보여도 평가되는 것은 그쪽이 아닙니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
태그가 있는지 본다
head 안에 한 줄입니다. 없으면 이 항목에 걸리고, 있어도 값이 이상하면 다른 문제가 됩니다.
$ curl -s https://example.com/ | grep -i 'name="viewport"' <meta name="viewport" content="width=device-width, initial-scale=1">
-
02
실제 휴대전화로 열어 본다
브라우저 창을 줄이는 것으로는 이 문제가 재현되지 않습니다. 창 크기를 줄이면 폭이 실제로 줄어들지만, 태그가 없는 상태의 모바일은 폭을 크게 가정한 채 축소만 하기 때문입니다. 반드시 기기나 개발자 도구의 기기 모드로 확인하십시오.
-
03
가로 스크롤이 생기는지 본다
viewport 를 넣은 뒤에 흔히 나타나는 다음 문제입니다. 폭이 고정된 표나 이미지가 화면을 밀어내면 페이지 전체가 좌우로 흔들립니다. 태그가 있는데도 모바일이 어색하다면 이쪽을 보십시오.
-
04
user-scalable 값이 들어 있는지 확인한다
확대를 막아 둔 사이트가 아직 있습니다. 이것은 저시력 사용자가 글자를 키울 수 없게 만드는 접근성 문제이고, 최신 브라우저 일부는 이 지시를 무시합니다.
$ curl -s https://example.com/ | grep -i "user-scalable"
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
이 값이 사실상 표준입니다. 화면 폭을 기기 폭으로 잡고 배율을 1로 시작합니다. 더 붙일 것이 거의 없습니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no 나 maximum-scale=1 은 접근성 문제를 만듭니다. 확대를 막아야 할 만큼 레이아웃이 취약하다면 그 레이아웃을 고치는 것이 맞는 순서입니다.
<!-- 이렇게 쓰지 않는다 --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
화면 가장자리까지 배경을 채우는 디자인이라면 안전 영역 처리를 함께 지정합니다. 그렇지 않으면 좌우에 흰 띠가 남습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
태그만 넣으면 그동안 감춰져 있던 폭 문제가 드러납니다. 폭이 고정된 표, 원본 크기 이미지, 긴 영문 주소가 주된 원인입니다. 넘치는 요소는 스스로 스크롤되게 감싸고, 이미지는 최대 폭을 제한하십시오.
img, video { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; } 05FAQ
자주 묻는 질문
반응형 CSS 가 없는 사이트에 이 태그만 넣어도 되나요
- 넣으면 축소가 사라지는 대신 데스크톱 레이아웃이 화면 밖으로 잘려 나갑니다. 어느 쪽이 나은지는 사이트마다 다르지만, 대개는 태그를 넣고 최소한의 폭 대응을 함께 하는 편이 낫습니다. 이미지와 표만 정리해도 상당히 달라집니다.
모바일 전용 사이트를 따로 운영하는 경우에도 필요한가요
- 모바일 주소로 넘기는 방식이라면 그 모바일 페이지에 이 태그가 있어야 합니다. 다만 요즘은 주소를 나누는 방식 자체가 관리 비용과 색인 문제를 만들어 권장되지 않습니다. 하나의 주소에서 반응형으로 대응하는 쪽이 표준입니다.
initial-scale 을 1 이 아닌 값으로 두면 어떻게 되나요
- 페이지가 처음부터 확대되거나 축소된 상태로 열립니다. 특별한 이유 없이 이 값을 조정하면 기기마다 다르게 보이고 예측이 어려워집니다. 1 로 두고 배치는 CSS 로 조정하는 것이 원칙입니다.
이 태그가 SEO 항목으로 분류된 이유가 무엇인가요
- 구글이 모바일 화면을 기준으로 페이지를 색인하기 때문입니다. 모바일에서 읽기 어려운 상태는 그 페이지의 기본 상태로 평가됩니다. 사용성 문제이면서 동시에 검색 노출 문제라서, 두 영역 중 어느 쪽에 넣어도 이상하지 않은 항목입니다.
RELATED
같이 보시면 좋은 항목
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 25가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.