나만의 바이브 코딩 플레이북
모든 구축 작업에 적용할 습관과 체크리스트를 익힙니다.
나만의 바이브 코딩 플레이북은(는) CoddyKit의 무료 Vibe Coding 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vibe Coding 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
From Habits to a Playbook
You've learned when to trust AI, how to dodge its pitfalls, and how to keep growing. Now let's turn all of that into a repeatable playbook, a set of habits and a checklist you can run on every single build.
Great builders aren't great because they're geniuses. They're great because they follow a process that catches mistakes before users do. This lesson gives you that process.
Habit 1: Start With a Clear Spec
The biggest quality boost happens before any code: describe what you want clearly. Vague prompts get vague apps. A good spec names the goal, the inputs, the outputs, and what "done" looks like.
Goal: a tip calculator web page.
Inputs: bill amount, tip percent (buttons: 10/15/20), number of people.
Outputs: tip amount and total-per-person, updating live as I type.
Done means: works on mobile, handles empty/zero input without crashing.
Use plain HTML/CSS/JS, no frameworks.Habit 2: Build in Small Steps
Don't ask for the whole app in one shot. Break it into small, testable pieces and verify each before moving on.
One feature, run it, confirm it works, then the next. Small steps mean that when something breaks, you know exactly which change caused it. Big-bang prompts create big-bang bugs that are miserable to untangle.
Habit 3: Run It Constantly
Running code is how you turn invisible assumptions into visible facts. After every meaningful change, run it. Tools like Replit, Bolt, and v0 give you instant previews, use them obsessively.
Here's a tiny piece of a tip calculator. Run it to confirm the math before building the UI around it. Verify the core, then expand.
function perPerson(bill, tipPercent, people) {
if (people <= 0) return 0; // guard against divide-by-zero
const total = bill * (1 + tipPercent / 100);
return total / people;
}
console.log(perPerson(100, 20, 4)); // 30
console.log(perPerson(50, 15, 0)); // 0, no crashHabit 4: Review the Risky Lines
You can't read everything, and you don't need to. But always read the lines that touch money, data, access, or deletion. That's where silent bugs become real damage.
Skim the layout and copy; scrutinize the logic that matters. This is the green/red zone judgment from earlier, applied as a routine.
Habit 5: Test the Edges
Happy-path testing is easy and misleading. Real reliability comes from edge cases. Make the AI generate them for you so you don't have to think of them all.
Before I ship this feature, list the edge cases I should test:
empty inputs, zero, negative numbers, very large numbers,
missing fields, and unusual user behavior.
For each, tell me what SHOULD happen, then check my code handles it.Habit 6: Keep It Simple
When the AI hands you something complex, push back. Ask: is there a simpler way? Simpler code has fewer places to hide bugs and is easier for both you and the AI to change later.
Simplicity is a discipline you enforce on every prompt, not a one-time choice. "Make it simpler" is one of the most valuable instructions you can give.
Habit 7: Always Have a Way Back
Before any big change, make sure you can undo it. Save your work, commit to version control, or at least keep a copy. AI can rewrite half your app in seconds, you want an escape hatch when it goes sideways.
Before we refactor, remind me to save a checkpoint.
Then make the change in the smallest steps possible,
and after each step, tell me exactly what changed so I can roll back
just that piece if I don't like it.Habit 8: Learn One Thing Each Build
Carry forward the growth mindset: every build should teach you at least one thing. Ask the AI to explain one concept it used, and add it to your learning trail.
This keeps the playbook from making you mechanical. You're not just shipping, you're compounding your skill with every project. Over a year, that's a transformation.
The Pre-Ship Checklist
Before you call any build "done," run this checklist, you can even hand it to the AI as a final audit (see the prompt below):
- Did I write a clear spec?
- Did I build and test in small steps?
- Did I run it after every change?
- Did I read the lines touching money, data, and access?
- Did I test empty, zero, and weird inputs?
- Is it as simple as it can be?
- Do I have a way to undo this?
- What's one thing I learned?
Review this whole feature against my pre-ship checklist:
1) Does it match the spec? 2) Any unhandled edge cases?
3) Any risky logic on money/data/access I should double-check?
4) Is anything more complex than it needs to be?
Give me a short pass/fail on each with the exact lines to look at.Your Playbook Is Your Edge
Anyone can type a prompt and get code. What makes you reliable is the process around the prompt: clear specs, small steps, constant running, targeted review, edge testing, simplicity, safety, and learning.
Run this playbook on every build and you'll ship apps that actually work, while quietly becoming a genuinely skilled developer. That's vibe coding, done wisely.
Quick Check
According to the playbook, what's the best way to work so that when something breaks you can tell exactly which change caused it?
Recap
You now have a complete vibe coding playbook:
- Clear spec, small steps, run constantly.
- Review risky lines, test the edges, keep it simple.
- Always have a way back, and learn one thing per build.
- Finish with the pre-ship checklist, even hand it to the AI to audit.
This is the habit set of an effective AI builder: fast, reliable, and always growing. You've completed Limits & Best Practices, now go build wisely.
AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 25
- 레슨
- 100
자주 묻는 질문
“나만의 바이브 코딩 플레이북” 강의는 무료인가요?
네 — “나만의 바이브 코딩 플레이북” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vibe Coding 강의 전체를 잠금 해제할 수 있습니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.
“나만의 바이브 코딩 플레이북”에서 뭘 배우나요?
모든 구축 작업에 적용할 습관과 체크리스트를 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vibe Coding을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vibe Coding은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“나만의 바이브 코딩 플레이북” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vibe Coding 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vibe Coding 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 바이브할 때와 이해할 때
- 인공지능 코드의 함정 피하기
- 진정한 개발자로 성장하기
- 나만의 바이브 코딩 플레이북