모바일에서 일부 내용을 숨겨도 되나요?

탭이나 아코디언으로 접어 두는 것은 괜찮습니다. 하지만 모바일 HTML에서 아예 빼 버리면 그 내용은 색인되지 않으므로 데스크톱과 같은 본문·제목·구조화 데이터를 모바일에도 넣어야 합니다.

레이어 팝업을 쓰면 검색에 불이익이 있나요?

검색으로 들어온 사용자의 본문을 가리는 전면 팝업은 구글이 사용자 경험을 해치는 요소로 봅니다. 쿠키 동의·연령 확인처럼 법적으로 필요한 안내나 화면 일부만 차지하는 배너는 괜찮습니다.

구글 모바일 친화성 테스트는 어디로 갔나요?

구글은 2023년 12월 모바일 친화성 테스트 도구와 서치 콘솔의 모바일 사용성 보고서를 종료했습니다. 지금은 Lighthouse, 크롬 개발자 도구의 기기 모드, 서치 콘솔 URL 검사의 실제 URL 테스트로 확인합니다.

m. 으로 시작하는 별도 모바일 사이트를 계속 써도 되나요?

쓸 수는 있지만 데스크톱과 모바일 페이지를 alternate·canonical로 서로 연결하고 콘텐츠를 똑같이 유지해야 해 관리 부담이 큽니다. 구글은 반응형 웹을 권장하므로 개편할 때 반응형으로 합치는 것이 좋습니다.

모바일 최적화 가이드 — 모바일 우선 색인·viewport·반응형·팝업 점검법

Q: 모바일 우선 색인이란 무엇인가요?

구글이 스마트폰용 구글봇으로 페이지를 수집하고, 모바일 화면에 있는 콘텐츠를 기준으로 색인과 순위를 정하는 방식입니다. 구글은 2023년에 전환 완료를 발표했으며 지금은 사실상 모든 사이트에 적용됩니다.

모바일 최적화는 스마트폰에서도 같은 콘텐츠를 불편 없이 읽고 누를 수 있게 만드는 일입니다. 구글은 스마트폰용 구글봇이 본 화면을 기준으로 색인하므로, 모바일에서 빠진 내용은 검색에서도 없는 것으로 취급됩니다. 반응형 웹과 viewport 태그, 읽기 쉬운 글자와 누르기 쉬운 버튼, 본문을 가리지 않는 팝업, 빠른 속도가 핵심입니다.

모바일 우선 색인이란 무엇인가요?

모바일 우선 색인(mobile-first indexing)은 구글이 모바일 버전 페이지를 기준으로 수집·색인·순위 평가를 하는 방식입니다. 구글은 2023년 전환 완료를 발표했고, 2024년 7월부터는 모바일 기기로 전혀 접근할 수 없는 사이트는 색인할 수 없다고 안내했습니다. 따라서 다음 항목이 모바일과 데스크톱에서 같아야 합니다.

본문 내용과 제목(H1), title과 meta description
robots 메타 태그 (모바일에만 noindex가 있으면 검색에서 사라짐)
구조화 데이터, 이미지와 alt 텍스트, 주요 내부 링크

탭·아코디언으로 접어 둔 내용은 색인됩니다. 다만 스와이프나 클릭을 해야 불러오는 내용은 구글이 불러오지 않으므로, 중요한 내용은 처음 HTML에 들어 있어야 합니다.

반응형, 동적 서빙, 별도 모바일 URL 중 무엇이 좋나요?

방식	구조	장점	주의할 점
반응형 (권장)	같은 URL·같은 HTML, CSS로 배치만 바꿈	관리가 쉽고 신호가 나뉘지 않음	모바일용 이미지 크기 최적화
동적 서빙	같은 URL, 기기별로 다른 HTML	URL이 하나	`Vary: User-Agent` 헤더, 콘텐츠 동일성 유지
별도 URL	m.example.com 같은 모바일 전용 주소	기존 시스템 유지	양쪽 연결 태그 필수, 이중 관리

구글은 관리가 쉬운 반응형을 권장합니다. 별도 모바일 URL을 유지한다면 두 페이지를 서로 연결해야 합니다.

<!-- 데스크톱 페이지 (www.example.com/page) -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page">

<!-- 모바일 페이지 (m.example.com/page) -->
<link rel="canonical" href="https://www.example.com/page">

viewport 태그는 어떻게 쓰나요?

