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

코딩을 한 줄도 몰라도, 말로 홈페이지를 만들고 인터넷에 띄웁니다. 이번 강의는 ChatGPT Sites를 기준으로 레퍼런스에서 출발해 우리 회사 사이트를 완성합니다. v0와 ChatGPT Sites의 도구별 상세 설명은 아래 선택 참고에서 확인하세요.

1. 바이브 코딩 간단한 이해

바이브 코딩은 문법을 직접 작성하기보다, 만들고 싶은 결과를 자연어로 설명하고 AI와 대화하며 코드를 생성·수정하는 방식입니다.

1. 목표를 말합니다. 누구를 위한 어떤 페이지인지, 들어갈 정보와 분위기를 적습니다.
2. AI가 초안을 만듭니다. 화면과 코드를 함께 만들고 미리보기를 보여줍니다.
3. 직접 확인합니다. "여기만 바꿔줘"처럼 한 번에 수정할 항목을 구체적으로 요청합니다.
4. 검증한 뒤 공개합니다. 생성·수정은 빠르지만, 공개 전 확인은 사람의 책임입니다.

"예쁘게 만들어줘"보다 대상·내용·레이아웃·기기·행동을 함께 적을수록 결과를 설명하고 고치기 쉽습니다.

2. 바이브 코딩 한계

3. 초급자 추천 — ChatGPT Sites

초급자는 대화창에서 만들고 수정한 뒤 공개할 수 있는 ChatGPT Sites부터 시작합니다. 먼저 계정에서 Sites 진입점과 게시 메뉴가 보이는지 확인하세요. 계정·시점에 따라 이용 가능 여부, 메뉴 이름, 한도가 달라지므로 특정 요금제나 설치가 모든 사람에게 같다고 약속하지 않습니다.

1. ChatGPT Sites에서 새 사이트를 열고 회사 소개·연락처·서비스 정보를 준비합니다.
2. 레퍼런스 스크린샷과 우리 회사의 승인된 이미지·소개자료를 첨부합니다.
3. 생성된 미리보기에서 아래 실습 순서대로 클론, 자산 교체, 디테일링을 진행합니다.
4. 공개 설정과 손님 화면을 확인한 뒤 게시합니다.

4. 실습 — 레퍼런스에서 우리 회사 사이트까지

1) 레퍼런스 조사

레퍼런스 자료실에서 업종과 목적에 맞는 사이트를 고릅니다. 사용 권한이 확인된 레퍼런스와 회사 소유 또는 사용 허가를 받은 자산만 선택하세요. 데스크톱 전체 화면, 모바일 화면, 필요한 섹션의 스크린샷과 동작 예시를 함께 준비합니다. URL만으로는 hover·모션·모바일 상태가 빠질 수 있습니다.

2) 레퍼런스 클론

ChatGPT Sites에 URL과 스크린샷을 첨부하고 다음 문장을 그대로 붙여넣습니다.

‘Url’ 해당 사이트를 그대로 클론 작업을 할거야 모든 요소와 이미지, 모션 애니메이션, 반응형 사이즈 별 레이아웃 등 전체 요소를 다 분석해서 그대로 클론작업을 해줘

3) 우리 회사 자산으로 요소 변경

회사 소개자료·로고·제품 사진 등 승인된 자산을 모두 첨부하고 다음 문장을 그대로 붙여넣습니다.

우리 회사 소개자료 및 이미지 등 을 다 첨부하고 레이아웃과 디자인 요소 등 컨셉은 유지하고 자산은 우리회사의 내용에 맞게 변경하고 부족한 이미지는 내용과 디자인 컨셉을 유지한 상태에서 새로 생성해서 적용해줘

공개하기 전에는 레퍼런스의 제3자 브랜드·사진·문구를 우리 회사의 권한 있는 요소로 반드시 교체합니다. 생성 이미지도 회사가 사용할 수 있는지 확인합니다.

4) 디테일링

데스크톱·태블릿·모바일에서 각각 확인하며 다음을 체크합니다.

