Vibe Coding · 강의

앱 빌더: v0, Bolt와 Lovable

프롬프트를 브라우저에서 작동하는 앱으로 바꿉니다.

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

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

From Prompt to App in the Browser

What if you could type a sentence and watch a working app appear — no install, no setup? That's what app builders do. They run in your browser, take a prompt, and generate a live app you can see and click immediately.

The big three for vibe coding are v0, Bolt, and Lovable. They're the fastest way to go from idea to something real.

v0: UI from a Sentence

v0 (by Vercel) specializes in beautiful user interfaces. Describe a screen and it generates clean, modern UI components you can preview and tweak.

It's a favorite for landing pages, dashboards, and forms. You get polished design quickly, then refine it with follow-up prompts.

In v0 you might type:

"A pricing page with three plans (Free, Pro, Team), each in a card with a title, price, feature list, and a Sign Up button. Modern, clean, with a purple accent color."

Bolt: Full Apps That Run

Bolt (by StackBlitz) goes further — it builds a whole running app in the browser, including the logic, and shows it live with a built-in preview.

It can install packages, run the dev server, and even let you deploy. Great when you want a functional prototype, not just a pretty screen.

In Bolt you might type:

"Build a tip calculator: enter a bill amount and tip percentage, and show the tip and total. Make it look friendly and mobile-first."

Lovable: Apps with a Backend

Lovable aims at full products. It builds the frontend and can connect a database and login, so you get an app that stores real data.

Describe a small product and Lovable scaffolds the pieces — pages, data, and accounts — that you'd otherwise wire together by hand.

In Lovable you might type:

"A simple recipe-saving app. Users can sign up, add recipes with a title and ingredients, and see their saved recipes. Store the data so it persists."

The Live Preview Loop

The superpower of these tools is the instant preview. You prompt, the app updates on the right, and you react to what you see.

This visual feedback loop is pure vibe coding: you're steering by looking, not by reading code. See something off? Just say what to change.

Follow-up prompts you'd type after seeing the preview:

"Make the header bigger and center it."
"Change the button color to green."
"Add a footer with a copyright line."

Iterate by Conversation

You don't restart — you refine. Each follow-up prompt nudges the app closer to what you want. The tool remembers the project, so small requests build on each other.

Think of it as a conversation with a designer-developer who edits live as you talk.

"Looks great. Now add a second page that lists all submitted entries, and put a link to it in the header."

What They Generate

Under the hood these tools usually output modern web code — often React and Tailwind CSS. You don't need to understand all of it, but here's a tiny piece of plain JavaScript like the logic they'd create for a tip calculator.

function tipCalculator(bill, tipPercent) {
  const tip = bill * (tipPercent / 100);
  const total = bill + tip;
  return { tip: tip.toFixed(2), total: total.toFixed(2) };
}

console.log(tipCalculator(50, 20));

Exporting and Owning Your Code

A common worry: 'Am I locked in?' Mostly no. These tools let you export or sync your project to GitHub, so you own the code and can move it into Cursor or Claude Code later.

A great workflow: prototype fast in Bolt or Lovable, then export to an AI editor for deeper, precise work.

v0 vs Bolt vs Lovable

Quick mental model for when to grab which:

v0 — gorgeous UI and components; best for screens and design.
Bolt — full running frontend apps and prototypes; great for logic + preview.
Lovable — full products with data and login; best when you need a backend.

For a quick landing page, reach for v0. For a working mini-product, reach for Lovable or Bolt.

Don't Forget Replit

Worth knowing: Replit is a browser coding environment with its own AI Agent. It builds, runs, and hosts apps entirely online — no setup on your computer.

It's a strong all-rounder, especially if you want one place to build, run, and deploy without installing anything locally.

Try One Right Now

The best way to learn these is to use one. Open v0, Bolt, or Lovable and paste a single clear prompt. Watch it build, then send three follow-ups to make it yours.

Here's a starter you can drop into any of them.

"Build a simple 'daily quote' web page. Show one inspirational quote in large text, and a 'New Quote' button that shows a different quote from a list of five. Center everything and use a calm color palette."

Quick Check

You want a working mini-product with sign-up and a database that stores user data. Which tool is the most natural fit?

Recap: Prompt-to-App Builders

App builders are the fastest path from idea to live app:

v0 for beautiful UI, Bolt for running apps, Lovable for full products with data.
Replit lets you build, run, and host entirely online.
Use the live preview loop: prompt, look, refine.
Export to GitHub or an AI editor when you outgrow the browser.

Next: how to choose the right tool for any job.

자주 묻는 질문

“앱 빌더: v0, Bolt와 Lovable” 강의는 무료인가요?

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

“앱 빌더: v0, Bolt와 Lovable”에서 뭘 배우나요?

프롬프트를 브라우저에서 작동하는 앱으로 바꿉니다. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“앱 빌더: v0, Bolt와 Lovable” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vibe Coding(으)로 돌아가기