당신이 Lovable, Bolt 또는 v0으로 앱을 만들었고, 작동하며, 사람들이 좋아합니다. 그러다가 구글에서 검색해 보면 아무 쓸모 있는 것도 찾을 수 없고, ChatGPT에게 제품에 대해 물어보면 그것에 대해 한 번도 들어본 적이 없다고 합니다.
대부분의 경우 앱 자체는 문제가 없습니다. 문제는 검색 엔진과 AI 어시스턴트가 당신의 링크를 열었을 때 무엇을 받느냐입니다.
크롤러가 실제로 다운로드하는 것
AI 빌더로 만든 앱은 보통 단일 페이지 React 앱(single-page React apps)입니다. 누군가 링크를 열면, 서버는 대략 다음과 같은 작은 HTML 파일을 전송합니다:
<body >
<div id="root"></div>
<script type="module" src="/assets/index-a1b2c3.js"></script>
...
당신의 제목, 가격, 기능 및 연락처 세부 정보는 이 파일 안에 없습니다. 그것들은 브라우저가 JavaScript를 다운로드하고 실행한 후에만 나타납니다. 사람들은 알아차리지 못하는데, 그 이유는 브라우저가 1초 만에 처리하기 때문입니다.
누가 JavaScript를 실행하는가, 그리고 누가 그렇지 않은가
Google은 JavaScript를 실행할 수 있지만, 이는 며칠 후에 올 수도 있는 두 번째 과정(second pass)으로 이루어지며, 스크립트가 무거운 페이지는 때때로 누락된 텍스트와 함께 또는 아예 색인화되지 않을 수 있습니다.
AI 어시스턴트의 경우 상황이 더 심각합니다. ChatGPT, Claude, Perplexity 뒤에 있는 크롤러들은 대부분 HTML만 읽고 JavaScript를 실행하지 않습니다. Vercel의 AI 크롤러 트래픽 분석에서 보았듯이, 주요 AI 크롤러 중 어느 것도 JavaScript를 렌더링(rendered)하지 않았습니다. 그들에게 당신의 앱은 빈 div에 불과합니다.
따라서 방문자에게는 멋져 보이는 페이지라도, 현재 사람들이 제품을 찾는 데 사용하는 도구들에는 보이지 않을 수 있습니다.
30초 만에 당신의 앱 확인하기
가장 빠른 방법은 무료 가시성 체크(visibility check)에 링크를 붙여넣는 것입니다. 이 도구는 콘텐츠 중 HTML에 포함된 단어 수, 제목, 설명, 링크 미리보기, sitemap, robots.txt, llms.txt 및 모바일 속도 등 각각 무엇을 수정해야 하는지 보여줍니다.
수동으로 확인하고 싶다면, 사이트를 열고 Ctrl+U (Mac에서는 Cmd+Option+U)를 눌러 페이지 소스(page source)를 확인하세요. 페이지에 보이는 문장을 검색해 보세요. 만약 소스에서 해당 문장을 찾을 수 없다면, 크롤러(crawlers)도 찾을 수 없습니다.
가장 쉬운 것부터 가장 철저한 것까지 5가지 해결책
1. 기본 정보를 index.html에 넣으세요. 단일 페이지 앱(single-page app)이라도 실제 HTML 파일은 하나가 있습니다. 적절한 <title>, 메타 디스크립션(meta description), 링크 미리보기를 위한 Open Graph 태그, 그리고 정규화 링크(canonical link)를 제공하세요. Lovable에서는 index.html을 편집하도록 요청하거나 GitHub의 코드에서 변경할 수 있습니다. 이것만으로도 검색 결과와 채팅에서 링크가 보이는 방식이 개선됩니다.
2. robots.txt, sitemap.xml 및 llms.txt를 추가하세요. 이 파일들을 public 폴더에 넣어 도메인의 루트(root)에서 제공되도록 하세요. sitemap은 페이지 목록을 나열하고, robots.txt는 크롤러에게 이를 알려주며, llms.txt는 AI 비서(AI assistants)를 위해 작성된 사이트가 제공하는 내용의 짧고 일반 텍스트 요약본입니다.
3. 구조화된 데이터(structured data)를 추가하세요. index.html에 들어가는 작은 JSON-LD 블록으로, 누가 누구이며 무엇을 판매하고 어디에 위치하는지를 명시합니다. Google과 AI 비서들은 추측하지 않고 사업체를 설명하기 위해 이것을 사용합니다.
4. 공개 페이지를 사전 렌더링(Prerender)하세요. 이것은 실제로 텍스트를 HTML에 넣어주는 해결책입니다. 사전 렌더링 단계는 빌드 시간(build time)에 앱을 실행하고 각 공개 경로(홈, 가격 책정, 기능, 블로그 등)에 대한 완성된 HTML을 저장합니다. 방문자는 여전히 전체 앱을 받지만, 크롤러는 실제 콘텐츠를 받게 됩니다. Lovable이나 Bolt가 생성하는 Vite 앱의 경우, 일반적으로 플러그인과 렌더링할 경로 목록이 필요합니다.
5. 마케팅 페이지를 서버에서 렌더링하는 프레임워크로 옮기세요. 콘텐츠와 검색 트래픽이 매우 중요하다면, 로그인된 앱은 그대로 두고 공개 페이지는 기본적으로 전체 HTML을 전송하는 Next.js나 Astro 같은 프레임워크로 구축하세요. 작업량이 더 많지만, 가장 견고한(robust) 옵션입니다.
대부분의 앱의 경우 1~4단계만으로 충분하며 하루 이틀 정도 걸립니다.
제가 보통 발견하는 것들
AI 도구로 구축된 앱들을 확인해 보면 패턴이 거의 항상 같습니다. "Vite + React"와 같은 일반적인 제목만 있고, 설명도 없고, 링크 미리보기 이미지도 없으며, 사이트맵도 없고, HTML 본문 내용도 20단어 미만인 경우가 많습니다. 각 조각 자체는 작지만, 이들이 모여서 외부에서는 제품을 보이지 않게 만듭니다.
이 문제를 대신 해결해 드립니다. 바로 사전 렌더링(prerendering), 메타 태그(meta tags), 링크 미리보기, 사이트맵(sitemap), robots.txt, 구조화된 데이터(structured data) 및 llms.txt를 고정된 인용구와 함께 적용하는 것입니다. 무료 점검을 실행하고 보고서를 보내주세요.
FAQ
Google이 Lovable 앱을 색인화(index)할 수 있나요?
네, 하지만 느리고 항상 완벽하지는 않습니다. Google은 JavaScript를 두 번째 패스로 렌더링하기 때문에 페이지가 며칠 동안 색인화되지 않거나 누락된 텍스트와 함께 색인화될 수 있습니다. 사전 렌더링을 통해 실제 텍스트를 HTML에 넣으면 추측할 여지가 사라집니다.
ChatGPT는 제 제품에 대해 모르는 이유가 무엇인가요?
ChatGPT, Claude, Perplexity에 정보를 제공하는 크롤러들은 대부분 HTML만 읽고 JavaScript를 실행하지 않습니다. 콘텐츠가 스크립트 실행 후에만 나타난다면, 그들은 빈 페이지를 보고 인용할 내용이 아무것도 없다고 판단합니다.
이 문제를 해결하기 위해 앱을 재구축해야 하나요?
보통은 그렇지 않습니다. index.html 수정, 사이트맵, robots.txt, llms.txt 및 구조화된 데이터 추가, 그리고 공개 페이지에 대한 사전 렌더링만으로도 앱의 형태는 유지됩니다. 마케팅 페이지를 Next.js나 Astro로 옮기는 것은 검색 트래픽이 정말 중요할 때만 가치가 있습니다.
원문 발행일: watershowdigital.com/blog/why-chatgpt-cant-see-your-lovable-app. 앱이나 자동화에 도움이 필요하신가요? WaterShow Digital이 고치고 구축해 드립니다. 고정된 인용구 우선으로.