바이브 코딩으로 10분만에 무료 웹사이트 만들기

---

"바이브 코딩이 뭔데?"

2025년 들어 개발자 커뮤니티에서 가장 많이 들리는 말 중 하나입니다. 코딩을 모르는 사람도, 코딩을 아는 사람도 요즘 이 방식으로 웹사이트를 만듭니다.

---

바이브 코딩이란?

Vibe Coding - 분위기(vibe)만 전달하면 AI가 코딩해주는 방식입니다.

기존 개발 방식과 비교하면 이렇습니다.

기존 방식
아이디어 → 설계 → 코딩 → 테스트 → 수정 → 배포
(몇 시간 ~ 며칠)

바이브 코딩
아이디어 → AI에게 설명 → 결과물 확인 → 수정 요청 → 배포
(10분 ~ 1시간)

코드를 직접 짜는 게 아니라 AI와 대화하면서 만들어 나가는 겁니다.

---

실제로 10분만에 되나요?

됩니다. 단, 조건이 있습니다.

✅ 10분 안에 되는 것
- 단순 소개 페이지
- 디지털 명함
- 이벤트 안내 페이지
- 간단한 랜딩 페이지

⏰ 시간이 더 걸리는 것
- 이미지 직접 교체
- 세부 디자인 조정
- 여러 페이지 구성

뼈대를 10분만에 잡고 디테일을 다듬는 시간이 추가되는 구조입니다.

---

직접 해봅시다 - 10분 타이머 시작

⏱ 0:00 - AI 접속

Claude(claude.ai) 또는 ChatGPT(chatgpt.com) 접속합니다. 둘 다 무료입니다.

---

⏱ 1:00 - 프롬프트 입력

아래 템플릿을 복사해서 내용만 바꿔서 붙여넣으세요.

다음 조건으로 웹사이트를 만들어줘.

용도: [소개 페이지 / 포트폴리오 / 가게 홍보 / 이벤트 안내]
분위기: [미니멀 / 다크 / 밝고 화사한 / 전문적인]
색상: [포인트 컬러 하나만 지정, 예: 파란색]
구성: [상단 소개 - 특징 3가지 - 연락처]
추가 요청: [모바일 대응, 애니메이션 효과 등]

HTML, CSS, JS 한 파일로 만들어줘.

---

⏱ 2:00 - 코드 받기

AI가 코드를 생성합니다. 코드 블록 우측 상단 복사 버튼을 클릭합니다.

---

⏱ 3:00 - 파일 저장

메모장을 열고 붙여넣기 → index.html 로 저장합니다.

Windows라면 저장할 때 파일 형식을 모든 파일로 바꾸고 저장해야 합니다.

파일명: index.html  ✅
파일명: index.html.txt  ❌

---

⏱ 4:00 - 브라우저로 확인

저장한 index.html을 더블클릭하면 브라우저에서 바로 열립니다.

---

⏱ 5:00 ~ 8:00 - 수정 요청

마음에 안 드는 부분을 AI에게 말합니다.

"배경이 너무 밝아, 조금 어둡게"
"제목 폰트 크기 키워줘"
"버튼에 클릭 효과 넣어줘"
"하단에 저작권 문구 넣어줘"

수정된 코드를 받으면 index.html에 덮어씌우고 브라우저를 새로고침합니다.

---

⏱ 9:00 - Netlify 업로드

netlify.com 접속 → 로그인 → index.html이 있는 폴더를 드래그앤드롭

---

⏱ 10:00 - 완성

https://[랜덤이름].netlify.app

이 주소로 누구나 접속할 수 있습니다.

---

더 잘 만들려면

10분짜리 초안이 나왔으면 이제 다듬을 차례입니다.

이미지 교체 - 무료 이미지는 Unsplash(unsplash.com)에서 다운받아 교체

폰트 변경 - AI에게 "Google Fonts에서 Noto Sans KR 폰트 적용해줘" 요청

도메인 연결 - 가비아나 Namecheap에서 도메인 구매 후 Netlify에 연결

다국어 지원 - AI에게 "영어/한국어 전환 버튼 추가해줘" 요청

---

바이브 코딩의 진짜 가치

코딩을 배우는 데 몇 달이 걸립니다. 바이브 코딩은 그 시간을 10분으로 줄여줍니다.

물론 복잡한 기능이 필요하거나 완성도 높은 서비스를 만들려면 결국 개발 지식이 필요합니다. 하지만 간단한 소개 페이지, 포트폴리오, 홍보 페이지 용도라면 바이브 코딩으로 충분합니다.

---

마치며

AI 접속 → 프롬프트 입력 → index.html 저장
→ 브라우저 확인 → 수정 반복 → Netlify 업로드

10분입니다. 지금 바로 해보세요.

다음 글에서는 돈 없이 내 웹사이트 만드는 법 - 무료 도구 총정리를 다뤄보겠습니다.

---