[Vercel] 프론트엔드 배포, 3분 만에 끝내기! Vercel 완벽 가이드 🚀

 

안녕하세요! 개발자 여러분.

혹시 프로젝트를 다 만들어놓고 "이거 도대체 어떻게 배포하지?" 고민하며 AWS EC2 설정이나 Nginx 세팅 때문에 골머리를 앓으신 적 없으신가요?

 

오늘은 프론트엔드 개발자들의 구세주, Vercel(버셀)을 활용해 복잡한 서버 설정 없이 클릭 몇 번으로 내 웹사이트를 전 세계에 배포하는 방법을 정리해 드립니다.

.

 

---

🤔 Vercel이 뭔가요?

Vercel은 프론트엔드 프레임워크와 정적 사이트를 위한 클라우드 플랫폼입니다. Next.js를 만든 회사에서 운영하고 있어서 React, Next.js 프로젝트에 찰떡궁합이지만, Vue, Svelte, Angular 등 거의 모든 최신 웹 기술을 지원합니다.

 

왜 Vercel을 써야 할까요? (장점 4가지)

1. Zero Configuration (설정 0): 복잡한 빌드 스크립트나 서버 설정이 필요 없습니다. 코드만 올리면 알아서 감지하고 배포합니다.
2. 자동화된 CI/CD: GitHub에 코드를 Push만 하면 자동으로 빌드와 배포가 시작됩니다.
3. 압도적인 속도: 전 세계에 퍼져 있는 엣지 네트워크(CDN)를 통해 사용자와 가장 가까운 곳에서 콘텐츠를 전송합니다.
4. 무료 플랜 (Hobby): 개인 프로젝트(비상업적 용도)는 평생 무료이며, 성능도 매우 넉넉합니다.

---

🛠 Vercel 사용법 (가장 쉬운 GitHub 연동)

가장 많이 사용하는 GitHub 리포지토리 연동 방식으로 배포해 보겠습니다.

 

Step 1. 준비하기

먼저 배포하려는 프로젝트 코드를 본인의 GitHub(또는 GitLab, Bitbucket) 리포지토리에 업로드해 주세요.

 

Step 2. Vercel 가입 및 프로젝트 가져오기

1. Vercel 공식 홈페이지에 접속합니다.
2. GitHub 계정으로 Log In 합니다.
3. 대시보드 우측 상단의 [Add New...] 버튼을 누르고 [Project]를 선택합니다.
4. 내 GitHub 리포지토리 목록이 보이면, 배포할 프로젝트 옆의 [Import] 버튼을 클릭합니다.

[이미지: Vercel 대시보드 Import 화면 예시]

 

Step 3. 설정 및 배포 (Deploy)

Configure Project 화면이 나옵니다.

• Framework Preset: Next.js나 React 등을 Vercel이 자동으로 감지하므로 그대로 둡니다.
• Environment Variables: 만약 API Key 같은 환경 변수가 필요하다면 여기서 추가합니다. (나중에 설정도 가능해요!)
• 준비가 되었다면 하단의 [Deploy] 버튼을 클릭하세요.

 

Step 4. 배포 완료 🎉

1~2분 정도 기다리면 화려한 폭죽 애니메이션과 함께 배포가 완료됩니다.
생성된 https://프로젝트명.vercel.app 링크를 클릭하면 전 세계 어디서든 내 사이트에 접속할 수 있습니다.

[이미지: 배포 완료 축하 화면 예시]

---

 

 

💻 터미널이 편하다면? (Vercel CLI)

웹사이트 접속 없이 터미널에서 바로 배포하고 싶다면 CLI를 사용해 보세요.

1. 설치: npm i -g vercel
2. 로그인: vercel login
3. 배포: 프로젝트 폴더에서 vercel 입력

단, vercel 명령어만 입력하면 Preview(테스트용) 배포가 됩니다. 실제 사용자에게 보여줄 Production(운영) 배포를 하려면 아래 명령어를 쓰세요.

    vercel --prod
  

---

✨ 알아두면 쓸모 있는 꿀팁

1. 환경 변수 (Environment Variables) 관리

API 키나 DB 접속 정보는 코드에 직접 적으면 보안 사고가 납니다.

• 경로: Project Settings > Environment Variables
• 이곳에 변수를 등록하면 배포 시 안전하게 주입됩니다.

 

2. 프리뷰 배포 (Deploy Previews)

팀 프로젝트 할 때 정말 유용한 기능입니다. GitHub에서 새로운 브랜치를 만들어 작업하고 **Pull Request(PR)**를 날리면, Vercel 봇이 해당 코드만 적용된 미리보기 URL을 댓글로 달아줍니다. 메인 사이트에 합치기 전에 미리 테스트해 볼 수 있죠!

 

3. 커스텀 도메인 연결

기본 제공되는 .vercel.app 대신 내가 구입한 도메인(www.mysite.com)을 연결할 수 있습니다.

• 경로: Project Settings > Domains
• 설정도 매우 직관적이라 초보자도 쉽게 연결할 수 있습니다.

---

📝 마무리

Vercel은 "개발자는 코드에만 집중하세요, 배포는 우리가 할게요"라는 철학을 가장 잘 실현한 서비스입니다. 포트폴리오 사이트나 토이 프로젝트를 준비 중이라면 고민하지 말고 Vercel을 사용해 보세요.

 

지금 바로 GitHub에 푸시하고, Vercel에서 Deploy 버튼을 눌러보세요!