구글 서치 콘솔을 확인해보니 모바일에서는 검색 노출이 잘 되는데 PC에서는 떨어져 있다거나, 반대 상황을 경험해봤을까? 혹은 구글에서 보낸 알림메일에 "Mobile-First Indexing" 같은 낯선 용어가 나와서 막막했던 경험이 있을까? 대부분의 웹 개발자와 SEO 담당자들은 이게 정확히 뭔지, 왜 신경 써야 하는지, 어떻게 대비해야 하는지 모른 채로 넘어간다. 이번에는 모바일-우선 인덱싱이 정확히 뭔지부터, 왜 2024년에 더 중요해졌는지, 그리고 실제로 어떻게 대비할 수 있는지 완벽하게 정리해서 소개하겠다.
Mobile-First Indexing(MFI)는 구글이 2018년부터 본격화한 검색 색인 방식이다. 간단히 말해, 구글 크롤러가 웹사이트를 색인할 때 PC 버전이 아니라 모바일 버전을 먼저 크롤링하고 평가한다는 뜻이다.
왜 이런 변화가 생겼을까? 답은 간단하다. 2023년 전 세계 웹 트래픽의 60% 이상이 모바일에서 발생했다. 사람들이 스마트폰으로 인터넷을 더 많이 사용하니까, 검색 엔진도 그 트렌드를 따라가는 것이다. 구글의 입장에서는 "사용자가 대부분 모바일로 접속하는데, PC 버전만 좋으면 뭐 하나"는 생각이다.
이전(PC-First): 구글 크롤러 → PC 버전 크롤링 → 순위 결정 → 모바일 버전은 그 다음
현재(Mobile-First): 구글 크롤러 → 모바일 버전 크롤링 → 순위 결정 → PC 버전은 참고만
따라서 당신의 사이트가 모바일에서 제대로 보이지 않으면, 검색 순위에 직격탄을 맞는다는 뜻이다.
검색 결과에서 모바일과 PC가 다르게 노출되는 이유는 대부분 이 중 하나다.
| 원인 | PC에서는 OK, 모바일에서는 문제 | SEO 영향도 |
|---|---|---|
| 반응형 CSS 미적용 | 모바일에서 텍스트 크기가 너무 작거나 레이아웃이 깨짐 | ⭐⭐⭐⭐⭐ (최악) |
| Viewport 메타태그 누락 | 모바일 브라우저가 화면 크기를 인식하지 못함 | ⭐⭐⭐⭐⭐ (최악) |
| 이미지 최적화 부족 | 모바일에서 로딩 속도가 극도로 느림 | ⭐⭐⭐⭐ (심각) |
| 콘텐츠 숨김 처리 | display:none으로 모바일에서 주요 콘텐츠 숨김 | ⭐⭐⭐⭐ (심각) |
| Flash/플러그인 과다 사용 | 모바일에서 재생 불가 | ⭐⭐⭐ (중간) |
| Robots.txt 모바일 차단 | robots.txt에서 모바일 크롤러 차단 | ⭐⭐⭐⭐⭐ (최악) |
모바일 SEO의 기본은 HTML 헤드에 viewport 메타태그가 있느냐 없느냐다. 이것이 없으면 구글 크롤러도 혼란스럽고, 사용자 기기도 제대로 표시하지 못한다.
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<!-- viewport 메타태그 누락 -->
</head>
<body>
<h1>Welcome</h1>
</body>
</html>결과: 모바일에서 열면 폰 화면 크기에 맞지 않아 글자가 작고, 확대해야 한다. 구글 크롤러도 "이 사이트는 모바일 친화적이지 않다"고 판단한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>결과: 모바일 브라우저가 기기 화면 너비에 맞춰 자동 스케일링한다. 구글 크롤러도 모바일 친화적이라고 인식한다.
viewport 각 속성 설명:
width=device-width: 페이지 너비를 기기 화면 너비에 맞춤initial-scale=1.0: 처음 로딩 시 확대/축소 비율 1배 (100%)maximum-scale=1.0, user-scalable=no: 사용자가 확대하지 못하도록 제한 (선택사항, SEO에 부정적)
viewport가 있어도 CSS가 반응형이 아니면 소용없다.
<style>
.container {
width: 1200px; /* PC 고정값 - 모바일에서 넘침 */
margin: 0 auto;
}
.article {
width: 800px; /* 더 좁게 해도 여전히 모바일에는 크다 */
}
</style>결과: 아이폰(390px)에서 열면 1200px 콘텐츠가 강제로 축소되거나, 가로 스크롤이 생긴다. 매우 불편하고, 구글은 이를 모바일 친화적이지 않다고 본다.
<style>
* {
box-sizing: border-box;
}
.container {
width: 100%; /* 뷰포트 너비에 자동 맞춤 */
max-width: 1200px; /* PC에서는 최대 1200px */
margin: 0 auto;
padding: 0 16px; /* 모바일에서 좌우 여백 */
}
.article {
width: 100%; /* 항상 부모 너비에 맞춤 */
}
/* 모바일 우선 (Mobile First) */
.content {
font-size: 14px;
padding: 16px;
}
/* 태블릿 이상 */
@media (min-width: 768px) {
.content {
font-size: 16px;
padding: 24px;
}
}
/* PC 이상 */
@media (min-width: 1024px) {
.container {
padding: 0 32px;
}
}
</style>결과: 모든 화면 크기에서 자동으로 레이아웃이 조정된다. 구글 모바일 친화성 테스트를 통과한다.
<!-- ✗ 나쁜 예: 고정 크기 이미지 -->
<img src="banner.jpg" width="1200" height="600" alt="Banner">
<!-- ✓ 좋은 예: 반응형 이미지 -->
<img
src="banner-small.jpg"
srcset="banner-small.jpg 480w, banner-medium.jpg 768w, banner-large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 100vw, 1200px"
alt="Banner"
style="width: 100%; height: auto;">이렇게 하면 모바일에서는 작은 이미지가 로드되므로 속도가 빠르다. 구글의 Core Web Vitals 평가에서도 유리하다.
개발자들이 자주 하는 실수가 있다. 모바일에서는 마크업을 줄이려고 CSS display:none으로 콘텐츠를 숨기는 것이다. 그러면 구글 크롤러도 그 콘텐츠를 "숨겨진 것"으로 본다.
<style>
@media (max-width: 768px) {
.description {
display: none; /* 모바일에서 숨김 */
}
}
</style>
<div class="description">
<p>This is important product description that affects SEO ranking.</p>
</div>결과: 구글은 모바일에서 이 텍스트를 볼 수 없으므로, "이 페이지에는 설명이 없다"고 판단한다. 검색 순위에 부정적인 영향을 미친다.
<style>
.description {
font-size: 14px;
line-height: 1.5;
}
/* 숨기지 말고, 시각적으로만 줄임 */
@media (max-width: 768px) {
.description {
font-size: 12px; /* 작게 표시 */
margin: 8px 0; /* 여백 축소 */
}
.description.long-text {
max-height: 100px; /* 높이 제한 */
overflow: hidden; /* 넘치는 부분 숨김 */
position: relative;
}
}
</style>
<div class="description long-text">
<p>This is important product description...</p>
</div>
<button class="read-more">More</button>결과: 모바일에서 텍스트는 여전히 DOM에 있으므로 구글이 크롤링할 수 있다. 사용자는 "더보기" 버튼으로 확장할 수 있다.
간혹 servers 설정이 잘못되어 모바일 크롤러(Googlebot-Mobile)만 차단되는 경우가 있다. 이는 매우 치명적이다.
User-agent: Googlebot-Mobile
Disallow: /
User-agent: *
Allow: /결과: 모바일 크롤러만 차단되므로, 구글이 모바일 버전을 크롤링할 수 없다. MFI 시대에 죽음이다.
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /private/
Disallow: /temp/
Sitemap: https://example.com/sitemap.xml결과: 모든 크롤러(PC, 모바일)가 공개 콘텐츠는 크롤링할 수 있다.
MFI와 함께 등장한 것이 Core Web Vitals다. 이는 모바일 사용자 경험을 측정하는 지표들이다:
- LCP (Largest Contentful Paint): 페이지의 주요 콘텐츠가 화면에 표시되는 시간 (목표: 2.5초 이하)
- FID (First Input Delay): 사용자가 버튼을 클릭했을 때 반응하는 시간 (목표: 100ms 이하)
- CLS (Cumulative Layout Shift): 페이지 로딩 중 레이아웃이 얼마나 변하는가 (목표: 0.1 이하)
이 지표들이 나쁘면 구글은 당신의 모바일 페이지 순위를 내린다. 따라서:
- 이미지 최적화 (WebP 포맷, 크기 축소)
- 자바스크립트 번들 크기 줄이기
- 불필요한 CSS 제거 (tree-shaking)
- 폰트 로딩 최적화 (font-display: swap)
이런 작업들이 모바일 SEO의 핵심이다.
당신의 사이트가 실제로 모바일 SEO 문제가 있는지 확인하는 가장 빠른 방법은 Google Search Console이다:
- Search Console에 로그인
- "모바일 유용성" 섹션 확인 (좌측 메뉴)
- 에러 목록에서 "Viewport 설정되지 않음", "텍스트 크기 너무 작음" 등의 항목 확인
- 각 에러를 클릭해 어떤 페이지에서 발생하는지 확인
- "URL 검사" 도구로 개별 페이지 모바일 렌더링 테스트
이 과정에서 보이는 모든 경고를 하나씩 수정하면, 모바일 SEO 개선의 80%가 완료된 것이다.
✗ 흔한 실수: "반응형이면 모바일 따로 만들 필요 없다고 들었는데?"
맞다. 다만 반응형 사이트도 모바일 기기에서 실제로 어떻게 보이는지 테스트해야 한다. 브라우저 개발자 도구의 "모바일 프리뷰" 모드는 실제 기기와 다를 수 있다. 실제 아이폰/안드로이드로 테스트하거나, Google의 모바일 친화성 테스트 도구(https://search.google.com/test/mobile-friendly)를 사용하자.
✗ 흔한 실수: "PC와 모바일에서 완전히 다른 HTML을 서빙하면 어때?"
이를 "동적 제공(Dynamic Serving)"이라고 하는데, MFI 시대에는 더 이상 권장하지 않는다. 구글이 PC와 모바일 버전이 다르면 혼동하기 때문이다. 차라리 하나의 반응형 코드베이스를 유지하는 것이 낫다.
✗ 흔한 실수: "모바일에서 광고는 적게 보여도 되겠지?"
구글은 광고가 많아서 실제 콘텐츠를 클릭하기 어렵게 하는 사이트를 순위에서 내린다. "Intrusive Interstitials" 정책을 확인하자. 특히 모바일에서 팝업이나 전면 광고는 절제해야 한다.
Mobile-First Indexing은 선택이 아니라 필수다. 구글은 2024년부터 모든 신규 사이트를 기본으로 모바일 버전으로 색인한다. 따라서:
- viewport 메타태그는 기본
- 모든 스타일시트는 반응형이어야 함
- 이미지와 성능 최적화는 모바일을 우선으로
- 모바일에서 콘텐츠를 숨기지 말 것
- 구글 Search Console에서 모바일 에러를 주기적으로 확인할 것
이 기본기들이 모여서 검색 순위라는 큰 효과를 만든다. 지금 당신의 사이트가 모바일에서 제대로 보이는지 한번 체크해보고, 위 가이드의 viewport와 반응형 CSS 부분을 참고해 개선하면, 검색 노출이 눈에 띄게 상승할 것이다.