5강 · 바이브 코딩 (v0로 홈페이지 만들기)

코딩을 한 줄도 몰라도, 말로 홈페이지를 만들고 인터넷에 띄웁니다. 외주는 200500만원·24주. 우리는 오늘 강의 시간 안에 만들고 배포까지 합니다. 카카오톡 할 수 있으면 바이브 코딩 할 수 있습니다.

v0가 뭐예요?

v0(브이제로) 는 홈페이지·웹앱을 만들어주는 Vercel의 AI 빌더입니다. (v0.app)

내부적으로는 Next.js + Tailwind CSS + shadcn/ui라는 검증된 기술로 만들어집니다. 우리는 이걸 몰라도 되지만, 첫 주문에 "Pretendard 폰트, 한국어로" 라고만 적어주면 결과가 훨씬 좋아집니다.

접속·로그인·크레딧

1. v0.app 접속 → GitHub·Google·Vercel·이메일 중 하나로 로그인
2. 메인 화면 가운데 입력창 "Ask v0 to build…" 에 한국어로 입력
3. 크레딧 — v0는 생성·수정마다 크레딧을 조금씩 씁니다. 무료 플랜은 매월 일정 크레딧($5 상당, 미사용분 65일 후 만료) 으로 입문·연습에 충분합니다.

실전 팁: 강의 전에 미리 로그인해 크레딧 잔량(우측 상단)을 확인해두세요.

💳 요금제 한눈에 (2026.6 기준)

• 무료로 시작 → 크레딧이 부족하면 유료. 현재 v0는 Premium($20)을 폐지 중이라 신규 가입자는 선택이 안 되고, 유료는 보통 Team($30/인) 부터 보입니다. (Premium이 꼭 필요하면 v0 지원에 문의)
• 월 크레딧은 이월되되 65일 후 만료, 생성·수정마다 토큰만큼 차감됩니다.
• ⚠️ 요금·정책은 v0 사정으로 자주 바뀌니 v0 공식 요금 문서에서 최신 확인하세요.

화면 구성 — 위치만 먼저 익히기

처음엔 입력창 + Preview + Publish 이 3개만 알면 됩니다. 나머지는 필요할 때 자연스럽게 익혀집니다.

바이브 코딩이란?

코딩을 몰라도, 말로 프로그램을 만드는 것. AI 연구자 안드레이 카파시(2025)가 이름 붙인 방식으로, 문법을 직접 쓰는 대신 만들고 싶은 것을 자연어로 설명하면 AI가 코드를 생성·수정합니다.

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

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

시작 전 꼭 알아둘 5가지

⚠️ DB·로그인(인증)·결제는 범위가 넓어 본 강의에서 직접 다루지 않습니다. 먼저 한 페이지를 완성·배포하는 경험이 가장 중요합니다.

먼저, 레퍼런스부터 찾으세요

막연히 "예쁘게 만들어줘"는 막연한 결과를 부릅니다. 잘 된 사이트를 먼저 모으는 게 8할입니다.

레퍼런스 사이트 추천:

🔎 용도별로 더 많은 레퍼런스(색상·폰트·한국 사이트 포함)는 레퍼런스 찾기 페이지에 정리해뒀습니다.

v0에 전달하는 법 (이미지 또는 URL):

• 스크린샷이 URL보다 정확합니다 — v0는 그 사이트를 실제로 크롤링하지 않고 이미지를 "분석"해 비슷하게 만듭니다.
• 전달 방법 3가지: ＋ 아이콘으로 업로드 / 채팅창에 드래그앤드롭 / 복사 후 Ctrl+V.
• 2~4장으로 역할 분담: 레이아웃용 풀페이지 1장 + 히어로 클로즈업 1장 + 컬러/타이포 무드 1장. "1번 레이아웃 따라가고, 색은 2번처럼"이라고 명시.
• 더 정확하게: Figma 링크 첨부(색·간격까지 추출).

완성까지, 이 순서대로

한 문장으로 "뚝딱"도 되지만, 좋은 결과는 순서에서 나옵니다. 아래 8단계대로만 하면 누구나 완성도 높은 페이지를 만들고 배포까지 끝낼 수 있습니다.

① 디자인 — 첫 프롬프트로 골격 만들기

원칙: 단순하게 시작 → 계획 → 맥락 제공 → 구체화 → 반복. 첫 주문에 기술스택·언어·폰트를 적어주면 영문 더미가 안 나옵니다.

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

✗ "홈페이지 만들어줘" → ✓ 위처럼 무엇을·어떤 정보가 들어갈지. 처음부터 완벽하지 않아도 됩니다.

② 이미지 채팅 전달 — 레퍼런스·내 자산 넣기

