사랑스러운 사이트가 완성된 것 같았지만, Google은 네 가지 언어 중 하나만 읽을 수 있었다
요약
웹사이트 빌더(Lovable)로 빠르게 첫 버전을 만들 수 있지만, 검색 엔진 최적화(SEO)를 위해서는 근본적인 수정이 필요합니다. 특히 다국어 사이트의 경우 언어별 URL 구조와 사이트맵, 구조화된 데이터 마크업을 반드시 갖춰야 합니다.
핵심 포인트
- 다국어 콘텐츠는 언어 전환기만으로는 부족하며, 각 언어별 고유 URL(hreflang)이 필수입니다.
- 검색 엔진 노출을 위해 사이트맵과 제품/가격 정보를 담은 구조화된 데이터가 반드시 필요합니다.
- AI 코딩 도구(Claude Code)를 활용하여 SEO 요소를 체계적으로 추가하고, 안전한 배포 과정을 거치는 것이 중요합니다.
저는 웹사이트의 첫 버전에 Lovable이 훌륭하다고 자주 말합니다(Lovable is great for the first version of a website). 지난주에 만든 로봇 비교 카탈로그인 RoboHub에서, 저는 그 '첫 버전'이 정확히 어디서 끝나는지 확인했습니다. 그래서 여기 분석 내용을 공유합니다: Lovable이 잘한 점, 제가 다시 해야 했던 부분, 그리고 얼마나 걸렸는지입니다.
첫 번째 버전에 있던 것들
Lovable은 몇 시간 만에 카탈로그를 구축했습니다. 카테고리, 페이로드 및 런타임별 필터, 로봇별 페이지, 최고의 가치를 강조하는 비교표, 견적 요청 양식, 네 가지 언어까지 갖추었습니다. 고객에게 보여주기에는 충분히 좋았습니다.
하지만 검색 엔진이 무엇을 볼지 물었을 때 문제가 드러났습니다. 이 사이트의 핵심 목적은 검색입니다. 누군가 구매할 로봇을 입력하고 비교 페이지에 도달하는 것이죠. 몇 가지 문제가 있었습니다.
언어가 주소(URL)가 아닌 페이지 안에 존재했다. 언어 전환기(switcher)는 텍스트를 변경했지만 URL은 그대로였습니다. Google에게는 이것이 하나의 페이지, 하나의 언어로 인식됩니다. 사용자들은 러시아어, 독일어, 중국어 버전을 볼 수 있었지만, 검색을 위한 버전으로는 존재하지 않았습니다.
사이트맵도 없고 구조화된 데이터(structured data)도 없었다. 사이트맵은 검색 엔진에게 어떤 페이지가 존재하는지 알려줍니다. 구조화된 데이터는 해당 페이지가 가격과 제조사를 가진 제품이라는 것을 알려줍니다. 이것들이 없으면 리치 결과(rich results)나 AI 검색 답변을 얻기가 더 어려워집니다.
데이터는 올바르게 보였지만, 곳곳에서 틀렸다. 런던의 한 스타트업이 러시아인으로 기재되었습니다. 판매되지 않는 두 로봇에 가격이 붙어 있었습니다. 루블로 된 가격에는 출처가 없었습니다. 이 모든 것이 사이트를 망가뜨리지는 않지만, 신뢰성을 원하는 카탈로그에게는 어떤 버그보다도 심각합니다.
제가 수정한 것들
데이터부터 시작했습니다. 저는 오픈 소스에서 106개 모델의 데이터셋을 구축하고 모든 가격에 링크와 날짜를 추가했습니다. 숫자가 없으면 사이트가 그렇게 표시합니다. 공개된 가격이 있는 모델은 단 51개였고, 이것 자체가 콘텐츠가 되었습니다: 구매자는 창고 로봇을 한 번의 클릭으로 살 수 없고, 견적 요청만 가능하다는 것을 알아야 합니다.
저는 Claude Code를 위해 단계별 기획(staged brief)을 작성하고 저장소(repository)를 제공했습니다. Lovable과 GitHub는 동기화되어 있어, Claude Code의 변경 사항이 즉시 Lovable 프로젝트에 나타났고, 제가 '게시(Publish)' 버튼을 누를 때만 라이브 사이트에 반영되었습니다. 이는 일종의 안전장치 역할을 합니다. 단계별로 확인하기 전까지는 라이브 사이트가 변경되지 않습니다.
Claude Code가 수행한 작업:
- hreflang 태그를 사용한 각 언어별 별도 주소(/ru, /de, /zh)
- 912개의 주소를 포함하는 사이트맵(sitemap), 제품 및 브레드크럼 마크업(breadcrumb markup)
- 카테고리 페이지와 비교 분석 페이지
- 5가지 질문의 로봇 찾기 도구(robot finder)
- 저작자 페이지가 있는 Wikimedia Commons의 무료 라이선스 사진들
소요 시간
아이디어 구상부터 게시된 버전까지 일주일이 걸렸습니다. 첫 번째 Lovable 버전을 만드는 데는 그중 몇 시간이 소요되었습니다. 대부분의 시간은 시장 조사, 데이터셋 구축, 그리고 각 단계를 확인하는 데 사용되었습니다.
여기서 얻을 점
검색 엔진으로부터 트래픽을 유입시켜야 하는 Lovable 사이트를 구축한다면, 출시 전에 세 가지를 확인하세요. 모든 언어에 자체 주소가 있는지 여부입니다. 사이트맵과 구조화된 데이터(structured data)가 있는지 여부입니다. 페이지의 숫자는 어디에서 오는 것인지입니다. 앞의 두 가지는 하루 만에 수정할 수 있습니다. 마지막 세 번째는 가장 오래 걸리며, 아무도 대신 해주지 않을 것입니다.
카탈로그 자체는 아직 미완성입니다. 인용 양식(quote forms)은 아직 어딘가로 전송되지 않으며, 106개 모델 중 88개 모델에는 사진이 없습니다. 프로젝트의 전체 이야기는 제 작업 섹션의 RoboHub 사례에 있습니다.
원문 게시일: ilinmaks.com
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기