저장하고 세상에 공개하기 — GitHub · Vercel
다 만든 웹사이트를 GitHub에 안전하게 저장하고, 링크 하나로 누구나 볼 수 있게 인터넷에 공개해봅시다.
1. GitHub에 저장하기
만든 코드를 GitHub에 올리면 백업도 되고, Vercel 배포도 가능해집니다. 작업이 바뀔 때마다 저장(커밋)하고 올려(푸시)두면, 컴퓨터가 고장나거나 파일을 실수로 지워도 괜찮아요. GitHub에 최신 버전이 백업되어 있으니까요. 먼저 처음 한 번 올리는 방법부터 볼게요. 두 가지 방법이 있어요.
Claude에게 전부 맡기기 (추천)
GitHub 계정만 있으면, 레포지토리(코드 저장소) 만들기부터 코드 올리기까지 한 마디로 끝납니다.
Claude에게 GitHub 연결 요청
GitHub에 새 레포 만들어줘. 이름은 지금 프로젝트 이름이랑 똑같이 해줘. 다 올리면 링크를 줘
Claude가 저장소 생성 → 코드 저장(커밋) → 업로드(푸시)까지 전부 해주고, 끝나면 GitHub 링크를 알려줍니다.
그 뒤로 계속 고치면서 저장하기
처음 올린 뒤에는 이 두 단계만 반복하면 돼요.
저장(커밋)하기
게임의 세이브 포인트라고 생각하면 돼요. 지금까지 만든 내용을 한 번 저장해둡니다.
지금까지 만든 거 커밋해줘
GitHub에 올리기(푸시)
저장한 내용을 GitHub 서버로 올립니다. 이제 인터넷에 백업이 된 거예요.
GitHub에 푸쉬해줘
처음 올릴 때는 브라우저에 GitHub 로그인·권한 승인 창이 한 번 뜰 수 있어요. 승인하면 계속 진행됩니다. (설치 단계에서 이미 로그인했다면 안 떠요.)
로그인은 처음 한 번만
작업할 때마다 저장하는 습관!
2. 세상에 공개하기 — Vercel
GitHub에 저장한 코드를 Vercel이 가져가서 인터넷에 올려줍니다. 배포가 끝나면 URL이 나오고, 그 링크를 보내면 전 세계 누구나 접속할 수 있어요.
배포하기
Vercel에 배포해줘
처음 배포할 때는 브라우저에 Vercel 로그인 창이 한 번 뜹니다. 로그인하면 그대로 배포가 이어져요. (설치 단계에서 Vercel 로그인을 미리 했다면 바로 배포됩니다.) 중간에 프로젝트 이름·설정을 물으면 기본값 그대로 Enter만 눌러도 돼요.
Vercel 대시보드 구경하기
배포가 끝나면 vercel.com에 한 번 들어가 보세요. 내 프로젝트가 생긴 걸 확인할 수 있어요. 여기서 배포 상태, 방문자 수, 도메인 설정 등을 볼 수 있습니다.
URL 확인하기
배포된 URL 알려줘
배포가 완료되면 내-프로젝트-이름.vercel.app 형태의 URL이 나옵니다. 이 링크를 카톡이나 슬랙으로 보내면 바로 볼 수 있어요.
URL 이름 바꾸기 (선택)
기본 이름이 마음에 안 들면 원하는 이름으로 바꿀 수 있어요.
배포 URL 이름을 my-portfolio로 바꿔줘
바꾼 뒤에는 my-portfolio.vercel.app으로 접속 가능합니다.
왜 Vercel이에요? 다른 곳은 안 돼요?
오늘 Vercel을 고른 이유는 제일 직관적이라서예요. “Vercel에 배포해줘” 한마디면 되고, 화면도 단순해서 처음 배우기 좋아요. 그런데 배포할 수 있는 곳은 Vercel만 있는 게 아니에요. 대표적인 게 Cloudflare예요. 이 교재도 사실 Cloudflare에 올려져 있어요. 주소 끝이 .pages.dev인 게 그래서예요.
이럴 땐 Cloudflare도 좋아요
- · DB까지 한 곳에서 — 데이터베이스(D1), 파일 저장소(R2), 서버 기능까지 한 계정에서 같이 만들 수 있어요.
- · 돈 버는 사이트도 무료로 — Vercel 무료 플랜은 개인·비상업용이에요. 가게 홈페이지처럼 상업용이면 Cloudflare 무료 플랜이 부담이 적어요.
- · 사이트를 여러 개 만들 때 — 무료 플랜에서도 프로젝트를 100개까지 만들 수 있어요.
- · 도메인을 살 때 — Cloudflare에서 도메인을 사면 그대로 연결하기 편해요.
어렵게 생각할 필요 없어요. 한 가지 배포 방식에 익숙해지면, 다른 곳도 금방 쓸 수 있어요.순서는 똑같거든요. 코드를 저장하고, 서비스에 연결하고, 주소를 받는 것. 나중에 “Cloudflare에 배포해줘”라고만 해도 Claude가 해줘요.