바이브 코딩이 일상화되면서 웹빌더를 사용하지 않더라도, 코딩 지식 없는 비개발자가 AI로 홈페이지를 제작하는 사례들이 늘어나고 있습니다. 개인이라면 포트폴리오 사이트와 같은 개인 홈페이지를 구축하고, 기업은 비용 절감을 위해 기업 홈페이지를 AI 도구로 제작하고 있어요. 관련 도구도 다양합니다. 러버블(Lovable), 클로드 코드(Claude Code), 커서(Cursor), 구글 AI 스튜디오 등이 바이브 코딩 도구로 각광받는 중입니다.
하지만 개인 홈페이지라면 몰라도, 기업 홈페이지를 제작한다면 AI 홈페이지 제작과 발행이 끝이어서는 안됩니다. QA(Quality Assurance) 과정을 통해 웹사이트가 잘 작동되는지 확인해야 하는데요. 충분한 시간을 가지고 홈페이지를 손보지 않는다면 사이트를 방문한 고객에게 부정적인 경험을 주고, 구글과 AI 검색에 노출되지 않을 수 있습니다.
오늘은 엘리펀트컴퍼니에서 실제로 활용하고 있는, AI 홈페이지 제작 이후 SEO/GEO 최적화를 위해 셀프 진단할 수 있는 웹사이트 최적화 체크리스트를 정리해볼게요.
AI 홈페이지 제작, 어떤 단점이 있을 수 있나요?
개발 리소스가 부족하거나 외주 비용 부담 때문에 AI 홈페이지 제작을 고민하다 보면, 바이브 코딩으로 제작한 기업 웹사이트가 실제 비즈니스에 활용 가능한지 의구심이 들죠. 실제 AI 도구로 기업 홈페이지를 제작했을 때 단점은 크게 2가지로 정리해 볼 수 있어요.
첫 번째, 디자인 차별화가 어려워 브랜드 정체성을 살릴 수 없어요
먼저, AI 도구로 단기간에 제작한 웹사이트는 디자인 차별화가 어려워요. ChatGPT로 작성한 글이 특유의 문체 탓에 ‘AI가 작성한 글’로 읽히듯이, 바이브 코딩으로 만든 기업 웹사이트 또한 ‘AI로 만든 홈페이지’라는 인식을 피하기 어렵습니다. 홈페이지가 우리 조직의 브랜드 정체성을 보여주는 얼굴이라는 점을 고려한다면, 바이브 코딩만으로 제작한 기업 홈페이지는 신뢰도를 낮출 수 있어요.
러버블로 2분 만에 만든 엘리펀트컴퍼니 웹사이트. 그럴듯하긴 한데, AI 특유의 느낌이 있죠.
두 번째, SEO 설정이 어려워 고객이 자연 유입되기 어려워요
AI로 제작한 홈페이지는 검색엔진 최적화(SEO, Search Engine Optimization)가 까다롭습니다. 바이브 코딩 플랫폼에서 SEO 관련 설정을 지원하지 않거나, QA 과정을 거쳐 홈페이지 최적화를 일일이 진행해야 해요.
실제로 엘리펀트컴퍼니와 함께 홈페이지 최적화를 진행했던 고객사 중에서도 AI 도구로 기업 홈페이지를 제작하면서 SEO 성과가 감소한 사례가 있었습니다. 예를 들어 이런 문제들을 겪었어요.
😢 AI 홈페이지 제작 이후에 겪은 SEO 문제들
- 메타 태그가 모든 페이지에 동일하게 적용됨
- URL 구조에서 중첩경로를 지원하지 않아 slug를 파라미터 형태로 삽입함
- 이미지 alt 태그, heading 구조 최적화 안 됨
- AI가 생성한 고해상도 이미지를 그대로 사용하면서 성능 및 속도 최적화가 어려움
SEO 최적화 관점에서 기업 홈페이지를 관리하지 않는다면 구글과 AI 검색에 웹사이트가 노출되지 않고, 고객이 자연 유입되지 않습니다. 하지만 SEO 비전문가 입장에서는 ‘그럼 뭘 고쳐야 하는 거지?’ 판단하기가 쉽지 않죠. SEO 비전문가도 기업 홈페이지를 고객의 유입과 전환을 일으키는 비즈니스 허브로 만들 수 있도록, 홈페이지 최적화 필수 체크리스트를 정리해 봤어요.
홈페이지 최적화를 위한 필수 체크리스트 17가지
크롤링과 색인
첫 번째 단계는 바로 크롤링과 색인 단계입니다. 크롤링(Crawling)이란, 검색엔진 봇이 웹사이트를 방문해서 페이지를 읽고 정보를 수집하는 과정입니다. 크롤링에 성공하면 페이지 정보가 검색엔진 데이터베이스에 저장되고 분류되는데요. 이 과정이 바로 색인(Indexing)입니다.
색인까지 완료되어야 사용자가 관련 키워드를 검색할 때 우리 기업 홈페이지가 발견될 수 있어요. 크롤링과 색인을 완수하려면 어떤 과정이 필요할까요?
1. Sitemap이 생성되고 제출되었나요?
Sitemap이란 홈페이지의 모든 핵심 페이지를 XML 형식으로 정리한 파일을 말해요. 쉽게 말하면, 검색엔진이 웹사이트 페이지를 효율적으로 찾을 수 있도록 돕는 지도라고 할 수 있어요. 다양한 도구(XML sitemaps 등)를 활용해 사이트맵을 생성하고 구글 서치 엔진(Google Search Console)에 제출해 주세요.
구글 서치 콘솔의 [Sitemaps] 페이지에 들어가면 새 사이트맵을 제출할 수 있어요.
2. robots.txt가 제대로 설정되어 있나요?
robots.txt란 웹사이트 최상위에 두는 텍스트 파일을 말해요. 크롤러(검색엔진 봇)가 어떤 URL을 크롤링해도 되는지, 안 되는지를 알려주는 역할을 합니다. 크롤링 허용과 차단 범위를 정하면서 사이트맵의 위치를 안내하기도 하고, 크롤러가 쓸데없는 페이지를 많이 긁지 않도록 서버 과부하를 방지해줘요.
robots.txt라는 이름으로 파일을 만들어서, FileZilla 같은 FTP 프로그램에 접속해 웹사이트 최상위 디렉토리에 업로드해 주세요.
3. llm.txt가 제대로 설정되어 있나요?
robots.txt가 검색엔진 크롤러를 대상으로 한다면, llm.txt는 AI 모델과 에이전트가 사이트를 빠르게 이해할 수 있도록 요약된 안내서를 제공하는 걸 말해요. 일반적으로 사이트와 브랜드 소개, 핵심 카테고리 구조, 대표 URL, 콘텐츠 정책 등의 내용을 담습니다.
llm.txt는 최근에 등장한 흐름입니다. 모든 AI가 llm.txt를 읽는다는 보장은 없기 때문에 아직은 공식 표준이라기보다는 업계 관행이나 실험에 가까워요.
4. noindex 태그가 잘못 설정된 페이지는 없나요?
noindex 태그는 홈페이지 HTML 페이지의 head 섹션에 추가하는 메타 태그인데요. 검색엔진에게 ‘이 페이지는 검색 결과에 표시하지 말라’라고 지시하는 태그를 말합니다.
어드민 페이지나 로그인 후 노출되는 페이지와 같이 검색엔진에 표시하고 싶지 않은 페이지가 있다면 noindex 태그를 추가하고, 사이트맵에서 제외해야 해요. 만약 noindex 페이지가 사이트맵에 있다면 구글 서치 콘솔에서 오류 또는 경고가 표시될 수 있습니다.
noindex 태그는 아래와 같은 형식으로 HTML head 세션에 추가할 수 있어요.
| <!– noindex 태그 예시 –> <head> <meta name=”robots” content=”noindex”> <title>검색엔진에 표시되면 안 되는 페이지</title> </head> |
5. canonical 태그가 올바르게 설정되었나요?
canonical 태그란 비슷하거나 중복된 콘텐츠가 여러 URL에 있을 때, 검색엔진에게 원본 페이지를 알려주는 HTML 태그를 말해요. 같은 페이지로 이동하는 여러 URL이 있다면, 검색엔진이 어떤 URL을 검색 결과에 표시해야 할지 혼란스러워하면서 검색 순위가 낮아질 수 있기 때문에 canonical 태그 설정이 필요해요.
canonical 태그는 아래와 같은 형식으로 HTML head 세션에 추가할 수 있습니다.
| <!– canonical 태그 예시 –> <head> <link rel=”canonical” href=”<https://yourwebsite.com/원하는-url>”> <title>원본 페이지 제목</title> </head> |
6. 페이지가 색인되었나요?
구글 서치 콘솔에서 실제로 페이지가 색인되어 검색엔진이 페이지를 잘 읽고 있는지 확인할 수 있습니다. 색인되지 않았다면 그 이유를 파악하고, 필요한 경우에는 수동 색인을 요청해 주세요.
좌측 메뉴 [색인생성] – [페이지]에서 색인이 되지 않은 페이지를 확인할 수 있어요. 필요한 경우에는 [색인 생성 요청] 버튼으로 수동 색인을 요청할 수 있습니다.
페이지 속도와 성능 높이기
7. 코어 웹 바이탈(Core Web Vitals) 지표를 충족하나요?
Core Web Vital(CWV)은 구글이 페이지 품질을 평가할 때 보는 대표적인 UX 성능 지표예요. 검색 순위에 영향을 주는 신호 중 하나입니다. 구글 서치 콘솔에서 [실험] – [코어 웹 바이탈]을 통해 확인할 수 있어요.
코어 웹 바이탈 지표를 충족하면서 페이지 속도를 높이는 방법으로는 이미지 최적화, 브라우저 캐싱, CSS/JS 압축 및 미니파이, CDN 사용, 불필요한 리다이렉트 제거 등이 있습니다.
모바일과 브라우저 최적화하기
2024년 이후로 구글은 모바일 버전을 기준으로 검색 순위를 매기고 있어요. 검색 엔진 스파이더가 회사의 모바일 콘텐츠를 먼저 크롤링해 웹페이지의 관련성을 판단하고, 그다음에 데스크톱 버전을 분석합니다.
따라서 홈페이지 최적화를 위해서는 모바일 관점에서도 사용자에게 최상의 환경을 제공하고 있는지 확인이 필요합니다. 자세한 방법은 구글에서 안내하고 있는 모바일 친화적인 사이트 만들기 페이지를 참고해 보세요.
구조화된 데이터와 스키마 구현하기
8. 스키마 마크업(Schema Markup)이 구현되었나요?
스키마 마크업이란 홈페이지의 HTML에 추가해 검색엔진이 페이지 내용을 더 잘 이해할 수 있도록 돕는 구조화된 데이터입니다.
예를 들어 엘리펀트컴퍼니라는 회사의 홈페이지가 있다면, 구조화된 데이터를 사용해 업종, 서비스, FAQ 등의 정보를 검색엔진에게 명확하게 알려줄 수 있어요. 더 자세한 내용은 “스키마 마크업” 콘텐츠에서 쉽게 정리해두었어요.
9. 브레드크럼 마크업(Breadcrumb Markup)을 구현했나요?
브레드크럼 마크업이란 웹사이트 내에서 사용자의 현재 위치를 시각적으로 보여주고, 탐색을 돕는 내비게이션 요소예요. 검색 결과에도 표시되기 때문에 SEO 측면에서 유리할 수 있습니다.
URL 구조 & 리다이렉트
10. 웹사이트의 URL 구조가 SEO 친화적인가요?
웹사이트 URL 구조를 논리적이고 체계적으로 만들면 검색엔진 크롤러가 읽기 수월해져요. 예를 들어 아래와 같은 구조가 SEO 친화적인 URL이라고 볼 수 있어요.
- <https://elifunt.kr/service/geo-consulting/>
예시로 든 URL은 메인(elifunt.kr) → 카테고리(/service) → 상세페이지(/geo-consulting)와 같은 계층 구조를 유지하고 있어요. 하이픈(-)을 사용하고 언더스코어(_)는 쓰지 않았고요. 불필요한 파라미터 값(ex. elifunt.kr/service/?category=geo-consulting)은 제거하고 소문자를 사용하며, URL 맨 끝에 붙는 슬래시(/)가 일관성 있게 붙는 것도 중요합니다.
11. 301 리다이렉트 맵핑 작업을 완료했나요?
웹에서 301이란 ‘페이지가 영구적으로 주소가 바뀌었다’는 의미입니다. 리다이렉트란 한 URL에서 다른 URL로 자동으로 이동시키는 걸 말하고요. 즉, 바뀐 주소를 클릭했을 때 브라우저와 검색엔진이 자동으로 새로운 주소를 찾아갈 수 있도록 연결시키는 걸 301 리다이렉트 맵핑 작업이라고 해요.
리다이렉트는 한두 개면 단순하지만, 사이트 개편이나 URL 구조 변경처럼 수십에서 수백 개가 바뀌면 일반적으로 엑셀 또는 시트 형태로 ‘맵핑’합니다. 301 맵핑이 없으면 URL이 바뀐 순간 검색 결과를 클릭했을 때 404 에러가 뜨면서 SEO 성과가 떨어지고, 페이지가 삭제된 것으로 인식돼 순위가 하락할 수 있어요.
12. 깨진 링크(404 에러)가 있나요?
404 에러란 웹 브라우저가 요청한 페이지를 서버에서 찾을 수 없을 때 나타나는 오류 메시지입니다. 페이지를 삭제했거나, 리다이렉트 없이 URL을 변경하는 등의 상황에서 발생할 수 있어요.
이런 깨진 링크가 있다면 검색엔진 크롤러가 잘 관리되지 않는 사이트라고 보고 SEO 순위를 낮출 수 있어요. 구글 서치 콘솔에서 [페이지] 메뉴를 통해 404 에러가 발생한 URL를 확인하고 조치해야 합니다.
13. 고립 페이지(Orphan page)는 없나요?
고립 페이지란 말 그대로 내부 링크가 없어 고립된 페이지를 말합니다. 사이트맵에는 있지만 해당 페이지로 이동하는 링크가 없어서 혼자 동떨어져 있는 페이지인 것이죠. 검색결과에 노출시키고 싶은 페이지라면 다른 중요 페이지에 해당 페이지의 내부 링크를 추가해야 합니다.
콘텐츠 & 메타 데이터
앞선 체크리스트를 통해 홈페이지 전체에서 검색엔진 최적화를 위한 설정을 완료했다면, 이제는 각 페이지에서 콘텐츠를 최적화할 단계입니다. SEO와 GEO의 기초 체력을 키우기 위해 다음 항목들은 꼭 챙겨주세요.
14. 모든 페이지에 고유한 제목 태그(Title tag)가 있나요?
제목 태그란 웹사이트 제목을 정의하는 HTML 태그로, 검색 결과와 브라우저 탭에 표시됩니다. 타이틀에 검색 키워드가 있다면 해당 키워드를 검색했을 때 상단에 노출될 가능성이 높아집니다. 더불어 사용자가 가장 먼저 보는 것이 바로 제목인 만큼, 제목이 매력적이어야 클릭이 발생할 수 있겠죠.
15. 메타 설명(meta description)이 최적화되었나요?
메타 설명이란 페이지 내용을 요약한 짧은 설명문입니다. 검색 결과에서 타이틀 아래 표시돼요. 사용자에게 페이지 내용을 미리 알리는 역할을 하기 때문에, 클릭률에 직접적인 영향을 미칩니다.
16. 제목 태그(Title tag, h tag)가 올바르게 구조화되었나요?
엘리펀트컴퍼니의 블로그 콘텐츠로 보는 제목 태그 구조화 예시입니다. 이처럼, 기업 웹사이트의 각 페이지는 제목 태그만 봐도 구성을 이해할 수 있게 작성되어야 합니다.
제목 태그는 H1부터 H6까지 6단계가 있어요. 제목 태그는 마치 책의 목차처럼 콘텐츠를 구조화하는데요. 제목 태그만 봐도 콘텐츠가 어떻게 구성되어 있는지 알 수 있도록 잘 작성한다면, 검색엔진이 페이지 구조를 이해하고 관련 검색에서 상위 노출시킬 가능성이 높아집니다.
17. 이미지에 alt 텍스트가 있나요?
alt 텍스트란 이미지를 설명하는 대체 텍스트를 말해요. 구글은 이미지를 정확하게 파악할 수 없기 때문에, alt 텍스트로 이미지 내용을 파악하는데요. 때문에 이미지에 alt 텍스트를 추가해야 이미지 검색 결과 노출에 유리합니다. alt 텍스트 속성은 모든 이미지에 삽입되는 게 좋고, 125자 이내로 검색 키워드를 자연스럽게 포함해야 합니다.
💡이 모든 내용을 한눈에 볼 수 있도록 홈페이지 SEO 체크리스트 시트를 구성했어요. 아래 링크에서 확인해 보세요.
해당 글은 엘리펀트컴퍼니와 모비인사이드의 파트너십으로 제공되는 기사입니다.
