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

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

시작 전에 — 홈페이지 만드는 길은 두 가지입니다

같은 "말로 홈페이지 만들기"인데 입구가 두 개입니다. 오늘 실습은 ①로 하고, ②는 화면으로 보여드립니다.

근거는 공식 요금표에 그대로 있습니다.

v0 무료 플랜: 배포는 됩니다(Deploy apps to Vercel). 대신 하루 7메시지(7 message/day limit)입니다.

ChatGPT 요금표의 Sites 줄을 보세요. Free와 Go는 줄표(—), Plus·Pro만 체크입니다. 무료 계정에는 메뉴 자체가 없습니다.

한국 가격은 Plus 월 ₩29,000입니다(2026.8.29 공식 한국어 페이지 기준, 부가세 포함 표기). Go(₩13,000)는 저렴하지만 Sites가 안 됩니다.

이런 분은 ① v0

• "돈 한 푼도 안 쓰고 싶다. 카드 등록하라 하면 거기서 그만둔다"
• "오늘 수업에서 내 손으로 끝까지 만들어보고 집에 가고 싶다"
• "일단 가게 주소·영업시간만 올려두고 손님한테 카톡으로 링크 보내면 된다"

이런 분은 ② ChatGPT Sites

• "이미 챗지피티 유료 쓰는 중이다" → 추가 요금 없이 플랜에 포함됩니다
• "홈페이지에 주문 버튼 달아서 실제로 돈 받고 싶다" → 약관이 외부 결제사(PG) 연결을 허용합니다
• "메뉴가 자주 바뀐다. 계절마다 사진도 갈아끼운다" → v0 무료의 하루 7메시지로는 금방 동납니다

⚠️ ChatGPT Sites는 2026년 7월 시작된 베타 서비스입니다. OpenAI가 사이트를 내리거나 정책을 바꿀 권리를 약관에 두고 있으니(§5.2·§5.3), 가게 홈페이지로 쓰신다면 내용은 따로 백업해두세요.

💡 가장 싼 정답은 따로 있습니다. 무료 주소(vercel.app·chatgpt.site)는 연습장입니다. 명함·간판·전단·네이버 플레이스에 넣을 주소라면 내 도메인을 사세요(연 1~2만원). 이 돈만은 아끼지 마십시오 — 이유는 마지막 파트에서 설명합니다.

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일 후 만료)에 더해 하루 7개 메시지 제한이 있습니다. ⚠️ 크레딧이 남아도 하루 7번 대화하면 그날은 더 못 씁니다.

실전 팁: 강의 전에 미리 로그인해 크레딧 잔량(우측 상단)을 확인해두세요. 그리고 강의 당일에는 v0를 미리 쓰지 마세요 — 7개를 아침에 써버리면 실습을 못 합니다.

💳 요금제 한눈에 (2026.8.29 v0 공식 문서 기준)

• 무료로 시작 → 부족하면 유료. v0는 Premium($20)을 폐지 중이라 신규 가입자는 선택이 안 되고, 유료는 Plus($30/인) 부터입니다.
• 무료 플랜의 진짜 벽은 크레딧이 아니라 하루 7메시지입니다. 유료 플랜은 메시지 수 제한이 없고 크레딧만큼 씁니다.
• 월 크레딧은 이월되되 65일 후 만료, 생성·수정마다 토큰만큼 차감됩니다.
• ⚠️ 요금·정책은 v0 사정으로 자주 바뀌니 v0 공식 요금 문서에서 최신 확인하세요.

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

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

바이브 코딩이란?

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

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

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

시작 전 꼭 알아둘 5가지

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

🎯 무료 플랜으로 3시간 버티기 — 메시지 7개 배급표

무료 플랜은 하루 7개 메시지가 전부입니다. 아무 계획 없이 쓰면 1시간 만에 소진되고 남은 2시간은 화면만 봅니다. 아래대로 쓰세요.

