1 / 9약 12분입문
시작하기 — 코딩 몰라도 되는 이유
당신은 ‘지시·확인·출시’를 하고, 코드 타이핑은 에이전트가 한다
이 장을 끝내면
- 바이브코딩 한 줄로 설명하기
- 컴퓨터에 뭐가 필요한지 체크리스트 채우기
- 이 시리즈 전체 지도 그리기
01
한 문장 정의
바이브코딩은 AI 코딩 도구(에이전트)에게 목표를 말하고, 나온 결과를 사람이 확인·수정 지시하며, 인터넷에 올리는 방식입니다. 프로그래밍 시험이 아닙니다. ‘식당 사장’이 되고 ‘주방장(에이전트)’에게 주문을 정확히 넣는 일에 가깝습니다.
02
당신이 하는 일 / 에이전트가 하는 일
역할을 나누면 불안이 줄어듭니다.
- 사람: 무엇을 만들지 정하기, 범위 줄이기, 화면에서 동작 확인, ‘완료’ 조건 말하기, 키·비밀번호 지키기, 배포 버튼·환경 변수 확인
- 에이전트: 파일 만들기/고치기, 명령 실행 제안, 에러 읽고 패치, 반복 작업
- 둘 다 하면 안 되는 것: 확인 없이 ‘전부 알아서 해’ 후 프로덕션에 바로 올리기
03
준비물 (최소)
비싸지 않습니다. 아래만 있으면 웹앱 한 개는 끝까지 갈 수 있습니다.
- 컴퓨터: Windows / Mac 모두 가능 (iOS 앱 로컬 빌드만 Mac이 유리)
- 인터넷, 최신 브라우저 (Chrome 등)
- 계정: GitHub, 코딩 에이전트(Claude / ChatGPT·Codex / Cursor 중 하나), 배포(Vercel 등), DB(Supabase 등) — 단계마다 가입
- 메모장 또는 노션: 목표·완료 조건·에러 복붙용
지금 하기
- 사용할 AI 도구 하나를 정한다 (예: Cursor 또는 Claude Code)
- GitHub 계정이 없으면 만든다
- ‘내가 만들고 싶은 것’을 한 문장으로 메모한다 (아직 기술 단어 금지)
04
이 시리즈로 가는 끝 그림
마지막 장까지 따라 오면, 작은 웹 서비스를 ‘기획 문서 → 로컬 실행 → 저장·로그인(선택) → 인터넷 URL 배포’까지 한 바퀴 돕니다. 완벽 제품이 아니라 ‘공개해도 부끄럽지 않은 최소 완성’이 목표입니다.
- 2장: 아이디어를 한 줄·화면 목록·하지 않을 것으로 고정
- 3장: 도구 설치·첫 프로젝트 생성
- 4~6장: 화면 → 저장 → (선택) 로그인
- 7장: 보안 최소 규칙
- 8장: 배포와 공개 체크
- 9장: 막힘 대처·다음 기능 루프
05
흔한 오해
처음부터 바로잡습니다.
- 오해: 코드를 다 이해해야 한다 → 사실: ‘어디를 보면 되는지’와 완료 조건만 있어도 된다
- 오해: 한 번에 완벽한 SaaS → 사실: 한 화면·한 저장부터
- 오해: 에러가 나면 실패한 것 → 사실: 에러 문구가 다음 지시의 재료다
- 오해: 무료면 전부 안전 → 사실: API 키·개인정보는 항상 조심
06
학습 규칙 (꼭)
이 규칙이 없으면 에이전트와 같이 일해도 진도가 안 나갑니다.
- 하루에 한 슬라이스만 (예: ‘이름 저장 버튼’까지)
- 완료 조건은 ‘내가 눈으로 확인 가능한 것’
- 에러는 전체를 복사해 에이전트에게 (요약만 하지 말 것)
- 비밀번호·API 키는 채팅에 붙여 넣지 말 것
07
지시(프롬프트) 쓰는 법
바이브코딩의 핵심 기술은 코드가 아니라 지시입니다. 목표·스택·규칙·완료 조건·이번 범위 5칸을 지키면 실패가 줄어듭니다. 나쁜 예/좋은 예·상황별 복붙은 /learn/prompts 에 모아 두었습니다.
지금 하기
- /learn/prompts 에서 ‘새 기능 한 조각’ 예시를 한 번 복사해 본다
- 내 아이디어를 5칸 템플릿에 채워 메모장에 적어 둔다
에이전트에게 복붙
목표: vis 홈에 사이트 제목과 ‘시작하기’ 버튼 하나 스택: 이 Next 프로젝트 그대로 규칙: 모노톤, 한국어, 키를 코드에 넣지 말 것 완료: 브라우저 / 에서 제목과 버튼이 보임 범위: 이번엔 로그인·DB 연결 하지 마