Why Your Vibe Coded Website May Never Rank on Google

Translated for your language. Read the original.

AI-assisted draft.

당신의 바이브 코딩(vibe-coded) 웹사이트가 구글 검색 결과에 나타나지 않는 이유

지난달 한 창업자가 저에게 인상적인 웹사이트를 보여주었습니다. 깔끔한 애니메이션과 세련된 카피가 돋보였습니다. 그는 AI 도구를 사용하여 단 한 오후 만에 그 사이트를 만들었습니다.

3개월 후, 그 사이트는 구글에서 전혀 검색되지 않았습니다. 심지어 본인의 브랜드 이름으로 검색해도 나타나지 않았습니다.

이것이 바로 바이브 코딩(vibe-coded) 웹사이트의 문제입니다. 사용자에게는 완성된 것처럼 보이지만, 검색 엔진에는 보이지 않습니다. 페이지는 사람에게는 잘 작동하지만, 크롤링에는 실패합니다.

바이브 코딩이란 원하는 것을 일상 언어로 설명하고 AI가 코드를 작성하게 하는 것을 의미합니다. Lovable, Bolt, 또는 Cursor와 같은 도구들은 몇 초 만에 작동하는 앱을 만들어 줍니다. 마치 마법처럼 느껴집니다.

문제는 기술적인 기본 설정에 있습니다. 이러한 도구들은 대부분 React 싱글 페이지 애플리케이션(SPA)을 생성합니다. 이는 React가 해당 도구들의 학습 데이터에서 압도적인 비중을 차지하기 때문입니다.

React는 종종 클라이언트 사이드 렌더링(CSR)을 사용합니다. 이는 서버가 거의 비어 있는 HTML 파일을 보낸다는 것을 의미합니다. 브라우저는 페이지가 나타나기 전에 대규모 JavaScript 번들을 다운로드하고 실행해야 합니다.

사람에게는 문제가 없습니다. 하지만 크롤러에게는 재앙입니다.

구글봇(Googlebot)은 먼저 빈 껍데기를 보게 됩니다. 구글은 2단계 인덱싱 프로세스를 사용합니다:

1단계: 구글봇이 원본 HTML을 크롤링합니다. CSR을 사용하면 빈 컨테이너 외에는 아무것도 찾지 못합니다.
2단계: 구글이 JavaScript를 실행하기 위해 페이지를 대기열에 넣습니다. 이 단계는 보장되지 않습니다. 새로운 사이트의 경우, 구글이 이 렌더링 작업을 우선순위에 두지 않을 수도 있습니다.

당신의 사이트는 대기열에 머물게 됩니다. 구글은 빈 페이지를 보고 그냥 지나칩니다. 당신의 콘텐츠는 인덱스(색인)에 도달하지 못합니다.

다음 세 가지 간단한 테스트로 직접 확인할 수 있습니다:

Google Search Console: URL 검사 도구를 사용하세요. '실시간 URL 테스트'를 클릭하고 렌더링된 HTML을 확인하세요. 만약 텍스트가 누락되어 있다면, 구글이 이를 볼 수 없다는 뜻입니다.
사이트 검색: 구글에 site:yourdomain.com을 입력하세요. 페이지가 나타나지 않는다면 인덱싱되지 않은 것입니다.
JavaScript 비활성화: 브라우저에서 JavaScript를 끄세요. 페이지가 빈 화면으로 나온다면, 크롤러도 콘텐츠를 찾는 데 어려움을 겪을 것입니다.

해결책은 React를 피하는 것이 아닙니다. 렌더링 방식을 바꾸는 것입니다.

다시 구축할 수 있다면, HTML을 즉시 전송하는 프레임워크를 사용하세요:

현재 사이트를 유지하고 싶다면, AI 도구에게 수정을 요청하세요. 다음과 같은 프롬프트를 사용해 보세요: "콘텐츠가 초기 HTML에 포함될 수 있도록 이 앱을 서버 사이드 렌더링(SSR) 방식으로 변환해 줘."

작동하는 사이트도 좋지만, 눈에 보이는 사이트가 더 좋습니다. JavaScript가 실행되기 전에 콘텐츠가 확실히 존재하는지 확인하세요.