코딩 몰라도 AI로 웹사이트 만들기 — 초보자 실전 가이드 (2026)

코딩 몰라도 AI로 웹사이트 만들기 — 초보자 실전 가이드 (2026)

AI(Claude, Gemini)로 포트폴리오 웹사이트를 만드는 4단계 실전 과정

"복잡한 코드 대신, AI와 대화만으로 포트폴리오 사이트를 완성했습니다. 코딩 경험이 전혀 없어도 따라할 수 있는 4단계 가이드입니다."

👶

난이도
초보자 가능

⏱️

소요 시간
약 3시간

💰

비용
전액 무료

바이브 코딩이란? — AI에게 말로 설명하는 개발 방식

바이브 코딩(Vibe Coding)은 AI에게 내가 원하는 것을 자연어로 설명하면, AI가 코드를 자동으로 생성해주는 새로운 개발 방식입니다. 프로그래밍 문법을 외우거나 에러 메시지와 씨름할 필요 없이, "이렇게 만들어줘"라는 대화만으로 결과물을 만들 수 있습니다.

기존 노코드(No-Code) 도구와 다른 점은, 바이브 코딩은 실제 코드가 생성된다는 것입니다. 템플릿에 갇히지 않고 원하는 기능을 자유롭게 추가할 수 있습니다.

사용한 AI 코딩 도구 (모두 무료)

도구	역할	비용
Gemini	프로젝트 기획서(PRD) 작성	무료
Antigravity	AI 코딩 환경 (코드 생성 및 실행)	무료 플랜
Claude	코드 작성 및 디버깅 AI	무료 플랜
Vercel	웹사이트 무료 배포 및 호스팅	무료

🚀 웹사이트 제작 4단계 프로세스

1

Gemini로 기획서(PRD) 작성하기

"어떤 사람이, 어떤 목적으로, 어떤 기능을 사용하는지"를 명확하게 정리합니다. 구체적인 설계도가 있어야 AI가 정확하게 코드를 작성할 수 있습니다.

2

AI 코딩 도구로 웹사이트 구현하기

Antigravity와 Claude를 활용해 작성된 PRD를 전달합니다. HTML, CSS, JavaScript를 기반으로 메인 페이지와 어드민 패널이 자동으로 생성됩니다.

3

대화로 버그 수정하고 기능 다듬기

"이 버튼 눌러도 반응이 없어", "모바일에서 안 보여" 등 문제 상황을 말로 설명하면 AI가 스스로 코드를 분석하고 수정합니다.

4

Vercel로 무료 배포하기

완성된 웹사이트를 Vercel을 통해 서버 비용 없이 무료로 배포하고, 나만의 URL을 세상에 공개합니다.

npm i -g vercel
vercel login
vercel --prod

바이브 코딩을 해보고 느낀 점

바이브 코딩을 하면서 가장 크게 느낀 것은, 코딩 없이 웹사이트를 만드는 것이 정말로 가능해졌다는 것입니다. 예전에는 HTML/CSS/JS, 서버 구성 등 긴 여정이 필요했지만, 이제는 아이디어와 대화 능력만 있으면 충분합니다.

바이브 코딩의 핵심은 결국 '좋은 질문'을 하는 능력입니다. 코드를 잘 짜는 것보다, 내가 원하는 것을 명확하게 설명하는 능력이 더 중요한 시대가 왔습니다.

---

💡 자주 묻는 질문 (FAQ)

• 코딩을 전혀 몰라도 할 수 있나요? 네, AI에게 말로 설명하고 수정을 요청하는 과정만으로 충분합니다.
• 비용이 드나요? 이 가이드에서 사용된 모든 도구는 무료 플랜으로 이용 가능합니다.
• 노코드 도구와의 차이점은? 템플릿에 갇히지 않고, 실제 코드가 생성되므로 원하는 커스텀 기능을 자유롭게 추가할 수 있습니다.

바이브 코딩을 바로 시작해보고 싶다면?

입문 튜토리얼 확인하기