바이브코딩으로 홈페이지 만들기 - 코딩 없이 클로드코드로 검색되는 수익형 사이트 5단계

저는 한동안 제 홈페이지를 노션으로 만들어 쓰고 있었는데요. 노션으로 연동해 만든 거라 관리가 편리하고, 보기엔 깔끔했지만 한 가지 아쉬운 게 있었어요. 검색 유입이 거의 0이라는 점이었어요. 글을 올려도 구글이나 네이버에서 제 사이트를 찾아 들어오는 사람이 없었습니다.

그래서 사이트를 개편해봐야겠다 싶은 차에 바이브코딩으로 다시 만들어봤습니다. AI로 사이트를 만들면서도 한 가지 걱정은 과연 이렇게 만든 게 검색 노출이 잘될까? 하는 거였어요. 그런데 검색 최적화 구조를 잘 짜고 하니, 생각했던 것보다 훨씬 노출이 잘되더라고요. 한 달 만에 구글 노출이 1.4만 회까지 나왔는데요.

코딩 없이 바이브코딩으로 만든 홈페이지가 방문자 0명에서 한 달 만에 구글 노출 1.4만 회를 기록한 결과

검색 유입이 거의 없던 사이트를, 검색에 잘 잡히는 구조로 다시 만들었더니 한 달 만에 구글 노출이 1.4만 회까지 늘었습니다.

이걸 어떻게 만들었는지 물어보시는 분이 많아서, 코딩 없이 AI(클로드 코드)에게 말로 시켜서 검색 잘되고 광고(애드센스)까지 붙일 수 있는 수익형 홈페이지를 만드는 과정을 5단계로 정리했습니다. 차근차근 따라오시면 누구나 만들 수 있어요.

코딩 없이 홈페이지 만드는 법, 영상으로 보기

글로 읽기 전에 전체 흐름을 영상으로 먼저 보고 싶으시면 아래에서 확인하세요. 관심 있는 단계부터 골라 보셔도 좋아요.

[영상 순서]

(00:00~) 인트로 - 구글 노출 0에서 1.4만 회까지
(01:02~) 준비 - 클로드 코드 설치 (VS Code)
(01:33~) 1단계 사이트 기획
(03:53~) 2단계 디자인 시안 만들기
(05:09~) 3단계 사이트 구축 + 검색·모바일 최적화 체크
(07:30~) 4단계 배포 (깃허브 + 클라우드플레어)
(09:44~) 도메인 구입·연결
(11:04~) 5단계 검색 엔진 등록
(11:32~) 마무리

아래 내용은 위 영상의 핵심을 글로 정리한 것입니다. 영상에서 실제로 사용한 프롬프트도 단계별로 그대로 넣어뒀으니, 복사해서 나의 상황에 맞게 바꿔 써보셔요. 이미지는 영상에서 캡처를 받았습니다.

시작 전 알아두면 좋은 5가지

본격적으로 만들기 전에, 미리 알아두면 헤메지 않은 것들부터 짚을게요.

클로드 코드는 Claude Pro(월 $20) 이상 구독이 필요해요. 무료로는 쓰기 어렵습니다. 클로드 코드가 아니라 챗GPT, 제미나이를 구독하고 계신 분들은 그 모델을 사용해서 하는 것도 가능합니다. (코텍스, 안티그래비티 등을 이용해도 돼요)
AI한테 무작정 “알아서 만들어줘”는 금물이에요. → 개요 문서를 먼저 적어두고, AI가 나에게 질문하게 시키는 게 핵심입니다.
나중에 애드센스(광고)를 붙이는 목적의 사이트라면 내 도메인이 필요해요. 무료 주소로는 승인이 어렵습니다.

준비. 클로드 코드 설치하기

먼저 작업 환경을 준비합니다. 코드 편집기인 VS Code를 설치하고, 그 안에서 클로드 코드를 설치하면 됩니다. 설치 방법은 클로드 코드 공식 가이드에 안내돼 있어요.

VS Code 안에서 클로드 코드를 설치해 코딩 없이 홈페이지를 만들 준비를 하는 화면

코드 편집기 VS Code를 설치하고, 그 안에서 클로드 코드를 설치하면 작업 환경 준비가 끝납니다.

그다음, 사이트에 들어갈 자료를 정리할 폴더를 하나 만들어 둡니다. 이 폴더 안에 사이트에 넣을 자료(글, 이미지 등)와 개요 문서(.txt)를 넣은 뒤, 그 폴더를 VS Code로 열면 준비 끝이에요. 이제 이 폴더 안에서 클로드 코드와 함께 사이트를 만들어 갑니다.

1단계. 사이트 기획

