Loading...
모바일 친화적인 콘텐츠란 스마트폰에서 읽기 쉽고, 평균적인 네트워크 환경에서 빠르게 로드되며, 데스크톱 방문자가 보는 것과 동일한 정보를 보여주는 콘텐츠를 말합니다. 즉, 짧은 문단, 명확한 제목, 반응형 레이아웃, 적절한 크기의 이미지, 그리고 숨겨지거나 누락된 텍스트가 없는 상태를 의미합니다. 이제 구글은 스마트폰의 시선으로 페이지를 평가하므로, 이는 단순한 디자인상의 미덕이 아닙니다. 검색 결과에 색인되기 위한 필수적인 기준입니다.
이 가이드는 모바일 콘텐츠 작성법과, 작성한 글이 실제로 독자와 검색 엔진에 도달하는지 결정하는 기술적 선택이라는 두 가지 핵심 요소를 모두 다룹니다.
구글은 2015년부터 모바일 중심의 변화를 추진하기 시작했으며, 회사 모바일 우선 색인 회고록에서 설명하듯 2016년부터 모바일 우선 크롤링 및 색인을 도입했습니다. 2024년 중반기쯤 이 전환은 사실상 완료되었습니다. 구글은 2024년 6월 발표를 통해 스마트폰 크롤러를 사용하여 거의 모든 웹사이트를 크롤링하고 색인하고 있으며, 모바일에서 접근할 수 없는 사이트는 이제 줄어들고 있다고 밝혔습니다.
실무적인 의미는 간단합니다. 구글의 모바일 우선 색인 문서에 명시된 바와 같이, 구글은 콘텐츠의 모바일 버전을 색인과 순위 산정에 사용합니다. 만약 특정 문단, 표, 이미지 또는 링크가 데스크톱 레이아웃에만 존재한다면, 구글은 이를 전혀 보지 못할 수 있다고 가정해야 합니다.
여기에는 인간적인 이유도 있습니다. 사람들은 기차 안에서, 대기실에서, 그리고 침대에서 한 손으로 스마트폰을 쥔 채 글을 읽습니다. 한 화면에 대략 6~10줄 정도의 텍스트가 들어오는 화면입니다. 27인치 모니터에서는 괜찮아 보였던 페이지도 그런 화면에서는 거대한 텍스트 장벽처럼 느껴질 수 있습니다. 훌륭한 모바일 콘텐츠는 크롤러보다 독자의 상황을 먼저 존중하며, 결과적으로 이 두 가지 목표는 자연스럽게 일치하게 됩니다.
첫 번째 팁 그룹은 문장에 관한 것으로, 대부분의 작성자가 코드를 수정하지 않고도 페이지를 개선할 수 있는 영역입니다.
스마트폰 화면에서는 독자가 머물지 떠날지 결정하기 전에 볼 수 있는 내용이 매우 적습니다. 글의 첫 두 문장 안에 정답, 약속, 또는 핵심 발견을 담으세요. 세상이 어떻게 변해왔는지에 대한 장황한 도입부 문단은 건너뛰세요. 독자가 질문을 검색해 들어왔다면, 첫 문장들이 그 질문에 답해야 하며, 나머지 페이지는 깊이를 더하는 역할을 해야 합니다.
데스크톱에서는 5줄짜리 문단이 스마트폰에서는 10줄짜리 덩어리로 보입니다. 문단당 2~3문장, 그리고 한 문단에는 하나의 아이디어를 담는 것을 목표로 하세요. 강조할 가치가 있는 포인트를 전달할 때는 1문장짜리 문단도 좋습니다. 핵심은 여백입니다. 문단 사이의 빈틈이야말로 독자가 스크롤하는 동안 시선을 잃지 않도록 도와주는 요소입니다.
모바일 독자들은 글을 정독하기 전에 먼저 훑어봅니다. 모든 H2와 H3 제목이 다음에 이어질 내용을 알기 쉬운 단어로 설명하도록 만드세요. 고치는 데 드는 비용 같은 제목이 고려사항보다 훨씬 좋습니다. 제목은 스마트폰 너비 기준으로 한두 줄 안에 들어올 정도로 짧게 유지하세요.
너무 긴 제목은 검색 결과에서 잘리거나 페이지에서 어색하게 줄바꿈됩니다. 중요한 단어를 앞에 배치하고, 대략 60~70자 이내로 유지하며, 키워드 나열(키워드 스터핑)을 피하세요. 링크 텍스트와 버튼 레이블 역시 마찬가지입니다. 짧고, 구체적이며, 탭하기 쉬워야 합니다.
글머리 기호 및 번호 매기기 목록은 각 항목이 별도의 줄에 배치되기 때문에 작은 화면에서 매우 유용합니다. 넓은 표는 더 위험합니다. 5개의 열로 이루어진 비교표는 글씨가 너무 작아져 읽을 수 없게 되거나 좌우로 스크롤해야 하는 상황을 만듭니다. 가능하면 표를 2~3개 열로 유지하거나, 데이터를 짧은 항목의 목록 형태로 다시 작성하세요.
모든 문장은 스크롤 거리를 늘립니다. 반복되는 내용, 섹션의 힘 빠진 도입부, 불필요한 수식어는 잘라내세요. 페이지를 부실하게 만들라는 뜻이 아닙니다. 각 부분이 제 역할을 하고 명확한 구조로 쉽게 탐색할 수 있다면, 모바일 페이지도 길고 충실할 수 있습니다.
툴팁이나 마우스 오버 시 열리는 메뉴처럼 마우스 호버에 의존하는 모든 기능은 터치스크린에서 작동하지 않습니다. 정의는 본문 내에 풀어쓰고, 엄지손가락이 엉뚱한 곳을 누르지 않도록 링크 간격을 충분히 떨어뜨려 놓으세요. 링크가 5개나 박혀 있는 문장은 스마트폰에서 사용하기 어렵기 때문에, 정말 도움이 되는 곳에만 꼭 필요한 만큼만 링크를 걸어야 합니다.
모바일 우선 색인에서 가장 큰 기술적 함정은 바로 콘텐츠 일치성(Parity)입니다. 구글의 지침에 따르면 색인에는 모바일 버전을 사용하므로, 공간을 아끼기 위해 모바일에서 잘라낸 내용은 검색 결과에서 조용히 사라질 수 있습니다. 흔히 저지르는 실수는 다음과 같습니다:
사용자 편의성을 위해 콘텐츠를 아코디언이나 탭 형태로 접어두는 것은 일반적인 관행이며, 해당 콘텐츠가 페이지의 HTML에 포함되어 있다면 대개 문제가 없습니다. 위험한 경우는 크롤러가 수행하지 않을 사용자 상호작용 후에만 로드되는 콘텐츠입니다. 의심스러운 경우, 서치 콘솔(Search Console)의 URL 검사 도구에서 렌더링된 HTML을 확인하여 원하는 텍스트가 그곳에 있는지 확인하세요.
일치성을 보장하는 가장 간단한 방법은 모든 사용자에게 동일한 페이지를 제공하는 것입니다.
구글은 모바일 우선 색인 문서에서 설명하듯, 모든 기기에 동일한 URL로 동일한 HTML을 제공하고 페이지가 표시되는 방식만 변경하는 반응형 웹 디자인을 권장합니다. 동적 제공(Dynamic serving)과 별도의 모바일 URL도 지원되지만, 관리가 더 어렵고 콘텐츠 일치성 오류가 발생할 확률이 높습니다.
반응형 설정은 web.dev의 반응형 웹 디자인 기초(Responsive web design basics)에 다루어진 몇 가지 기본 원칙을 바탕으로 합니다:
maximum-scale=1과 같은 속성은 사용자가 화면을 핀치(pinch)하여 확대하는 것을 막아 접근성 장벽을 만듭니다. 목표는 확대를 할 필요가 없을 정도로 디자인하는 것이지, 확대가 필요한 사람들의 기능을 금지하는 것이 아닙니다.워드프레스(WordPress), 허브스팟(HubSpot), 스퀘어스페이스(Squarespace) 같은 CMS를 사용하는 경우, 가장 빠른 해결책은 보통 최신 반응형 테마를 선택한 뒤 임베디드 위젯, 넓은 표, 고정 너비 광고 등 오버플로우의 주원인이 되는 커스텀 블록을 테스트하는 것입니다.
W3C는 작은 화면, 가변적인 네트워크 속도, 어색한 입력 방식 등 많은 모바일 제약 사항이 장애인들이 직면하는 장벽과 일치한다고 지적합니다. W3C의 공유 웹 경험 표(table of shared web experiences)에서는 이를 나란히 비교해 보여줍니다. 한 그룹을 위해 잘 디자인된 것은 다른 그룹을 돕는 데도 도움이 됩니다.
구체적인 예로 리플로우(Reflow)가 있습니다. WCAG 2.2는 콘텐츠가 가로 스크롤 없이 좁은 뷰포트에 맞춰지기를 기대하며, 리플로우 이해하기(Understanding Reflow) 페이지에서는 콘텐츠를 확대하는 저시력자들이 이에 의존하고 있음을 설명합니다. 따라서 스마트폰을 위해 따르는 규칙은 노트북 화면을 400%까지 확대하는 독자들도 커버하게 됩니다. 두 그룹 모두에게 유용한 다른 습관들:
아무리 훌륭하게 작성된 페이지라도 로딩되는 데 8초가 걸린다면, 독자는 첫 문장도 읽기 전에 이탈하고 맙니다. 구글은 페이지 경험을 평가하는 지표 중 하나로 코어 웹 바이탈(Core Web Vitals)을 활용합니다. 임계값이 정의된 방식에 대한 web.dev의 설명에 따르면, 방문자의 최소 75%가 다음 기준을 충족할 때 해당 페이지를 좋음(good)으로 평가합니다:
| 측정항목 | 측정 내용 | 좋은 기준치 |
|---|---|---|
| LCP (최대 콘텐츠 페인트, Largest Contentful Paint) | 주요 콘텐츠가 얼마나 빨리 나타나는가 | 2.5초 이하 |
| INP (다음 페인트에 대한 상호작용, Interaction to Next Paint) | 탭과 클릭에 페이지가 얼마나 빠르게 반응하는가 | 200ms 이하 |
| CLS (누적 레이아웃 이동, Cumulative Layout Shift) | 로딩되는 동안 레이아웃이 얼마나 흔들리는가 | 0.1 이하 |
데스크톱과 모바일에 동일한 기준치가 적용되지만, 프로세서와 네트워크 성능이 상대적으로 느린 스마트폰에서 대부분의 사이트가 이 기준을 달성하는 데 어려움을 겪습니다. 로드 시간이 검색 성과 및 전환율과 어떻게 연결되는지 더 넓은 관점에서 보려면, 아래 체크리스트와 함께 더 빠른 웹사이트 속도 관련 아티클을 읽어보시는 것을 추천합니다.
srcset과 sizes를 사용하고, 파일을 압축하며, 최신 포맷을 사용하세요.구글의 공식 페이지 경험(page experience) 문서에서 전하는 현실적인 조언은 다음과 같습니다. 좋은 코어 웹 바이탈은 훌륭한 경험을 위해 권장되지만, 완벽한 점수가 상위 순위를 보장하지는 않습니다. 이는 수많은 신호 중 하나일 뿐입니다. 단순히 초록색 배지 점수를 쫓기보다는 실제 사용자가 느끼기에 빠른 페이지를 추구하세요.
현재 상태를 확인하려면 서치 콘솔의 코어 웹 바이탈 보고서를 통해 실제 사용자 기반의 필드 데이터를 확인하고, web.dev의 웹 바이탈 측정 시작하기 가이드에서 제안하듯 자체적인 실제 사용자 모니터링(RUM) 도입을 고려해 보세요.
검색 결과를 통해 클릭해 들어오자마자 콘텐츠를 가려버리는 팝업, 화면의 3분의 1을 차지하는 고정 배너(sticky banners), 그리고 누르기 힘든 아주 작은 버튼이 있는 쿠키 고지 사항들은 모두 스마트폰에서 독자를 쫓아내는 요인입니다. 뉴스레터 구독 창이 필요하다면 독자가 페이지를 스크롤하거나 충분히 머문 후에 나타나도록 지연시키고, 닫기 버튼은 크고 누기 쉽게 만드세요. 고정 요소(sticky elements)는 최대한 슬림하게 유지하세요. 작은 화면에서는 독자가 읽기에 사용할 수 없는 모든 픽셀이 곧 비용입니다.
게시하기 전에 다음 사항들을 확인하세요:
현재 우리가 접하는 대부분의 페이지는 AI 초안으로 시작되며, 이는 모바일 최적화 문제를 변화시켰습니다. 언어 모델은 길고 균일한 문단, 중첩된 수식어, 그리고 일반적인 제목을 선호합니다. 노트북 화면에서는 지루한 수준에 불과하지만, 스마트폰 화면에서는 지치게 만드는 역효과를 낳아 독자의 이탈로 이어집니다.
따라서 우리는 초안을 인간다운 목소리로 다듬는 과정의 일부로 모바일 가독성을 다룹니다. 블록을 쪼개고, 문장 길이를 다양화하고, 요점을 먼저 제시하며, 모호한 제목을 구체적인 제목으로 바꾸는 구조조정 작업이 필요합니다. 이것이 바로 의미를 그대로 유지하면서 AI 생성 텍스트가 자연스럽게 읽히도록 재구성하고 실제 타겟 키워드를 통합할 수 있도록 Semihuman을 개발한 이유입니다. 물론 도구는 출발점일 뿐이며, 최종 검수는 스마트폰을 손에 쥐고 플랫폼에 서서 읽고 싶어질 글인지 묻는 인간의 몫입니다.
우리의 경험 법칙: 친구에게 문자로 보낼 만한 내용이 아니라면, 모바일용으로는 너무 긴 것입니다.
또한 우리는 텍스트의 출처보다 품질 기준이 더 중요하다고 믿습니다. 독자와 검색 엔진은 유용하고 정확하며 명확한 페이지에 보상을 주며, 이는 편집할 때 명심해야 할 가치입니다. 구글의 유용한 콘텐츠 접근법에 대한 노트와 사용자 의도에 콘텐츠를 맞추는 방법에서 이와 관련해 더 깊은 내용을 다루고 있습니다.
— 틸렌 (Tilen)
대량으로 콘텐츠를 제작할 때 모바일 최적화 과정에서 가장 시간이 오래 걸리는 부분은 재작성 작업입니다. Semihuman은 AI가 생성한 텍스트를 더 자연스럽고 읽기 쉬운 산문으로 재구성하고 타겟 키워드를 자연스럽게 녹여내도록 돕습니다. 무료, 베이직, 프로 플랜부터 시작해 보세요. 동일한 단계를 퍼블리싱 파이프라인에 통합하고 싶은 팀이라면 개발자와 비즈니스를 위한 API 플랜을 살펴보실 수 있습니다. 어떤 경로를 선택하든 마지막에는 위에서 언급한 스마트폰 테스트로 마무리하세요.
모바일 친화적인 콘텐츠는 게시했다고 해서 끝나는 것이 아닙니다. 매달 몇 가지 지표를 확인하세요:
추적해야 할 수치와 결과로 이어지는 방식에 대한 아이디어가 필요하다면 마케터를 위한 콘텐츠 지표 개요를 참고하세요. 모바일 최적화 작업을 광범위한 SEO 작업과 병행하고 있다면 디지털 마케팅 콘텐츠 팁 가이드가 콘텐츠 측면을 다루고 있으며, 시각적 스토리텔링 트렌드 아티클은 바이트(용량) 값을 하는 이미지와 비디오 제작에 도움을 줍니다.
데스크톱에서는 아무 문제 없이 읽히는 전형적인 블로그 포스트가 있다고 가정해 봅시다. 스마트폰으로 보면 첫 번째 문단이 9줄에 달하고, 첫 번째 제목은 개요(Overview)이며, 4열짜리 비교표는 좌우로 스크롤되며, 히어로 이미지는 지연 로딩이 적용된 3,000픽셀 너비의 파일입니다.
편집자가 순서대로 수행할 작업은 다음과 같습니다:
이러한 단계 중 대대적인 리디자인이 필요한 것은 없습니다. 편집과 기본 점검에 불과하며, 이 조치들을 함께 적용하면 단일 기술적 최적화 그 어떤 것보다 페이지가 주는 느낌을 크게 바꿀 수 있습니다.
정답을 먼저 제시하고, 문단은 2~3문장으로 유지하며, 구체적인 제목을 사용하고, 넓은 표보다는 목록을 선호하세요. 그런 다음 실제 스마트폰에서 페이지를 직접 읽어보며 정보 전달 없이 스크롤만 길어지게 만드는 부분은 과감히 삭제하세요. 어떤 기교보다 명확한 글쓰기와 명확한 구조가 훨씬 중요합니다.
반응형 레이아웃과 올바른 뷰포트 태그로 시작한 다음, 모바일 페이지에 데스크톱과 동일한 텍스트, 이미지, 링크가 포함되어 있는지 확인하세요. 이미지를 압축 및 크기 조절하고, 임베드를 위한 공간을 확보하며, 방해되는 팝업을 피하세요. 마지막으로 서치 콘솔에서 코어 웹 바이탈을 확인하고 나쁨으로 플래그된 URL 그룹을 수정하세요.
구글은 콘텐츠의 모바일 버전을 색인과 순위 산정에 사용하므로, 사실상 모바일 페이지가 평가받는 대상이 됩니다. 코어 웹 바이탈을 포함한 페이지 경험은 수많은 신호 중 하나이며, 구글은 완벽한 점수가 상위 순위를 보장하지는 않는다고 밝힙니다. 스마트폰에서 잘 작동하는 유용한 콘텐츠를 제공하는 것이 가장 안전한 포지셔닝입니다.
기기 간에 콘텐츠를 동일하게 유지하고, 반응형 디자인을 사용하며, LCP, INP, CLS의 좋음 기준치를 충족하세요. 검색 사용자의 의도에 부합하는 제목과 오프닝 라인을 작성하고, 제목이 완전히 표시되도록 간결하게 유지하세요. 매달 서치 콘솔에서 기기별 모바일 실적을 검토하세요.