사람에겐 보이는데 AI에겐 빈 페이지: 자바스크립트로 그리는 홈페이지 점검법

브라우저로 열면 글이 잘 보이는데 AI 검색 시스템에는 본문이 전달되지 않을 수 있는 홈페이지가 있습니다. 흔한 원인은 하나입니다. 서버가 처음 보내는 HTML에는 본문이 없고, 브라우저가 자바스크립트를 실행한 뒤에야 글이 채워지는 구조입니다. 2024년 12월 공개된 조사에서 주요 AI 크롤러는 자바스크립트를 실행하지 않는 것으로 관찰돼,[3] 이런 페이지는 AI 검색에 거의 빈 페이지로 보일 수 있다고 판단합니다.

확인은 «페이지 소스 보기»에서 화면의 핵심 문장을 찾아보는 것으로 시작하고, 고치는 방향은 본문을 서버에서 HTML에 담아 보내는 것입니다.[2]

30초 요약

• 사람이 보는 화면과 크롤러가 받는 HTML은 다를 수 있습니다.
• medad가 측정한 한 웹 서비스의 홈은 처음 받는 HTML에서 보이는 글자가 31자(페이지 제목 한 줄)였고, 브라우저가 실행한 뒤에는 9,077자였습니다.
• Google 검색은 자바스크립트 페이지를 렌더링해 처리하지만, 다른 검색 시스템도 같다고 가정하기는 어렵다고 판단합니다.
• 2024년 12월 공개 조사에서 주요 AI 크롤러는 자바스크립트를 렌더링하지 않았습니다. AI 회사의 크롤러 안내 문서에는 이 부분이 적혀 있지 않습니다.
• robots.txt에서 검색용 로봇을 허용해도, 받아 간 HTML에 본문이 없으면 읽을 내용이 없습니다.
• Google은 동적 렌더링을 임시방편으로 보고 서버 렌더링, 정적 렌더링, 하이드레이션을 권합니다.

사람이 보는 화면과 크롤러가 받는 HTML은 왜 다른가요

웹페이지는 두 단계로 완성될 수 있습니다. 서버가 먼저 HTML 문서를 보내고, 브라우저가 그 안의 자바스크립트를 실행해 화면을 채웁니다. 앱처럼 움직이는 사이트는 첫 HTML에 뼈대만 두고 본문은 자바스크립트가 나중에 넣는 경우가 많습니다.

비유하면 첫 HTML은 조립 설명서와 부품이 든 상자이고, 브라우저 화면은 다 조립된 가구입니다. 사람은 브라우저가 대신 조립해 주니 완성품을 봅니다. 상자를 열어 보기만 하고 조립하지 않는 방문자는 설명서와 부품 목록만 보게 됩니다.

검색 크롤러가 어느 쪽을 보는지는 크롤러마다 다를 수 있습니다. 그래서 «내 브라우저에서 잘 보인다»는 사실만으로는 검색 시스템이 본문을 읽었다고 단정할 수 없다고 판단합니다.

실제로 재 본 한 사이트: 31자와 9,077자

medad는 2026년 9월 19일, 자바스크립트로 화면을 그리는 한 웹 서비스(이하 A 사이트)의 홈 한 페이지를 두 방식으로 쟀습니다. 사이트 운영자의 허락을 받아 결과를 싣되 이름은 밝히지 않습니다.

처음 받는 HTML에서 보이는 글자 31자는 페이지 제목 한 줄이었습니다. 서비스 소개, 기능 설명, 안내 문구는 모두 자바스크립트가 실행된 뒤에 나타났습니다. OpenAI 검색 크롤러의 이름(OAI-SearchBot)을 달고 요청해도 같은 HTML이 돌아왔습니다.

측정 방법은 이렇습니다. 처음 받는 HTML은 서버 응답에서 스크립트·스타일과 태그를 걷어 내고 공백을 뺀 글자를 셌습니다. 실행 뒤 화면은 크롬 계열 브라우저로 페이지를 연 뒤 4초를 기다려 본문에 보이는 글자를 셌습니다.

한계도 분명합니다. 한 사이트, 한 페이지, 한 시점의 측정입니다. 이 결과만으로 A 사이트가 AI 답변에 얼마나 인용되는지는 알 수 없고, 자바스크립트를 쓰는 모든 사이트가 같다고 말할 수도 없습니다. OAI-SearchBot 이름을 단 요청은 이름만 흉내 낸 것이라, 실제 크롤러가 받는 응답과 완전히 같다고 장담할 수도 없습니다. 이 측정이 보여 주는 것은 사람이 보는 화면과 처음 받는 HTML의 차이가 이만큼 벌어질 수 있다는 사실입니다.