• 버튼과 링크가 올바른 곳으로 이동하는가
• 폼이 있다면 입력·오류·완료 상태가 실제로 동작하는가
• 이미지가 잘리고 깨지지 않으며 대체 텍스트가 있는가
• hover·모션·스크롤 효과가 의도대로 작동하고 과하지 않은가
• 회사명·가격·주소·연락처·맞춤법이 정확한가

AI 출력에는 백엔드·보안의 보장이 없습니다. 실제로 눌러보고, 필요한 경우 화면 캡처와 재현 예시를 첨부해 수정한 뒤 다시 확인합니다.

5) 배포

미리보기와 세 가지 화면 크기를 검토하고 버전을 저장한 뒤 ChatGPT Sites의 현재 게시(Publish) 메뉴에서 공개합니다. 배포는 실제 공개 주소에 반영되므로 수정 중에는 먼저 버전을 저장하고, 검토가 끝난 뒤 다시 게시합니다. 게시 후 로그아웃 또는 시크릿 창에서 손님 화면을 열어 공개 범위, 이미지, 링크를 다시 확인합니다. 폼·로그인·결제처럼 서버 기능이 필요한 요소는 실제 연결과 보안을 별도로 검증하기 전까지 완성된 기능으로 표시하지 않습니다.

6) 가비아 도메인 구매 후 ChatGPT Sites DNS 연결

DNS(도메인의 연결 정보를 관리하는 설정)를 변경하는 단계입니다. 구매 전에 Sites의 Add domain 메뉴를 사용할 수 있는지 확인하세요. 맞춤 도메인은 계정·워크스페이스에 따라 지원되지 않을 수 있습니다.

1. 가비아에서 사용할 도메인을 구매합니다.
2. ChatGPT Sites에서 사이트 설정 → Add domain을 선택하고 구매한 도메인 또는 하위 도메인을 입력합니다. 이어서 표시되는 DNS 레코드 이름·종류·값을 확인합니다.
3. 가비아 DNS 관리에서 Sites 설정 화면의 현재 값을 그대로 입력합니다. 고정된 A 또는 CNAME 값을 추측해 입력하지 않습니다.
4. 기존 MX(이메일을 받을 서버를 지정하는 항목)와 이메일 관련 레코드는 덮어쓰거나 삭제하지 말고, Sites 연결에 필요한 호스트만 추가·수정합니다.
5. 전파 후 Sites 화면과 시크릿 창에서 도메인·HTTPS·모바일 화면을 확인합니다.

메뉴와 레코드 안내는 계정과 시점에 따라 달라질 수 있으므로 현재 ChatGPT Sites 맞춤 도메인 설정이 제공하는 값이 정답입니다.

실습 완료 기준

• 승인된 레퍼런스와 회사 자산으로 사이트를 만들었다.
• 데스크톱·태블릿·모바일에서 콘텐츠와 동작을 확인했다.
• 제3자 요소를 교체하고 버튼·폼·이미지·링크를 점검했다.
• 공개된 Sites 주소를 시크릿 창에서 확인했다.
• 가비아 도메인을 구매하고 기존 이메일 레코드를 보존한 채 Sites가 안내한 DNS 값으로 연결했다.
• 수정 전후 자료와 게시 주소를 회사 내부에 백업했다.

선택 참고: v0 — 제작·요금·인터페이스 상세

v0(브이제로) 는 홈페이지·웹앱을 만들어주는 Vercel의 AI 빌더입니다. 이번 강의의 기본 도구는 ChatGPT Sites이며, v0를 대안으로 검토할 때 필요한 상세 정보와 화면 예시는 이 절에서 선택적으로 확인하세요.

내부적으로는 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 대안을 선택한 날): 미리 로그인해 크레딧 잔량(우측 상단)을 확인하세요. v0 무료 메시지 한도는 대안 실습을 시작하기 전에 확인해야 합니다.

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

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

역사적 요금·운영 참고 (2026.8.29 확인)

