PERIOD 03 · 60분 DEPLOY & SHARE
01 / 10
🚀 배포·자랑·다음 단계

세상에 진짜로 내보내자

내 페이지가 인터넷에 떠 있고 — 친구한테 URL 보낼 수 있어요

15분 안에 배포 → 15분 도메인·SEO → 15분 발표·자랑 → 5분 다음 단계. 오늘 끝나면 손에 진짜 URL이 들려있어요.

← 2교시 · 허브 ↓ 스크롤 / Space
P3 · 컨셉 · 10분 배포 옵션 3가지
02 / 10

내 컴퓨터 → 인터넷으로 가는 3가지 길

▲

Vercel

v0와 같은 회사. 통합 최고.

  • ✅ v0에서 배포 버튼 1클릭
  • ✅ HTTPS 자동
  • ✅ 깃 연결하면 자동 재배포
  • ✅ 무료 플랜 충분
  • ⚠️ Vercel 도메인 (.vercel.app)
🌀

Netlify

정적 사이트 강자.

  • ✅ 드래그앤드롭 폴더로 배포
  • ✅ 폼 핸들링 무료 제공
  • ✅ 도메인 무료 SSL
  • ✅ 깃허브 연결 OK
  • ⚠️ Netlify 도메인 (.netlify.app)
📦

도구 자체

v0/Lovable/Bolt 모두 자체 배포.

  • ✅ 별도 가입 불필요
  • ✅ "Publish" 버튼 1번
  • ✅ 즉시 URL 생성
  • ⚠️ 도구 종속 (이전 어려움)
  • ⚠️ 무료 한도 제한
⭐ 오늘 강의에서는 Vercel로 가요. v0 사용한 사람은 1클릭, Claude Code 사용한 사람은 깃 통해서. 가장 안정적·범용.
P3 · 옵션 · 02 / 10다음: 🔥 진짜로 배포
P3 · 배포 실습 · 15분 🚀 GO LIVE
03 / 10
🌐 진짜 인터넷에 띄우기

5분이면 URL이 손에 들려요

지금부터 15분 — 사용한 도구별로 길이 살짝 달라요. 다음 슬라이드에서 본인 경로 찾아 따라하세요.

P3 · 배포 시작 · 03 / 1015분 타이머 시작
P3 · 배포 · v0 경로 v0 사용자용 5단계
04 / 10

🌐 v0로 만든 경우 — 가장 빠른 길

▲ Vercel 1클릭 배포

1
v0 화면 우상단 "Deploy" 또는 "Publish" 클릭 버튼 위치는 시기마다 다를 수 있어요. 못 찾으면 강사에게 도움 요청.
2
Vercel 계정 연동 (없으면 자동 생성) v0가 Vercel 자회사라 매우 매끄러움. 깃허브 계정으로 로그인 권장.
3
프로젝트 이름 정하기 URL 일부가 됩니다. 예: my-portfolio → my-portfolio.vercel.app
4
30초 ~ 1분 기다리기 자동 빌드 → 배포. 진행률 바 보임.
5
완성된 URL 클릭해서 새 탭으로 확인 진짜 인터넷에 떴어요. 모바일·다른 사람 컴퓨터에서도 됨.
P3 · v0 배포 · 04 / 10다음: Claude Code 경로
P3 · 배포 · Claude Code 경로 CLI 사용자용 5단계
05 / 10

⌨️ Claude Code로 만든 경우 — 깃 + Vercel

📦 깃허브 → Vercel 자동 배포

1
Claude Code에 "깃허브에 푸시해줘" 요청 없는 저장소면 새로 만들어주고, 있으면 그대로 푸시. git init부터 알아서.
2
vercel.com 접속 → "Import Project" 깃허브 계정 연동 → 방금 만든 저장소 선택.
3
프레임워크 자동 감지 → "Deploy" 클릭 정적 HTML이면 그대로, Next.js·React면 자동 빌드 설정.
4
1~2분 기다리면 URL 발급 프로젝트명.vercel.app 형태. 빌드 로그도 실시간으로 보여줘요.
5
이후 깃 push할 때마다 자동 재배포 Claude Code에서 수정 → push → 30초 뒤 자동 반영. 최강의 워크플로.
💡 ChatGPT Codex / Antigravity 사용자도 — 결과물을 깃에 올린 다음 위 4번부터 똑같이 진행하면 돼요.
P3 · Claude Code 배포 · 05 / 10다음: 도메인·SEO
P3 · 도메인·SEO · 15분 한 단계 더 다듬기
06 / 10

