6회 · Vercel로 세상에 공개하기
내 컴퓨터에서만 열리던 웹앱을 Vercel에 올려, 링크 하나로 누구나 휴대폰에서 열 수 있게 만듭니다.
“내 PC에만 있던 웹앱이 링크 하나로 세상에 나간다.”
학습 목표
- 서버, 호스팅, 배포, 도메인이 무엇인지 안다
- GitHub와 Vercel을 연결해 배포하고, 고칠 때마다 자동 반영되는 것을 확인한다
- 빌드 에러를 Claude Code로 고치는 흐름을 익힌다
오늘 만드는 것: 내 주소(….vercel.app)로 열리는 웹앱
실습 진도
—
실습 단계를 체크하면 표시돼요
오늘의 흐름
| 시간 | 내용 | 방식 |
|---|---|---|
| 0:00–0:10 | 지난 시간 복습: GitHub 저장소 확인하기 | 함께 |
| 0:10–0:35 | 웹은 어디에 사는가: 서버, 호스팅, 배포, 도메인 | 설명 |
| 0:35–0:50 | 요즘 업계에서는: 배포가 버튼 하나가 되기까지 | 설명 |
| 0:50–1:00 | 시연: 푸시하면 1분 뒤 휴대폰 화면이 바뀐다 | 시연 |
| 1:00–1:10 | 쉬는 시간 | — |
| 1:10–1:35 | 실습 6-1, 6-2: Vercel 연결과 첫 배포 | 실습 |
| 1:35–1:50 | 실습 6-3: 고치면 자동 반영, 휴대폰으로 열어 보기 | 실습 |
| 1:50–2:00 | 실습 6-4(선택): 빌드 에러 고치기, 정리와 퀴즈 | 실습·정리 |
오늘이 끝나면
여러분이 만든 "우리 모임" 웹앱이 ….vercel.app 주소를 갖게 됩니다. 단체 대화방에 주소를 붙여 넣으면 누구나 휴대폰에서 열 수 있습니다. 6회는 이 과정에서 처음으로 내가 만든 것이 세상에 나가는 날입니다.
지금 내 웹앱은 어디에 있나요
지난 4–5회에 만든 웹앱은 지금 두 군데에 있습니다.
- 내 컴퓨터:
http://localhost:3000으로 열립니다. 하지만 이 주소는 내 컴퓨터 안에서만 통합니다. 옆 사람이 같은 주소를 입력해도 열리지 않습니다. - GitHub: 코드가 보관돼 있습니다. 하지만 GitHub는 코드를 보관하는 창고이지, 웹앱을 실행해 보여 주는 곳이 아닙니다.
요리 레시피와 식당
지금 상황은 맛있는 요리 레시피(코드)를 만들어 집 부엌(내 컴퓨터)에서 요리해 본 것, 그리고 레시피를 금고(GitHub)에 넣어 둔 것과 같습니다. 손님이 그 요리를 먹으려면 식당이 필요합니다. 식당을 열어 주는 곳이 오늘 배우는 Vercel입니다.
웹은 어디에 사는가
서버: 24시간 켜져 있는 컴퓨터
는 특별한 기계가 아니라 하루 종일 꺼지지 않고 인터넷에 연결된 컴퓨터입니다. 누군가 주소를 입력하면 서버가 웹페이지를 보내 줍니다.
- 내 노트북도 웹페이지를 보여 줄 수는 있지만, 덮개를 닫거나 와이파이가 끊기면 끝입니다.
- 그래서 웹 서비스는 데이터센터에 있는 서버 위에서 돌아갑니다.
호스팅: 서버를 빌려 쓰기
예전에는 서버를 직접 사서 관리해야 했습니다. 지금은 서버 공간을 빌려 쓰는 서비스가 일반적입니다. 집을 짓는 대신 원룸을 빌리는 것과 같습니다.
| 예전 방식 | 요즘 방식 |
|---|---|
| 서버 컴퓨터 구입, 전기·냉방·보안 관리 | 서비스에 가입하고 연결만 하면 끝 |
| 운영체제 설치, 프로그램 설정 | 대부분 자동 |
| 사람이 몰리면 서버를 더 사야 함 | 사람이 몰리면 자동으로 늘어남 |
| 전문 인력 필요 | 혼자서도 가능 |
배포: 식당 문을 여는 일
는 내 코드를 서버에 올려 누구나 쓸 수 있게 공개하는 일입니다. 배포할 때는 보통 두 가지가 일어납니다.
- 빌드(): 개발용 코드를 손님에게 내놓을 수 있는 완성품으로 만듭니다. 재료를 손질하고 요리를 완성해 접시에 담는 과정입니다.
- 올리기: 완성품을 서버에 올리고 주소를 붙입니다.
빌드 중에 문제가 있으면 배포가 실패합니다. 요리 중에 재료가 하나 빠진 것을 발견한 것과 같습니다. 실패해도 이전에 배포된 버전은 그대로 열립니다. 손님은 어제 메뉴를 그대로 먹을 수 있으니 안심하세요.
도메인: 가게 간판
은 our-moim.vercel.app처럼 사람이 기억하기 쉬운 주소입니다. 실제로 컴퓨터끼리는 숫자 주소로 찾아가지만, 사람은 이름이 편하니까 간판을 붙이는 셈입니다.
- Vercel은
프로젝트이름.vercel.app주소를 무료로 줍니다. ourmoim.kr같은 나만의 주소가 필요하면 도메인을 따로 사서(1년에 1–3만 원대가 흔합니다) 연결합니다. 오늘은 무료 주소로 충분합니다.
자세히주소를 입력하면 무슨 일이 일어날까요펼치기
- 휴대폰 브라우저에
our-moim.vercel.app을 입력합니다. - 인터넷의 "전화번호부"(DNS)가 이 이름에 해당하는 서버의 숫자 주소를 알려 줍니다.
- 브라우저가 그 서버에 "첫 화면 주세요"라고 요청합니다.
- 서버가 HTML, CSS, JavaScript를 보내 주고, 브라우저가 그것을 화면으로 그립니다.
이 모든 일이 1초도 안 되는 사이에 일어납니다. Vercel은 전 세계 여러 곳에 복사본을 두기 때문에 한국에서 열어도 빠릅니다.
Vercel은 무엇이 편한가
은 4회에 쓴 를 만든 회사의 호스팅 서비스입니다. 그래서 Next.js 웹앱과 궁합이 가장 좋습니다.
가장 큰 장점은 GitHub와 연결해 두면 푸시할 때마다 자동으로 다시 배포한다는 점입니다.
제목을 바꾸고 [커밋·푸시]를 눌러 보세요. '빌드 실패 상황'을 켜면 에러를 고치는 흐름도 체험할 수 있어요.
- 커밋·푸시
- GitHub
- Vercel 빌드
- 동료 화면
푸시하면 로그가 나타납니다.
동료의 휴대폰
| 단계 | 하는 사람 | 걸리는 시간 |
|---|---|---|
| 코드 고치기 | Claude Code (내가 말로 지시) | 몇 초–몇 분 |
| 커밋·푸시 | Claude Code | 몇 초 |
| 빌드·배포 | Vercel (자동) | 1–2분 |
| 확인 | 나 | 몇 초 |
5회에 배운 커밋·푸시가 이제 업데이트 버튼이 됩니다. 한 번 연결해 두면 다시 Vercel 화면에 들어갈 일이 거의 없습니다.
자동으로 인쇄되는 신문
GitHub에 원고를 넣으면(푸시) 인쇄소(Vercel)가 알아서 인쇄해 배달까지 해 주는 신문사와 같습니다. 원고를 고쳐 다시 넣으면 다음 판이 자동으로 나옵니다.
미리보기 배포
Vercel은 기본 줄기(main)가 아닌 다른 가지(branch)에 올리면 미리보기 주소를 따로 만들어 줍니다. 진짜 주소는 그대로 두고, 바뀐 버전을 먼저 확인해 볼 수 있습니다. 처음에는 몰라도 되지만, 나중에 "고친 걸 회원들에게 공개하기 전에 먼저 보고 싶다"는 생각이 들면 기억해 두세요.
무료 요금제와 공개 주소, 꼭 알아야 할 것
Vercel 무료(Hobby) 요금제
- 무료 요금제: 무료, 프로젝트 200개, 하루 배포 100회, 비상업·개인 용도 (2026-10-06 확인)
- 이 과정의 실습, 개인 프로젝트, 동네 모임 서비스에는 충분합니다.
- 단, 비상업·개인 용도입니다. 가게 홍보나 유료 서비스처럼 돈을 버는 목적이라면 Pro 요금제(개발자 1인당 월 20달러 (2026-10-06 확인))를 검토해야 합니다.
배포 주소는 누구나 열 수 있습니다
배포하는 순간 주소를 아는 누구나 들어올 수 있습니다. 검색엔진에 잡힐 수도 있습니다.
올리기 전에 꼭 확인
- 실제 회원 이름, 전화번호, 주소가 코드나 화면에 들어 있지 않은지
- 비밀번호나 키가 코드에 적혀 있지 않은지 (8회에서 자세히 다룹니다)
- 지금은 가상 데이터만 쓰고 있는지
| 괜찮은 것 | 올리면 안 되는 것 |
|---|---|
| 모임 소개, 가상 일정 | 실제 회원 연락처 목록 |
| 지어낸 장소 이름 | 집 주소, 주민번호 |
| 화면 디자인 | API 키, 비밀번호 |
요즘 업계에서는
배포가 "전문가의 일"에서 "버튼 하나"로
10년 전만 해도 웹 서비스를 공개하려면 서버를 빌리고, 프로그램을 설치하고, 보안 설정을 하는 데 며칠이 걸렸습니다. 지금은 Vercel, Netlify, Cloudflare 같은 서비스가 이 과정을 자동으로 처리합니다. 덕분에 "만들기"와 "공개하기" 사이의 거리가 몇 분으로 줄었습니다.
- 요즘 나오는 AI 앱 빌더(Lovable, Replit, v0 등)는 아예 만들자마자 공개 주소를 줍니다.
- 이 과정은 그 편리함을 그대로 누리되, 코드를 GitHub에 직접 두고 Vercel에 연결하는 방식을 씁니다. 도구를 바꾸고 싶을 때 코드를 들고 나갈 수 있고, 무슨 일이 일어나는지 이해할 수 있기 때문입니다.
"거의 맞는데 조금 틀린" 결과
배포가 쉬워진 만큼, 확인 없이 공개하는 실수도 쉬워졌습니다. 2025년 Stack Overflow 개발자 설문에서 가장 많이 꼽힌 불만(66%)이 "AI가 만든 결과가 거의 맞지만 조금 틀리다"였고, 45%는 "AI가 만든 코드를 고치는 데 시간이 더 든다"고 답했습니다. (Stack Overflow 2025 설문 · AI)
전문 개발자도 이렇게 느낀다는 것은, 배포 전에 직접 눌러 보는 확인이 여전히 사람의 몫이라는 뜻입니다. 오늘 실습에 "배포 후 점검"을 넣은 이유입니다.
인쇄 전 교정쇄
출판사는 책을 대량으로 찍기 전에 꼭 교정쇄를 뽑아 읽어 봅니다. 배포가 빨라진 지금은 "찍고 나서 고치기"도 쉽지만, 사람들이 처음 받아 보는 화면이 엉망이면 신뢰를 잃습니다.
시연
강사가 다음을 차례로 보여 줍니다.
- Vercel에서 GitHub 저장소를 연결하고 Deploy를 누릅니다. 빌드 로그가 올라가는 모습을 함께 봅니다.
- 1–2분 뒤 나온 주소를 QR 코드로 띄우고, 수강생들이 휴대폰으로 엽니다.
- Claude Code에게 "제목을 바꾸고 커밋·푸시해줘"라고 말합니다. 1분 뒤 모두의 휴대폰을 새로 고치면 제목이 바뀌어 있습니다.
- 일부러 오타를 넣어 빌드를 실패시킨 뒤, 빨간 에러 로그를 복사해 Claude Code에 붙여 넣고 고치는 장면을 보여 줍니다. 그동안 기존 주소는 멀쩡히 열리는 것도 확인합니다.
실습
오늘의 주제: 5회에 GitHub에 올린 "우리 모임 · 책 읽는 저녁" 웹앱을 Vercel로 공개합니다. 데이터는 아직 코드 안의 가상 데이터입니다. 7회에 진짜 데이터베이스로 옮깁니다.
실습 6-1 · 올리기 전에 내 컴퓨터에서 확인
약 10분Vercel에서 실패할 문제를 미리 잡습니다.
Claude 데스크톱 앱의 Code 탭에서 4–5회에 만든 프로젝트 폴더(예:
our-moim)를 엽니다. 잘 모르겠으면 이렇게 물어보세요.PROMPT폴더 살펴보게 하기이 폴더에 어떤 파일이 있는지 보고, 각각 무엇인지 쉽게 설명해줘.
- PROMPT배포 전에 내 컴퓨터에서 빌드해 보기
배포하기 전에 내 컴퓨터에서 실제 배포용 빌드(npm run build)를 해 보고, 에러나 경고가 있으면 쉬운 말로 설명한 뒤 고쳐줘. 다 되면 "빌드 성공"이라고 알려줘.
이렇게 되면 성공> npm run build 실행 중…✓ 컴파일 완료✓ 페이지 3개 생성 (/, /meetups/[id], /about)빌드 성공! 이 상태라면 Vercel에서도 배포될 가능성이 높아요.막혔을 때 - PROMPT바뀐 내용 커밋하기
지금까지 바뀐 내용을 한글 메시지로 커밋해줘.
그리고 "GitHub에도 푸시해줘"라고 덧붙이세요. GitHub 저장소 화면을 새로 고쳐 방금 커밋이 올라갔는지 확인합니다.
실습 6-2 · Vercel에 연결하고 첫 배포
약 15분vercel.com/signup에서 Continue with GitHub를 눌러 가입합니다. GitHub 계정으로 가입하면 저장소 연결이 가장 쉽습니다. 무료 요금제(Hobby)를 고르고, 이름은 본인 이름이나 별명으로 넣습니다.
막혔을 때- Vercel 대시보드에서 Add New… → Project를 눌러요.목록에서
our-moim저장소 옆의 Import를 눌러요. 목록에 없으면 "Adjust GitHub App Permissions"로 저장소를 추가해요.Framework Preset이 Next.js로 잡혔는지 확인하고, 나머지는 그대로 둔 채 Deploy를 눌러요.1–2분 기다리면 축하 화면과 함께our-moim-….vercel.app주소가 나와요.이렇게 되면 성공Building…▲ Next.js✓ Compiled successfully✓ Generating static pagesDeploying outputs…✓ Ready! https://our-moim-xxxx.vercel.app막혔을 때 화면에서 막히면 명령어 도구(Vercel CLI)로 배포하는 방법도 있습니다.
PROMPTVercel CLI로 배포 맡기기 (대안)Vercel CLI로 이 프로젝트를 배포하고 싶어. 필요한 설치와 순서를 알려주고 차례대로 진행해줘. 로그인이 필요하면 방법만 알려줘, 로그인은 내가 할게.
실습 6-3 · 고치면 자동으로 반영
약 15분푸시가 곧 업데이트 버튼이라는 것을 몸으로 느낍니다.
Vercel 대시보드의 Deployments 탭을 열어 두면 새 배포가 시작되는 모습이 보입니다. 1–2분 뒤 배포 주소를 새로 고쳐 제목이 바뀌었는지 확인하세요.
배포 주소를 휴대폰으로 엽니다. 주소를 직접 입력하기 번거로우면 컴퓨터 브라우저 주소창의 QR 코드 공유 기능을 쓰거나 나에게 메시지로 보내세요. 옆 사람과 주소를 바꿔 서로의 웹앱도 열어 봅니다.
휴대폰에서 글씨가 작거나 화면이 넘치면 이렇게 고칩니다.
PROMPT휴대폰 화면 점검휴대폰 화면 크기에서 글자가 너무 작거나 버튼이 누르기 어려운 곳, 옆으로 넘치는 곳이 있는지 점검하고 고쳐줘.
단체 대화방에 주소를 붙이면 제목과 미리보기 이미지가 보입니다. 이것도 말로 정할 수 있습니다.
PROMPT공유할 때 보이는 제목·미리보기 꾸미기단체 대화방에 이 주소를 붙여 넣었을 때 보이는 제목, 설명, 미리보기 이미지를 "우리 모임 · 책 읽는 저녁"에 맞게 설정해줘. 브라우저 탭 아이콘도 간단히 만들어줘.
- PROMPT배포 후 점검 목록
방금 배포한 주소는 https://our-moim.vercel.app 이야. 배포가 잘 됐는지 사람이 직접 확인할 점검 목록을 만들어줘. 컴퓨터, 휴대폰, 다른 사람 입장에서 각각 해 볼 것과, 주소가 공개돼도 괜찮은지 확인할 점도 넣어줘.
받은 점검 목록을 하나씩 직접 해 보세요. 특히 실제 개인정보가 화면에 없는지를 꼭 확인합니다.
실습 6-4 · 빌드가 실패했을 때
약 10분에러는 실패가 아니라 단서입니다.
Vercel의 Deployments → 실패한 배포(빨간 점) → Building 부분을 펼치면 에러가 보입니다. 빨간 글씨 주변을 넉넉히 복사합니다.
이렇게 되면 성공Type error: Property 'date' does not exist on type 'Meetup'.12 | <p>{meetup.date}</p>Error: Command "npm run build" exited with 1- PROMPT배포 에러 고치기
Vercel 배포가 실패했어. 에러는 이거야: (Vercel 화면의 빨간 에러 부분을 복사해 붙여 넣기) 원인을 쉽게 설명하고, 고친 뒤 내 컴퓨터에서 먼저 빌드가 되는지 확인하고 푸시해줘.
Claude Code가 고치고, 내 컴퓨터에서 빌드를 확인한 뒤 푸시하면 Vercel이 다시 배포합니다. 초록색 Ready가 뜨면 성공입니다.
막혔을 때
정리
핵심 정리
- 1서버는 24시간 켜진 컴퓨터, 호스팅은 그 서버를 빌리는 것, 배포는 내 코드를 올려 공개하는 것, 도메인은 주소 간판이다.
- 2GitHub와 Vercel을 연결해 두면 푸시할 때마다 1–2분 뒤 자동으로 다시 배포된다.
- 3빌드가 실패해도 이전 버전은 그대로 열린다. 에러 로그를 그대로 Claude Code에 붙여 넣으면 된다.
- 4배포 주소는 누구나 열 수 있다. 실제 개인정보와 키는 절대 올리지 않는다.
- 5Vercel 무료(Hobby) 요금제는 비상업·개인 용도다.
다음 시간 예고: 지금은 모임 일정을 바꾸려면 코드를 고쳐야 합니다. 7회에는 화면에서 바로 모임을 추가하면 저장되는 데이터베이스를 붙입니다.
복습
Q1."배포"를 가장 잘 설명한 것은?
Q2.옆 사람이 내 컴퓨터의 http://localhost:3000 주소를 입력하면 내 웹앱이 열린다.
Q3.Vercel에서 새 배포의 빌드가 실패하면, 그동안 잘 열리던 기존 주소도 열리지 않는다.
Q4.GitHub와 Vercel을 연결한 뒤, 화면을 고쳐서 반영되기까지의 순서를 맞춰 보세요.(순서대로 정렬)
- 1커밋하고 GitHub에 푸시한다
- 2배포 주소를 새로 고쳐 확인한다
- 3Vercel이 자동으로 빌드·배포한다
- 4Claude Code에게 말로 고치게 한다
Q5.Vercel 무료(Hobby) 요금제에 대한 설명으로 맞는 것은?
Q6.2025년 Stack Overflow 개발자 설문에서 AI 도구에 대한 가장 큰 불만으로 꼽힌 것은?
과제
과제 · 내 배포 주소와 점검 결과
배포 주소를 가족이나 친구 한 명에게 보내 휴대폰으로 열어 보게 하고, 받은 의견 하나를 적어 오세요. 고칠 점이 있으면 Claude Code로 고치고 푸시까지 해 보세요.