내 휴대폰에서는 잘 보이는데 AI는 읽지 못할 수 있는 페이지

화면은 완성된 요리, 원본 HTML은 처음 받은 재료예요

페이지를 열면 브라우저는 먼저 서버에서 HTML 문서를 받아요. 그다음 그 안에 연결된 자바스크립트를 실행해서 가격을 불러오고, 후기를 붙이고, 상세 설명을 채워 넣어요. 우리가 휴대폰에서 보는 건 이 과정이 다 끝난 결과예요.

요즘 쇼핑몰과 홈페이지는 이 두 번째 단계에서 많은 내용을 채우는 경우가 많아요. 사람은 차이를 느끼지 못해요. 1초도 안 걸리니까요. 문제는 자바스크립트를 실행하지 않고 처음 받은 문서만 읽는 쪽이에요. 그쪽에서 보면 가격 자리, 후기 자리가 비어 있는 페이지가 돼요.

같은 상품 페이지, 두 가지 모습 예시

내 휴대폰 화면 자바스크립트 실행 후 상품명 · 가격 39,000원 "방수 원단, 기내 반입 가능 크기" 후기 128개 · 배송 안내 사람은 이 화면을 봐요.

처음 받은 원본 HTML 자바스크립트 실행 전 상품명 <div id="price"></div> 빈자리 <div id="detail"></div> 빈자리 원본만 읽는 쪽은 여기서 멈춰요.

모든 사이트가 이렇지는 않아요. 처음부터 HTML에 내용을 담아 보내는 사이트도 많아요. 우리 페이지가 어느 쪽인지는 아래 3분 점검으로 확인할 수 있어요.

AI 크롤러는 어느 쪽을 읽을까요

구글은 자바스크립트 페이지를 크롤링, 렌더링, 색인의 세 단계로 처리한다고 설명해요. 구글 검색은 렌더링 단계에서 자바스크립트를 실행해 완성된 화면을 봐요. 그런데 같은 문서에서 구글도 서버 쪽 렌더링이나 사전 렌더링은 여전히 좋은 방법이라고 권해요. 사람과 크롤러 모두에게 페이지가 빨라지고, 모든 봇이 자바스크립트를 실행할 수 있는 건 아니기 때문이에요.

AI 크롤러 쪽은 어떨까요. 2024년 12월 Vercel이 MERJ와 함께 자사 네트워크의 크롤러 요청을 분석해 공개한 글이 있어요. 결과는 이랬어요. OpenAI, Anthropic, Perplexity 등 주요 AI 크롤러 가운데 자바스크립트를 렌더링하는 곳은 없었다. ChatGPT와 Claude의 크롤러는 자바스크립트 파일을 내려받기는 했지만(전체 요청 중 각각 11.50%, 23.84%) 실행하지는 않았다. 반면 Gemini는 구글봇의 인프라를 쓰기 때문에 렌더링이 되고, AppleBot도 브라우저 기반으로 렌더링했어요.

크롤러별로 받아 가는 것 (2024년 12월 Vercel·MERJ 분석)

ChatGPT (OpenAI)원본 HTML만자바스크립트 파일은 받아 가지만 실행하지 않았어요.

Claude (Anthropic)원본 HTML만자바스크립트 파일은 받아 가지만 실행하지 않았어요.

Perplexity원본 HTML만자바스크립트를 렌더링하지 않았어요.

Gemini · 구글완성된 화면까지구글봇 인프라로 자바스크립트를 실행해요. AppleBot도 렌더링했어요.

2024년 12월 시점의 공개 분석이에요. 크롤러의 동작은 바뀔 수 있으니 결론보다 "원본에 핵심이 있으면 어느 쪽이든 안전하다"는 원칙을 가져가세요.

Vercel이 정리한 권장도 같은 방향이에요. 중요한 내용은 서버에서 렌더링해서 처음 HTML에 담아 보내고, 조회수 카운터나 실시간 채팅 위젯처럼 없어도 되는 부분만 브라우저에서 채우라는 거예요. 고객이 사기 전에 묻는 가격, 사양, 배송과 교환 조건은 당연히 "중요한 내용" 쪽이에요.

어떤 내용이 원본에서 빠지기 쉬울까요

사이트를 만든 방식에 따라 다르지만, 같이 페이지를 볼 때 자주 확인하게 되는 자리는 정해져 있어요. 대부분 "나중에 불러오는" 내용이에요.

원본에 있는지 먼저 확인해 볼 자리 예시

상품명대부분 원본에 있어요. 제목 태그에도 들어가 있는 경우가 많아요.
가격 · 옵션재고나 할인에 따라 바뀌어서 화면을 연 뒤에 불러오는 경우가 있어요.
상세 설명 · 후기"더 보기", 무한 스크롤, 별도 위젯으로 붙는 내용은 원본에 없을 수 있어요.
배송 · 교환 안내공통 영역으로 따로 불러오는 사이트라면 함께 확인해 보세요.

빨간 자리가 꼭 빠져 있다는 뜻은 아니에요. 사이트마다 달라서, 직접 원본을 열어 보는 게 가장 확실해요.

하나 더. 원본에 없다고 사이트를 다시 만들 필요는 없어요. 쇼핑몰 솔루션이나 개발사에 "이 페이지의 가격과 상세 설명이 서버에서 처음부터 HTML로 나오게 할 수 있나요?"라고 물어보는 것부터 시작하세요. 서버 쪽 렌더링이나 사전 렌더링 같은 이름으로 이미 지원하는 경우도 많아요. 다만 원본에 담았다고 AI가 우리 페이지를 인용한다는 보장은 없어요. 읽을 수 있게 되는 것까지가 우리가 할 수 있는 일이에요.

오늘 해 볼 3분 점검

PC에서 가장 많이 팔고 싶은 상품의 상세페이지를 열어 주세요. 휴대폰보다 PC가 훨씬 쉬워요.

1분 · 열기원본 보기 열기크롬이나 엣지에서 Ctrl+U(맥은 Cmd+Option+U)를 누르면 서버가 처음 보낸 원본 HTML이 새 탭으로 열려요.
1분 · 찾기핵심 문장 세 개 검색Ctrl+F로 가격 숫자, 상세 설명의 한 문장, 교환 조건의 한 문장을 차례로 검색해요.
1분 · 적기O/X 적어 두기찾아지면 O, 안 찾아지면 X. X가 하나라도 있다면 개발사에 물어볼 첫 질문이 생긴 거예요.

손으로 하면 어디서 막힐까요

페이지 하나는 3분이면 끝나요. 하지만 상품이 수십 개고, 템플릿이 여러 종류고, 원본에 있는 문장이 고객과 AI에게 실제로 어떻게 읽히는지까지 보려면 페이지마다 같은 일을 반복해야 해요. 개발 용어가 섞이는 순간 미뤄지기도 쉽고요.

그 부분을 AIOudit이 대신 봐 줘요. 페이지 URL만 넣으면 고객과 AI가 그 페이지를 어떻게 읽는지 한 번에 살피고, 무엇부터 손보면 좋을지 순서로 정리해 줘요.

다만 AIOudit은 가격 경쟁력, 재고, 광고, 시즌, 브랜드 평판은 볼 수 없어요. 그리고 AI가 어떤 페이지를 인용할지는 결국 각 AI가 정해요.

우리 페이지는 고객과 AI에게 어떻게 읽히는지 AIOudit에서 진단해 보세요.