Google은 자바스크립트를 읽나요

Google은 자바스크립트 페이지를 크롤링, 렌더링, 색인의 순서로 처리한다고 설명합니다. 200 응답을 받은 페이지는 색인하지 말라는 지시가 없으면 렌더링 대기열에 들어갑니다.[1]

같은 문서에서 Google은 서버 렌더링이나 사전 렌더링을 여전히 좋은 방법으로 권합니다. 사용자와 크롤러 모두에게 페이지가 빨라지고, 모든 봇이 자바스크립트를 실행할 수 있는 것은 아니라는 이유입니다.[1]

Google 검색만 놓고 보면 렌더링을 기대할 수 있습니다. 하지만 다른 검색 시스템도 같은 방식으로 처리한다고 가정하기는 어렵다고 판단합니다.

AI 검색 크롤러는 자바스크립트를 실행하나요

Vercel이 2024년 12월 공개한 조사는 주요 AI 크롤러 가운데 자바스크립트를 렌더링하는 곳이 없었다고 보고했습니다. 조사 대상에는 OpenAI의 OAI-SearchBot, ChatGPT-User, GPTBot과 Anthropic의 ClaudeBot이 들어 있습니다.[3] 같은 조사는 ChatGPT 크롤러 요청의 11.50%, Claude 크롤러 요청의 23.84%가 자바스크립트 파일을 가져갔지만 그 코드를 실행하지는 않았다고 적었습니다.[3]

이 조사는 Vercel이 자사 네트워크와 일부 사이트를 몇 달 동안 관찰한 결과입니다. OpenAI와 Anthropic의 크롤러 안내 문서에는 자바스크립트 실행 여부가 적혀 있지 않습니다.[4][5] 크롤러의 동작은 바뀔 수 있으니, 이 결과는 «조사 시점까지 관찰된 동작»으로 읽는 것이 맞다고 판단합니다.

그래서 현실적인 기준은 하나입니다. 본문이 첫 HTML에 들어 있으면 크롤러가 자바스크립트를 실행하든 안 하든 읽을 수 있다고 볼 수 있습니다. 첫 HTML이 비어 있으면 결과가 크롤러의 동작에 달리게 됩니다.

robots.txt를 열어 두는 것만으로 충분하지 않은 이유

AI 서비스는 역할이 다른 로봇을 따로 둡니다.

OpenAI는 OAI-SearchBot이 ChatGPT 검색 기능에서 웹사이트를 결과로 보여 주는 데 쓰인다고 설명합니다.[4] Anthropic은 Claude-SearchBot이 사용자의 검색 결과 품질을 높이려고 웹을 탐색한다고 설명하고, 세 로봇을 robots.txt에서 각각 따로 지정하도록 안내합니다.[5]

Perplexity는 PerplexityBot이 AI 기반 모델 학습에 쓰이지 않는다고 밝힙니다.[6] 사용자 요청 때 방문하는 로봇에는 robots.txt 규칙이 그대로 적용되지 않을 수 있다고 OpenAI와 Perplexity가 각각 적어 두었습니다.[4][6]

robots.txt는 로봇에게 들어와도 된다고 알리는 문입니다. 문을 열어 두어도 방이 비어 있으면 가져갈 것이 없습니다. 학습용 로봇을 막는 일과 검색 결과용 로봇을 막는 일은 서로 다른 결정입니다. 먼저 검색 결과용 로봇이 허용돼 있는지 보고, 그다음 받아 가는 HTML에 본문이 있는지 보는 순서가 맞다고 판단합니다.

내 사이트도 그런지 확인하는 방법

전문 도구 없이도 첫 확인은 할 수 있습니다.

