#02
최적화 프로 가이드
JavaScript 렌더링
목록으로

JavaScript 렌더링 | SPA가 AI에게 안 보이는 이유

skimar 2026. 04. 30 14 min read

이 글은 "최적화 프로 가이드" 시리즈의 두 번째 글입니다. 최적화 프로 가이드는 커머스 운영자와 마케터를 위해, 실무에서 바로 써먹을 수 있는 SEO·AEO 핵심 주제를 한 편씩 다루는 단편 시리즈입니다. 이번 편에서는 JavaScript 렌더링이 검색엔진과 AI에게 어떤 영향을 주는지, 그리고 왜 SPA(Single Page Application)로 만든 사이트가 AI 검색에서 불리한지를 다룹니다.

같은 사이트인데, Google에는 뜨고 ChatGPT에는 안 뜬다?

어떤 쇼핑몰이 Google 검색에서는 1페이지에 잘 나옵니다. 그런데 ChatGPT에 "이 브랜드 제품 추천해줘"라고 물으면, 해당 쇼핑몰의 상품 정보가 전혀 나오지 않습니다. Perplexity에 상품 페이지 URL을 직접 넣어도 "콘텐츠를 찾을 수 없다"는 답변이 돌아옵니다.

이런 상황이 실제로 일어나고 있고, 원인은 JavaScript 렌더링에 있습니다.

이 문제를 이해하려면 먼저 "검색엔진 봇이 웹페이지를 어떻게 읽는지"를 알아야 합니다.

정적 페이지 vs 동적 페이지: 봇이 보는 세상

정적 페이지 (서버에서 HTML을 완성해서 보내주는 방식)

전통적인 웹사이트는 서버에서 HTML을 완성된 상태로 보내줍니다. PHP, JSP 같은 서버 템플릿 엔진이 상품 데이터를 HTML에 채워 넣은 다음, 완성된 페이지를 브라우저에 전달합니다. 봇이 페이지를 요청하면, 상품명, 가격, 설명, 이미지 경로 등 모든 콘텐츠가 이미 HTML에 담겨 있습니다.

<!-- 서버가 보내주는 HTML — 콘텐츠가 다 들어 있음 -->
<h1>프렌치 린넨 오버핏 셔츠</h1>
<p class="price">49,000원</p>
<p class="desc">프랑스산 린넨 100%로 만든 시원한 여름 셔츠입니다.</p>
<div class="reviews">리뷰 200건 | 평점 4.8</div>

봇이 이 HTML을 받는 순간, 바로 내용을 파악할 수 있습니다. 카페24, 고도몰 같은 전통 커머스 플랫폼은 기본적으로 이 방식입니다.

동적 페이지 (클라이언트 사이드 렌더링 / SPA)

React, Vue, Angular 같은 프레임워크로 만든 SPA는 다릅니다. 서버가 보내주는 HTML은 거의 빈 껍데기입니다.

<!-- SPA가 서버에서 보내주는 HTML — 비어 있음 -->
<html>
<head>
  <title>브랜드 A</title>
</head>
<body>
  <div id="root"></div>
  <script src="/app.bundle.js"></script>
</body>
</html>

실제 콘텐츠는 브라우저가 app.bundle.js를 다운로드하고 실행한 이후에 비로소 화면에 그려집니다. 사람이 크롬 브라우저로 보면 정상적으로 보이지만, JavaScript를 실행하지 않는 봇이 보면 텅 빈 페이지입니다.

정적 페이지와 SPA 페이지를 봇이 보는 차이를 비교한 일러스트

비유하자면 이렇습니다. 정적 페이지는 인쇄된 책을 전달하는 것이고, SPA는 조립 설명서와 부품을 전달하는 것입니다. 사람은 설명서를 보고 조립할 수 있지만, 대부분의 봇은 설명서(JavaScript)를 읽을 줄 모릅니다.

Google은 되는데 AI는 안 되는 이유

여기서 핵심 차이가 나옵니다.

Google: JavaScript를 실행할 수 있다

Google의 크롤러(Googlebot)는 헤드리스 크롬(Headless Chrome) 기반의 렌더링 엔진을 갖추고 있습니다. 즉, 실제 브라우저처럼 JavaScript를 실행하고, API 호출을 기다리고, DOM이 완성될 때까지 처리할 수 있습니다.

다만 과정이 두 단계로 나뉩니다:

1. 크롤링: HTML을 가져옴 (이때는 빈 껍데기만 봄)
2. 렌더링: JavaScript를 실행하여 최종 콘텐츠를 확인 (이 과정이 지연될 수 있음)

Google은 이 렌더링 과정에 추가 리소스가 들기 때문에, JavaScript가 많은 사이트는 크롤 예산(Crawl Budget) 소모가 커집니다. 인덱싱도 정적 페이지보다 느릴 수 있습니다. 하지만 결과적으로는 콘텐츠를 읽어냅니다.

