혹시 내 블로그나 웹사이트의 속도를 측정하다가 ‘maximum-scale 속성이 5보다 작음’이라는 경고 메시지를 보신 적 있으신가요? 이게 뭔가 싶어서 그냥 넘어가기 쉬운데, 사실 모바일 최적화 점수를 깎아먹는 주범 중 하나랍니다. 오늘은 이 뷰포트(Viewport) 설정이 왜 중요한지, 그리고 어떻게 수정하면 사용자가 화면을 자유롭게 확대하고 축소할 수 있게 만들어서 SEO 점수까지 챙길 수 있는지 차근차근 알려드릴게요.
maximum-scale 오류가 생기는 이유와 SEO 영향
검색엔진 최적화(SEO)라고 하면 보통 키워드나 좋은 글만 생각하기 쉽지만, 사실 구글은 사용자가 사이트를 얼마나 편하게 이용하는지도 꼼꼼하게 따져요. 특히 스마트폰으로 검색하는 사람이 워낙 많다 보니 모바일 환경 점수가 정말 중요해졌는데요. 여기서 “maximum-scale 속성이 5보다 작음”이라는 오류가 뜨면 꽤 큰 감점 요인이 될 수 있어요.
이 오류가 뜨는 이유는 간단해요. 모바일 사용자가 글씨가 작아서 화면을 손가락으로 확대하려고 할 때, 사이트 설정이 그걸 막고 있기 때문이에요. 이렇게 되면 시력이 좋지 않거나 작은 화면을 보는 분들은 정말 답답함을 느끼겠죠? 구글은 이걸 ‘접근성이 떨어진다’고 판단해서 성능 점수를 낮게 줍니다. 결국 내 글이 검색 결과에서 뒤로 밀릴 수도 있다는 뜻이니, 얼른 고쳐주는 게 좋아요.
오류를 만드는 범인은 바로 VIEWPORT 태그
이 문제는 HTML 편집창의 가장 윗부분, 즉 head 태그 안에 있는 VIEWPORT 메타 태그 설정 때문에 발생해요. 이 태그는 “모바일에서 화면을 이렇게 보여줘”라고 브라우저한테 말해주는 역할을 하거든요. 그런데 많은 블로그 스킨이나 테마들이 기본적으로 화면 확대를 못 하게 막아둔 경우가 많아요.
보통 아래와 같은 코드가 들어있으면 오류가 발생해요.
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
위 코드를 자세히 보면 user-scalable=no라고 되어 있죠? 사용자가 화면 크기를 조절할 수 없다는 뜻이에요. 게다가 maximum-scale=1.0은 최대 배율을 1배로 고정해버려서, 100% 이상 확대가 안 되게 막아버립니다. 이런 설정은 사용자를 불편하게 만들고, 결과적으로 웹사이트 방문자가 금방 나가버리게 만드는 원인이 되기도 해요.
해결 방법: 뷰포트 설정을 이렇게 바꿔보세요
해결 방법은 정말 간단해요. 기존의 꽉 막힌 코드를 지우고, 사용자가 자유롭게 화면을 확대할 수 있도록 열어주는 코드로 바꿔주면 됩니다. 이것만 해줘도 라이트하우스(Lighthouse)나 페이지스피드 인사이트 점수가 쑥 올라가는 걸 볼 수 있어요.
가장 추천하는 VIEWPORT 코드
HTML 편집기에서 head 부분을 찾아서 기존 뷰포트 태그를 아래 코드로 교체해 보세요.
meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
이 코드가 좋은 이유는 불필요한 제한을 싹 없앴기 때문이에요. width=device-width는 기기 화면 너비에 맞춰서 보여준다는 뜻이고, initial-scale=1은 처음에 100% 크기로 보여준다는 뜻이에요. 무엇보다 확대를 막는 코드가 없기 때문에 사용자가 원하면 언제든 화면을 키워서 볼 수 있어요.
수정하면 뭐가 좋아질까요?
이렇게 코드를 바꾸면 ‘maximum-scale 속성이 5보다 작음’ 오류가 사라지는 건 물론이고요, 구글이 “아, 이 사이트는 사용자 배려를 잘 하는구나”라고 인식해서 접근성 점수를 높게 줍니다. 작은 글씨를 확대해서 보고 싶은 사용자들도 편안하게 머무를 수 있으니 이탈률도 줄어들겠죠? 작은 차이지만 SEO에는 꽤 긍정적인 영향을 미친답니다.
모바일 접근성, 왜 이렇게 중요할까요?
단순히 오류 메시지 하나 없애는 것보다 더 중요한 건, 우리 사이트를 방문하는 사람들의 마음을 이해하는 거예요. 구글은 이미 모바일 중심의 색인(Mobile-First Indexing)을 기본으로 하고 있어요. 즉, PC 화면보다 모바일 화면이 더 중요하다는 거죠.
사용자가 머무르는 시간이 늘어납니다
만약 여러분이 어떤 사이트에 들어갔는데 글씨가 너무 작아서 안 보이는데 확대도 안 된다면 어떨까요? 짜증 나서 바로 뒤로 가기를 누르겠죠? 이게 바로 ‘이탈률’이 높아지는 이유예요. 반대로 확대로 자유롭고 보기가 편하다면 사용자는 더 오래 머물면서 글을 읽을 거예요. 체류 시간이 길어지면 검색 순위도 자연스럽게 올라간다는 사실, 잊지 마세요.
경쟁 사이트보다 앞서가는 방법
의외로 아직도 많은 웹사이트들이 옛날 방식의 뷰포트 설정을 그대로 쓰고 있어요. 기본 스킨을 수정 없이 그냥 쓰기 때문인데요. 여러분이 이 작은 설정 하나만 제대로 바꿔도 경쟁 사이트보다 훨씬 더 나은 사용자 경험을 줄 수 있고, 이게 곧 경쟁력이 됩니다. maximum-scale을 억지로 5.0으로 적을 필요 없이, 그냥 제한하는 속성을 싹 지우는 게 가장 깔끔하고 좋은 방법이에요.
추가로 챙기면 좋은 모바일 체크리스트
뷰포트 설정 외에도 모바일 점수를 잘 받으려면 몇 가지 더 신경 쓰면 좋아요.
- 버튼 크기: 손가락이 굵은 사람도 쉽게 누를 수 있게 버튼이나 링크 크기를 넉넉하게(최소 48px) 만들어주세요.
- 간격 조절: 링크들이 너무 다닥다닥 붙어 있으면 잘못 누르기 쉬워요. 간격을 충분히 띄워주는 센스가 필요합니다.
- 반응형 디자인: 어떤 스마트폰으로 봐도 레이아웃이 깨지지 않게 CSS를 잘 다듬어주세요.
직접 수정할 때 주의할 점과 팁
직접 코드를 고치는 게 겁나실 수도 있는데요, 생각보다 어렵지 않아요. 티스토리를 쓰신다면 ‘스킨 편집’의 ‘HTML 편집’으로 들어가시면 되고요, 워드프레스나 일반 웹사이트라면 테마 파일의 헤더 부분(header.php 등)을 보시면 됩니다.
티스토리나 블로그 스킨 수정 팁
HTML 편집 창에서 ctrl + F를 누르고 ‘viewport’를 검색해 보세요. 그러면 head 태그 사이에 숨어있는 코드가 보일 거예요. 그걸 위에서 알려드린 깔끔한 코드로 바꿔주시면 끝입니다. 단, 수정하기 전에는 혹시 모를 상황을 대비해 원본 코드를 메모장에 복사해두는 것 잊지 마세요!
구글은 maximum-scale이 최소 5 이상이거나 아예 없기를 권장해요. 5라는 숫자는 화면을 5배(500%)까지 키울 수 있다는 뜻인데, 사실 제한을 아예 안 두는 게 가장 속 편하고 표준에 가까운 방식이랍니다.
검색엔진 최적화는 결국 ‘사람’을 향해 있어요. 기계를 속이는 게 아니라 방문자가 편하게 볼 수 있는 환경을 만들어주는 것이죠. ‘maximum-scale 속성’ 오류 수정은 그 첫걸음이라고 볼 수 있어요. 오늘 바로 설정을 확인해 보시고, 더 쾌적한 블로그 환경을 만들어보시길 바라요.
자주 묻는 질문 (FAQ)
Q. maximum-scale 오류가 정확히 뭔가요?
A. 사용자가 스마트폰에서 화면을 확대하지 못하게 막아둬서 생기는 오류예요. 접근성을 해치기 때문에 구글이 싫어하는 설정 중 하나입니다.
Q. 코드를 바꾼 뒤에는 뭘 확인해야 하나요?
A. 수정한 뒤에 스마트폰으로 직접 접속해서 손가락으로 화면이 잘 확대되는지 확인해 보세요. 그리고 페이지스피드 인사이트에서 점수가 올랐는지도 체크해 보시면 좋습니다.
Q. 그냥 5.0으로 설정하는 게 낫나요, 지우는 게 낫나요?
A. 아예 지우는 걸 추천드려요. maximum-scale 속성 자체를 쓰지 않으면 브라우저 기본 설정(보통 500% 이상 확대 가능)을 따르기 때문에 가장 호환성이 좋습니다.
