5강 · 바이브 코딩 찍먹 (v0)

바이브 코딩이란?

코딩을 몰라도, 말로 프로그램을 만든다.

• "이런 거 만들어줘" → AI가 뚝딱
• "여기 색깔 바꿔줘" → AI가 수정
• "버튼 추가해줘" → AI가 추가

이제 소상공인도 내 가게만을 위한 홈페이지를 직접 만들 수 있습니다. 외주를 맡기면 200만500만원, 제작에 24주. 바이브 코딩은 오늘 강의 시간 안에 만들고 인터넷에 띄울 수 있습니다.

카카오톡 할 수 있으면 바이브 코딩 할 수 있습니다.

왜 v0 인가?

이번 강의 메인 도구는 v0 (브이제로) — 홈페이지·웹앱을 만드는 Vercel의 대표 회사가 만든 AI 빌더입니다. (v0.app)

다른 도구(예: Google AI Studio)와 달리 v0는 "만든 걸 바로 인터넷에 올리는 것" 까지 한 화면에서 끝납니다. 소상공인에게는 이게 핵심입니다 — 만들고 끝이 아니라, 손님이 볼 수 있는 주소가 나와야 하니까요.

v0 = 말로 만들고 → 바로 인터넷에 올린다.

작업 6단계 플로우

홈페이지를 한 문장으로 "뚝딱" 만들 수도 있지만, 좋은 결과는 순서에서 나옵니다. 이 6단계대로만 하면 누구나 완성도 높은 페이지를 만들 수 있습니다.

⚠️ DB·로그인(인증)은 범위가 넓어 본 강의에서 직접 다루지 않습니다. 우선 "보여주는 홈페이지"를 완성·배포하는 데 집중하고, 예약 DB·회원 로그인 같은 기능은 심화 과정에서.

v0 풀 가이드 — 슬라이드 10장

위 6단계를 슬라이드로 정리한 자료입니다. (강의 중 함께 봅니다)

시작하기: 접속·로그인·크레딧

1. v0.app 접속
2. 로그인 — GitHub·Google·Vercel 계정 중 하나로 (이메일도 가능)
3. 메인 화면 — 가운데 "What do you want to create?" + 입력창 "Ask v0 to build…"
4. 모델 선택 — 입력창 아래 모델 표시(예: v0 Max). 기본값 그대로 두면 됩니다
5. 크레딧 확인 — 우측 상단에 보유 크레딧이 숫자로 표시됩니다

크레딧이란? v0는 사용량만큼 크레딧을 소모합니다(생성·수정 1회마다 조금씩). 무료 플랜에도 매월 일정량의 크레딧이 주어져 입문·연습에는 충분합니다. 더 많이 쓰면 유료 플랜으로 올리면 됩니다.

※ 정확한 무료 크레딧·요금은 시점에 따라 바뀝니다 — v0.app 우측 상단 크레딧 표시와 요금 안내에서 확인하세요. 실전 팁: 강의 전에 미리 로그인해서 크레딧 잔량을 확인해두세요.

첫 홈페이지 만들기 (한국어 한 문장)

입력창에 한국어로 우리 가게를 설명하면 됩니다. 좋은 첫 주문 예시:

부산 해운대 '온기식탁' 카페 홈페이지를 만들어줘.
- 상단: 가게 이름, 한 줄 소개, "주문하기" 버튼
- 메뉴 섹션: 시그니처 라떼 6,500원 / 흑임자 라떼 6,800원 / 휘낭시에 4,500원
- 위치 섹션: 지도, 영업시간 매일 11시~22시
- 하단: 인스타그램 링크, 전화번호
- 따뜻한 우드톤, 모바일에서도 잘 보이게

엔터를 누르면 v0가 화면을 만들고 오른쪽에 미리보기가 뜹니다. 처음부터 완벽하지 않아도 됩니다 — 다음 단계에서 대화로 고칩니다.

