0Pricing
Vibe Coding · 강의

미리 보고 실행하기

앱을 실제로 실행해 보고 공유합니다.

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

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

See It Come Alive

You described an idea, generated a first version, and tweaked it to feel right. Now for the most satisfying part: previewing and running your app — seeing it work live, and sharing it so other people can use it too.

This lesson closes the loop on your very first vibe-coded project. By the end, you'll have a real, clickable app and a link you can send to a friend.

What 'Preview' Means

A preview is the live, running version of your app — not the code, but the actual thing you can click and use. Most AI builders show a preview panel right beside the chat.

In Bolt, Lovable, v0, and Replit, you describe a change on one side and watch the preview update on the other. Seeing is how you judge whether it's really done.

Click Everything

Before you call your app finished, actually use it. Click every button, type in every field, push it a little. This is your first taste of testing — no fancy tools needed, just curiosity.

Ask yourself: does each thing do what I expect? If something feels off, you already know how to fix it — just chat the change to the AI.

Quick self-test for the water tracker:
- Click +1 Glass several times. Does the counter go up?
- Click Reset. Does it go back to 0?
- Reach 8 glasses. Does the celebration message appear?
- Resize the window. Does it still look okay?

Test Like a Real User

Try the things a real person might do — including the weird stuff. Real users click fast, leave fields blank, and tap twice. A tiny bit of poking now saves embarrassment later.

Run this snippet: it's the kind of "edge case" check that catches a counter bug before your friend does.

let count = 0;
function addGlass() { count += 1; return count; }
function reset() { count = 0; return count; }

// A real user mashing buttons:
addGlass(); addGlass(); addGlass();
console.log("After 3 taps:", count);
console.log("After reset:", reset());
console.log("Reset again when already 0:", reset());

Ask AI to Test It Too

You can even ask the AI to think of test cases for you. It's great at spotting situations you might miss.

This is a smart habit: let the AI play devil's advocate against its own app before real users do.

List 5 things a user might do that could break my water tracker app,
like clicking too fast, very large numbers, or resizing the window.
For each one, tell me how to handle it gracefully, then make those fixes.

From Preview to Live URL

A preview lives inside your builder. To let others use your app, you publish it to a live URL — a web address anyone can open.

Most builders make this one click: a Deploy, Publish, or Share button. Behind the scenes they host it on services like Vercel or Netlify. You'll go deeper on deploying later — for now, one click is enough.

Publish in One Click

The flow is roughly the same everywhere: find the publish button, confirm, and get a link. In tools like Bolt or Lovable you can even ask in chat.

That link is shareable — text it, post it, put it in your bio. Your idea is now a real thing on the internet.

Steps (in most AI builders):
1. Look for a "Publish", "Deploy", or "Share" button (top-right).
2. Click it and confirm.
3. Copy the live URL it gives you (e.g. https://your-app.vercel.app).
4. Open the link yourself first to make sure it works.
5. Share it!

Check the Live Version

Don't assume the live version matches the preview. Open the real URL yourself, ideally on your phone too, and re-run your quick test.

Occasionally something works in preview but not live. If so, you know the move: tell the AI exactly what's different and ask for a fix.

I published the app and opened the live link.
In preview the +1 button worked, but on the live URL nothing happens when I tap it.
Please find why it breaks when deployed and fix it. Keep all features the same.

Share and Get Feedback

The best part of shipping: people can react to it. Send your link to a friend and ask one simple question — "what would make this better?"

Real feedback beats guessing. And every suggestion is just another change to chat to the AI. Your app gets better with each round.

You Just Shipped Something

Pause and notice what happened: you went from a one-sentence idea to a live app on the internet — without hand-writing code. That's the entire promise of vibe coding, and you just did it.

This loop — describe, generate, tweak, preview, ship — is the same one used to build serious products. You'll repeat it bigger and bolder throughout this track.

Keep Improving It

Shipping isn't the end — it's a checkpoint. Your app can keep growing. Ideas for round two:

  • Add a small new feature ("remember my count after I refresh").
  • Improve the design with a fresh vibe.
  • Fix anything a friend pointed out.

Each improvement is just another chat. Save a good version first, then experiment freely.

Add one new feature: remember the glass count even after the page refreshes,
so it isn't lost. Use simple browser storage.
Keep the design and all current features exactly the same.

Quick Check

You clicked Publish and got a live URL. What's the smartest thing to do right before sharing it widely?

Recap: You Shipped Your First App!

Congratulations — you completed the full vibe-coding loop and put a real app online. Remember:

  • The preview is your live app — click everything and test it.
  • Test like a real user, and let the AI suggest edge cases too.
  • Publish to a live URL with one click (Vercel/Netlify under the hood).
  • Always check the live version before sharing.
  • Use feedback to keep improving — every fix is just another chat.

You turned a sentence into a shipped app. That's vibe coding. Onward to bigger builds!

자주 묻는 질문

“미리 보고 실행하기” 강의는 무료인가요?

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

“미리 보고 실행하기”에서 뭘 배우나요?

앱을 실제로 실행해 보고 공유합니다. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“미리 보고 실행하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 아이디어 설명하기
  2. 첫 번째 버전 생성
  3. 변경 요청하기
  4. 미리 보고 실행하기
← Vibe Coding(으)로 돌아가기