• ＋ 아이콘 / 드래그앤드롭 / Ctrl+V 로 이미지 업로드 후 "이 레이아웃으로 만들어줘"
• 2강에서 만든 제품 사진·로고·카드뉴스를 첨부하면 그대로 홈페이지에 넣어줍니다.
• 고해상도(가로 1024px+)일수록 정확합니다.

③ 반응형 & 폰트 — 모바일 + 한글 웹폰트

• 반응형: 첫 프롬프트에 "모바일 우선 반응형" 명시. 세부 조정은 디자인 모드(Alt+D) → 요소 클릭 → 패널에서 글꼴·크기·여백·색 조정 → Apply(새 버전으로 반영).
• 한글 웹폰트(눈누): 눈누(noonnu.cc)에서 무료 상업용 폰트 선택 → "웹폰트로 사용"의 @font-face(CDN) 코드 복사 → v0에 "이 폰트를 globals.css에 추가하고 본문에 적용해줘".

/* 가장 안정적: Pretendard 공식 CDN */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
body { font-family: 'Pretendard', sans-serif; }

⚠️ "상업용 무료"라도 폰트 재배포·로고(BI/CI) 사용은 제한되는 경우가 있어요. 각 폰트 페이지 라이선스 표를 확인하세요. (가장 자유로운 건 OFL 라이선스 — Pretendard 등)

④ 애니메이션 — 살아있는 디테일

방법 2가지:

1. 자연어로 요청: "히어로 제목에 글자가 흐릿하게 나타났다 또렷해지는 등장 효과 넣어줘"
2. 검증된 컴포넌트 붙여넣기(권장): React Bits(reactbits.dev)에서 코드를 복사해 v0에 붙여넣기.

과한 모션은 오히려 산만합니다. 히어로·CTA 등 포인트에만, "전 섹션 동일 스타일 유지"라고 함께 적어주세요.

⑤ 배포 — 진짜 인터넷에 올리기

1. 미리보기가 마음에 들면 우측 상단 Publish → Publish to Production
2. 잠시 뒤 ...vercel.app 진짜 인터넷 주소가 생성됩니다
3. 이 주소를 인스타·네이버 플레이스·카카오 채널에 붙여넣기
4. 수정 후 다시 Publish → Publish Changes 하면 같은 주소에 즉시 반영

무료 플랜은 우하단에 "Built with v0" 배지가 기본 표시됩니다(유료 시 제거). 프로젝트당 운영 주소는 1개입니다.

⑥ 커스텀 도메인 — 내 주소 연결 (가비아 DNS)

우리가게.com 같은 내 도메인을 연결하려면 (배포가 먼저 되어 있어야 함):

1. v0: Publish → Customize Domain(또는 프로젝트 메뉴 → Domains → Add) → 내 도메인 입력 → 화면에 뜨는 A 레코드 IP와 CNAME 값을 확인(창 유지)
2. 가비아: My가비아 → 도메인 관리 → DNS 정보 → DNS 설정 → 레코드 수정에서 입력:

1. 저장 후 전파 대기(보통 수분수시간, 최대 2448h). v0/Vercel에서 Valid로 바뀌면 완료. SSL(https)은 자동 발급 — 가비아에서 따로 안 해도 됩니다.

⚠️ 실제 입력값은 v0/Vercel 화면에 표시된 값을 그대로 복사하세요(프로젝트마다 다를 수 있음). @와 www 둘 다 등록하고, 기존 가비아 파킹용 A레코드는 지워 충돌을 막으세요.

⑦ 버전관리 — 되돌리기 안전망

• 메시지(대화)로 수정할 때마다 자동으로 새 버전이 쌓입니다. 우측 상단 버전 드롭다운에서 전환하거나, 채팅의 ↩(복원) 으로 이전 상태로 돌아갈 수 있어요(복원하면 그 내용이 새 최신 버전으로 추가).
• ⚠️ Code 탭에서 직접 편집한 건 버전이 남지 않습니다 → 되돌릴 안전망이 없어요. 중요한 변경은 대화(메시지)로 하세요.
• 배포는 항상 최신 버전 기준 → 이전 버전을 배포하려면 먼저 복원하세요.

⑧ 오류가 날 때

틀려도 괜찮습니다. v0가 다시 고쳐줍니다. 막히면 이전 버전으로 돌아가 다시 주문하세요.

더 멋지게 만드는 리소스

전체 링크는 자료공유 → 바이브 코딩(v0)에 정리해뒀습니다.

실습 시간! 직접 만들고 배포하기

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

만들어볼 것 (택 1): 우리 가게 홈페이지(메뉴+위치+연락처) / 이벤트·신메뉴 한 페이지 / 예약·문의 폼 랜딩 / 자유 주제

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

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

감사합니다

AI로 소상공인의 성공을 만듭니다. 4시간 전 "AI 뭐 어떻게 쓰지?" → 지금 사진·영상·홍보물·홈페이지까지 직접.

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