Vibe Coding · 강의

도우미에서 에이전트로

인공지능이 단순히 답하는 것을 넘어 행동할 때를 알아보십시오.

레슨 1/413개 단계

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

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

When AI Stops Talking and Starts Doing

So far you've used AI like a chat partner: you ask, it answers, you copy the code. That's an assistant.

An agent is different. You give it a goal, and it acts on its own: it reads files, runs commands, checks results, and keeps going until the job is done. You're no longer the one pasting everything.

This lesson is about that leap: from AI that answers to AI that does the work.

Assistant vs Agent

The simplest way to feel the difference:

  • Assistant: "Here's the code for a login form" — you take it from there.
  • Agent: "I created login.html, wired up the form, ran the app, and it works." — it did the steps.

Tools like Claude Code and Cursor's agent mode are agentic: they touch your real project files, not just a chat box.

The Agent Loop

Under the hood, an agent runs a simple loop: think → act → observe → repeat.

It plans a step, takes an action (edit a file, run a command), looks at what happened, then decides the next step. It keeps looping until your goal is met or it gets stuck.

Here's that loop sketched as JavaScript pseudo-code so you can picture it:

function agentLoop(goal) {
  let done = false;
  while (!done) {
    const plan = think(goal);   // decide next step
    const result = act(plan);   // edit file / run command
    done = check(result, goal); // is the goal met?
  }
  return "Goal reached!";
}
console.log("An agent repeats: think, act, observe.");

What a Goal Looks Like

You don't micromanage an agent. You hand it an outcome and let it figure out the steps.

Compare a single instruction to an agent goal: the goal describes the finished result, not each keystroke.

Goal for an agent (paste into Claude Code or Cursor agent mode):

"Add a dark mode toggle to my website. Create a button in the top
right, switch the page between light and dark colors when clicked,
and remember the choice when the user comes back. Test it works
before you finish."

Agents Use Your Real Project

The big shift: an agent works inside your actual files. It can open index.html, find your CSS, add new code, and save — all without you copy-pasting.

That's powerful and a little scary. It means the agent can change a lot at once, so you'll learn to review what it did (and you'll cover safety in the last lesson of this course).

Agents Can Run Things

Beyond editing files, agents can run commands: start your app, install a package, or run tests. Then they read the output and react.

If a command fails, a good agent notices the error and fixes it — no need for you to copy the red text into chat. This is why agents feel like a teammate, not a tool.

Example agent goal that involves running things:

"Install the dependencies for this project, start the dev server,
open the homepage, and tell me if there are any errors in the
console. If there are, fix them and run it again."

Watching an Agent Work

When you run an agent in Claude Code or Cursor, you'll see it narrate its steps: "Reading file... editing... running... done."

This is your window into its thinking. Read it! If it heads in the wrong direction, you can stop it and steer. You stay the pilot; the agent just flies the plane for the boring parts.

Approve Before It Acts

Most agent tools ask for permission before doing something risky — like deleting files or running an unknown command. They show you the action and wait for a yes.

Treat every approval as a real decision. "Allow once" for normal edits is fine; pause and read carefully before approving anything that removes or overwrites a lot.

Good Tasks for an Agent

Agents shine on tasks with many small, mechanical steps:

  • Renaming something across many files
  • Adding a feature that touches several places
  • Fixing a bug, running the app, confirming it's gone
  • Setting up a new project from scratch

For a one-line question ("what does this function do?"), a plain assistant chat is faster. Match the mode to the job.

You Set the Goal, AI Walks the Path

Here's the mindset to carry forward: you own the goal and the judgment; the agent owns the legwork.

You decide what success looks like and check the result. The agent handles the how — the dozens of little steps in between. That partnership is the heart of vibe coding at the next level.

Try this framing for any agent request:

GOAL:    what the finished result should be
CONTEXT: which project / files it should work in
DONE WHEN: how the agent knows it succeeded

Fill those three in and you've written a great agent task.

Your First Agent Mindset

Before the quiz, picture it: instead of asking "how do I add a contact form?" and copying code, you say "Add a working contact form to my site and confirm it submits."

Same idea, totally different workflow. The agent reads your project, builds it, tests it, and reports back. You review and approve. That's agentic building.

Quick Check

Let's make sure the assistant-vs-agent difference clicked.

Recap: From Answering to Acting

You've made the leap in mindset:

  • An assistant answers; an agent acts on a goal.
  • Agents run a think → act → observe loop on your real files.
  • You hand over a goal (and a "done when"), not every step.
  • Watch and approve — you stay the pilot.
  • Tools like Claude Code and Cursor agent mode make this real.

Next up: giving your agent tools so it can reach the web, files, and code.

무료로 시작

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개 중 1번째 강의입니다.

“도우미에서 에이전트로” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 도우미에서 에이전트로
  2. 에이전트에 도구 제공하기
  3. 다단계 작업 자동화
  4. 에이전트 안전하게 유지하기
← Vibe Coding(으)로 돌아가기