파일과 폴더 구조
프로젝트는 여러 파일이 모여 만들어집니다. 어떤 파일이 화면이고, 어떤 파일이 설정인지 대략만 알아도 AI와 대화가 쉬워집니다.
이런 흐름으로 진행됩니다
화면 → 데이터 → 동작 순으로, AI와 짧게 주고받으며 만듭니다.
app/todo/page.tsx
export default function TodoPage() {
const items = ["공식 문서 읽기", "무료로 테스트"];
return (
<ul>{items.map((t) => <li key={t}>{t}</li>)}</ul>
);
}할 일 목록을 보여주는 간단한 페이지를 만들어줘. 먼저 화면만.
page.tsx에 정적 목록 UI를 추가했습니다. 데이터·버튼 동작은 다음 단계에서 붙이는 걸 권합니다.
바이브코딩이란?
바이브코딩은 AI에게 큰 목표를 한 번에 던지기보다, 작업을 작게 나누고 결과를 확인하면서 점진적으로 만드는 방식입니다.
코드 한 줄을 외우는 것보다, 무엇을 만들지·어떻게 검증할지를 먼저 정리하는 데 초점을 둡니다.
AI가 대신 해주는 부분과 내가 직접 확인해야 하는 부분을 구분하는 연습이 중요합니다.
챕터 방식 프롬프트 예시
한 메시지에 다 몰아넣지 말고, 단계별로 프롬프트를 끊어 줍니다.
- 1단계 · 화면정적 화면 먼저
할 일 목록을 보여주는 페이지를 만들어줘. 지금은 데이터 없이 화면(UI)만, 디자인은 단순하게.
동작·데이터는 빼고 화면부터. 결과를 눈으로 확인할 수 있어야 합니다.
- 2단계 · 데이터mock 데이터 연결
방금 만든 화면에 임시(mock) 할 일 데이터 3개를 넣어줘. 외부 API·DB는 아직 붙이지 마.
유료 API·DB 없이 가짜 데이터로 흐름을 먼저 검증합니다.
- 3단계 · 동작버튼 하나만
할 일을 추가하는 입력칸과 버튼을 추가해줘. 이번엔 이 파일만 수정하고 다른 파일은 건드리지 마.
범위를 ‘이 파일만’으로 제한하면 엉뚱한 변경이 줄어듭니다.
에디터·에이전트에 일 시키는 예시
도구 이름은 예시이며, 핵심은 ‘좁게 시키고 결과를 직접 확인’입니다.
- Cursor
에디터에서 바로 시키기
열려 있는 파일을 가리키며 ‘이 컴포넌트에 로딩 상태만 추가해’처럼 좁게 요청합니다. 적용 후 diff를 직접 눈으로 확인합니다.
- Codex
작업을 맡기고 결과 받기
‘테스트가 깨지는 원인 찾아서 고쳐줘’처럼 목표를 주되, 끝나면 무엇을 왜 바꿨는지 요약을 함께 요청합니다.
결과 리포트는 이렇게 확인합니다
AI가 ‘다 됐다’고 해도, 아래 항목을 직접 확인한 뒤 다음 단계로 넘어갑니다.
- 변경 파일
- app/todo/page.tsx 1개
- 테스트
- npm test 통과 여부 직접 확인
- 빌드
- npm run build 성공 여부 직접 확인
- 남은 일
- 데이터 저장은 다음 단계로 분리
실패 → 수정 → 검증 흐름
초보자는 여기서 막힙니다. 막혔을 때 이 순서를 반복하세요.
- 실패
에러 메시지를 그대로 읽기
빨간 메시지를 무시하지 말고, 마지막 줄과 파일·줄 번호부터 확인합니다.
- 수정
에러를 그대로 보여주고 좁게 요청
‘이 에러가 났어’라며 메시지를 붙여 주고, 한 번에 한 가지만 고치게 합니다.
- 검증
같은 명령으로 다시 확인
고친 뒤 npm test·npm run build를 다시 돌려, 같은 에러가 사라졌는지 눈으로 확인합니다.
초보자가 먼저 알아야 할 것
바이브코딩을 시작하기 전에 개념만이라도 익혀 두면 삽질이 줄어듭니다.
Git/GitHub의 역할
변경 기록을 남기고 되돌릴 수 있게 해 줍니다. 실험하다 망가져도 이전 상태로 돌아갈 수 있다는 안전망입니다.
배포와 로컬 실행의 차이
내 컴퓨터에서만 보이는 것과, 다른 사람도 접속할 수 있는 주소는 다릅니다. 먼저 로컬에서 확인한 뒤 배포하는 편이 안전합니다.
API Key와 비용의 개념
외부 AI·데이터 서비스는 사용량에 따라 과금될 수 있습니다. 키를 코드에 넣기 전에 무료 한도와 과금 조건을 확인하세요.
AI에게 일을 시키는 기본 흐름
한 번에 크게 시키지 말고, 아래 순서를 반복하는 편이 안전합니다.
1. 목표를 한 문장으로 정리
예: ‘할 일 목록을 보여주는 간단한 웹 페이지를 만든다’처럼 범위를 좁혀 적습니다.
2. 작업을 작은 챕터로 나누기
한 번에 전체를 만들지 말고, 화면 → 데이터 → 버튼 동작 순으로 쪼갭니다.
3. 한 번에 하나씩 시키기
AI에게 ‘지금은 이 파일만 수정해’처럼 범위를 제한하면 실수가 줄어듭니다.
4. 수정 후 테스트 명령 실행
npm test, npm run build처럼 프로젝트에 맞는 확인 명령을 직접 돌려 봅니다.
5. 실패하면 원인 분석 후 재시도
에러 메시지를 그대로 AI에게 보여 주되, 무작정 같은 요청을 반복하지 않습니다.
6. 변경 파일과 이유를 보고받기
무엇이 바뀌었는지, 왜 바꿨는지 요약을 받으면 다음 단계 판단이 쉬워집니다.
Cursor / Codex / GitHub / Vercel 사용 시 주의점
도구 이름은 예시이며, 다른 에디터·호스팅을 써도 같은 원칙이 적용됩니다.
긴 프롬프트는 나눠서 주기
한 메시지에 요구사항·디자인·배포까지 몰아넣으면 빠뜨리기 쉽습니다.
코드 수정 후 반드시 build/test 확인
AI가 ‘됐다’고 해도 실제 명령 결과로 검증하는 습관이 필요합니다.
DB/migration/배포는 별도 승인 후 진행
데이터를 지우거나 배포 환경을 바꾸는 작업은 한 단계씩, 의도를 확인한 뒤 진행하세요.
API key와 개인정보를 프롬프트에 넣지 않기
키·비밀번호·실명 정보는 채팅에 붙여넣지 말고 환경 변수로 관리합니다.
AI가 만든 내용을 그대로 믿지 말고 실행 결과로 확인하기
설명은 그럴듯해도 동작하지 않을 수 있습니다. 브라우저·터미널 결과가 기준입니다.
비용 아끼는 개발 흐름
- 처음부터 유료 API를 붙이지 않고, 정적 화면과 mock 데이터로 흐름을 먼저 검증합니다.
- 무료 티어 한도와 과금 조건은 공식 문서에서 직접 확인합니다.
- npm test, npm run build를 자주 돌려 작은 문제를 일찍 잡습니다.
- 크론·외부 fetch·DB 연동은 화면과 로직이 안정된 뒤 마지막에 붙입니다.
바이브코딩 전에 읽을 실전 가이드
로그인·배포·API 연동에서 자주 터지는 지점을 먼저 점검하면 되돌리는 시간이 줄어듭니다.
아래 내용은 초보 바이브코더를 위한 일반 안내입니다. 서비스·지역·약관에 따라 달라질 수 있으며, 실제 사업화·운영 전에는 해당 분야 전문가 확인이 필요합니다.
- 로그인·인증수동 검토됨
구글 로그인은 나만 되는데 다른 사람은 안 될 때
나는 로그인되는데 친구·다른 계정만 실패하거나, 배포 후 redirect_uri_mismatch가 나는 상황을 순서대로 좁힙니다.
한 줄 결론
로그인은 화면 버튼이 아니라 '로그인 후 다시 돌아올 주소'·콜백·비밀값 설정칸·세션이 한 세트로 맞아야 합니다.
핵심 체크 3가지
- Google Cloud Console → APIs & Services → Credentials에서 로그인 후 돌아올 주소가 실제와 글자 단위로 일치하는지 확인합니다(끝 슬래시·http/https 포함).
- Kakao Developers → 내 애플리케이션 → 카카오 로그인 → Redirect URI에 로컬·배포 URL을 각각 등록했는지 확인합니다.
- Naver Developers → 내 애플리케이션 → API 설정 → Callback URL도 동일하게 맞췄는지 확인합니다.
- 배포수동 검토됨
로컬은 되는데 Vercel에 올리면 터질 때
집 컴퓨터에서는 되는데 배포 URL만 500·빈 화면·API 실패일 때, Vercel 비밀값 칸부터 순서대로 좁힙니다.
한 줄 결론
로컬과 배포의 차이는 거의 항상 비밀값 설정칸·코드 실행 장소(edge/node)·빌드 시점 코드에서 납니다.
핵심 체크 3가지
- Vercel → Project → Settings → Environment Variables에 필수 비밀값이 Production·Preview 모두 들어갔는지 확인합니다.
- 브라우저에도 보이는 설정 이름(NEXT_PUBLIC_)과 서버 전용 비밀값을 구분했는지 확인합니다.
- Supabase/Neon → Project Settings → Connection string이 배포에서 쓰는 주소인지 확인합니다.
- AI API수동 검토됨
AI API 붙였더니 요금이 갑자기 튀었을 때
키가 화면·저장소에 새거나, 한도·재시도 없이 돌려서 청구가 커진 상황을 막는 순서를 정리합니다.
한 줄 결론
서비스 비밀번호(API key)는 서버 뒤에 두고, 호출 한도·로그·모델 선택을 코드와 대시보드 양쪽에서 막아야 합니다.
핵심 체크 3가지
- 서비스 비밀번호는 비밀키를 숨기는 서버 문(route)에서만 쓰고, 브라우저 번들에 없는지 확인합니다.
- OpenAI/Anthropic/Gemini → API Keys / Usage / Limits에서 월 한도·알림을 설정했는지 확인합니다.
- 요청마다 AI 답변 길이·비용 제한(max_tokens)·timeout·재시도 상한을 코드에 넣었는지 확인합니다.
- 배포수동 검토됨
DB 연결이 로컬만 되고 배포에서 터질 때
집에서는 붙는데 배포만 timeout·permission denied가 날 때 URL·SSL·방화벽·권한·연결 풀 순서로 좁힙니다.
한 줄 결론
DB 문제는 대부분 ‘주소 문자열 1줄’이 아니라, 권한·SSL·네트워크·env가 한 세트로 맞지 않아 생깁니다.
핵심 체크 3가지
- 배포 환경의 DATABASE_URL이 로컬(.env.local)과 동일한 형식인지 확인합니다(유저/호스트/포트/DB명/쿼리).
- DB 제공자 대시보드에서 ‘허용 IP/네트워크’ 정책이 배포 환경을 막지 않는지 확인합니다.
- SSL 요구 여부를 확인하고, 필요하면 sslmode/인증서 설정이 들어갔는지 확인합니다.
- AI API수동 검토됨
이미지 업로드는 됐는데 새로고침하면 사라질 때
업로드는 성공한 듯한데 새로고침 후 파일이 없거나, 배포에서 413·권한 오류가 나는 상황을 순서대로 풉니다.
한 줄 결론
업로드는 ‘파일 하나 저장’이 아니라, 저장 위치·공개 URL·권한·용량 제한이 한 세트로 맞아야 합니다.
핵심 체크 3가지
- 업로드 최대 크기(예: 5MB)·허용 확장자·MIME을 서버에서 검증합니다.
- 배포 환경에서 임시 저장 폴더가 쓰기 가능한지 확인합니다(권한/경로).
- 영구 저장이 필요하면 S3/R2/Supabase Storage 등 외부 스토리지로 저장 경로를 분리합니다.
관련 실전 글
바이브코딩 입문 시 참고할 수 있는 에디터 공식 문서 안내입니다.
바이브코딩에 바로 연결되는 사례
개발도구·에이전트 중심의 실전 빌드 사례입니다. 에디터 작업 전에 결과물 흐름을 먼저 볼 때 참고하세요.
원출처 기준으로 해석한 실전 결과물 사례입니다. 기능·요금·라이선스는 원출처에서 직접 확인하세요.
- 개발도구저장소보통
오픈소스 IDE 코딩 어시스턴트
VS Code 등 에디터에서 돌아가는 오픈소스 코딩 어시스턴트를 설치·체험하는 사례입니다.
왜 지금 볼 만한가
유료 코딩 어시스턴트 대안으로 자주 비교되는 오픈소스 프로젝트입니다.
초보자가 따라볼 부분
확장 프로그램 설치 후 한 파일에서 채팅·자동완성만 짧게 테스트하세요.
필요한 도구
VS Code 또는 JetBrains · Continue · 로컬·클라우드 모델(선택)
원출처 보기요금·API 키·이용 한도·라이선스·저작권은 반드시 원출처에서 직접 확인하세요.
- 에이전트저장소보통
파일·검색 MCP 참고 서버 모음
파일·브라우저·검색 등 동작하는 MCP 참고 서버를 하나 골라 연결하는 실습 사례입니다.
왜 지금 볼 만한가
에디터·에이전트에 내 도구를 연결하는 흐름을 실제 repo로 확인할 수 있습니다.
초보자가 따라볼 부분
repo 목록에서 README 하나만 골라 설치·연결 단계를 따라가세요.
필요한 도구
MCP 호환 클라이언트 · Node 또는 Python
원출처 보기요금·API 키·이용 한도·라이선스·저작권은 반드시 원출처에서 직접 확인하세요.
- 에이전트저장소어려움
단계형 에이전트 그래프 앱
조사→초안→검토처럼 여러 단계를 거치는 상태 기반 에이전트 그래프를 만드는 사례입니다.
왜 지금 볼 만한가
단순 챗봇을 넘는 워크플로 에이전트 패턴을 공식 tutorial로 학습할 수 있습니다.
초보자가 따라볼 부분
공식 tutorial 하나만 끝까지 따라가며 노드 구조를 확인하세요.
필요한 도구
Python · LangGraph · LLM API(선택)
원출처 보기요금·API 키·이용 한도·라이선스·저작권은 반드시 원출처에서 직접 확인하세요.
책 독자 자료실 준비 중
예제 파일, 체크리스트, 프롬프트 템플릿을 준비 중입니다.
파일 다운로드·결제·판매 기능은 아직 제공하지 않습니다.