Vercel은 무엇을 해주는 서비스일까
바이브 코딩으로 웹사이트를 만들다 보면 어느 순간 이런 질문을 만나게 됩니다.
‘이걸 다른 사람도 접속할 수 있게 하려면 어떻게 해야 하지?’
내 컴퓨터에서 웹사이트가 열리는 것과 인터넷에서 실제 서비스를 운영하는 것은 다른 일입니다.
작성한 코드를 인터넷에서 실행할 수 있는 모습으로 바꾸고, 사람들이 찾아올 주소를 연결하고, 새로운 버전이 만들어질 때마다 기존 서비스와 교체해야 합니다.
Vercel은 이 과정을 도와주는 서비스입니다.
Vercel을 웹사이트 파일을 보관하는 곳으로만 생각할 수도 있습니다. 하지만 실제로는 코드를 받아 웹사이트를 만들고, 미리 확인할 주소를 제공하고, 문제가 없다면 실제 인터넷에 공개하는 과정까지 연결해 줍니다.
Next.js뿐 아니라 SvelteKit, Nuxt, Astro, Vite를 비롯한 여러 프레임워크를 지원합니다. 프로젝트에 사용된 프레임워크를 확인해 기본적인 빌드와 배포 설정을 적용할 수도 있습니다. Vercel의 프레임워크 지원 설명
Cloudflare가 과일 가게의 주소 표지판과 경비를 맡는 서비스였다면, Vercel은 과일 가게를 짓고 문을 열어주는 시공·운영팀에 가깝습니다.
과일 가게를 연다고 생각해 보겠습니다
온라인에서 과일을 파는 가게를 만들었다고 가정해 보겠습니다. 우리가 작성한 코드는 가게의 설계도입니다. 설계도만 컴퓨터에 저장해 두면 나만 볼 수 있을 뿐, 손님은 가게에 들어올 수 없습니다.
Vercel은 이 설계도를 받아 실제로 들어갈 수 있는 가게를 만들어 줍니다. 그리고 새 설계도가 들어올 때마다 새 가게를 지어 확인할 수 있게 합니다.
| Vercel의 기능 | 과일 가게로 비유하면 | 실제로 하는 일 |
|---|---|---|
| 빌드 | 설계도로 가게를 짓는 일 | 작성한 코드를 웹사이트로 만듭니다. |
| 배포 | 완성된 가게의 문을 여는 일 | 다른 사람이 접속할 수 있는 주소를 만듭니다. |
| Preview | 정식 개장 전 임시 매장 | 새 버전을 별도 주소에서 먼저 확인합니다. |
| Production | 실제 손님이 방문하는 본점 | 최종 버전을 공식 주소에 공개합니다. |
| CDN | 여러 지역에 마련한 과일 보관소 | 이미지와 파일을 방문자와 가까운 곳에서 전달합니다. |
| Functions | 주문이 들어왔을 때 일하는 직원 | 로그인, 문의, 결제처럼 요청에 따라 필요한 코드를 실행합니다. |
| 도메인과 SSL | 가게 주소와 잠긴 주문 봉투 | 내 주소를 연결하고 방문자와 서비스 사이의 정보를 암호화합니다. |
Vercel Functions는 요청이 들어왔을 때 필요한 서버 코드를 실행합니다. 도메인을 연결하면 DNS 확인 후 SSL 인증서도 자동으로 준비됩니다. Vercel Functions 설명, Vercel의 SSL 인증서 설명
Vercel의 가장 편리한 기능 중 하나는 새 버전을 바로 본점에 올리지 않아도 된다는 점입니다.
새 간판과 진열대를 만들었다고 곧바로 영업 중인 본점에 설치하면, 문제가 생겼을 때 실제 손님이 불편을 겪습니다. Vercel은 먼저 별도의 임시 매장을 만들어 줍니다. 이곳에서 화면이 잘 보이는지, 버튼이 제대로 작동하는지 확인한 뒤 본점에 반영할 수 있습니다. 이 임시 매장이 Preview이고, 손님이 실제로 방문하는 본점이 Production입니다. Vercel의 배포 환경 설명
GitHub 같은 Git 저장소를 연결하면 이 과정은 더 간단해집니다. 새로운 작업을 올릴 때마다 Vercel이 변경 내용을 확인해 Preview를 만들고, 정식 브랜치에 합치면 Production을 새 버전으로 배포할 수 있습니다. 과일 가게의 설계도를 새로 제출할 때마다 임시 매장을 자동으로 지어주는 셈입니다. Vercel의 Git 배포 설명
무료 버전으로 사용 가능한 범위
Vercel의 무료 요금제는 Hobby입니다. 개인 프로젝트와 비상업적인 실험을 시작하기 위한 요금제입니다. Vercel Hobby 요금제 설명
과일 가게로 비유하면 아직 물건을 팔기 전, 내가 만든 진열대와 주문 방식을 시험해 보는 연습용 매장에 가깝습니다. 포트폴리오, 개인 블로그, 공부용 웹사이트, 아이디어를 확인하기 위한 작은 서비스라면 무료로 시작할 수 있습니다.
무료 버전에서도 Git 저장소를 연결해 배포하고, 변경할 때마다 Preview를 만들 수 있습니다. 공식 주소를 연결하면 HTTPS도 사용할 수 있고, CDN을 통해 이미지와 파일을 전달할 수 있습니다. Functions도 제공되기 때문에 작은 로그인 기능이나 문의 접수처럼 요청을 처리하는 기능을 시험해 볼 수 있습니다.
기본적인 방어 기능도 포함됩니다. Vercel은 모든 요금제에 자동 DDoS 완화와 WAF를 제공하지만, 직접 만들 수 있는 방어 규칙과 사용 범위는 요금제에 따라 다릅니다. 과일 가게 입구에 기본 경비는 있지만, 가게마다 복잡한 출입 규칙을 마음대로 만들 수 있는 것은 아닌 셈입니다. Vercel Firewall 설명
무료라고 해서 모든 사용량이 무제한인 것은 아닙니다. 가게를 짓는 횟수, 손님에게 파일을 전달하는 양, 주문을 처리하는 직원의 근무 시간처럼 각 기능에는 무료 한도가 있습니다. Hobby에서는 한도를 넘겼을 때 추가 사용량을 바로 구매할 수 없고, 기능에 따라 다시 사용할 수 있을 때까지 기다려야 할 수 있습니다.
따라서 무료 버전은 ‘서비스가 작을 때만 쓰는 요금제’라기보다 ‘개인적이고 비상업적인 목적에서 정해진 범위 안으로 운영하는 요금제’라고 이해하는 편이 정확합니다. Vercel은 Hobby를 개인·비상업 용도로 제한하고 있습니다. Vercel의 상업적 이용 기준
유료 버전은 언제 필요할까
유료 전환은 다음 세 가지 상황을 기준으로 살펴보면 됩니다.
첫 번째는 만든 서비스로 돈을 벌기 시작했을 때입니다.
과일을 구경할 수 있는 연습용 가게가 아니라 실제로 과일을 판매하는 가게가 됐다면 Hobby의 목적과 맞지 않습니다. 결제, 광고, 유료 회원, 고객을 위한 업무처럼 서비스가 수익 활동과 연결된다면 방문자가 적더라도 Pro를 검토해야 합니다.
두 번째는 여러 사람이 함께 운영하기 시작했을 때입니다.
혼자 설계도를 고치고 가게를 확인할 때는 개인 계정으로도 충분할 수 있습니다. 하지만 개발자, 디자이너, 기획자가 함께 Preview를 확인하고 의견을 나누려면 팀 협업 기능이 필요합니다. Vercel의 Pro는 팀 협업과 Viewer 권한, 더 빠른 빌드 같은 기능을 제공합니다. Vercel 요금제 비교
세 번째는 무료 한도를 넘었다는 이유로 가게 문을 닫을 수 없을 때입니다.
개인 실험이라면 한도를 넘긴 뒤 기다릴 수 있습니다. 하지만 실제 손님의 주문이나 예약을 받는 서비스라면 사용량이 늘었다는 이유로 기능이 멈추면 곤란합니다. Pro에서는 포함된 사용 크레딧을 사용하고, 이를 넘은 사용량을 추가로 처리할 수 있습니다. 비용 한도와 알림을 설정해 예상하지 못한 지출을 관리할 수도 있습니다.
정리하면 Hobby는 개인 연습용 가게, Pro는 실제 영업을 하는 가게에 가깝습니다.
Vercel을 사용할 때 꼭 알아야 할 것
Vercel을 사용할 때 가장 먼저 알아야 하는 것은 Preview와 Production의 차이입니다.
Preview는 새로 꾸민 임시 매장입니다. 주소를 받은 사람만 먼저 들어가 화면과 기능을 확인할 수 있습니다. Production은 실제 손님이 찾아오는 본점입니다.
바이브 코딩으로 만든 결과를 바로 Production에 올리면 작은 실수도 실제 서비스에 나타납니다. 먼저 Preview에 배포해 화면, 버튼, 로그인과 주요 기능을 확인한 뒤 Production에 반영하는 습관이 필요합니다.
두 번째는 환경변수입니다.
API 키나 데이터베이스 주소처럼 코드에 그대로 적어두면 안 되는 값은 Vercel의 환경변수에 보관할 수 있습니다. 과일 가게로 비유하면 창고 비밀번호나 거래처 연락처를 간판에 적지 않고, 직원만 확인할 수 있는 보관함에 넣어두는 것입니다.
Preview에는 시험용 값을 넣고 Production에는 실제 운영 값을 넣는 식으로 환경별 값을 나눌 수 있습니다. 값을 바꿔도 이미 만들어진 가게가 저절로 바뀌는 것은 아니기 때문에, 새로 배포해야 적용된다는 점도 알아야 합니다. Vercel 환경변수 설명
이제 Codex한테 ‘배포해줘’라고 입력해 봅시다!