Vibe Coding · 강의

구체적으로 작성하기

모호한 프롬프트는 모호한 코드를 만듭니다. 구체적으로 작성해 보세요.

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

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

Vague In, Vague Out

AI builders like Cursor, Bolt and v0 are powerful, but they can't read your mind. When your prompt is fuzzy, the AI guesses — and its guess is rarely the app you pictured.

The fix is the single most valuable prompting skill: being specific. This lesson shows you how to turn a wish into a precise instruction.

Specific About What, Exactly?

You can add precision in four directions:

What — the exact feature or element
How it looks — colors, layout, size
How it behaves — what happens on click, on error
How much — counts, limits, ranges

Every detail you pin down is one fewer thing the AI gets wrong.

Specify the 'What'

Name the exact thing you want. 'A button' could be anything. 'A submit button labeled Save that appears under the form' leaves no doubt.

Vague:   "Add a button."

Specific: "Add a green 'Save Note' button below the textarea.
           When clicked, it adds the note to the list above."

Specify the Look

Design words like 'nice' or 'modern' mean different things to everyone. Give the AI concrete visual targets: colors, spacing, fonts, sizes.

You can even reference a known style — 'like Notion' or 'Apple-clean' — to anchor the vibe.

Vague:   "Make it look good."

Specific: "Use a clean white card on a light-gray background,
           rounded corners, soft shadow, and a single accent
           color of #7c3aed for buttons and links."

Specify the Behavior

Apps do things. Spell out what happens on each action — including the edge cases like empty input or errors. This is where vague prompts fail hardest.

Specific behavior:

"When the user clicks 'Add', take the text from the input,
 add it as a new list item, then clear the input.
 If the input is empty, do nothing and shake the input box."

Specify the Numbers

Numbers remove ambiguity instantly. How many items? What max length? What range? Give the AI real values instead of 'some' or 'a few'.

Here's a tiny function the AI might build from a numeric constraint — you can run it.

const MAX_LENGTH = 280;

function checkPost(text) {
  if (text.length > MAX_LENGTH) {
    return 'Too long by ' + (text.length - MAX_LENGTH) + ' chars';
  }
  return 'OK (' + text.length + '/' + MAX_LENGTH + ')';
}

console.log(checkPost('Hello world!'));
console.log(checkPost('x'.repeat(300)));

Replace Adjectives with Details

Watch out for slippery adjectives: fast, simple, clean, modern, professional, responsive, secure. Each one hides a decision you should make.

Whenever you write one, ask: 'what would that actually mean here?' — and write that instead.

Instead of: "Make it responsive."
Write:      "Stack the columns vertically on screens under 600px."

Instead of: "Keep it simple."
Write:      "One screen, no menu, three buttons max."

Specificity Beats Length

Being specific doesn't mean writing an essay. A short, precise prompt beats a long, fuzzy one. Pack meaning, not words.

Both prompts below are short — but only one will give you the app you imagined.

Fuzzy & short:  "Build a timer app."

Sharp & short:  "Build a 25-minute countdown timer with Start,
                 Pause and Reset buttons. Show MM:SS. Beep at zero."

Show, Don't Just Tell

When words get clumsy, switch to a concrete example. Paste a sample of the data, a row of a table, or a mini mock of the layout. Examples are the most specific thing you can give.

"Format each contact like this exactly:

   Ada Lovelace — ada@math.org — VIP

Name, then em-dash, email, em-dash, and a tag.
If there's no tag, leave off the last dash."

The Specificity Checklist

Before you hit enter, scan your prompt against this list:

Did I name the exact element/feature?
Did I give concrete colors/sizes if looks matter?
Did I describe what happens on each action and on errors?
Did I replace vague adjectives with real details?
Did I include numbers where they apply?

One pass over this list saves you three rounds of back-and-forth.

Don't Over-Specify Either

There's a balance. Pin down what you care about, and let the AI choose the rest. If you dictate every pixel, you slow yourself down and lose the AI's good instincts.

Rule of thumb: be specific about outcomes, flexible about implementation — unless implementation is the point.

Good balance:

"Make a contact form with name, email and message fields,
 and a Send button. Validate that email contains an '@'.
 You choose a tidy, accessible layout."

Quick Check

Which rewrite makes the prompt 'Make the app look modern' more specific and useful?

Recap: Get Concrete

Vague prompts give vague code. To get exactly what you pictured:

Name the exact what
Give concrete looks and numbers
Describe behavior and error cases
Trade vague adjectives for real details
Show an example when words fall short

Next: how to give the AI context about your files and goals so its code fits your project perfectly.

자주 묻는 질문

“구체적으로 작성하기” 강의는 무료인가요?

네 — “구체적으로 작성하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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(으)로 돌아가기