Vibe Coding · 강의

첫 번째 버전 생성

인공지능이 작동하는 시작점을 생성하도록 하십시오.

첫 번째 버전 생성은(는) CoddyKit의 무료 Vibe Coding 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vibe Coding 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Time to Build for Real

You have a buildable idea. Now comes the magic moment of vibe coding: you hand that idea to an AI and watch it produce a working first version — often in seconds.

In this lesson you'll learn how to feed your prompt to tools like v0, Bolt, Lovable, or Cursor, what to expect from the output, and how to react when version one isn't perfect (it usually isn't — and that's fine).

Pick Your Builder

Different tools, same idea: describe, generate, preview. Here's a quick map for your first build:

v0 — great for generating polished UI from a prompt.
Bolt / Lovable — describe a whole app, get a live, editable project in the browser.
Replit — build and run in the browser, full coding environment with AI.
Cursor / Claude Code — AI that writes files right in a real code editor.

For your very first app, a browser app-builder like Bolt or Lovable is the friendliest place to start.

Paste Your Prompt

Generating the first version is as simple as pasting your build prompt into the tool's chat box and hitting send. Use the full prompt you shaped in the last lesson — what it is, who uses it, what they do, and the vibe.

Here's a complete first-version prompt you could drop into Bolt or v0 right now.

Build a single web page "Daily Water Tracker".

The user can:
- See a big counter starting at 0
- Tap a "+1 Glass" button to add a glass
- Tap a "Reset" button to set it back to 0
- See a short encouraging message when they reach 8 glasses

Style: clean and modern, centered card, soft blue colors, big friendly buttons.
Keep it as one self-contained page.

What 'First Version' Really Means

The first version is a starting point, not the finish line. AI gives you something that runs and roughly matches your words. It will get most of it right and a few things "off."

That's the whole vibe-coding loop: generate → look → ask for changes → repeat. Don't expect perfection on shot one. Expect something to react to, which is far faster than starting from a blank page.

Read the Result Before Reacting

When the AI finishes, resist the urge to immediately retype your whole prompt. First, actually look at what it made:

Does the main thing work? (Does the button do anything?)
Is the layout roughly right?
What's missing or wrong compared to your prompt?

This quick review tells you exactly what to ask for next — which you'll learn in lesson 3. For now, generating and seeing output is the win.

A Look at What Got Generated

From the water-tracker prompt, the AI writes the logic for you. You won't type this — but seeing it builds your confidence about what your words become.

Run this to watch the counter logic in action, exactly the kind of code AI produces from your prompt.

let glasses = 0;
const goal = 8;

function addGlass() {
  glasses += 1;
  if (glasses >= goal) return glasses + " glasses — goal reached! Great job!";
  return glasses + " glasses so far. Keep going!";
}

function reset() { glasses = 0; return "Reset to 0."; }

console.log(addGlass());
console.log(addGlass());
for (let i = 0; i < 6; i++) addGlass();
console.log(addGlass());

When the First Version Looks Wrong

Sometimes the AI misreads you. The counter starts at the wrong number, the colors are off, or a button is missing. This is normal and easy to fix.

Don't scrap everything. Note the gap between what you wanted and what you got — that gap is your next instruction. A first version that's 70% right is a great first version.

What I wanted: counter starts at 0, blue theme, two buttons.
What I got:     counter starts at 1, gray theme, only +1 button.

Next instruction will simply close those gaps. No restart needed.

If It Won't Run At All

Occasionally the first version errors out or shows a blank screen. Don't panic — and don't try to read the error yourself yet. Just tell the AI plainly.

Most builder tools let you paste the error or click "Fix" and the AI repairs its own code. You'll go deep on this in the Debugging course later.

The app shows a blank white screen and nothing happens when I click the button.

Here's the error from the console:
[paste the red error text here]

Please fix it so the button adds 1 to the counter, and tell me in one line what was wrong.

Generate Variations to Explore

A superpower of AI builders: you can ask for several versions at once to explore options before committing. Great for design when you're not sure what you want.

This turns the first version into a menu instead of a single guess.

Generate 3 different visual styles for this water tracker:
1. Calm pastel and minimal
2. Bold and colorful with big rounded buttons
3. Dark mode with neon accents

Keep the same features in all three. I'll pick one to continue with.

Keep What Works

Once you have a first version you like, lock it in before changing things. In browser builders, this might mean saving a version or noting the current state.

This way, if a later change breaks something, you can return to a known-good point. Vibe coding moves fast — having a save point keeps fast from becoming reckless.

Your First-Version Checklist

Before you call the first version done enough to start tweaking, run this quick checklist:

The page loads without errors.
The main action works (the key button does something).
The layout is roughly what you described.
You know the 1-3 things you want to change next.

Check those off and you're ready for the next lesson: asking for changes by chatting.

Quick Check

Your AI builder produced a first version that works but has the wrong colors and is missing one button. What's the best next move?

Recap: You Generated Version One

You learned how to turn your prompt into a real, running first version. Remember:

Paste your full prompt into a builder like Bolt, Lovable, v0, or Replit.
The first version is a starting point — expect ~70% right.
Review before reacting: note what works and what's off.
If it breaks, paste the error and let the AI fix itself.
Save a good version before making big changes.

Next: shaping that first version into exactly what you want — just by chatting.

자주 묻는 질문

“첫 번째 버전 생성” 강의는 무료인가요?

네 — “첫 번째 버전 생성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vibe Coding 강의 전체를 잠금 해제할 수 있습니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.

“첫 번째 버전 생성”에서 뭘 배우나요?

인공지능이 작동하는 시작점을 생성하도록 하십시오. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vibe Coding을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vibe Coding은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“첫 번째 버전 생성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vibe Coding 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vibe Coding 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vibe Coding(으)로 돌아가기