AI 크롤러: JavaScript를 실행하지 못한다

ChatGPT(GPTBot), Perplexity(PerplexityBot), Claude(ClaudeBot) 등 AI 플랫폼의 크롤러들은 JavaScript를 실행하지 않습니다. 단순히 HTTP 요청을 보내고, 돌아온 HTML을 있는 그대로 읽고, 거기서 텍스트를 추출합니다.

JavaScript 파일 자체를 다운로드하기는 하지만, 그걸 실행해서 콘텐츠를 만들어내는 과정은 없습니다. 다시 말해, SPA에서 JavaScript 실행 후에야 나타나는 상품명, 가격, 리뷰, FAQ 같은 콘텐츠는 AI 크롤러에게 완전히 보이지 않습니다.

크롤러별 JavaScript 렌더링 지원 여부를 비교한 표

정리하면 이런 상황이 벌어집니다:

  • Google 검색: SPA여도 렌더링 후 인덱싱 가능 → 검색 결과에 노출됨
  • ChatGPT / Perplexity / Claude: 렌더링 불가 → 콘텐츠 자체를 인식하지 못함
  • SNS 공유 미리보기 (카카오톡, 페이스북 등): JavaScript 실행 안 됨 → og:title 등 메타태그가 JS로 주입되면 빈 미리보기

"Google에서만 잘 보이면 되는 거 아닌가요?"라고 물을 수 있습니다. 하지만 AI 검색의 비중은 급격히 늘고 있습니다. 2026년 초 기준, 일부 사이트에서는 ChatGPT 크롤러의 요청량이 Googlebot의 3.6배에 달한다는 분석도 있습니다. "Google에서만" 보이는 것은 점점 충분하지 않은 시대가 되고 있습니다.

커머스에서 실제로 무슨 문제가 생기나

JavaScript 렌더링 이슈가 커머스 사이트에 미치는 구체적인 영향을 정리하면 다음과 같습니다.

상품 정보가 AI 답변에서 빠진다

"30대 남성 여름 셔츠 추천해줘"라고 ChatGPT에 물었을 때, SPA로 만든 쇼핑몰의 상품은 추천 목록에 나오지 않습니다. 상품명, 가격, 소재 같은 핵심 정보가 AI에게 보이지 않으니까요.

구조화 데이터(JSON-LD)가 무시된다

Product 스키마, Review 스키마 같은 구조화 데이터를 JavaScript로 주입하는 경우, AI 크롤러는 이 데이터를 읽지 못합니다. Google은 JavaScript 실행 후 JSON-LD를 읽을 수 있다고 공식 문서에 명시하고 있지만, AI 크롤러에는 적용되지 않습니다.

내부 링크 구조가 깨진다

SPA에서 페이지 이동을 <a href="..."> 태그 대신 JavaScript 이벤트(onClick, router.push)로 처리하면, 크롤러가 내부 링크를 따라갈 수 없습니다. 결과적으로 사이트 구조 파악이 불가능해집니다.

SNS 공유가 깨진다

카카오톡이나 페이스북에 상품 URL을 공유했을 때, 제목과 설명이 비어 있거나 기본값(예: "브랜드 A")만 나옵니다. og:title, og:description 같은 메타태그가 JavaScript 실행 이후에 주입되기 때문입니다.

우리 사이트는 괜찮을까? 진단하는 방법

방법 1: JavaScript를 끄고 확인하기

가장 직관적인 방법입니다.

1. 크롬 브라우저에서 F12 → 설정(⚙️) 클릭
2. "Debugger" 섹션에서 "Disable JavaScript" 체크
3. 페이지 새로고침

이 상태에서 상품명, 가격, 설명, 리뷰가 보이면 괜찮습니다. 빈 화면이거나 로딩 스피너만 돌아간다면, AI 크롤러도 같은 걸 보고 있다는 뜻입니다.

방법 2: curl로 raw HTML 확인하기

터미널(또는 WSL)에서 아래 명령어를 실행하면, JavaScript 실행 없이 서버가 보내주는 원본 HTML을 확인할 수 있습니다.

curl -s https://example.com/product/12345 | head -100

여기서 <div id="root"></div> 같은 빈 컨테이너만 보인다면, SPA 렌더링 이슈가 있습니다.

방법 3: Google Search Console URL 검사 도구

Google Search Console에서 특정 URL을 검사하면, Google이 렌더링한 결과와 원본 HTML을 비교해서 볼 수 있습니다. 원본 HTML에 콘텐츠가 없고 렌더링된 결과에만 있다면, AI 크롤러에게는 보이지 않는 상태입니다.

방법 4: AI에게 직접 물어보기

가장 확실한 테스트입니다. ChatGPT나 Perplexity에 상품 페이지 URL을 직접 주고, 내용을 요약해달라고 요청하세요.

이 페이지의 상품 정보를 정리해줘: https://example.com/product/12345