URL이 떴으면 — 이제 멋지게 만들기

🌐

커스텀 도메인

name.com 처럼
본인 이름 도메인 연결

• 가비아·카페24·Namecheap에서 구매 (1만~2만원/년)
• Vercel 설정에서 도메인 추가
• DNS 설정 5분

🔍

SEO 기본

검색에 잘 뜨게 하기

• title 태그 명확하게
• meta description 추가
• OG 이미지 (카톡 공유 시)
• AI에게 "SEO 메타 태그 추가" 요청

📊

방문자 분석

누가·언제·어디서
본 사이트인지 확인

• Vercel Analytics (무료)
• Google Analytics 4
• Plausible (프라이버시 친화)

📝 AI에게 SEO 한 번에 요청하는 프롬프트이 페이지에 SEO 메타 태그 추가해줘: - title: 내 이름 + 한 줄 소개 - meta description: 150자 이내, 검색에 노출될 미리보기 - OG 태그 (제목·설명·이미지·URL) — 카톡·트위터 공유 시 카드 - Twitter Card 태그 - favicon (이모지로 간단히) 검색에 잘 노출되도록 한국어·영어 둘 다 고려해줘.
P3 · 도메인·SEO · 06 / 10다음: 🎉 자랑 시간
P3 · 자랑 시간 · 15분 🎉 SHOW & TELL
07 / 10
🎤 한 사람씩 1분

내 사이트, 진짜로 봐주세요

강의 끝나기 전에 — 한 사람씩 1분, 빔프로젝터에 URL 띄우고 자랑하기. 제일 자랑할 만한 부분 1개 + 어떤 도구 어떻게 썼는지.

P3 · 자랑 시작 · 07 / 1015분 · 1인 1분
P3 · 자랑 가이드 1분 안에 보여주기
08 / 10

발표자용 — 1분 보여주는 양식

(20초) URL 띄우기 + 한 줄 소개 "안녕하세요, 저는 ___입니다. 제가 만든 사이트는 ___ 입니다."
(20초) 스크롤로 전체 보여주기 위에서 아래로 천천히. 마음에 드는 부분 1개 짚기.
(20초) "어떤 도구를 어떻게 썼나" 요약 "저는 ___ 도구로 만들었어요. 가장 좋았던 점은 ___."
P3 · 자랑 가이드 · 08 / 10다음: 다음 단계
P3 · 마무리 · 5분 집에 가서 뭘 할까
09 / 10

강의 끝나고 4주 — 이 순서로 발전시켜 봐요

1주차 — 콘텐츠 채우기 오늘 placeholder로 둔 빈칸 채우기. 진짜 프로젝트·진짜 사진. 친구한테 한 번 보여주고 의견 듣기.
2주차 — 도메인 연결 본인 이름 도메인 구매 (가비아·Namecheap). Vercel에 연결. seokho.com 같은 진짜 주소.
3주차 — 기능 1개 추가 블로그 섹션 / 방문자 카운터 / 연락 폼 / 다국어 등 욕심내본 기능 1개. 같은 도구로 "~ 추가" 시키면 됨.
4주차 — 다른 도구로 시도 오늘 안 쓴 도구 중 하나로 같은 페이지 다시. 비교해보면 본인에게 맞는 도구가 더 명확해져요.
🎁 보너스 — 워크북 부록 p.14-16
자주 쓰는 프롬프트 12개 · 트러블슈팅 10가지 · 다음 단계 자료 모음.
P3 · 마무리 · 09 / 10다음: 클로징
END · 3 PERIODS 고생하셨어요
10 / 10
🎉 WORKSHOP COMPLETE

오늘 만든 사이트,
진짜 인터넷에 떠 있어요

강의 끝났다고 끝이 아니에요. 친구한테 URL 보내고, 가족한테 자랑하고,
다음 주에는 콘텐츠 채워보세요 — 그게 진짜 시작이에요.

← 코스 허브로 📓 워크북 다시 보기 ⚡ Claude Cowork도 →

바이브코딩 워크숍 · v1.0 · 2026-05-18

← 2교시 처음으로 →