GitHub 코드를 Vercel 주소로 보내기

Vercel Git 연결은 GitHub 저장소의 브랜치와 커밋을 배포로 바꿉니다. 배포는 코드를 브라우저가 읽을 파일로 조립해 인터넷 주소에 올리는 일입니다. 작업 브랜치를 푸시하면 Preview 주소가 생기고, Production Branch로 정한 main에 합치면 Production 주소가 갱신됩니다.

환경 변수가 없는 첫 배포에서는 예제 앱의 “Supabase 연결 전” 안내를 확인합니다. 이 화면은 GitHub에서 Vercel까지 코드가 전달됐다는 뜻이며, 다음 카드에서 데이터 표를 연결합니다.

실행 순서

예제 앱을 GitHub의 새 비공개 저장소에 올립니다. `.env.local`이 커밋 목록에 없다는 것을 먼저 확인합니다.
```
이 예제 앱을 GitHub 비공개 저장소에 올리기 전에 커밋할 파일을 확인해 주세요. `.env.local`, API 키, 토큰과 비밀번호가 있으면 값을 보여 주지 말고 멈춰 주세요. 안전하면 첫 커밋과 푸시까지 진행해 주세요.
```
확인비밀값 검사가 먼저 끝나고 예제 코드만 GitHub에 올라갑니다.
Vercel에서 Add New Project를 열고 방금 만든 GitHub 저장소를 가져옵니다. 예제 폴더만 있는 저장소가 아니라면 Root Directory를 예제 앱 경로로 지정합니다.
Vercel Git 연결 공식 안내
확인Vercel 프로젝트 설정에 선택한 GitHub 저장소와 Root Directory가 보입니다.
환경 변수를 넣지 않은 채 처음 배포합니다.

확인배포 주소에 ‘Supabase 연결 전’ 안내가 보입니다.
작업 브랜치를 하나 만들고 문구 한 줄을 바꿔 푸시한 뒤 Preview 주소를 기록합니다.
```
홈 화면의 설명 문구 한 줄만 고칠 작업 브랜치를 만들고 변경해 주세요. diff를 보여 준 뒤 커밋하고 푸시하되 main에는 아직 합치지 마세요.
```
확인새 브랜치가 GitHub에 올라가고 Vercel에 별도 Preview 배포가 생깁니다.

직접 해보기

그대로 붙여넣기

이 저장소와 연결된 Vercel 배포 설정을 확인해 주세요. Production Branch, 최근 Preview 주소와 최근 Production 주소를 표로 정리하고 아직 재배포하지 마세요.

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

내 상황에 맞춰

제 웹 프로젝트 [저장소 주소]를 Vercel에 연결하려고 합니다. 배포 전에 공개하면 안 되는 파일과 Root Directory를 확인하고, 제가 대시보드에서 눌러야 할 순서를 적어 주세요.

한 단계 더

최근 Vercel Preview 배포와 Production 배포의 커밋이 같은지 확인하고, 다르면 어떤 변경이 아직 main에 들어가지 않았는지 알려 주세요.

Preview 주소를 새 브라우저 창에서 열고 바꾼 문구가 보이는지 확인한 뒤 Production 주소와 나란히 기록합니다.

헷갈리기 쉬운 것

Preview가 열렸다는 이유로 main에 바로 합치지 않습니다. 실제 화면과 브라우저 오류를 확인한 변경만 합칩니다. Vercel Hobby는 개인·비상업 프로젝트 조건이 있으므로 사업용 사이트는 현재 요금 조건을 확인합니다.

왜 이렇게 작동하나요

GitHub은 웹페이지를 만드는 코드를 보관하고, Vercel은 그 코드를 방문자가 열 수 있는 화면으로 배포합니다.

Vercel은 GitHub 브랜치의 커밋을 읽어 배포합니다. 작업 브랜치와 main이 다른 커밋을 가리키면 Preview와 Production 화면도 달라집니다.

용어 풀이

전체 용어집 →

Preview: 작업 브랜치를 main에 합치기 전에 확인하는 Vercel의 임시 배포입니다.
Production: 방문자에게 공개할 기본 브랜치의 배포입니다.
배포: 조립된 파일을 인터넷에 올려 주소로 열리게 하는 단계입니다.

2026-08-19 기준 · 출처 · Vercel — Git, Vercel — GitHub, Vercel — Hobby plan

GitHub 코드를 Vercel 주소로 보내기

실행 순서

직접 해보기

헷갈리기 쉬운 것

관련 카드

용어 풀이