AI 도구로 만든 화면을 팀원에게 주소로 보냈는데 "안 열려요"라는 답이 왔다면, Vercel이 필요한 상황입니다. 이 자료는 Vercel을 코딩을 몰라도 이해할 수 있게 지난 편과 같은 식당 하나에 빗대어 설명합니다. 내 PC는 부엌, GitHub는 레시피 금고, Vercel은 금고의 레시피를 가져가 간판을 달고 손님을 맞는 매장입니다.
위 영상(약 2분)으로 흐름을 먼저 보시고, 자세한 내용은 아래 첨부한 PDF(20쪽, 읽는 데 10분)를 보시면 됩니다. 개발 도구 3종 시리즈의 두 번째 편이고, 지난 편은 GitHub(레시피 금고), 다음 편은 Supabase(창고·장부)입니다. 지난 편을 안 보셨어도 이 자료만으로 이해할 수 있습니다.
이 자료로 알게 되는 것
- Vercel이 왜 필요한지 — "내 PC에서는 되는데 팀원은 못 열어요" 문제를 어떻게 푸는지
- 용어 여섯 개의 뜻 — 배포, 도메인, 자동 배포, 미리보기, 환경변수, 롤백
- 꼭 지킬 것 세 가지와 처음 한 번 배포해 보는 순서
왜 내 PC에서만 열릴까
AI 도구로 만든 화면은 처음에 localhost:3000 같은 주소로 열립니다. localhost는 "이 컴퓨터 자신"이라는 뜻이라, 팀원이 같은 주소를 치면 그 사람 컴퓨터를 찾아가서 아무것도 안 나옵니다. 노트북을 닫으면 아무도 못 쓰고, 폰으로도 못 엽니다. 만든 화면을 인터넷에 올려 누구나 주소로 열 수 있게 하는 일을 배포라고 하고, Vercel이 이 일을 대신 해 줍니다. 배포하면 내프로젝트.vercel.app 같은 주소가 생기고, 내 PC를 꺼도 24시간 열려 있습니다.
Vercel 용어를 매장 말로 바꾸면
| Vercel 용어 | 매장 말로 하면 |
|---|---|
| 프로젝트 (project) | 매장 하나 — GitHub 저장소 하나와 짝 |
| 배포 (deploy) | 새 메뉴를 매장에 진열 |
| 도메인 · URL | 매장 간판(주소) |
| 자동 배포 (Git 연동) | 금고에 새 레시피를 넣으면 알아서 진열 — 1~2분 뒤 반영 |
| 미리보기 배포 (preview) | 시식 코너 — 정식 메뉴판에 올리기 전 임시 주소로 맛보기 |
| 프로덕션 (production) | 정식 메뉴판 — 손님이 실제로 보는 대표 주소 |
| 환경변수 (env vars) | 직원만 여는 열쇠 보관함 — 비밀 키를 코드 밖에 보관 |
| 롤백 (rollback) | 어제 메뉴판으로 되돌리기 — 버튼 하나로 직전 화면 복구 |
핵심은 한 줄입니다. 매장은 부엌이 아니라 금고에서 레시피를 가져갑니다. 그래서 내 노트북이 꺼져 있어도 매장은 열려 있고, 반대로 GitHub에 올리지 않은 수정은 매장에 반영되지 않습니다.
AI 코딩 도구에게 이렇게 말하면 됩니다
| 이렇게 말하면 | 하는 일 |
|---|---|
| 여기까지 저장하고 GitHub에 올려줘 | 자동 배포 — 1~2분 뒤 매장에 반영 |
| 비밀 키는 환경변수로 빼줘 | 코드에서 키를 꺼내 열쇠 보관함으로 |
| Vercel에 넣어야 할 환경변수 목록 알려줘 | 매장 보관함에 넣을 이름 확인 |
| (빌드 로그 캡처) 이거 왜 실패했어? | 빨간 표시가 뜬 원인 찾기 |
| 내 PC에서 빌드 먼저 돌려봐줘 | 올리기 전에 실패 미리 잡기 |
| 로그인한 사람만 보이게 해줘 | 사내 정보 화면 문단속 |
처음 한 번은 vercel.com에서 GitHub 저장소를 연결하는 작업이 필요합니다(PDF 16쪽, 약 10분). 그다음부터는 "GitHub에 올려줘" 한 마디로 매장이 바뀝니다. 고쳤는데 화면이 그대로라면 ① GitHub에 올렸는지 ② Vercel에서 빌드가 실패하지 않았는지 ③ 새로고침(Ctrl+F5) 순서로 확인하세요.
꼭 지킬 것 세 가지
- 비밀 키·비밀번호는 코드에 적지 않고 환경변수에 넣습니다. 내 PC에서는 .env 파일, Vercel에서는 환경변수 — 같은 열쇠를 두 곳에 각각 보관하는 셈입니다.
- vercel.app 주소는 인터넷에 공개됩니다. 주소만 알면 사외에서도 열리므로, 사내 자료나 개인정보가 보이는 화면은 로그인 같은 보호 장치를 먼저 넣으세요.
- 무료(Hobby) 요금제는 공식 기준상 개인·비상업 용도로 한정됩니다. 부서에서 실제로 운영할 시스템이라면 회사 계정·요금제로 옮기는 것이 원칙입니다.
Vercel은 브라우저로 여는 화면(조회 화면, 입력 폼, 대시보드)을 내놓는 곳입니다. 내 PC의 엑셀·폴더를 직접 만지는 자동화나 몇 시간씩 도는 작업에는 맞지 않고, 데이터를 오래 쌓아 두는 일은 창고(Supabase)가 맡습니다. 회사 도메인 연결이나 회사 계정으로 옮기는 일은 디지털혁신팀과 협의해 주세요. 궁금한 점은 Teams로 편하게 물어봐 주세요.