Vibe 코딩으로 만든 사이트가 AI 봇과 검색 엔진에 노출되지 않는 이유와 해결책

커뮤니티 반응

사용자들은 AI 봇이 JS를 실행하지 않는다는 사실에 주목하며, Vibe 코딩 결과물의 실전 배포 시 SEO 전략의 중요성에 공감했다.

주요 논점

01찬성다수

현대적인 웹 사이트는 인간뿐만 아니라 AI 봇에게도 읽혀야 하므로 SSR/SSG 전환은 필수적이다.

합의점 vs 논쟁점

합의점

AI 봇의 데이터 수집 방식은 정적 HTML 기반이며 JS 렌더링을 기대하기 어렵다.
Vite 기반의 단순 CSR은 공개용 웹사이트 제작에 부적합하다.

실용적 조언

브라우저에서 '페이지 소스 보기'를 눌러 실제 텍스트가 보이는지 확인하라.
Vite SPA를 사용 중이라면 TanStack Start, Astro, Next.js 등으로 전환하여 프리렌더링을 적용하라.
Google Rich Results Test를 통해 검색 엔진이 내 콘텐츠를 어떻게 해석하는지 점검하라.

섹션별 상세

대부분의 Vibe 코딩 도구가 기본값으로 사용하는 CSR 방식은 검색 엔진 최적화에 치명적이다. 브라우저가 빈 HTML을 받은 뒤 자바스크립트로 내용을 채우기 때문에, 구글 크롤러조차 렌더링 단계에서 실패할 확률이 높다. 특히 소규모 사이트의 경우 HTML 소스에 실제 텍스트가 없으면 검색 결과에서 누락될 가능성이 크다는 점이 확인됐다.

AI 봇인 GPTBot, ClaudeBot, PerplexityBot은 자바스크립트를 전혀 실행하지 않고 순수 HTML만 수집한다. Vercel이 분석한 5억 건의 GPTBot 크롤링 데이터에 따르면 자바스크립트 실행 횟수는 0건으로 나타났다. 따라서 React 쉘만 있는 사이트는 AI 학습 데이터에 포함되지 않으며 ChatGPT 등의 답변에서 인용될 기회조차 얻지 못한다.

작성자는 Claude Code를 활용해 기존 Vite SPA 구조를 TanStack Start로 10분 만에 마이그레이션하는 데 성공했다. 이를 통해 동일한 React 코드와 디자인을 유지하면서도 모든 페이지를 프리렌더링된 HTML로 변환하여 Cloudflare Pages에 배포했다. 결과적으로 '페이지 소스 보기'를 했을 때 실제 텍스트가 노출되는 것을 확인하며 가시성 문제를 해결했다.

사이트의 가시성을 확인하는 가장 간단한 방법은 브라우저에서 '페이지 소스 보기'를 실행하는 것이다. 소스 코드 내에 실제 텍스트 콘텐츠가 보이지 않고 스크립트 태그만 가득하다면 해당 사이트는 AI와 검색 엔진에 투명 인간과 다름없다. 추가로 구글의 Rich Results Test 도구를 통해 구조화된 데이터가 정상적으로 읽히는지 점검할 것을 권장했다.

용어 해설

클라이언트 사이드 렌더링(CSR): — 브라우저가 빈 HTML 파일을 받은 뒤 자바스크립트를 실행하여 콘텐츠를 채우는 방식이다. 초기 로딩 시 HTML이 비어 있어 검색 엔진 크롤러나 AI 봇이 내용을 읽지 못하는 문제가 발생한다.
서버 사이드 렌더링(SSR): — 서버에서 요청마다 완전한 HTML을 생성하여 브라우저에 전달하는 방식이다. 크롤러가 즉시 완성된 콘텐츠를 확인할 수 있어 검색 엔진 최적화(SEO)에 유리하다.
정적 사이트 생성(SSG): — 빌드 시점에 미리 HTML 파일들을 생성해 두는 방식이다. 서버 부하가 적고 속도가 빠르며, 모든 페이지가 완성된 HTML 형태이므로 검색 엔진과 AI 봇의 접근성이 매우 높다.
프리렌더링(Prerendering): — 애플리케이션을 배포하기 전 특정 페이지들을 미리 HTML로 렌더링하는 기술이다. CSR의 유연성을 유지하면서도 검색 엔진이 읽을 수 있는 정적 콘텐츠를 제공할 수 있게 한다.

언급된 도구

Claude Code추천

코드 마이그레이션 및 개발 보조

TanStack Start추천

React 기반의 SSR/SSG 프레임워크

Vite중립

프론트엔드 빌드 도구 (기본 CSR 방식)

언급된 리소스

문서Google Rich Results Test