Vibe Coding · 강의

인공지능과 함께 앱 계획하기

아이디어를 기능과 계획으로 구체화합니다.

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

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

From Idea to a Real App

Welcome to the big one: building a full-stack app entirely by talking to AI. Full-stack means three layers working together — the frontend (what users see), the backend (the logic on a server), and a database (where data lives).

Before you generate a single line of code, you plan. A clear plan is the difference between a clean build and a tangled mess. The good news: AI is an excellent planning partner. In this lesson you'll turn a one-sentence idea into a concrete feature list and a build plan.

Start With One Sentence

Every app starts as a fuzzy idea. Your first job is to compress it into one clear sentence that names who it's for and what it does.

Don't worry about being perfect. You'll refine it with AI. A weak idea sentence is "a cool app for tasks." A strong one is specific about the user and the value.

Here is my app idea in one sentence:

"A simple web app where freelancers can log their work hours per client and see a weekly total."

Act as a product mentor. Ask me 3 sharp questions that would change how we build this, then restate my idea as a crisp one-liner.

Let AI Find the Core Features

Once your idea is clear, ask AI to break it into features. A feature is one thing a user can do: "add a time entry," "view weekly total," "create a client."

The trap here is asking for everything. Tell the AI to separate the must-haves (your MVP) from the nice-to-haves. You build the must-haves first.

Based on this app idea:
"A web app where freelancers log work hours per client and see a weekly total."

List the core features as short user actions. Split them into two groups:
1. MUST-HAVE for a first working version (MVP)
2. NICE-TO-HAVE for later

Keep the MVP list to 5 features or fewer.

Sketch the Data Model

Apps store information, and how you organize that information is the data model. Think in terms of things (entities) and the fields they have.

For our timer app: a Client has a name. A TimeEntry has hours, a date, and belongs to a client. AI can propose this for you so the database design isn't guesswork.

Propose a simple data model for this app:
"Freelancers log hours per client and see a weekly total."

For each entity, give me:
- the entity name
- its fields and their types
- how entities relate to each other (one-to-many, etc.)

Keep it minimal — only what the MVP needs.

Map the Screens

Next, list the screens (pages) a user moves through. Most small apps need only a handful: a main dashboard, a form to add data, maybe a settings page.

Listing screens early helps AI build navigation that makes sense and keeps you from inventing pages you don't need.

For the freelancer hours app, list the screens a user needs.

For each screen give:
- its name
- what the user sees there
- what actions they can take

Then describe how a user navigates between them. Keep it to 3-4 screens for the MVP.

Choose a Tech Stack (With AI's Help)

The tech stack is the set of tools your app is built with. As a beginner, you don't need to memorize options — ask AI to recommend a beginner-friendly, well-supported stack and explain why.

For vibe coding, a common, AI-friendly stack is Next.js (frontend + backend in one) with a hosted database. Let the AI justify its pick so you understand the choice.

I'm a beginner building the freelancer hours app by prompting AI. Recommend ONE simple, modern tech stack for the frontend, backend, and database.

For each choice:
- name the tool
- one sentence on why it's beginner-friendly
- note if it deploys easily to Vercel

Favor tools that AI editors like Cursor and v0 support well.

Turn the Plan Into a Spec File

A pro move: have AI write your whole plan into a single spec document (often a PROJECT.md or spec.md file). This becomes the shared memory you paste into any AI tool so it builds the right thing.

Tools like Cursor and Claude Code read project files automatically, so keeping a spec in your repo keeps the AI aligned across the whole build.

Combine everything we discussed into a single PROJECT.md spec for the freelancer hours app. Include sections:

## Idea
## MVP Features
## Data Model
## Screens
## Tech Stack
## Out of Scope (for now)

Write it in clean Markdown so I can save it in my repo and feed it to any AI tool.

Order the Build Steps

You can't build everything at once. Ask AI for a build order — the sequence of steps that gets you to a working app fastest, with something runnable at each stage.

A good order usually goes: data model first, then a backend that reads/writes it, then a frontend that talks to the backend, then login last. Each step should leave you with something you can actually run.

Using our PROJECT.md, give me an ordered, step-by-step build plan for the freelancer hours app.

Rules:
- Each step should end with something I can run and see working.
- Start from the database/data model and build outward.
- Put authentication near the end.
- Number the steps so I can tackle them one prompt at a time.

A Tiny Taste of the Data

Before any real database, you can sketch your data as plain JavaScript objects. This makes the data model feel concrete. Here's how our timer data might look as an array — exactly the shape a frontend would render.

Run it to see a weekly total computed from sample entries. This is the kind of logic AI will scale up into your real app.

const entries = [
  { client: "Acme", hours: 3, date: "2026-06-01" },
  { client: "Acme", hours: 2, date: "2026-06-02" },
  { client: "Globex", hours: 4, date: "2026-06-03" }
];

const total = entries.reduce((sum, e) => sum + e.hours, 0);
console.log("This week:", total, "hours");

const byClient = {};
for (const e of entries) {
  byClient[e.client] = (byClient[e.client] || 0) + e.hours;
}
console.log("Per client:", byClient);

Keep the Plan, Stay Flexible

A plan is a starting map, not a cage. As you build, you'll learn things — a feature is harder than expected, or a screen turns out unnecessary. That's normal.

When the plan changes, update your PROJECT.md and tell the AI. Keeping the spec current means every future prompt stays grounded in reality instead of an outdated dream.

We finished step 2 and decided to drop the 'export to CSV' feature for now and add a 'notes' field to each time entry.

Update the relevant sections of PROJECT.md to reflect these two changes, and show me only the sections that changed.

What a Strong Plan Gives You

With a sentence-sized idea, an MVP feature list, a data model, a screen map, a stack, and an ordered build plan saved in a spec file, you're ready to build with confidence.

Every prompt from here can reference this plan, so the AI builds your app — not a generic one. Planning feels slow, but it's the fastest path to a real, working full-stack app.

Quick Check

Let's lock in the planning workflow.

Recap: Plan First, Build Smart

You learned to turn a fuzzy idea into a buildable plan with AI:

Compress the idea into one clear sentence
Split features into MVP vs. later
Sketch a minimal data model and screen map
Pick a beginner-friendly tech stack
Save it all in a PROJECT.md spec and get an ordered build plan

Next up: wiring the frontend and backend together so your screens can actually talk to a server.

자주 묻는 질문

“인공지능과 함께 앱 계획하기” 강의는 무료인가요?

네 — “인공지능과 함께 앱 계획하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vibe Coding(으)로 돌아가기