한 문장이 막막하면: "우리 가게가 뭐 하는 곳인지 + 어떤 정보가 들어가야 하는지"만 적어도 v0가 알아서 구성합니다.

대화로 수정하기 — 프롬프트 5원칙

만든 뒤에는 "여기 이렇게 바꿔줘" 라고 계속 대화하면 됩니다.

v0는 요리사, 내 주문은 레시피. 구체적으로 주문할수록 원하는 결과가 나옵니다.

이미지·URL 레퍼런스로 디자인 맞추기

말로만 설명하면 한계가 있죠. v0는 이미지·주소를 첨부할 수 있습니다.

방법 1 — 이미지 첨부 (입력창의 ＋ 버튼): 마음에 드는 홈페이지 스크린샷이나 손그림을 올리고 "이 느낌으로 만들어줘"

방법 2 — URL 참고: "이 사이트(주소)처럼 깔끔하게 만들어줘" → v0가 구조·스타일을 참고

방법 3 — 2강 결과물 재활용: 2강에서 만든 제품 사진·로고·카드뉴스를 첨부하면 그 이미지를 그대로 홈페이지에 넣어줍니다.

말 + 레퍼런스 = 내 머릿속 그대로.

진짜 인터넷에 올리기 — 배포(Publish)

소상공인에게 가장 중요한 단계 — 만든 홈페이지를 손님이 볼 수 있는 주소로 만듭니다.

1. 미리보기가 마음에 들면 우측 상단 Publish(또는 Deploy) 버튼
2. 잠시 뒤 ...vercel.app 형태의 진짜 인터넷 주소가 생성됩니다
3. 이 주소를 인스타·네이버 플레이스·카카오 채널에 그대로 붙여넣기
4. (선택) 내 도메인 연결 — 우리가게.com 같은 주소를 사면 연결 가능

수정한 뒤 다시 Publish하면 같은 주소에 바로 반영됩니다. 서버·호스팅 지식이 전혀 필요 없습니다.

외주는 "완성본 파일"을 주지만, v0는 "살아있는 주소"를 줍니다. 오늘 만들고 오늘 손님에게 보낼 수 있습니다.

(심화) 프로젝트·디자인시스템·챗봇

여유가 되면 알아두면 좋은 것들:

• Projects — 가게별·작업별로 채팅을 폴더처럼 정리
• Design Systems — 우리 브랜드 색·폰트를 등록해두면 모든 페이지가 통일된 톤으로
• Templates — 이미 만들어진 홈페이지 틀에서 시작해 내용만 바꾸기
• 챗봇 붙이기 — "고객 상담 챗봇 추가해줘"로 24시간 응대 기능 추가 (외부 AI 연결 시 API 키 필요 — 심화 과정에서)

처음엔 홈페이지 1개 만들고 배포까지만 해도 충분합니다. 나머지는 천천히.

실습 시간! 40분간 직접 만들기

v0.app 접속 → 로그인 → 입력창에 우리 가게를 설명하세요.

만들어볼 것 (택 1):

• 우리 가게 홈페이지 (메뉴 + 위치 + 연락처)
• 이벤트·신메뉴 안내 한 페이지
• 예약·문의 폼이 있는 랜딩 페이지
• 자유 주제

목표: 만든 페이지를 Publish해서 내 폰으로 주소 열어보기.

막히면 손 들어주세요. 돌아다니면서 도와드립니다!

실습 힌트

잘 안 될 때 팁:

틀려도 괜찮습니다. v0가 다시 고쳐줍니다!

4시간 전체 정리

[4시간 전] AI 뭐 어떻게 쓰지? → [지금] 사진·영상·홍보물·홈페이지까지 직접!

감사합니다

AI로 소상공인의 성공을 만듭니다.

김다윤 · (주)바이론 대표 · 경영지도사(마케팅) · SW 개발자

founder@viron.ai.kr