Vibe Coding · 강의

인공지능에 맥락 제공하기

인공지능이 프로젝트에 맞게 작업할 수 있도록 파일, 목표 및 기술 정보를 공유하십시오.

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

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

Why Context Changes Everything

The same prompt can produce wildly different code depending on what the AI knows about your project. A prompt with no context makes the AI guess your framework, your style, even your file names.

Give it context, and the code drops right into your project — same conventions, same style, no rewrites. This lesson is about feeding the AI the right background.

Three Kinds of Context

Useful context comes in three flavors:

Project context — your tech stack, framework, conventions
Code context — the actual files and snippets you're working with
Goal context — the bigger 'why' behind the task

The best prompts weave in all three so the AI builds something that truly fits.

Project Context: Your Stack

Always tell the AI what you're building with. 'React with Tailwind' produces very different code than 'plain HTML and CSS'. Naming your stack stops the AI from importing libraries you don't have.

"This project uses React, TypeScript and Tailwind CSS.
 We use functional components and hooks only — no class
 components. Build a reusable <Avatar /> component that
 shows a circular user image with a fallback initial."

Code Context: Show Your Files

The biggest upgrade to any prompt is pasting the actual code you're working with. Now the AI matches your variable names, your style, and your existing structure instead of inventing new ones.

"Here's my current cart code:

  let cart = [];
  function addItem(name, price) {
    cart.push({ name, price });
  }

Add a function removeItem(name) that removes the first
matching item, and a total() function that sums the prices."

Editors Share Context Automatically

Tools like Cursor and Claude Code can read your open files and project structure for you. In Cursor you can tag files with @filename to pull them into the prompt.

This is why AI-native editors feel smarter than a plain chatbot — they already know your codebase.

In Cursor's chat:

"Look at @cart.js and @checkout.js.
 The total in checkout doesn't match the cart.
 Find why and fix it."

Goal Context: The 'Why'

Telling the AI why you're doing something helps it make smarter choices. If it knows the app is for kids, or must work offline, or needs to be ultra-fast, it adapts the code accordingly.

"This is a flashcard app for young children, so the UI must
 be large, colorful, and tappable with no small targets.
 Build the answer-reveal button with that in mind."

Context Helps the AI Match Your Style

When you show existing code, the AI mirrors your conventions. Here's a style the AI would copy if you pasted it — notice the arrow functions and naming. Asking for 'one more like this' keeps the codebase consistent.

This snippet runs on its own so you can see the pattern in action.

const formatPrice = (n) => '$' + n.toFixed(2);
const formatPercent = (n) => n.toFixed(0) + '%';

// Ask AI: "Add formatDate in this same arrow-function style."
console.log(formatPrice(12.5));
console.log(formatPercent(0.42 * 100));

A Project Context File

Pro move: keep a short context file the AI reads every time. Cursor uses .cursorrules and Claude Code uses CLAUDE.md. Put your stack, conventions and do/don't rules there once.

Now you never have to repeat yourself in every prompt.

Example CLAUDE.md:

# Project Conventions
- Stack: Next.js + Tailwind
- Use TypeScript, no 'any'
- Components in /components, one per file
- Prefer small, pure functions
- Never add a dependency without asking

Too Much Context Is Real Too

Context is powerful but not free. Dumping ten unrelated files confuses the AI and buries the part that matters. Share what's relevant to this task, not your whole project.

Aim for: the file you're changing, the file it talks to, and a one-line description of the stack.

Context Stops Hallucinations

When the AI lacks context, it sometimes invents function names, files or APIs that don't exist — called a hallucination. Giving real code grounds it in reality.

If the AI keeps referencing things you never wrote, that's a sign: it needs more context, not a better model.

Symptom of missing context:

  AI: "Just call your existing saveUser() helper."
  You: "...I don't have a saveUser() helper."

Fix: paste the real file so the AI sees what exists.

A Fully-Contextualized Prompt

Here's everything combined: stack, real code, and the goal. This is the kind of prompt that gets production-ready code that fits on the first try.

"Stack: plain HTML/CSS/JS, single index.html. (PROJECT)

Here's my current toggle code:
  const btn = document.querySelector('#theme');
  btn.onclick = () => document.body.classList.toggle('dark'); (CODE)

Goal: I want the theme choice to persist after refresh, since
 users hate re-toggling every visit. Add localStorage. (GOAL)"

Quick Check

The AI keeps suggesting you call functions and files that don't exist in your project. What's the most likely cause and fix?

Recap: Ground the AI in Your World

Context turns generic code into code that fits. Always consider sharing:

Project context — your stack and conventions
Code context — the real files (tag them in Cursor/Claude Code)
Goal context — the 'why' behind the task

Keep a CLAUDE.md or .cursorrules so you don't repeat yourself, and share only what's relevant. Next: how to iterate — refining a prompt step by step instead of starting over.

자주 묻는 질문

“인공지능에 맥락 제공하기” 강의는 무료인가요?

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

“인공지능에 맥락 제공하기”에서 뭘 배우나요?

인공지능이 프로젝트에 맞게 작업할 수 있도록 파일, 목표 및 기술 정보를 공유하십시오. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“인공지능에 맥락 제공하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vibe Coding(으)로 돌아가기