절대 하지 말 것 — "버튼 색만 바꿔줘" 같은 잔손질 한 줄 주문. 그것도 7개 중 1개입니다.

💡 ①번을 살리는 법: 앞의 v0 PRD 생성 GPTs로 요구사항서를 ChatGPT에서 무료로 완성한 뒤, 그걸 v0 첫 메시지에 붙여넣으세요. 준비는 무제한, v0는 7개 — 고민은 ChatGPT에서, 실행만 v0에서 합니다.

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

막연히 "예쁘게 만들어줘"는 막연한 결과를 부릅니다. 잘 된 사이트를 먼저 모으는 게 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개입니다.

⚠️ 가게 홈페이지로 계속 운영하려면 Vercel 유료(Pro) 전환이 필요합니다. v0 무료 배포가 올라가는 Vercel Hobby 플랜은 "비상업적 개인 용도"로 제한돼 있고, Vercel은 상업적 사용을 "제작·운영에 관련된 누구든 금전적 이득을 얻는 배포" 로 정의합니다 — 상품·서비스 광고, 결제, 후원 요청이 여기 해당합니다. 오늘 실습·연습·포트폴리오는 무료로 충분하지만, 실제 가게 홍보용으로 계속 띄워두려면 Vercel Pro($20/월) 로 올리거나 다른 호스팅으로 옮기세요.

