[Google Search Console 오류 조치] 바이브코딩의 한계라고 볼 수 있나

구글에서 회사 홈페이지를 검색하면 제대로 정보가 표기되지 않았음.

그래서 구글 서치 콘솔(Google Search Console)에 들어가보면 색인은 성공했다는 메시지는 떴음. 아무래도 이상해서 하나하나 클릭하다보니 크롤링된 페이지>추가정보>페이지리소스를 확인하니 이런 메시지가 작게 써있었다.

총 23개 중 18개 리소스를 로드하지 못함

아니, 이런 정도면 메인페이지에서 에러를 알려줘야지 어렵게 숨겨놓은 것! 부랴부랴 에러의 원인을 찾아봤는데 치명적이진 않으나 '사용자 경험(LCP 등)'과 '렌더링 완성도'를 위해 수정이 불가피 했습니다.                                     

  1. 주요 오류 원인 분석                                                 

jsDelivr(Pretendard 글꼴) 및 Google Fonts 오류                                          

•   cdn.jsdelivr.net이나 fonts.gstatic.com에서 발생하는 '기타 오류'는 크롤러(Googlebot)가 해당 파일을 가져오지 못했다는 뜻입니다.
•   크롤러의 타임아웃: 구글봇은 페이지를 렌더링할 때 무한정 기다려주지 않습니다. 외부 CDN 서버의 응답이 아주 미세하게 늦으면 그냥 '무시'하고 다음 단계로 넘어갑니다.                                                                  
•   크롤링 예산(Crawl Budget): 구글봇이 한 사이트에서 한꺼번에 요청할 수 있는 리소스 양을 초과했을 때 발생합니다.            

 Tailwind CSS 리디렉션/기타 오류                                                  

•   cdn.tailwindcss.com을 직접 호출하는 방식은 개발용(Play CDN)입니다.                          
•   리디렉션 오류: 특정 버전으로 리디렉션되는 과정에서 봇이 추적을 포기했을 수 있습니다.
•   실제 문제: 구글봇이 CSS를 제대로 로드하지 못하면 사이트의 레이아웃이 깨진 상태로 렌더링됩니다. 이는 '모바일 사용 편의성' 평가에 악영향을 줄 수 있습니다. 

Unsplash 이미지 오류                                                       

•   이미지 파일이 너무 크거나(w=2000 등), 고화질(q=80)인 경우 봇이 로드를 포기합니다. 봇 입장에서는 텍스트 정보가 중요한데, 무거운 이미지를 기다릴 이유가 없기 때문입니다.

 🚨 프로젝트 진단 및 대응

 1. Tailwind CSS 렌더링 지연 (가장 치명적)

•  현재 상태를 보면 Tailwind CSS가 정식으로 설치되어 있지 않습니다. 대신 index.html에서 <script src="https://cdn.tailwindcss.com"></script> (Play CDN)를 불러와 브라우저가 접속할 때마다 실시간으로 CSS를 연산하여 그리고 있다.
•  문제점: 구글 봇은 자바스크립트를 오래 실행해주지 않아 봇이 보기에 사이트는 디자인이 싹 다 깨진 하얀 바탕의 글씨만 있는 페이지로 인식될 확률이 높다.
•  대응 방안: Node.js 환경(npm)에 tailwindcss, postcss, autoprefixer를 정식 설치하고 tailwind.config.js와 postcss.config.js를 세팅하여, 빌드(npm run build) 시 최적화된 하나의 .css 파일로 구워지도록 프로젝트 구조를 싹 바꾼다.

 2. 외부 폰트(Pretendard 등) 타임아웃

•  현재 상태: index.html에서 jsdelivr를 통해 Pretendard 폰트를 @import로 불러오고 있으며, 구글 폰트도 외부 CDN을 사용 중.
•  문제점: 외부 서버 응답이 0.1초만 늦어도 구글 봇은 폰트를 포기하고 에러를 뱉는다.
•  대응 방안: @import 방식은 렌더링 블로킹(로딩 지연)을 심하게 유발하므로, <link rel="preload"> 방식으로 변경하고 &display=swap 속성을 명시적으로 적용하여 폰트가 다운로드되기 전이라도 기본 텍스트가 먼저 구글 봇에게 노출되도록 최적화.

 3. Unsplash 고해상도 이미지 과부하

•  현재 상태: 파일에 정의된 이미지 주소를 보면 w=2000, w=1600 등 4K 모니터급 고해상도를 원본(JPEG) 형태로 불러오고 있음.
•  문제점: 이미지 한 장이 수 MB에 달해 로딩이 매우 느려지고, 구글 봇의 크롤링 예산(시간)을 갉아먹고 있음.
•  대응 방안: Unsplash URL 파라미터에 fm=webp를 추가하여 용량이 획기적으로 적은 WebP 포맷으로 변환해서 가져오게 하고 w=2000 같은 해상도를 w=1200 이하로 줄임. 마지막으로 화면 아래쪽에 있는 이미지 태그(<img>)들에는 loading="lazy" 속성을 달아주어, 사용자가 스크롤을 내릴 때만 로딩되도록 하여 첫 페이지 로딩 속도를 극대화합니다.

 결국 빠르게 진행하기 위해 구글 AI 스튜디오의 'build'를 통해 빠르게 홈페이지를 바이브코딩하고 여기에 게시판을 붙혀서 백엔드까지 구축했음. "시각적으로는 예쁘지만, 구글 봇이 읽기에는 너무 무겁고 불친절한 구조"로 되어 있었음. 이는 바이브코딩의 한계가 아닌 내 자신의 능력부족이 더 정확한 표현일듯 함.