viewport 태그가 없으면 모바일 브라우저는 페이지를 데스크톱 폭(약 980px)으로 그린 뒤 축소해서 보여 줍니다. 글자가 깨알같이 작아지고 확대해야 읽을 수 있습니다. <head>에 다음 한 줄을 넣습니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=no나 maximum-scale=1로 확대를 막지 마세요. 저시력 사용자의 접근성을 해칩니다.
고정 폭(width: 1200px) 레이아웃, 큰 표, 폭 지정이 없는 이미지는 가로 스크롤을 만듭니다. 이미지에는 max-width: 100%; height: auto;를 주고, 표는 overflow-x: auto인 상자로 감쌉니다.

글자 크기와 탭 타깃은 얼마가 적당한가요?

항목	권장 기준	참고
본문 글자	16px	아이폰은 16px보다 작은 입력창을 누르면 화면을 자동 확대함
보조 글자	12px 이상	날짜·캡션 등
줄 간격	1.5 이상	한글 본문은 조금 넉넉하게
버튼·링크 크기	48×48px 이상	구글 머티리얼 디자인 권장, 애플은 44×44pt
누를 대상 간격	8px 이상	이웃 링크를 잘못 누르지 않게

WCAG 2.2도 누를 대상의 최소 크기를 24×24px로 정하고 있습니다. 지역 업체라면 전화번호를 <a href="tel:0212345678">로 연결해 한 번에 전화를 걸 수 있게 하세요. 모바일 방문자에게 가장 중요한 행동인 경우가 많습니다.

팝업은 어디까지 괜찮나요?

국내 사이트에 흔한 「오늘 하루 보지 않기」 전면 공지 팝업은 모바일에서 특히 문제가 됩니다. 구글은 검색 결과에서 들어온 사용자가 본문을 바로 볼 수 없게 만드는 방해형 전면 광고(intrusive interstitial)를 좋지 않은 사용자 경험으로 봅니다.

피해야 할 형태: 들어오자마자 본문을 덮는 팝업, 닫아야만 본문이 보이는 전면 광고, 첫 화면 전체를 차지하는 배너
괜찮은 형태: 쿠키 동의·연령 확인 같은 법적 안내, 로그인이 필요한 페이지의 로그인 창, 화면 일부만 차지하는 띠 배너
대안: 상단 띠 배너나 하단 시트로 바꾸고, 이벤트 공지는 게시판·배너 영역으로 옮깁니다. 팝업을 꼭 써야 한다면 닫기 버튼을 크게 만듭니다.

모바일 속도는 무엇이 다른가요?

스마트폰은 PC보다 CPU가 약하고 네트워크가 불안정해 같은 페이지도 훨씬 느리게 느껴집니다. Lighthouse 모바일 측정도 중급 기기와 느린 4G를 가정합니다. 국내 사이트에서 자주 보이는 원인은 다음과 같습니다.

메인 슬라이드 배너의 큰 이미지: 첫 슬라이드가 LCP 요소가 되므로 모바일 크기 이미지를 srcset으로 따로 제공합니다.
자동 재생 동영상과 여러 외부 스크립트: 모바일 CPU에서는 자바스크립트 실행 비용이 더 커집니다.
PC용 원본 이미지를 그대로 축소해 보여 주는 경우

구체적인 개선 순서는 페이지 속도·Core Web Vitals 가이드와 이미지 최적화 가이드에 정리해 두었습니다.

SEO Check에서는 이렇게 점검합니다

무료 SEO 진단은 모바일과 관련해 다음을 확인합니다.

viewport: width=device-width가 들어간 viewport 메타 태그가 있는지
HTML 본문: 자바스크립트 없이도 본문 텍스트가 HTML에 있는지 (네이버 Yeti는 자바스크립트 렌더링이 제한적)
이미지: width·height 지정과 지연 로딩 사용 여부
네이버 항목: 모바일 대응을 포함한 네이버 검색 기본 요건

정밀진단 리포트는 Lighthouse 모바일 측정으로 성능 점수와 LCP·TBT·CLS를 알려 줍니다. 직접 확인할 때는 다음 순서를 권합니다.

크롬 개발자 도구의 기기 모드에서 폭 360~430px로 주요 페이지를 훑어봅니다.
서치 콘솔 URL 검사에서 「실제 URL 테스트」를 실행하고 스마트폰 구글봇이 본 화면을 확인합니다.
실제 휴대폰으로 전화·예약·결제처럼 가장 중요한 동선을 끝까지 눌러 봅니다.

모바일과 데스크톱의 본문·메타·구조화 데이터가 같다
viewport 태그가 있고 확대를 막지 않는다
가로 스크롤이 생기지 않는다
본문 16px, 버튼 48×48px 안팎을 지킨다
본문을 가리는 전면 팝업이 없다