당신의 감성 위주 웹사이트가 절대 상위 노출되지 않는 이유

Translated for your language. Read the original.

AI-assisted draft.

당신의 바이브 코딩(Vibe-coded) 웹사이트가 절대 검색 순위에 오르지 못하는 이유

지난달 한 창업자가 제게 웹사이트 하나를 보여주었습니다. 디자인은 훌륭했습니다. 깔끔한 애니메이션과 세련된 카피가 돋보였죠. 그는 AI를 사용해 단 한 오후 만에 그 사이트를 만들었습니다.

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

문제는 간단합니다. 웹사이트가 사용자에게는 완성된 것처럼 보일 수 있지만, 검색 엔진에게는 보이지 않는 상태로 남을 수 있다는 점입니다. 페이지는 사람에게는 잘 작동하지만, 크롤링은 실패합니다.

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

하지만 이러한 도구들은 SEO(검색 엔진 최적화)에 해로운 기본 설정을 가지고 있습니다.

대부분의 AI 빌더는 React 싱글 페이지 애플리케이션(SPA)을 생성합니다. React는 세계에서 가장 많이 사용되는 라이브러리입니다. 웹사이트를 요청하면, 브라우저에서 모든 것을 렌더링하는 React 앱을 받게 됩니다.

이것을 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)이라고 합니다.

작동 방식은 다음과 같습니다:

사람에게는 문제가 없습니다. 페이지가 거의 즉시 완성된 것처럼 보이기 때문입니다.

하지만 검색 엔진 크롤러에게 이것은 재앙입니다. 크롤러가 가장 먼저 받는 것은 빈 껍데기뿐입니다.

구글은 2단계 인덱싱 프로세스를 사용합니다.

첫 번째 단계에서는 원본 HTML을 크롤링합니다. CSR을 사용하면 크롤러는 아무것도 볼 수 없습니다.
두 번째 단계에서는 JavaScript를 실행하기 위해 페이지를 대기열에 넣습니다. 하지만 이 단계는 보장되지 않습니다. 신규 사이트의 경우, 구글이 이 단계를 우선적으로 처리하지 않을 수도 있습니다.

당신의 따끈따끈한 새 웹사이트는 대기열에 머물게 됩니다. 구글은 빈 페이지를 보고 그냥 지나쳐 버립니다.

현재 이런 일이 일어나고 있는지 확인하는 방법은 다음과 같습니다:

Google Search Console을 사용하세요. URL 검사 도구에 URL을 붙여넣고 '실제 URL 테스트'를 클릭합니다. 테스트된 페이지를 보고 HTML 탭을 확인하세요. 만약 텍스트가 거기에 없다면, 구글은 이를 볼 수 없는 것입니다.
사이트 검색을 활용하세요. 구글에 site:yourdomain.com을 입력해 보세요. 아무것도 나오지 않는다면 인덱싱 문제입니다.
브라우저에서 JavaScript를 비활성화하세요. 페이지를 새로고침합니다. 만약 페이지가 빈 화면으로 나온다면, 검색 엔진이 콘텐츠를 찾는 데 어려움을 겪을 것입니다.

해결책은 React를 피하는 것이 아닙니다. 렌더링이 일어나는 위치를 바꾸는 것입니다.

콘텐츠가 첫 번째 HTML 응답에 포함되어야 합니다. 세 가지 주요 옵션이 있습니다:

서버 사이드 렌더링 (Server-Side Rendering, SSR): 서버가 모든 요청에 대해 페이지를 구축합니다. Next.js 또는 Remix를 사용하세요.
정적 사이트 생성 (Static Site Generation, SSG): 웹사이트가 미리 모든 페이지를 일반 HTML로 빌드합니다. Astro를 사용하세요.
프리렌더링 (Prerendering): 페이지의 정적 HTML 스냅샷을 생성합니다.

AI로 사이트를 만들었다면, AI를 사용해 수정할 수도 있습니다. 도구에게 앱을 서버 사이드 렌더링 방식으로 전환하여 콘텐츠가 초기 HTML에 포함되도록 요청하세요.

브라우저에서 잘 작동하는 웹사이트가 구글에서 잘 작동하는 웹사이트와 같은 것은 아닙니다. 아름다운 디자인이 빈 껍데기를 숨기게 두지 마세요.