0Pricing
Vibe Coding · 강의

아이디어 설명하기

막연한 아이디어를 구현 가능한 프롬프트로 바꿉니다.

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

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

Your Idea Is the Starting Point

Welcome to your first real build! In vibe coding, everything starts with one thing: your idea. You don't need to know how to write a single line of code to begin. You just need to describe what you want clearly enough that an AI can build it for you.

In this lesson, you'll learn how to turn a fuzzy thought like "I want a little app" into a sharp, buildable prompt that tools like v0, Bolt, Lovable, or Cursor can actually run with.

Most Ideas Start Fuzzy

Your brain holds ideas as feelings, not specs. You might think: "something to track my water intake" or "a fun page for my dog." That's totally normal — that's where every project begins.

The problem? If you hand an AI a fuzzy idea, you get a fuzzy result. The skill you're building is taking that fog and shaping it into a clear request. The good news: AI can even help you do that shaping.

The One-Sentence Test

A great first step is the one-sentence test: can you describe your app in a single sentence? If you can, you have a buildable idea.

Format: "A [type of app] that lets [who] do [what]." This forces you to name the thing, the user, and the action.

A web page that lets a visitor type their name and shows a personalized welcome message.

A simple app that lets me track how many glasses of water I drink today.

A fun landing page that shows photos of my dog and a button that plays a bark sound.

Name the Three Pieces

Every buildable idea has three pieces hiding inside it. Pull them out and your prompt almost writes itself:

  • What it is — a web page, a to-do app, a quiz, a calculator.
  • Who uses it — me, a visitor, a customer, a student.
  • What they do — type something, click a button, see a result, save data.

If any piece is missing, the AI will guess — and guesses are how you get something you didn't want.

From Idea to Prompt

Let's transform a fuzzy idea into a real build prompt. Watch how we add the three pieces plus a tiny bit of look-and-feel.

Fuzzy: "a tip calculator." Buildable prompt below. Notice it names the screen, the inputs, the output, and the vibe.

Build a single web page tip calculator.

The user can:
- Type the bill amount in a number field
- Pick a tip percentage (10%, 15%, 20%) with buttons
- See the tip amount and the total update instantly

Style: clean and modern, centered card, friendly colors. Keep it to one HTML file.

Start Small On Purpose

Beginners often describe a giant app: "a social network with profiles, chat, payments, and a feed." AI might attempt it, but you'll drown in complexity on your very first build.

Instead, shrink the idea to its smallest fun version. You can always ask for more later — vibe coding is all about adding piece by piece. Your goal right now is one working screen you can see and click.

Too big (for now):
"Build a full recipe social network with login, comments, and search."

Right-sized first build:
"Build a single page that shows 3 recipe cards with a photo, title, and a Like button that increases a counter."

Let AI Help You Refine the Idea

Stuck turning your idea into a prompt? Ask the AI to interview you first. This is a powerful vibe-coding move: use the AI as a thinking partner before it builds anything.

Paste a prompt like the one below into Claude, ChatGPT, or your AI editor's chat. It will ask clarifying questions, then hand you a clean build prompt.

I want to build a simple app but my idea is still fuzzy.
Idea: "something to help me remember to take breaks while working."

Before writing any code, ask me 3-5 short questions to clarify what I want.
Then write a clear, single-paragraph build prompt I can give to v0 or Bolt.

Describe the Vibe, Not Just the Function

"Vibe coding" gets its name partly from this: you're allowed to describe the feeling you want, not just the features. AI is great at translating vibes into design choices.

Words like playful, minimal, retro, professional, cozy, neon guide colors, fonts, and layout. Add one or two vibe words to every idea so your app doesn't come out bland and gray.

Build a countdown timer page.
Vibe: calm and minimal, soft pastel background, big rounded numbers, gentle.

(Compare to the same app with vibe: "retro arcade, neon green text on black, blocky pixel font." Same app, totally different feel.)

A Tiny Peek at the Output

You won't write this by hand — but it helps to see what your words become. From a prompt like "a button that greets the user by name," an AI might generate a small piece of JavaScript like this.

You describe; AI produces this. Run it to see how a one-line idea becomes a working interaction.

function greet(name) {
  const who = name && name.trim() ? name.trim() : "friend";
  return "Welcome, " + who + "! Your app is alive.";
}

console.log(greet("Maya"));
console.log(greet(""));

Write Down Your Idea Now

Before moving on, capture YOUR idea using the template. Don't overthink it — a rough first version is perfect. You'll refine it as you build.

Fill in the blanks. This becomes the seed of the app you'll create across the next three lessons.

My app is a ______ (web page / to-do app / quiz / calculator)
that lets ______ (me / a visitor)
do ______ (type, click, see, save) ______.

Vibe: ______ (minimal / playful / retro / professional)
Smallest fun version: ______

Common Beginner Traps

As you describe your idea, dodge these classic traps:

  • Too vague: "make something cool" — AI has nothing to aim at.
  • Too huge: a full startup in one prompt — overwhelming on build one.
  • No user action: describing a screen but never saying what a person does on it.
  • Skipping the vibe: you'll get a gray, generic result.

A good idea description is clear, small, action-focused, and has a vibe.

Quick Check

Which of these is the best buildable idea for your very first AI-built app?

Recap: You Have a Buildable Idea

You learned to turn a fuzzy thought into a sharp, buildable prompt. Remember the essentials:

  • Pass the one-sentence test: a [type] that lets [who] do [what].
  • Name the three pieces: what it is, who uses it, what they do.
  • Start small — the smallest fun version wins.
  • Add a vibe so it doesn't come out generic.
  • Let AI interview you when the idea is still foggy.

Next up: handing this idea to an AI builder and generating your first working version!

자주 묻는 질문

“아이디어 설명하기” 강의는 무료인가요?

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

“아이디어 설명하기”에서 뭘 배우나요?

막연한 아이디어를 구현 가능한 프롬프트로 바꿉니다. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“아이디어 설명하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 아이디어 설명하기
  2. 첫 번째 버전 생성
  3. 변경 요청하기
  4. 미리 보고 실행하기
← Vibe Coding(으)로 돌아가기