⑥ 커스텀 도메인 — 내 주소 연결 (가비아 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레코드는 지워 충돌을 막으세요.

💡 도메인은 아끼지 마세요 — 무료 주소는 언제든 사라집니다. 무료 서브도메인은 각 회사가 "언제든 어떤 이유로든 회수·변경할 권리" 를 약관에 두고 있습니다(대개 7일 전 통지, 미사용 주소 재활용 포함). 실제로 Lovable 공식 갤러리에 실렸던 레스토랑 사이트 Blackora는 등재 1년 5개월 만에 "This project is no longer available." 로 죽었습니다. 명함·간판·전단·네이버 플레이스에 인쇄할 주소라면 반드시 내 도메인(연 1~2만원) 을 쓰세요. 주소가 죽으면 인쇄물을 전부 다시 찍어야 합니다.

⑦ 수정과 되돌리기 — 만든 다음이 더 중요합니다

가게는 계속 바뀝니다. 가격이 오르고 신메뉴가 나옵니다. 처음 만드는 것보다 고치는 일이 훨씬 잦습니다.

무료 플랜의 수정 원칙 — 잔손질 금지

무료는 하루 7메시지입니다. 잔손질 한 줄이 7개 중 1개를 먹습니다. 고칠 것을 메모지에 모아뒀다가 한꺼번에 주문하세요.

되돌리기 안전망

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

⑧ 오류가 날 때

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

⚠️ 무료 플랜 실습 원칙 — 하루 7개를 다 쓰면 끝입니다. 오류가 났다고 "고쳐줘"를 연달아 던지지 마세요. 한 번에 안 고쳐지면 ⑦의 이전 버전으로 복원하는 게 메시지를 아끼는 길입니다.

② ChatGPT Sites — 챗지피티 안에서 바로 만들기

이미 ChatGPT를 유료로 쓰고 계신 분이라면 새 서비스에 또 가입할 필요가 없습니다. 쓰던 그 자리에서 홈페이지를 만들고 인터넷에 올릴 수 있습니다.

만드는 순서

일반 채팅창에 "홈페이지 만들어줘"라고 치면 안 나옵니다. 진입 방법이 따로 있습니다.

⚠️ 4번을 빠뜨리면 나만 보입니다. 새로 만든 사이트의 기본값은 비공개(본인+관리자만)입니다. "Anyone on the internet"을 직접 골라야 손님이 링크로 들어올 수 있습니다. 손님은 ChatGPT 계정이 없어도 됩니다.

실제로 만들어봤습니다 — 화면 그대로

아래는 실제로 ChatGPT Sites로 카페 홈페이지를 만들어 인터넷에 올린 전 과정입니다. 만드는 데 걸린 시간은 약 10분이었습니다.

① Work 모드 — 여기가 입구입니다

상단 Chat / Work 토글에서 Work를 고릅니다. 일반 채팅창이 아닙니다. chatgpt.com/sites → 사이트 만들기 버튼을 눌러도 이 화면으로 옵니다.

② 가게 정보를 적습니다

입력창 앞에 Sites 칩이 붙어 있어야 합니다. 실제로 넣은 내용: 가게 이름·분위기·메뉴 6개와 가격·영업시간·위치·대표번호, 그리고 "모바일에서도 잘 보이게". ⚠️ "문의 폼이나 로그인 기능은 넣지 마" 를 꼭 덧붙이세요 — 개인정보 책임이 생깁니다.

③ 결과가 나옵니다 (약 10분 소요)

대화창 안에 미리보기가 뜨고 열기 / 공유 버튼이 생깁니다. 사진도 알아서 만들어 넣습니다.

④ 공유 버튼을 누르면 — 기본값이 "나만"입니다

⭐ 여기가 이 강의에서 가장 중요한 화면입니다. 액세스 권한이 있는 사용자 가 🔒 나만입니다. 이 상태로 링크를 보내면 손님은 아무것도 못 봅니다.

⑤ "링크가 있는 모든 사용자"로 바꿉니다

선택지는 딱 둘입니다 — 나만 / 링크가 있는 모든 사용자. 아래쪽을 고릅니다.

⑥ 저장하면 발행됩니다

바꾸면 저장 버튼이 나타납니다. 누르면 그때 실제로 공개됩니다. 안 누르면 안 바뀝니다.

⑦ 내 사이트 목록

chatgpt.com/sites 에서 관리합니다. 공유 대상이 Everyone 이면 제대로 공개된 것입니다.

⑧ 손님 눈에 보이는 화면 — 로그아웃 상태에서 확인

⭐ 반드시 시크릿 창(로그아웃)으로 열어서 확인하세요. 내 화면에서 잘 보이는 것과 손님에게 보이는 것은 다릅니다. ④~⑥을 빠뜨렸다면 여기서 아무것도 안 보입니다.

⑨ 휴대폰에서도 자동으로 맞춰집니다

손님 대부분은 휴대폰으로 봅니다. 따로 안 시켜도 화면 크기에 맞춰집니다.

주소 규칙 (실측)

haetsal-roastery . mongbee . chatgpt.site
   └ 사이트 이름     └ 내 계정 이름

내 계정 이름이 주소에 들어갑니다. 사이트 이름은 소문자·숫자·하이픈만 쓸 수 있고 최소 5자입니다.

만든 다음이 진짜입니다 — 고치고 다시 올리기

가게는 계속 바뀝니다. 가격이 오르고, 신메뉴가 나오고, 휴무일이 생깁니다. 처음 만드는 것보다 고치는 게 훨씬 자주 있는 일입니다. 실제로 고쳐봤습니다.

① 바꿀 것을 한 번에 적습니다

실제로 넣은 요청 4가지 — 아메리카노 4,000 → 4,500원, 신메뉴 흑임자 라떼 5,800원 추가, 주차 안내 한 줄, 맨 아래 인스타그램 버튼. 💡 번호를 매겨 한 번에 적으세요. 하나씩 나눠 말하면 그만큼 시간이 더 걸립니다.

② "지금 게시할까요?"를 물어봅니다 ⭐

⭐ 자동으로 안 올라갑니다. 고친 뒤 이렇게 물어봅니다.

선택	언제
1 지금 게시	확인했고 바로 손님에게 보여도 될 때
2 게시 보류	더 고칠 게 남았을 때 — 손님 화면은 그대로 유지됩니다
3 기타 설명	추가 요청이 있을 때

이게 안전망입니다. 잘못 고쳤어도 2 게시 보류를 고르면 손님에게는 예전 화면이 계속 보입니다. 오른쪽 29초 카운트다운은 그 안에 안 고르면 기본 동작으로 넘어간다는 뜻입니다 — 서두르지 말고 화면부터 확인하세요.

③ 게시하면 같은 주소에 반영됩니다

주소는 안 바뀝니다. 명함에 적어둔 주소 그대로 내용만 갱신됩니다. 무엇을 바꿨는지 목록으로 정리해줍니다.

④ 손님 화면에서 확인 — 반드시

아메리카노가 4,500원으로 바뀌었고 흑임자 라떼가 05번으로 들어갔습니다. ⭐ 고칠 때마다 시크릿 창으로 열어 확인하세요. "고쳤다고 했는데 안 바뀌어 있는" 경우가 있습니다.

걸린 시간

처음이 오래 걸리지, 고치는 건 금방입니다. 겁내지 말고 바꿔보세요.

관리 화면 — 주소 바꾸기·내 도메인·삭제

chatgpt.com/sites 에서 사이트 오른쪽 ⋯ → 사이트 열기 / 편집 / 분석 / 설정

⚠️ "위험 구역"의 사이트 삭제는 되돌릴 수 없습니다. 지우기 전에 화면을 캡처해두세요.

손님이 몇 명 왔는지 — 방문자 통계

⋯ → 분석 을 누르면 나옵니다. 아무것도 설치할 필요가 없습니다. 순 방문자 수·페이지 조회수를 7일 / 30일 로 볼 수 있고, 일별 그래프와 상위 페이지도 나옵니다.

💡 이걸로 뭘 하나요? 전단을 돌린 날, 인스타에 링크를 올린 날 방문자가 튀는지 보세요. 어떤 홍보가 실제로 먹히는지 숫자로 알 수 있습니다. v0 무료 플랜에는 이 기능이 없습니다.

v0에 없는 것들

주의할 점 4가지

1. 배포하면 곧바로 실제 사이트입니다. 연습용 주소가 따로 없습니다. 검토부터 하고 싶으면 "배포하지 말고 버전만 저장해줘" 라고 먼저 시키세요.
2. 문의 폼을 넣으면 개인정보 책임이 생깁니다. 약관상 사이트 주인이 개인정보 관리자가 됩니다(§3.2.1). 오늘 실습 범위는 메뉴·위치·영업시간·연락처 "보여주기" 까지입니다.
3. 베타 서비스입니다. OpenAI가 사이트를 내리거나 정책을 바꿀 수 있습니다. 내용은 따로 백업하세요.
4. 사용 한도가 있는데 숫자를 공개하지 않습니다. ChatGPT 화면에서 직접 확인해야 합니다. "무제한"인 것은 텍스트 대화지 사이트가 아닙니다.

📌 한 달만 써보고 정하셔도 됩니다. ChatGPT는 연간 결제가 없어 월 단위 구독·해지만 있습니다. 한 달 써보고 아니면 해지하세요. 해지해도 그 달 끝까지는 쓸 수 있습니다.

돈을 하나도 안 쓰고 싶다면

ChatGPT 무료 플랜으로도 홈페이지 코드(HTML)를 받는 것까지는 됩니다. 막히는 건 "인터넷에 올리기"뿐입니다. 받은 코드를 무료 호스팅에 올리면 됩니다.

• Cloudflare Pages — 무료인데 내 도메인 연결·상업적 사용 모두 허용. 대역폭 무제한. 오늘 다루진 않지만 가장 돈 안 드는 길입니다.
• Bolt.new — 무료 플랜에 호스팅 포함, 상업적 사용을 공식 문서가 명시적으로 허용

⚠️ 무료 호스팅으로 Vercel(Hobby) 을 고르면 앞서 말한 비상업용 제한에 그대로 걸립니다. 가게 홍보가 목적이면 Cloudflare Pages 쪽이 맞습니다.

더 멋지게 만드는 리소스

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

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

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

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

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

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

감사합니다

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

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