가장 먼저 할 일은 ‘무작정 만들기’가 아니라 기획안부터 잡는 것입니다. AI한테 바로 “만들어줘”라고 하면 엉뚱한 방향으로 가기 쉬워요. 그래서 개요 문서를 먼저 읽히고, 기획안을 만들게 합니다.

개요 문서를 확인해서 사이트 기획안을 먼저 만들어줘.
만들기 전에 나한테 물어볼 게 있으면 질문해줘.

💡 개요 문서엔 ① 사이트 목적 ② 누구를 위한 사이트인지 ③ 디자인 느낌, 이 세 가지만 적어두면 충분해요. AI가 질문을 던지면 답하면서 방향을 맞춰가면 됩니다. 이 ‘대화로 다듬는 과정’이 바이브코딩의 핵심이에요.

사이트 개요를 적은 텍스트 문서를 클로드 코드에게 읽히고 기획안을 만들게 하는 화면

사이트 이름·운영자·목적·대상 독자를 간단히 적은 개요 문서를 먼저 읽히면, 이걸 바탕으로 기획안을 잡아줍니다.

2단계. 디자인 시안 만들기

기획이 잡혔으면 디자인을 정합니다. 잘 만든 사이트들을 참고해서 시안을 뽑게 하면 됩니다.

이 사이트 목적에 맞는 디자인 레퍼런스를 검색해서 5가지 이상 제안해줘.
디자인 잘 나온 사이트들 위주로.

제안받은 것 중에 마음에 드는 걸 고른 뒤, 그걸 참고해서 우리 사이트 시안을 만들게 합니다.

○○랑 ○○가 마음에 드는데, 우리 사이트 시안을 3가지로 만들어줘.
색감은 로고 색을 참고해줘.

💡 그대로 베끼는 게 아니라 좋은 점만 참고하는 거예요. 시안 3개를 만들어 비교해보고, 가장 마음에 드는 걸 고르면 됩니다.

3단계. 사이트 구축 + 검색·모바일 최적화 체크

이제 고른 시안대로 실제 사이트를 만듭니다. 준비해둔 자료를 어디에 넣을지도 함께 말해주면 돼요. 저는 제가 만든 두뇌 놀이터 게임을 사이트에 넣고 싶어, 게임도 사이트에서 실행할 수 있게 넣어달라고 했습니다.

제안한 시안대로 사이트를 만들어줘.
정보 글은 (블로그 폴더)의 글을 넣고, 내가 만든 게임은 사이트에서 바로 실행할 수 있게 넣어줘.

만들어지면 로컬에서 미리보기로 띄워서 직접 확인합니다.

완성된 사이트를 로컬에서 볼 수 있게 띄워줘.

💡 로컬 사이트는 아직 인터넷에 올리기 전, 내 컴퓨터에서만 보이는 미리보기예요. 화면을 보면서 마음에 안 드는 부분을 말로 고치면 됩니다.

클로드 코드로 만든 홈페이지 안에서 직접 실행되는 게임 화면

제가 만든 게임을 사이트 안에서 바로 실행되게 넣어달라고 했더니, 이렇게 페이지 안에서 게임이 돌아가게 만들어줬어요. 그런데 너무 게임이 작게 들어가서 뒤에서 수정을 했습니다.

AI로 만든 홈페이지의 글 목록 페이지 - 이미지 썸네일과 제목이 정돈된 콘텐츠 화면

블로그 폴더의 글들을 넣어달라고 하면, 이렇게 썸네일과 제목이 정돈된 콘텐츠 목록 페이지로 만들어줍니다.

글씨가 너무 작으니 더 크게 해줘.
이 페이지가 밋밋하니 더 페이지답게 디자인해줘.

마무리 전 꼭 체크 - 검색·모바일 최적화

처음 기획부터 검색 최적화를 고려해서 설계를 해달라고 했지만, 마지막에도 한번 점검을 해주면 좋습니다. 사이트를 인터넷에 올리기 전에, 검색 최적화와 모바일 화면을 꼭 점검하게 합니다.

검색 최적화(SEO)가 잘 됐는지, 모바일 최적화가 잘됐는지 검토해줘.

💡 여기에 더해, 요즘은 챗GPT·퍼플렉시티 같은 AI 답변에 내 사이트가 인용되게 하는 AEO(AI 엔진 최적화)도 함께 챙기면 더 좋아요. “AEO 관점에서도 잘 돼 있는지 봐줘”라고 한 번 더 시키면 됩니다.

4단계. 배포 (깃허브 + 클라우드플레어)

내 컴퓨터에서만 보이던 사이트를, 이제 누구나 접속할 수 있게 인터넷에 올릴 차례입니다. 준비물은 두 가지인데 둘 다 무료예요.

깃허브 가입(이메일) + Git 설치
클라우드플레어 가입

가입이 다 된 후 먼저 사이트를 깃허브에 올립니다.