1. 페이지 소스 보기: 브라우저에서 페이지를 열고 오른쪽 클릭 메뉴의 «페이지 소스 보기»를 누르면 서버가 처음 보낸 HTML이 열립니다. 화면에 보이는 핵심 문장 하나를 복사해 이 창에서 찾아보세요. 찾아지지 않으면 그 문장은 자바스크립트가 나중에 넣은 것입니다.
2. 개발자 도구와 견주기: 개발자 도구의 요소(Elements) 탭은 자바스크립트가 실행된 뒤의 모습입니다. 소스 보기에는 없고 여기에만 있는 문장이 실행해야만 보이는 본문입니다.
3. Search Console URL 검사: Google Search Console의 URL 검사에서 크롤링된 페이지를 보면 Google이 받은 원래 HTML 같은 응답 정보를 볼 수 있습니다. 실시간 테스트에서는 렌더링된 화면의 스크린샷도 볼 수 있습니다.[7]
4. 대표 페이지부터: 홈, 서비스 소개, 절차·가격 안내, 자주 묻는 질문처럼 고객이 AI에게 물을 법한 답이 담긴 페이지를 먼저 확인하세요.

고치는 방향

Google은 동적 렌더링(로봇에게만 미리 그린 페이지를 주는 방식)을 자바스크립트 콘텐츠 문제의 임시방편이며 장기 해법이 아니라고 설명합니다. 대신 서버 렌더링, 정적 렌더링, 하이드레이션을 권합니다.[2]

• 서버 렌더링: 요청이 올 때 서버가 본문까지 채운 HTML을 만들어 보냅니다.
• 정적 렌더링: 배포할 때 완성된 HTML을 미리 만들어 둡니다. 자주 바뀌지 않는 소개·안내 페이지에 어울립니다.
• 하이드레이션: 서버가 보낸 완성 HTML 위에 자바스크립트가 기능을 덧입힙니다. 본문은 처음부터 있고 단추 같은 동작만 나중에 붙습니다.

모든 화면을 한꺼번에 바꿀 필요는 없다고 판단합니다. 로그인 뒤 화면처럼 검색에 나올 필요가 없는 곳은 그대로 두고, 공개 페이지 가운데 고객의 질문에 답하는 페이지부터 첫 HTML에 본문을 담는 순서가 부담이 적다고 판단합니다. A 사이트처럼 페이지 제목이 실행 뒤에 바뀐다면 첫 HTML의 제목과 설명 문구도 함께 점검해야 합니다.

개발자나 제작사에는 이렇게 요청하면 됩니다. «공개 페이지의 본문과 대표 제목(H1), 페이지 제목과 설명 문구가 처음 받는 HTML에 들어가게 해 주세요. 방식은 서버 렌더링이나 정적 렌더링이면 됩니다.» 고친 뒤에는 앞의 확인 방법 1번을 다시 해서 핵심 문장이 소스 보기에 나오는지 확인하세요. 대표 페이지 몇 곳을 같은 방법으로 함께 보면 빠진 곳을 찾기 쉽습니다.

하지 말아야 할 것

• 브라우저에서 잘 보인다는 이유로 점검을 건너뛰기
• robots.txt 허용만 확인하고 받아 가는 HTML은 보지 않기
• 첫 HTML과 실행 뒤 화면의 내용을 서로 다르게 두기
• 한 번 확인하고 끝내기: 사이트를 고치거나 새 기능을 올리면 첫 HTML도 달라질 수 있습니다.

점검표

결론

AI 검색에서 보이지 않는 까닭이 글의 질이 아니라 전달 방식에 있을 수 있습니다. 사람에게 보이는 화면이 아니라 처음 받는 HTML을 기준으로 확인하고, 고객의 질문에 답하는 공개 페이지부터 본문을 HTML에 담으세요. 첫 HTML에 본문이 있다고 인용이 보장되지는 않습니다. 다만 본문이 없으면 읽힐 기회부터 크롤러의 동작에 달리게 됩니다.

함께 읽을 글

• AI 검색의 네 단계(접근·식별·답변·검증)를 한눈에 보려면 GEO·AEO 총정리를 보세요. 이 글은 그 가운데 «접근» 단계를 자세히 다뤘습니다.
• 병원 홈페이지라면 병원 AI 검색 진단 8가지의 첫 항목과 함께 보세요.

참고 자료

1. Google Search Central, Understand the JavaScript SEO basics
2. Google Search Central, Dynamic rendering as a workaround
3. Vercel, The rise of the AI crawler
4. OpenAI, Overview of OpenAI Crawlers
5. Anthropic, Does Anthropic crawl data from the web, and how can site owners block the crawler?
6. Perplexity, Perplexity Crawlers
7. Google Search Console Help, URL Inspection tool

작성: medad 편집팀

최종 확인일: 2026-09-19