안녕하세요! 사랑받는 IT 프로덕트의 첫 스텝, 똑똑한개발자입니다 :)

저희 똑똑한개발자 사이트가 약 3년 만에 리뉴얼을 앞두고 있습니다. 이번 리뉴얼 작업은 디자이너분께서 바이브코딩을 활용해 랜딩페이지를 직접 구축해 주셨는데, 디자인 퀄리티는 정말 기대 이상이었습니다. 그런데 중간 점검을 해보니, 겉으로는 완성된 것처럼 보여도, 테크니컬 SEO 관점에서 빠져 있는 세팅들이 몇가지 있었는데요! 

그래서 오늘은 저희가 점검 과정에서 발견한 이슈와, 바이브코딩 환경에서 테크니컬 SEO를 잡는 방법을 총정리 해드리겠습니다.

바이브코딩 랜딩페이지의 데이터베이스 연동 점검

바이브코딩으로 만든 사이트의 소스를 열어봤을 때, 로그인 기능은 구현돼 있었습니다. 다만 실제 데이터베이스가 연결된 건 아니었고, 아이디와 비밀번호가 환경 변수 파일에 하드코딩돼 있었습니다. 관리자 화면에는 포트폴리오, 인사이트, FAQ 메뉴가 보이는데, 이 데이터를 저장하거나 불러오는 API 경로가 로그인/로그아웃 말고는 하나도 없었습니다.

클라우드 DB가 랜딩페이지 SEO에 필요한 이유

데이터베이스가 프로젝트 코드 내부에 있으면, 운영 서버와 로컬 환경의 데이터가 각각 따로 움직입니다. 운영에서 포트폴리오 3개를 추가해 놓은 상태에서, 개발 환경 코드를 수정해 재배포하면 운영 DB가 덮어씌워집니다. 재배포하면 추가했던 콘텐츠가 전부 사라지는 겁니다.

Supabase 같은 클라우드 DB 서비스를 쓰면, 어디서 작업하든 동일한 데이터를 가져올 수 있습니다. 그리고 이 DB가 연결돼야 콘텐츠 추가 시 사이트맵이 자동 갱신되고, 새로 만든 페이지가 구글 색인에 잡히기 시작합니다.

랜딩페이지 SEO 타이틀과 메타태그 설정법

배포된 사이트를 SEO 분석 도구로 돌려봤을 때, 메타데이터 자체는 정상이었습니다. 문제는 타이틀이 영문으로 돼 있었다는 점입니다. 타이틀이 영어로 되어 있는 경우, 한국 사용자가 "똑똑한개발자"를 검색했을 때 제대로 검색 결과에 노출되지 않습니다.

타이틀 작업의 시작점은 "고객이 어떤 단어로 검색하는가"입니다. 브랜드명일 수도 있고, "앱 개발 업체"나 "AI 전문 개발사" 같은 일반 키워드일 수도 있습니다.

구글 키워드 플래너로 검색량을 확인한 뒤, 핵심 키워드는 타이틀에 넣고 보조 키워드는 디스크립션에 분산 배치하는 게 좋습니다. 타이틀이 너무 길면 검색 결과에서 뒷부분이 잘릴 수 있으므로, 글자 수 제한도 같이 신경 써야 합니다.

SEO를 위한 URL 설계와 검색 키워드 반영

상세 페이지 URL도 SEO에 영향을 줍니다. "/portfolio/123" 같은 숫자 기반 주소보다 "/portfolio/hyundai-ai-control-tower"처럼 내용이 담긴 구조가 검색 엔진이 페이지의 내용을 읽기 쉽습니다. 바이브코딩으로 페이지를 생성할 때 URL 슬러그까지 같이 지정해 달라고 프롬프트에 넣으면 됩니다.

robots.txt와 sitemap.xml 세팅 방법

1. robots.txt와 sitemap.xml의 역할

도메인 연결 후에는 구글 서치 콘솔과 네이버 서치 어드바이저에 사이트를 등록해야 합니다. 등록 전에 두 파일을 준비해야 하는데, robots.txt는 검색 봇의 페이지별 접근 권한을 알려주는 파일이고, sitemap.xml은 사이트의 전체 페이지 구조를 정리한 파일입니다. ChatGPT나 클로드 같은 AI 서비스도 자체 크롤러를 운영하고 있어서, AI 봇 접근 권한도 robots.txt에서 설정 가능합니다.

2. 동적 사이트맵 생성과 서치 콘솔 등록

도메인이 기존과 동일하더라도 코드가 바뀌었으면 이 파일들을 새로 생성해야 합니다. 저희는 타입스크립트로 동적 사이트맵을 구현했습니다. 콘텐츠가 추가될 때마다 sitemap이 자동 갱신되는 구조인데, 앞서 다룬 클라우드 DB 연동이 선행돼야 가능합니다.

콘텐츠 품질과 내부 링크 SEO 전략

테크니컬 세팅만으로 상위 노출이 되지는 않습니다. 콘텐츠의 퀄리티가 핵심입니다. 구글은 사용자가 페이지에 얼마나 머물렀는지, 어느 지점에서 이탈했는지까지 수집하고, 이 데이터를 순위에 반영합니다.

체류 시간을 높이는 내부 콘텐츠 배치

저희 사이트 인사이트 페이지가 클릭하면 외부 블로그로 바로 넘어가는 구조였는데, 이러면 자사 사이트의 체류 시간이 쌓이지 않습니다. 콘텐츠를 내부에 직접 배치해서, 방문자가 사이트 안에서 계속 탐색하도록 만드는 편이 훨씬 유리합니다.

전환율 트래킹을 위한 쿼리 파라미터 설계

문의하기 폼도 마찬가지입니다. 버튼을 눌러도 URL이 바뀌지 않으면 클릭 데이터를 추적할 방법이 없습니다. URL 뒤에 "?contact=true" 같은 쿼리 파라미터를 붙이면 문의 버튼 클릭 횟수가 잡히고, 제출 완료 후 "/submit" 페이지로 이동시키면 실제 전환 건수까지 확인됩니다. 유입 100명 중 폼 오픈 10명, 제출 1명이면 전환율 1%처럼 구체적인 수치가 있어야 추후 페이지의 개선 방향을 잡을 수 있습니다.

바이브코딩으로 완성도 있는 랜딩페이지 만들기

저희 디자이너분은 피그마 없이 스토리보드만 잡고 바이브코딩을 시작했는데, 전체 디자인 완성까지 약 일주일 걸렸다고 합니다. 하루 30분에서 2시간 정도 작업한 수준이니, 디자인 퀄리티 대비 시간 투입은 상당히 효율적이었죠.

다만 DB 연동이나 테크니컬 SEO 영역은 아직 개발자의 도움이 필요한데요! 저희도 기본 메타태그 세팅은 마쳤고, DB 연동 후에 검색 환경 세팅을 본격 진행할 예정입니다. 바이브코딩으로 사이트를 만들고 계신 분이라면, 디자인 완성도와 함께 이 글에서 다룬 기술 세팅도 같이 점검해 보시는 걸 권합니다.

똑똑한개발자에서는 AI를 활용한 사이트 구축부터 SEO 환경 세팅까지 함께 고민하고 있습니다. 바이브코딩 프로젝트의 기술 컨설팅이나 AX 컨설팅이 필요하시다면, 편하게 연락주세요.

👉 똑똑한개발자 바로가기