Vercel 사용법: GitHub 프로젝트를 인터넷에 무료로 배포하는 방법
안티그래비티와 같은 AI 코딩 도구로 웹사이트를 만들었다면 이제 다른 사람들도 접속할 수 있도록 인터넷에 공개해야 합니다.
내 컴퓨터에서는 잘 실행되는데 다른 사람의 컴퓨터나 스마트폰에서는 접속할 수 없다면 아직 웹사이트 배포가 완료되지 않은 것입니다.
이때 사용할 수 있는 서비스가 바로 Vercel(버셀)입니다.
Vercel은 GitHub에 저장된 프로젝트를 불러와 인터넷에 공개해 주는 웹 배포 플랫폼입니다.
복잡한 서버 설정 없이 몇 가지 단계만 거치면 나만의 웹사이트 주소를 만들 수 있습니다.
- Vercel이 무엇인지 이해하기
- Vercel 회원가입하기
- GitHub 계정 연결하기
- 프로젝트 Import 및 Deploy
- 나만의 웹사이트 주소 확인하기
- 코드 수정 후 자동 배포하기
- 배포 오류 해결하기
1. Vercel이란 무엇일까?
Vercel은 웹사이트와 웹 애플리케이션을 인터넷에 배포할 수 있도록 도와주는 서비스입니다.
쉽게 설명하면 내가 만든 웹사이트를 인터넷에 올려주는 자동 배포 시스템입니다.
예를 들어 안티그래비티로 웹사이트를 만들었다고 가정해 보겠습니다.
내 컴퓨터에서는 다음 주소로 접속할 수 있습니다.
http://localhost:3000
하지만 이 주소는 내 컴퓨터에서만 사용할 수 있습니다.
다른 사람에게 이 주소를 알려줘도 접속할 수 없습니다.
Vercel을 이용하면 다음과 같은 인터넷 주소를 만들 수 있습니다.
https://my-first-site.vercel.app
이제 다른 사람들도 인터넷을 통해 내 웹사이트에 접속할 수 있습니다.
Vercel은 어떻게 작동할까?
안티그래비티
웹사이트 제작 및 수정
↓
GitHub
프로젝트 코드 저장
↓
Vercel
프로젝트 자동 배포
↓
인터넷 웹사이트
누구나 접속 가능한 주소 생성
한 번 GitHub와 Vercel을 연결하면 이후에는 GitHub에 새로운 코드가 올라갈 때마다 Vercel이 자동으로 배포를 진행합니다.
매번 Vercel에 들어가서 Deploy 버튼을 누를 필요가 없습니다.
2. Vercel 무료로 사용할 수 있을까?
Vercel에는 Hobby, Pro, Enterprise 요금제가 있습니다.
처음 웹사이트를 만들어 보는 개인 사용자라면 Hobby 요금제를 살펴볼 수 있습니다.
$0 / 월
- 개인 프로젝트용 무료 플랜
- GitHub 저장소 연결
- 자동 배포 기능
- HTTPS 지원
- vercel.app 주소 제공
다만 중요한 조건이 있습니다.
Hobby 요금제는 개인적이고 비상업적인 용도로 제한됩니다.
회사 업무나 영리 목적의 서비스라면 Pro 등 적합한 요금제를 확인해야 합니다.
또한 무료 요금제에도 사용량과 기능 제한이 있습니다.
따라서 실제 운영에 사용할 때는 최신 요금제와 사용 조건을 확인해야 합니다.
3. Vercel 회원가입하기
먼저 Vercel 공식 홈페이지에 접속합니다.
① Sign Up 클릭하기
홈페이지 오른쪽 위에 있는 Sign Up을 누릅니다.
회원가입 화면이 나타나면 사용할 계정을 선택합니다.
② Google 또는 GitHub 계정으로 가입하기
다음과 같은 로그인 방법을 선택할 수 있습니다.
- Continue with Google
- Continue with GitHub
이미 GitHub를 사용하고 있다면 GitHub 계정으로 연결하는 것도 편리합니다.
Google 계정으로 가입해도 나중에 GitHub 저장소를 연결할 수 있습니다.
③ Hobby 요금제 선택하기
사용 목적을 묻는 화면이 나오면 개인 프로젝트에 해당하는 Hobby를 선택합니다.
Team Name을 입력하는 화면에서는 개인 프로젝트라면 안내에 따라 기본 설정을 진행하면 됩니다.
가입이 완료되면 Vercel 대시보드로 이동합니다.
4. GitHub와 Vercel 연결하기
이제 가장 중요한 과정입니다.
GitHub에 저장된 프로젝트를 Vercel로 가져와야 합니다.
먼저 GitHub에 프로젝트가 올라가 있어야 합니다.
아직 GitHub에 프로젝트를 올리지 않았다면 이전 글의 Git과 GitHub 사용법을 먼저 확인하세요.
① Create New → Project 선택
Vercel 대시보드에 접속합니다.
오른쪽 위의 Create New 버튼을 누릅니다.
메뉴에서 Project를 선택합니다.
화면에 따라 Import Project라는 버튼으로 표시될 수도 있습니다.
② GitHub 선택하기
Import Git Repository 화면에서 GitHub를 선택합니다.
처음 연결하는 경우 GitHub 권한 승인 화면이 나타납니다.
Authorize Vercel을 눌러 연결을 승인합니다.
③ GitHub 저장소 접근 권한 설정
Vercel이 GitHub 저장소에 접근할 수 있도록 허용해야 합니다.
Install 화면에서 저장소 접근 범위를 선택합니다.
- All repositories: 모든 저장소 접근 허용
- Only select repositories: 선택한 저장소만 허용
처음 사용하는 경우에는 모든 저장소를 허용하거나 배포할 저장소만 선택하면 됩니다.
선택한 후 Install을 눌러 진행합니다.
GitHub 권한 설정에서 해당 저장소가 선택되어 있는지 확인하세요. 다른 사람 소유의 저장소라면 필요한 소유자 또는 조직 권한이 있는지도 확인해야 합니다.
5. GitHub 프로젝트 Import 하기
GitHub 연결이 완료되면 내 저장소 목록이 표시됩니다.
예를 들어 GitHub에 my-first-site라는 저장소가 있다면 목록에서 해당 프로젝트를 찾습니다.
저장소 이름 옆에 있는 Import 버튼을 누릅니다.
저장소가 많다면 검색창에 프로젝트 이름을 입력하면 쉽게 찾을 수 있습니다.
프로젝트 설정 확인하기
Import를 누르면 New Project 설정 화면이 나타납니다.
Vercel은 프로젝트의 구조를 분석해 적절한 프레임워크를 자동으로 인식합니다.
예를 들어 Next.js 프로젝트라면 Application Preset에 Next.js가 표시될 수 있습니다.
처음 배포하는 단순한 프로젝트라면 자동으로 인식된 설정을 확인하고 진행하면 됩니다.
다만 프로젝트 구조가 특수하거나 하위 폴더에 실제 앱이 있다면 Root Directory를 확인해야 합니다.
또한 환경변수를 사용하는 프로젝트라면 Environment Variables에 필요한 값을 등록해야 합니다.
6. Deploy 버튼으로 웹사이트 공개하기
설정 확인이 끝났다면 Deploy 버튼을 누릅니다.
이제 Vercel이 프로젝트를 분석하고 웹사이트를 만드는 작업을 시작합니다.
이 과정을 배포(Deploy)라고 합니다.
배포 진행 과정
- GitHub에서 프로젝트 코드 가져오기
- 프로젝트 구조와 프레임워크 분석
- 필요한 패키지 설치
- 프로젝트 빌드
- 인터넷에 공개
배포가 진행되는 동안 Build Logs에 작업 내용이 표시됩니다.
처음에는 시간이 조금 걸릴 수 있습니다.
작업이 완료될 때까지 화면을 닫지 말고 기다립니다.
정상적으로 완료되면 Congratulations 화면이 나타납니다.
Congratulations 화면이 나타났다면 첫 번째 웹사이트 배포가 완료된 것입니다. 이제 Continue to Dashboard를 눌러 프로젝트 관리 화면으로 이동합니다.
7. 나만의 Vercel 웹사이트 주소 확인하기
배포가 끝나면 인터넷에서 접속할 수 있는 주소가 만들어집니다.
Vercel 프로젝트 화면에서 Domains 항목을 확인합니다.
다음과 비슷한 주소가 표시됩니다.
https://my-first-site.vercel.app
이 주소가 바로 내 웹사이트의 인터넷 주소입니다.
주소를 클릭하면 새 브라우저 탭에서 웹사이트가 열립니다.
주소 뒤에 다른 단어가 붙는 이유
내가 원하는 프로젝트 이름이 이미 사용되고 있다면 Vercel이 구분을 위해 추가 문자를 붙일 수 있습니다.
예를 들어 다음과 같은 주소가 만들어질 수 있습니다.
my-first-site-demo-gules.vercel.app
이것은 오류가 아닙니다.
정확한 주소는 프로젝트 화면의 Domains 항목에서 확인하면 됩니다.
스마트폰에서도 확인하기
PC에서 만든 웹사이트를 스마트폰으로 열어 봅니다.
- Vercel에서 공개 주소를 복사합니다.
- 카카오톡 나와의 채팅에 주소를 보냅니다.
- 스마트폰에서 해당 주소를 누릅니다.
- 웹사이트가 정상적으로 열리는지 확인합니다.
이제 다른 사람에게도 웹사이트 주소를 공유할 수 있습니다.
공개된 웹사이트는 누구나 접속할 수 있습니다. 전화번호, 집 주소, 주민등록번호, 개인 비밀번호, API 키 등을 웹페이지나 공개 저장소에 올리지 않도록 주의하세요.
8. GitHub 수정 사항은 자동으로 배포된다
Vercel의 가장 편리한 기능 중 하나가 자동 배포입니다.
처음 한 번 GitHub와 Vercel을 연결해 놓으면 이후에는 GitHub에 새로운 작업 기록을 올릴 때마다 자동으로 배포가 시작됩니다.
매번 Vercel에 로그인해서 Deploy를 누를 필요가 없습니다.
자동 배포 실습하기
이번에는 안티그래비티에서 웹사이트에 문장 하나를 추가해 보겠습니다.
안티그래비티 채팅창에 다음 프롬프트를 입력합니다.
메인 페이지 맨 아래에 "오늘 처음으로 인터넷에 웹사이트를 공개했습니다!"라는 문장을 추가해줘. 글자색은 빨간색으로 해줘. 다른 부분은 건드리지 마. 수정이 끝나면 변경 내용을 커밋하고 GitHub로 push해줘. 커밋 메시지는 "첫 공개 기념 문장 추가"로 해줘.
AI가 작업을 완료하면 다음 세 가지가 순서대로 진행됩니다.
- 웹사이트 코드 수정
- Git 커밋 및 GitHub Push
- Vercel 자동 배포
여기서 중요한 점은 세 번째 단계입니다.
GitHub에 Push가 완료되면 Vercel이 변경 사항을 감지해 자동으로 새로운 배포를 시작합니다.
따라서 Vercel 화면에서 Deploy 버튼을 다시 누를 필요가 없습니다.
자동 배포가 시작되었는지 확인하기
Vercel 대시보드에서 내 프로젝트를 선택합니다.
왼쪽 메뉴의 Deployments를 클릭합니다.
가장 위에 새로운 배포 기록이 나타나는지 확인합니다.
배포가 진행되는 동안 Building 등의 상태가 표시될 수 있습니다.
잠시 기다리면 Ready로 변경됩니다.
이후 공개 주소를 새로 고침하면 방금 추가한 문장이 나타납니다.
코드 수정 → 커밋 → GitHub Push → Vercel 자동 배포
이 과정을 반복하면 웹사이트를 계속 업데이트할 수 있습니다.
9. Vercel Ready와 Error 상태 확인하기
GitHub에 코드를 올렸다고 해서 무조건 웹사이트 공개까지 완료된 것은 아닙니다.
Vercel에서 실제 배포가 성공했는지 확인해야 합니다.
Ready는 배포 성공
Deployments 화면에서 초록색 표시와 함께 Ready가 나타나면 해당 배포가 성공한 것입니다.
이제 공개 주소를 새로 고침하여 변경 사항을 확인하면 됩니다.
Error는 배포 실패
빨간색 Error가 나타나면 배포 과정에서 문제가 발생한 것입니다.
이때 이전에 성공한 버전이 계속 공개 주소에 표시될 수 있습니다.
따라서 GitHub에 Push한 것만 확인하지 말고 Ready까지 확인하는 습관이 중요합니다.
배포 오류 해결하기
먼저 Vercel Deployments에서 실패한 배포 항목을 클릭합니다.
Build Logs를 열어 빨간색 오류 메시지를 찾습니다.
오류 내용을 복사한 다음 안티그래비티 채팅창에 붙여 넣습니다.
Vercel 웹사이트 배포가 실패했어.
아래 오류 내용을 분석해줘.
[여기에 Build Logs 오류 내용 붙여 넣기]
초보자도 이해할 수 있도록 원인을 설명하고, 기존 기능을 삭제하지 않는 방법으로 수정해줘. 수정 후 로컬에서 빌드가 정상적으로 되는지 확인하고, 커밋과 GitHub Push까지 진행해줘.
AI가 문제를 수정하고 GitHub에 다시 Push하면 Vercel에서 새로운 배포가 시작됩니다.
이번에도 Ready가 표시되는지 확인해야 합니다.
10. Vercel에서 자주 발생하는 문제와 해결 방법
① GitHub 저장소가 목록에 보이지 않는다
원인
- GitHub 저장소 접근 권한이 없음
- Vercel GitHub 앱에 해당 저장소가 선택되지 않음
- 다른 GitHub 계정으로 로그인함
해결 방법
GitHub 연결 설정에서 Vercel 앱이 해당 저장소에 접근할 수 있는지 확인합니다.
② 웹사이트 주소를 열었는데 예전 화면이 보인다
원인
새로운 배포가 아직 완료되지 않았거나 브라우저에 이전 화면이 캐시되어 있을 수 있습니다.
해결 방법
- Vercel Deployments에서 Ready 확인
- 브라우저에서 Ctrl + F5 누르기
- 그래도 바뀌지 않으면 시크릿 창에서 열기
③ Deployments에 Error가 나타난다
원인
- 프로그램 코드 오류
- 필요한 패키지가 설치되지 않음
- 빌드 명령어 설정 오류
- 환경변수 누락
해결 방법
Build Logs를 확인하고 오류 메시지를 안티그래비티에 전달합니다.
④ 프로젝트는 배포되었는데 일부 기능이 작동하지 않는다
원인
로컬 환경에만 설정된 환경변수나 외부 서비스 인증 정보가 배포 환경에 등록되지 않았을 수 있습니다.
해결 방법
Vercel 프로젝트의 Settings → Environment Variables에서 필요한 환경변수를 등록합니다.
값을 등록한 뒤에는 새 배포가 필요할 수 있습니다.
⑤ 웹사이트 접속 시 404 오류가 나타난다
원인
잘못된 경로로 접속했거나 프로젝트의 페이지 경로 및 빌드 설정에 문제가 있을 수 있습니다.
해결 방법
먼저 Domains에 표시된 정확한 주소를 사용하고, 접속한 경로와 프로젝트의 페이지 구성을 확인합니다.
11. Vercel 사용 시 꼭 기억해야 할 사항
처음 웹사이트를 배포할 때는 다음 내용을 기억하면 좋습니다.
- GitHub에 프로젝트가 먼저 올라가 있어야 합니다.
- Vercel과 GitHub를 한 번 연결하면 자동 배포를 사용할 수 있습니다.
- 코드 수정 후 커밋과 Push를 진행해야 합니다.
- Deployments에서 Ready 상태를 확인해야 합니다.
- 공개 웹사이트에 개인정보를 올리지 않아야 합니다.
- API 키와 비밀번호는 환경변수로 안전하게 관리해야 합니다.
- 무료 Hobby 요금제는 개인적이고 비상업적인 용도에 한정됩니다.
마무리: 이제 내가 만든 웹사이트를 인터넷에 공개해 보자
Vercel을 사용하면 복잡한 서버를 직접 구축하지 않아도 웹사이트를 인터넷에 공개할 수 있습니다.
처음에는 회원가입과 GitHub 연결 과정이 조금 낯설 수 있습니다.
하지만 한 번 연결해 놓으면 이후에는 훨씬 편리합니다.
안티그래비티에서 코드를 수정하고 GitHub에 Push하면 Vercel이 자동으로 새로운 버전을 배포하기 때문입니다.
① Vercel 회원가입
② GitHub 계정 연결
③ 프로젝트 Import
④ Deploy 버튼 클릭
⑤ vercel.app 주소 확인
⑥ GitHub Push 후 Ready 상태 확인
이제 여러분이 만든 웹사이트는 내 컴퓨터 안에만 있는 프로그램이 아닙니다.
인터넷 주소를 통해 다른 사람들과 공유할 수 있는 실제 웹사이트가 된 것입니다.
다음 단계에서는 Vercel에 배포한 웹사이트에 사용자 입력 기능이나 문의하기 기능을 추가해 보세요.
참고 자료: 스마택트 바이브코딩 5차시 - 한 사이클 천천히
원본 학습 자료 보기