아래 이미지는 당시 공식 요금표를 저장한 참고 자료입니다. 현재 가격·기능·약관은 계정과 공식 문서에서 다시 확인하세요.

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

당시 ChatGPT 요금표의 Sites 줄은 Free·Go가 줄표(—), Plus·Pro가 체크였습니다. 현재 계정에서 Sites 메뉴와 이용 조건을 확인하세요.

한국어 요금표의 당시 표기는 Free ₩0 / Go ₩13,000 / Plus ₩29,000 / Pro ₩159,000이었습니다. 가격은 변경될 수 있습니다.

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

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

선택 참고: 바이브 코딩 개념과 주의사항

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

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

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

선택 참고: v0 사용 전 주의사항

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

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

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

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

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

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

레퍼런스 사이트 추천:

🔎 더 많은 레퍼런스는 본문 4번의 레퍼런스 자료실에서 확인하세요.

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

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

완성까지, 이 순서대로

한 문장으로 "뚝딱"도 되지만, 좋은 결과는 순서에서 나옵니다. 이 절은 v0를 대안으로 사용할 때의 상세 제작 절차입니다. 요금·정책·화면은 계정과 시점에 따라 달라질 수 있으니 사용 전에 공식 문서에서 확인하세요.

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

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

부산 해운대 '온기식탁' 카페 홈페이지를 만들어줘.
- 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개입니다.

⚠️ v0로 가게 홈페이지를 계속 운영할 때의 과거 참고입니다. v0 무료 배포와 Vercel Hobby의 상업적 사용 조건은 바뀔 수 있으므로, 실제 운영 전 최신 약관을 확인하세요. 연습·포트폴리오는 무료로 충분할 수 있지만, 실제 가게 홍보용 운영 조건은 별도로 검토해야 합니다.

⑥ 커스텀 도메인 — 내 주소 연결 (가비아 DNS, v0 과거 참고)

이 절의 도메인 메뉴와 안내는 2026년 당시 v0/Vercel 화면을 기준으로 한 역사적 참고입니다. 현재 운영에는 ChatGPT Sites의 맞춤 도메인 설정과 가비아 화면이 제공하는 값을 사용하고, 변경된 메뉴·정책은 공식 문서에서 확인하세요.

1. v0 프로젝트의 Domains 또는 Customize Domain에서 연결할 도메인을 입력하고 화면에 표시된 현재 DNS 레코드를 확인합니다.
2. 가비아 DNS 관리에서 v0/Vercel 화면의 호스트·종류·값을 그대로 입력합니다.
3. 고정된 A 또는 CNAME 값을 추측하거나 복사해 사용하지 않습니다. 기존 MX 레코드와 이메일 관련 레코드는 덮어쓰거나 삭제하지 말고 필요한 호스트만 추가·수정합니다.
4. 전파 후 v0/Vercel의 연결 상태와 시크릿 창의 HTTPS·모바일 화면을 확인합니다.

과거 화면의 레코드 값은 현재 프로젝트·서비스마다 다를 수 있습니다. 현재 ChatGPT Sites 맞춤 도메인 설정이 제공하는 값이 정답입니다.

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

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

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

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

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

되돌리기 안전망

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

⑧ 오류가 날 때

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

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

선택 참고: ChatGPT Sites — 화면·관리 상세

ChatGPT Sites에서 홈페이지를 만들고 인터넷에 공개하는 상세 화면과 관리 방법입니다. 기본 실습은 본문 3~4번 순서를 따르며, 이 절의 화면·메뉴는 선택적으로 참고하세요.

만드는 순서

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

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

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

아래는 2026년 확인 당시 ChatGPT Sites로 카페 홈페이지를 만들어 인터넷에 올린 참고 사례입니다. 소요 시간과 화면은 계정·시점에 따라 달라질 수 있습니다.

① 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 대안의 무료 플랜에는 이 기능이 없습니다.

ChatGPT Sites 참고 기능

주의할 점 4가지

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

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

돈을 하나도 안 쓰고 싶다면

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

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

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

선택 참고: 추가 리소스

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

감사합니다

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

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