AI가 상품 정보를 제대로 가져오면 괜찮은 것이고, "콘텐츠를 찾을 수 없다"거나 엉뚱한 정보를 가져온다면 렌더링 문제가 있는 것입니다.

해결 방법

SSR (Server-Side Rendering)

가장 근본적인 해결책입니다. 서버에서 JavaScript를 미리 실행해서, 완성된 HTML을 전달하는 방식입니다. React라면 Next.js, Vue라면 Nuxt.js가 대표적인 SSR 프레임워크입니다.

SSR을 적용하면 봇이 요청했을 때 서버가 이미 렌더링된 HTML을 보내주기 때문에, Google이든 AI 크롤러든 콘텐츠를 온전히 읽을 수 있습니다.

다만 SSR 전환은 대규모 리팩토링이 필요하므로, 기존 SPA를 SSR로 전면 전환하는 것은 비용과 시간이 상당합니다.

프리렌더링 (Pre-rendering)

SSR 전환이 어려울 때 쓸 수 있는 대안입니다. 봇이 페이지를 요청하면, 미리 렌더링해둔 정적 HTML 스냅샷을 대신 보내주는 방식입니다. 사용자에게는 기존 SPA 경험을 유지하면서, 봇에게만 완성된 HTML을 제공합니다.

Prerender.io 같은 서비스를 사용하면, 직접 렌더링 인프라를 구축하지 않아도 됩니다.

한 SPA 사이트가 프리렌더링을 적용한 후, Google의 크롤 예산이 하루 약 600페이지에서 1,400페이지로 늘어나고, 검색 노출도 5배 이상 증가했다는 사례가 있습니다.

핵심 콘텐츠만 정적 HTML로

모든 페이지를 SSR로 전환할 수 없다면, 가장 중요한 콘텐츠만 초기 HTML에 포함시키는 방법도 있습니다.

  • 상품명, 가격, 핵심 설명 → 초기 HTML에 포함
  • meta title, description, og:태그, JSON-LD → 초기 HTML에 포함
  • 인터랙티브 UI (필터, 장바구니, 탭 전환 등) → JavaScript로 처리 가능

이 접근법을 "프로그레시브 인핸스먼트(Progressive Enhancement)"라고 합니다. 기본 콘텐츠는 HTML로 제공하고, JavaScript는 사용자 경험을 향상시키는 데만 사용하는 원칙입니다.

카페24·고도몰은 괜찮은가?

여기서 좋은 소식이 있습니다. 카페24, 고도몰, 임웹 같은 국내 주요 커머스 플랫폼은 기본적으로 서버에서 HTML을 완성해서 보내주는 전통적인 방식입니다. PHP 기반 서버 템플릿으로 페이지를 생성하기 때문에, SPA처럼 JavaScript 렌더링에 의존하지 않습니다. 즉, JavaScript 렌더링 이슈가 크지 않습니다.

다만 다음 상황에서는 주의가 필요합니다:

  • 외부 위젯이나 앱을 설치한 경우: 리뷰 위젯, 추천 상품 슬라이더 등이 JavaScript로 동적 로딩되면, 해당 콘텐츠는 봇에게 안 보일 수 있습니다.
  • 커스텀 스킨/테마에서 JavaScript로 핵심 콘텐츠를 처리하는 경우
  • React/Vue 기반 자사몰을 별도로 운영하는 경우: 이 경우는 SPA 이슈가 그대로 적용됩니다.

컨설팅 관점에서, 클라이언트가 카페24를 쓰고 있다면 이 이슈의 리스크는 낮습니다. 하지만 자체 개발 자사몰이나 해외 프레임워크(Shopify Hydrogen, 커스텀 React 등)를 쓰고 있다면, 반드시 점검해야 하는 항목입니다.

!체크리스트: JavaScript 렌더링 이슈 진단

☐ JavaScript를 끈 상태에서 핵심 콘텐츠(상품명, 가격, 설명)가 보이는가?
☐ meta title, description, og:태그가 초기 HTML에 포함되어 있는가?
☐ JSON-LD 구조화 데이터가 초기 HTML에 포함되어 있는가?
☐ 주요 내부 링크가 <a href="..."> 태그로 되어 있는가? (JavaScript 이벤트가 아닌)
☐ ChatGPT/Perplexity에 상품 URL을 넣었을 때 정보를 정상적으로 가져오는가?
☐ 카카오톡/페이스북 공유 시 제목과 설명이 정상 표시되는가?
☐ 외부 위젯(리뷰, 추천 등)의 콘텐츠가 초기 HTML에 포함되는가?

이 체크리스트에서 하나라도 "아니오"가 나오면, 해당 항목이 AI 검색에서 빠지고 있을 가능성이 있습니다. 특히 상품 정보와 구조화 데이터는 커머스 AEO의 핵심이므로, 최우선으로 점검하세요.