비전공자를 위한 입문 가이드 · 2026년 7월 기준
바이브 코딩은 AI에게 자연어로 원하는 제품을 설명하고, 코드를 생성·수정·테스트하며 웹사이트와 앱을 만드는 방식입니다. 이 사이트는 개발 경험이 없는 사람에게 꼭 필요한 개념만 순서대로 설명합니다.
01 — Start Here
AI에게 원하는 서비스의 목적·화면·기능·디자인을 일상 언어로 설명하고, AI가 생성한 코드를 대화를 통해 반복적으로 수정하여 결과물을 만드는 개발 방식입니다.
이 사이트의 핵심 메시지
코드를 전부 이해할 필요는 없지만, 무엇을 만들고 있는지 설명하고 검증할 최소한의 구조는 알아야 합니다.
바이브 코딩에서 사용자는 다음 여섯 가지 역할을 맡습니다.
AI는 목적을 대신 정해주지 못합니다.
모호한 지시는 모호한 결과로 돌아옵니다.
실행해 보지 않은 코드는 완성된 것이 아닙니다.
"안 돼요"는 정보가 아닙니다.
책임은 AI가 아니라 사용자에게 있습니다.
되돌릴 수 있어야 과감하게 시도할 수 있습니다.
바이브 코딩은 코딩 지식을 완전히 불필요하게 만드는 기술이 아니라, 직접 코드를 작성하는 부담을 크게 낮추는 방식입니다. 특히 다음 항목은 AI에게 전부 맡기면 안 됩니다.
02 — AI Tools
네 가지 도구는 경쟁 관계라기보다 역할이 다릅니다. 하나만 고집하기보다 단계별로 나눠 쓰는 편이 결과가 좋습니다.
무료 플랜과 기능은 자주 변경됩니다. 아래 내용은 2026년 7월 기준이며 사용량과 기능은 변경될 수 있습니다.
| 도구 | 성격 | 추천 역할 | 비전공자에게 좋은 점 | 주의점 |
|---|---|---|---|---|
| ChatGPT | 범용 AI 작업공간 | 아이디어 구체화, 요구사항 작성, 리서치, 오류 분석, 이미지·파일 분석 | 하나의 대화에서 기획·디자인·코드·검증을 연결하기 편함 | 한 번에 전체 사이트를 계속 수정하게 하기보다 파일과 기능을 나누어 요청해야 함 |
| Claude | 문서·코드 중심 협업 AI | 긴 요구사항 정리, 코드 리뷰, 문서 작성, 프로젝트 구조 설명 | 결과물을 비교적 정돈된 구조로 작성하게 하기 좋음 | 무료 Claude와 터미널 코딩 도구인 Claude Code는 구분해야 함 |
| Gemini | Google 생태계 기반 멀티모달 AI | Google 자료 활용, 이미지·영상 이해, Canvas 앱 제작, AI Studio 실험 | Canvas에서 앱과 코드를 생성하고 미리보기·콘솔을 확인할 수 있음 | Gemini 앱, Gemini Canvas, Google AI Studio, Gemini API가 각각 다른 제품임 |
| Genspark | 여러 에이전트와 모델을 결합한 작업형 AI | 조사부터 문서·디자인·코드 제작까지 통합 수행 | AI Developer를 통해 브라우저에서 앱 구축 작업을 진행하기 쉬움 | 복합 작업은 무료 크레딧을 빠르게 사용할 수 있음 |
무엇을 만들지 모르겠다
ChatGPT
복잡한 요구사항과 문서를 정리하고 싶다
Claude
Google 자료와 연결하거나 Canvas에서 바로 앱을 보고 싶다
Gemini
조사·문서·디자인·코딩을 한 작업공간에서 하고 싶다
Genspark
Claude를 처음 사용한다면 단계별로 정리된 무료 학습 자료 모음에서 시작할 수 있습니다.
Claude 101은 외부 제작자가 운영하는 무료 학습 리소스이며, Anthropic의 공식 교육 사이트가 아닙니다. 링크를 넣을 때는 반드시 이 점을 함께 표기하세요.
03 — Essential Terms
전부 외울 필요는 없습니다. 반드시 알아야 함 표시가 붙은 용어부터 익히고, 나머지는 필요해질 때 다시 오세요. 카드를 눌러 자세한 설명을 펼칠 수 있습니다.
조건에 맞는 용어가 없습니다. 검색어나 필터를 조정해 보세요.
04 — Build Process
아이디어에서 배포까지, 순서를 지키는 것만으로 실패의 절반이 사라집니다.
AI에게 바로 "사이트 만들어줘"라고 입력하면 결과가 불안정합니다. 최소한 다음 항목을 먼저 결정하세요.
나는 개발 경험이 없는 비전공자입니다. 아래 조건으로 정적 HTML 사이트 요구사항 문서를 만들어 주세요. - 사이트 목적: - 주요 사용자: - 핵심 기능 3가지: - 필요한 페이지: - 디자인 방향(분위기·색상·폰트): - 모바일 지원: 필수 - 이번에는 만들지 않을 기능: - 완료 기준(이것이 되면 끝): 출력 형식: 1) 요구사항 목록 2) 화면 구성 3) 파일 구조 4) 완료 체크리스트 아직 코드는 작성하지 마세요.
MVP는 모든 기능을 넣은 완성품이 아니라, 핵심 가치만 확인할 수 있는 최소 제품입니다.
"필수 용어 카드에 카테고리 필터만 추가해줘. 기존 디자인과 데이터는 변경하지 마."
"전체적으로 더 예쁘고 전문적으로 다시 만들어줘."
AI가 수정할 때마다 다음 중 하나를 사용하세요.
"안 돼"라고 하지 말고 다음 정보를 함께 주세요.
[상황] 어떤 화면에서 무엇을 눌렀는지: [기대] 원래 이렇게 되어야 함: [실제] 실제로는 이렇게 됨: [콘솔 오류] 브라우저 F12 → Console 탭 내용 그대로 붙여넣기: [관련 파일] 파일명과 경로: [직전 변경] 오류 직전에 바꾼 내용: 원인을 먼저 설명하고, 수정할 부분만 최소한으로 고쳐 주세요. 전체 파일을 다시 쓰지 말고, 바뀐 부분만 알려 주세요.
AI가 "완료했습니다"라고 답해도 다음을 직접 확인하세요.
05 — Design Reference
Pinterest는 예쁜 이미지를 모으는 곳이 아니라, 디자인 의사결정을 축적하는 시각적 데이터베이스로 써야 합니다. 음악 레퍼런스를 장르·템포·악기·무드로 정리하듯 디자인도 목적별로 분류하세요.
"이 Pinterest 이미지처럼 만들어줘."
"레퍼런스의 어두운 배경과 넓은 여백은 활용하되, 네온 효과는 사용하지 마. 카드 모서리는 16px, 카드 사이 간격은 24px로 통일해. 제목은 대형 산세리프체, 본문은 가독성 중심으로 구성해. 레퍼런스의 이미지와 문구는 복제하지 말고 레이아웃 원리만 참고해."
색상, 레이아웃, 타이포그래피, 인터랙션
설명 방식, 정보 구조, 학습 순서
검색, 필터, 북마크, 퀴즈, 진행률
세 가지를 섞어 전달하면 AI가 레퍼런스 사이트를 그대로 복제할 가능성이 높아집니다.
06 — Free Tools
각 서비스는 무료 플랜이 있지만 사용량과 고급 모델 접근에 제한이 있습니다.
2026년 7월 기준입니다. 무료 크레딧을 소진하면 작업이 중단되거나 업그레이드가 필요할 수 있습니다.
디자인이 중요한 정적 사이트
v0
설명만으로 사이트를 빠르게 제작
Bolt
로그인·데이터 저장이 있는 앱
Lovable
코드를 직접 보고 배우며 제작
Replit
Google AI를 활용한 실험
Gemini Canvas · AI Studio
07 — First Project
가장 작고, 가장 많이 배우는 첫 프로젝트입니다. 하루 안에 배포까지 끝낼 수 있습니다.
나는 코딩을 전혀 모르는 비전공자입니다. "나만의 프로필 카드 사이트"를 만들려고 합니다. 조건 - index.html, css/style.css, js/app.js 세 파일로 분리 - 외부 라이브러리와 CDN 없이 순수 HTML·CSS·JavaScript만 사용 - 포함 기능: 이름·소개, 프로필 이미지, 관심사 카드 3개, SNS 링크, 다크 모드 버튼 - 외부 링크는 새 창에서 열기 - 모바일(390px)과 데스크톱(1280px) 모두에서 깨지지 않는 반응형 - 색상: (원하는 색 2개 적기) / 분위기: (예: 차분하고 여백이 넓은) - 다크 모드 설정은 localStorage에 저장 요청 1) 먼저 파일 구조와 화면 구성을 설명해 주세요. 2) 제가 확인하면 그때 코드를 작성해 주세요. 3) 코드에는 초보자가 이해할 수 있는 한국어 주석을 넣어 주세요.
vibe-coding-guide/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── data-terms.js │ ├── data-tools.js │ └── app.js ├── images/ │ └── references/ └── README.md
백엔드 없이 JavaScript만으로 구현할 수 있는 범위입니다. 이 사이트도 전부 이 방식으로 만들어졌습니다.
08 — Glossary
지금 당장 필요하지는 않지만, 도구가 뱉는 화면에서 자주 마주치게 되는 단어들입니다. 난이도 필터로 지금은 몰라도 됨을 걸러 두면 부담이 줄어듭니다.
조건에 맞는 용어가 없습니다.
학습 순서 권장
필수 용어 → 실전 단계 용어 → 전체 A–Z 용어집. 처음부터 전체 사전을 펼쳐 두면 우선순위를 잃기 쉽습니다.
09 — Safety
배포 전에 반드시 한 번씩 확인하세요. 사고는 거의 항상 이 목록 안에서 일어납니다.