이 사이트를 깃허브에 올려줘. 저장소는 비공개로 해줘.

💡 깃허브는 내 파일을 올려두는 ‘인터넷 창고’라고 보시면 돼요. 비공개(프라이빗)로 하면 내 코드가 통째로 공개되는 걸 막을 수 있습니다. (비공개로 해도 배포는 정상적으로 됩니다.)

그다음 클라우드플레어로 배포합니다.

이 사이트를 클라우드플레어로 배포하고 싶어.
어떻게 하면 되는지 방법을 알려줘.

💡 클릭 순서는 이래요. Workers & Pages → Connect to Git → 빌드 설정 → Save and Deploy. 배포가 끝나면 인터넷 주소가 생겨서, 그때부터 누구나 내 사이트에 접속할 수 있게 됩니다.

클라우드플레어에서 사이트 배포가 완료돼 인터넷 주소가 생성된 성공 화면

“Success! Your project is deployed”가 뜨면 배포 완료예요. 함께 생긴 주소(.pages.dev)로 들어가면 내 사이트가 인터넷에 떠 있는 걸 확인할 수 있습니다.

도메인 구입·연결

무료 주소(.pages.dev)로도 사이트는 잘 돌아가요. 하지만 광고(애드센스)를 붙이려면 내 도메인이 필요합니다. 클라우드플레어에서 바로 사면(.com 약 $10.46 전후) 연결이 가장 간단하고, 국내에서는 가비아·카페24·후이즈에서도 살 수 있어요.

무료 임시 주소는 애드센스 승인이 어렵고 내 도메인은 애드센스가 가능하다는 비교 설명

무료 임시 주소(.pages.dev)로는 광고 승인이 어렵고, 내 도메인을 사야 애드센스를 붙일 수 있어요. 도메인 비용은 1년에 1~2만 원 정도입니다.

내가 이 사이트 도메인을 구입했는데, 연결 절차를 알려줘.

💡 클릭 순서는 이렇습니다. 내 사이트 → Custom domains → Set up a domain → 도메인과 www 2개 연결, 이렇게 하고 “Active”가 뜨면 완료예요.

클라우드플레어 Custom domains에서 내 도메인이 Active 상태로 연결된 화면

도메인과 www 두 개가 모두 “Active”로 뜨면 연결 완료예요. 이제 내 도메인 주소로 누구나 사이트에 접속할 수 있습니다.

5단계. 검색 엔진 등록

마지막으로, 만든 사이트를 검색 엔진에 등록합니다. 이걸 해야 구글과 네이버가 내 사이트를 알아보고 검색 결과에 띄워줘요.

구글이랑 네이버 검색에 등록하려고 해. 방법을 알려줘.

💡 구글은 서치콘솔, 네이버는 서치어드바이저에 등록해요. 사이트 주소를 등록하고 사이트맵을 제출하는 것까지 AI가 단계별로 안내해줍니다. 여기까지 하면 며칠 안에 검색 결과에 내 사이트가 잡히기 시작해요.

구글 서치콘솔에 사이트를 등록해 검색 엔진에 노출되도록 신청하는 화면

구글 서치콘솔에 사이트를 등록하고 사이트맵을 제출하면, 구글이 내 사이트를 검색 결과에 띄워주기 시작합니다.

정리

다시 한번 이 과정을 정리하자면, 코딩을 한 줄도 몰라도, AI에게 말로 시켜서 검색 잘되는 수익형 홈페이지를 만들 수 있습니다. 핵심만 다시 짚으면 이래요.

무작정 “만들어줘”가 아니라, 개요를 먼저 적고 → 대화하며 다듬고 → 막히면 AI한테 물어가며 만든다
기획부터 마무리까지 검색·모바일 최적화를 꼭 챙기는 것
배포는 클라우드플레어, 광고를 붙일 거면 내 도메인까지 연결 - 여기까지가 수익형 사이트의 기본 세팅

저도 처음에 사이트를 만들기 전에는 어렵게만 느껴졌는데, 막상 만들고 나니 누구나 다 할 수 있구나 하는 생각이 들더라고요. 만들고 싶었던 작은 사이트 하나부터 AI와 대화하며 만들어 보시면 좋겠습니다.

홈페이지 만들기, 강의로 배우고 싶으세요?

이 영상처럼 처음부터 끝까지 직접 따라 만들어보고 싶은 분들을 위해 홈페이지 만들기 강의를 준비하고 있어요. 강의를 개설해주면 어떻겠냐고 주변에서 말씀해주셔서, 기획을 하는 중인데요. 관심 있으시면 아래에 간단히 남겨주세요. 개설되면 가장 먼저 안내드리겠습니다.

👉 홈페이지 만들기 강의 사전 신청하기