AI 도구 사용기

Vercel 가입부터 첫 배포까지 — GitHub 연동으로 자동 배포 설정하기

AR Note 2026. 6. 16. 10:27

코드를 GitHub에 올리면 알아서 웹사이트가 배포된다. Vercel 가입부터 첫 배포 완료까지 순서대로 정리했다.

3줄 요약
  • Vercel은 GitHub에 코드를 올리면 자동으로 URL을 만들어주는 배포 서비스다.
  • 무료 플랜(Hobby)으로 개인 프로젝트 운영에 충분하다.
  • GitHub 저장소 연결 → Framework 자동 감지 → 첫 배포까지 5분이면 된다.

배포가 뭔지부터

로컬에서 만든 웹사이트는 내 컴퓨터에서만 보인다. 다른 사람이 보려면 서버에 올려야 한다. 이걸 배포(deploy)라고 한다.

예전에는 서버를 직접 빌리고, FTP로 파일을 올리고, 도메인을 연결하는 과정을 손으로 다 해야 했다. Vercel은 이 과정을 거의 없애버렸다. GitHub 저장소를 연결하면 코드를 올릴 때마다 자동으로 배포된다.

투자 대시보드를 만들고 Vercel에 올리니까 스마트폰에서도, 회사 컴퓨터에서도 URL 하나로 접속이 됐다. 서버 설정 같은 건 한 번도 건드리지 않았다.

가입 — GitHub 계정으로 바로 된다

vercel.com 접속 → Sign Up → Continue with GitHub

GitHub 계정이 있으면 별도 가입 없이 연동된다. GitHub 권한 승인 화면이 뜨면 Authorize 클릭.

무료 플랜(Hobby) 기준 — 개인 프로젝트엔 충분하다
· 대역폭 100GB/월
· Serverless Functions 실행 시간 제한 있음
· 커스텀 도메인 연결 가능
· 동시 빌드 1개
· 팀 기능 없음 (개인용)

→ 투자 대시보드, 개인 블로그, 포트폴리오 사이트 수준이면 무료로 충분하다.

첫 프로젝트 배포 — GitHub 저장소 연결

로그인 후 대시보드에서 Add New → Project 클릭.

GitHub 저장소 목록이 뜬다. 배포할 저장소 옆 Import 클릭.

다음 화면에서 Framework Preset을 자동으로 감지한다. Next.js면 Next.js로, React면 React로 알아서 잡힌다. 대부분 그냥 두면 된다.

Deploy 버튼 클릭 → 빌드 시작.

1~3분 후 배포 완료. https://[프로젝트명].vercel.app URL이 생성된다.

이후부터는 자동이다

한 번 연결하면 그다음부터는 신경 쓸 게 없다. GitHub 저장소의 main 브랜치에 파일이 올라올 때마다 Vercel이 자동으로 감지해서 새로 빌드하고 배포한다.

내가 하는 건 코드 수정 → GitHub에 올리기(push)뿐이다. 배포는 Vercel이 알아서 한다.

배포 상태 확인하는 법
Vercel 대시보드 → 프로젝트 클릭 → Deployments 탭
각 배포 항목을 클릭하면 빌드 로그를 볼 수 있다.
배포가 실패했을 때 원인도 여기서 확인한다.

환경변수 설정 — API 키를 코드에 넣지 않는 법

API 키나 비밀번호처럼 코드에 직접 쓰면 안 되는 값들은 환경변수로 관리한다.

Vercel 대시보드 → 프로젝트 → Settings → Environment Variables

Key와 Value를 입력하고 어느 환경(Production / Preview / Development)에 적용할지 선택하면 된다.

예시:
ALPHA_VANTAGE_API_KEY = abc123xyz
SUPABASE_URL = https://xxxxx.supabase.co

저장 후 코드에서는 process.env.ALPHA_VANTAGE_API_KEY로 가져온다. 실제 키 값이 코드에 남지 않는다.

주의 — NEXT_PUBLIC_ 접두어가 붙은 환경변수는 브라우저에서도 접근 가능하다. API 키처럼 노출되면 안 되는 값에는 절대 붙이지 말 것.

커스텀 도메인 연결

기본 URL(프로젝트명.vercel.app) 말고 내 도메인을 연결할 수 있다.

Settings → Domains → 도메인 입력 → Add

도메인 등록 업체(가비아, Namecheap 등)에서 DNS 설정을 Vercel이 알려주는 값으로 바꾸면 된다. 보통 10~30분 내 적용된다.

배포 실패했을 때

가끔 배포가 실패한다. 대부분 이 3가지 중 하나다.

빌드 에러: 코드에 오류가 있어서 빌드가 안 됨. Deployments → 실패한 배포 클릭 → Build Logs에서 에러 메시지 확인.

환경변수 누락: 로컬에서는 .env 파일로 쓰던 값이 Vercel에는 등록 안 된 경우. Environment Variables에서 추가하면 된다.

패키지 버전 충돌: package.json의 라이브러리 버전이 맞지 않는 경우. 에러 로그에서 어떤 패키지인지 나온다.

설계도 — Vercel 배포 흐름

내 컴퓨터 (로컬 개발)
  코드 수정
        ↓
GitHub Repository
  main 브랜치에 push
        ↓
Vercel 자동 감지
  빌드 시작 (npm install → npm run build)
        ↓
배포 완료
  ├─ Production URL: https://[프로젝트].vercel.app
  └─ 커스텀 도메인: https://내도메인.com

API 요청 흐름
  브라우저 → /api/prices (Serverless Function)
                ↓
          환경변수에서 API 키 로드
                ↓
          외부 API 호출 (Alpha Vantage 등)
                ↓
          JSON 응답 → 브라우저
  (API 키는 서버에서만, 브라우저에 노출 안 됨)