최근 AI 챗봇과 검색 엔진의 크롤링 방식이 진화하면서, 웹사이트가 AI 에이전트에게 어떻게 보이는지에 대한 새로운 문제가 부상하고 있습니다. 특히 리액트(React)와 같은 자바스크립트(JavaScript) 기반 프레임워크로 구축된 SPA(단일 페이지 애플리케이션)는 사용자가 보는 최종 화면과 AI 챗봇이 처음 읽는 HTML 사이에 큰 차이가 발생할 수 있는데, 이를 'DOM 드리프트(DOM drift)'라고 부릅니다. 이는 웹사이트의 SEO 점수와는 별개로 AI가 콘텐츠를 제대로 이해하지 못하게 만드는 심각한 문제입니다.
대부분의 SPA는 최소한의 HTML을 먼저 로드한 후 자바스크립트를 다운로드하여 콘텐츠를 동적으로 렌더링(hydration)합니다. 구글봇(Googlebot)과 같은 일부 크롤러는 자바스크립트를 실행하여 최종 렌더링된 페이지를 읽으려 하지만, GPT봇(GPTBot), 클로드봇(ClaudeBot) 등 많은 AI 크롤러는 초기 HTML 응답만 처리하고 자바스크립트를 실행하지 않거나 제한적으로만 실행합니다. 이 경우, 사용자는 완벽하게 보이는 페이지를 경험하지만 AI 에이전트는 텅 빈 `<div id="root"></div>` 태그만 보게 되어 핵심 콘텐츠를 놓칠 수 있습니다. 예를 들어, 웹 페이지의 중요한 제목인 `<h1>` 태그가 자바스크립트 실행 후에만 나타난다면, AI 크롤러는 이 제목을 인식하지 못할 가능성이 큽니다.
이러한 DOM 드리프트는 단순히 SEO 순위 하락을 넘어, AI 시대의 웹 콘텐츠 발견 가능성(discoverability)에 직접적인 영향을 미칩니다. AI 챗봇이 웹사이트의 핵심 정보를 제대로 파악하지 못하면, 사용자 질문에 대한 답변에 해당 웹사이트 콘텐츠가 인용되거나 참조될 기회를 잃게 됩니다. 봇스코어(BotScore)는 이러한 문제를 해결하기 위해 초기 HTML과 자바스크립트 실행 후의 최종 DOM을 비교하여 가시적인 텍스트와 주요 구조적 요소(예: `<h1>`, `<main>`)의 차이를 분석하는 도구입니다. 이를 통해 개발자는 AI 에이전트가 웹사이트 콘텐츠를 정확하게 읽고 이해할 수 있도록 SSR(서버 사이드 렌더링) 또는 SSG(정적 사이트 생성) 등의 방법으로 문제를 해결할 수 있습니다. 이는 단순히 사용자 경험을 넘어, AI 생태계에서 웹사이트의 존재감을 확보하는 필수적인 과정이 되고 있습니다.