Vercel 사용법 완벽 정리 — 마케터가 5분 만에 랜딩페이지 배포하는 법

Claude Code로 랜딩페이지를 만들었는데, "이걸 어디에 올리지?" 하고 막막한 순간이 옵니다. 개발자에게 부탁하면 일정이 일주일 밀리고, 카페24·닷홈은 PHP 호스팅이라 React/Next.js 프로젝트와 안 맞고, AWS는 콘솔만 봐도 어지럽습니다. 지피터스 22기 스터디 모집 페이지·웨이트리스트 페이지·결제 완료 페이지를 직접 운영하면서 가장 빨리 정착한 도구가 Vercel이었습니다.

이 글에서는 마케터·비개발자가 Vercel을 처음 쓸 때 알아야 할 핵심만 정리합니다. GitHub 연결부터 도메인·환경변수까지 30분 안에 끝내는 흐름, Hobby vs Pro 가격 차이, Netlify와의 차이, 그리고 마케터가 자주 빠지는 함정까지 솔직하게 다룹니다.

Vercel이 뭔가요?

Vercel은 GitHub에 코드를 push하면 자동으로 사이트를 배포하고 글로벌 CDN으로 전송해주는 프론트엔드 클라우드 플랫폼입니다. Next.js를 만든 회사이기도 해서 React·Next.js 프로젝트에 가장 최적화되어 있지만, Vue·Svelte·Astro·정적 HTML도 똑같이 잘 동작합니다. 마케터 관점에서는 "개발자 손 안 빌리고 코드 push만으로 광고 랜딩페이지를 띄우는 가장 빠른 도구"라고 보면 됩니다.

서울 리전 CDN을 포함하고 있어 한국에서 접속할 때 TTFB가 30~40ms 수준으로 떨어집니다. 광고 트래픽을 받는 페이지에서 0.5초 차이가 광고 비용으로 환산되면 꽤 크기 때문에, 한국 마케터가 굳이 Vercel을 쓰는 이유 중 하나입니다.

핵심 기능 3가지

1. Git 연동 자동 배포 — push 한 번이면 배포 끝

GitHub·GitLab·Bitbucket 저장소를 연결해 두면 git push 할 때마다 Vercel이 자동으로 빌드를 돌리고 새 버전을 띄웁니다. 별도의 FTP나 SCP 명령어가 필요 없습니다. Claude Code나 Cursor로 작업한 결과를 GitHub에 올리는 그 순간, 1~2분 안에 라이브 URL이 갱신됩니다.

git add .
git commit -m "헤드라인 카피 수정"
git push origin main
# → Vercel이 알아서 빌드 → 배포 → CDN 전파

2. Preview URL — PR마다 자동으로 변형 페이지 생성

Vercel의 진짜 강점은 모든 PR(Pull Request)마다 고유한 프리뷰 URL이 자동 생성된다는 점입니다. 메인 브랜치를 건드리지 않고도 "이번 캠페인용 카피"·"이번 광고 소재용 히어로"를 별도 URL로 운영할 수 있습니다. A/B 테스트가 필요한 광고 마케터에게는 가장 핵심적인 기능입니다.

흐름은 이렇습니다.

1. GitHub에서 새 브랜치 생성 (feature/cta-test)
2. CTA 카피 수정 후 PR 등록
3. Vercel이 자동으로 cta-test-projectname.vercel.app 같은 임시 URL 발급
4. PR 코멘트에 URL 자동 추가
5. 광고 트래픽을 메인 URL과 프리뷰 URL로 분기해서 성과 비교

3. 도메인·SSL·CDN 자동 처리

Cafe24·가비아 같은 호스팅 업체에서 SSL 인증서를 발급받느라 며칠 헤맨 경험이 있다면, Vercel은 다른 세계입니다. 커스텀 도메인을 입력하고 DNS 레코드 두 줄만 추가하면 Let's Encrypt SSL이 자동 발급되고, 글로벌 CDN을 통해 전 세계로 전송됩니다. 평균 5~30분 안에 HTTPS가 작동합니다.

이렇게 써보세요 — 실전 활용법 3가지

활용 1: Claude Code로 만든 랜딩페이지 30분 배포

지피터스 22기 스터디 모집 페이지를 만든 흐름이 정확히 이렇습니다.

1. Claude Code에서 페이지 생성 — "Next.js 14 App Router로 AI 스터디 모집 랜딩페이지 만들어줘. 히어로 + 커리큘럼 + 후기 + FAQ + CTA"
2. GitHub에 push — Claude Code 안에서 /commit 하면 끝
3. Vercel 대시보드에서 Import Git Repository — 저장소 선택, Framework는 자동 감지(Next.js)
4. Deploy 버튼 클릭 — 1분 30초 빌드, 즉시 projectname.vercel.app URL 발급
5. Settings → Domains에 ai.gpters.org 같은 서브도메인 연결 — DNS CNAME만 추가하면 끝

코드 한 줄 직접 안 쳐도, 마케터 입장에서 30분 안에 라이브 URL이 나옵니다.

Photo by Growtika on Unsplash

활용 2: 광고 캠페인별 프리뷰 URL로 A/B 테스트

지피터스 22기 광고는 메타 페이스북·인스타그램·카카오 모먼트 3개 채널에서 다른 카피로 운영했습니다. Vercel 프리뷰 URL을 활용한 흐름은 이렇게 짧습니다.

각 광고 소재의 UTM에 해당 프리뷰 URL을 꽂아서 채널별 전환율을 분리해서 측정할 수 있습니다. Webflow·Framer는 이 패턴이 어려운데, Vercel은 PR 만들고 푸시하면 끝입니다.

활용 3: 환경변수로 API 키 안전하게 분리

랜딩페이지에서 Stripe·Airtable·Mixpanel 키를 직접 코드에 박아 두면 GitHub에 키가 노출됩니다. Vercel은 Settings → Environment Variables에서 키를 별도로 등록하면 빌드 시점에만 주입됩니다.

# 코드에는 키가 없음
const stripeKey = process.env.NEXT_PUBLIC_STRIPE_KEY;

# Vercel 대시보드에 별도 등록
NEXT_PUBLIC_STRIPE_KEY=pk_live_...
MIXPANEL_TOKEN=...
AIRTABLE_API_KEY=...

환경별(Production/Preview/Development)로 다른 값을 설정할 수 있어서, 프리뷰 URL에서는 테스트 키를 쓰고 프로덕션만 실키로 운영하는 안전한 패턴이 가능합니다.

가격 — 어떤 플랜이 적합한가

2026년 5월 기준 Vercel 플랜은 다음과 같습니다.

가장 중요한 함정 한 가지 — Vercel의 Hobby(무료) 플랜은 상업적 사용을 공식적으로 금지합니다. 회사 도메인·결제가 발생하는 페이지·광고 트래픽이 들어오는 랜딩페이지는 Hobby에 올리면 약관 위반입니다. 개인 포트폴리오·블로그·학습 프로젝트만 무료로 쓸 수 있습니다. 사이드 프로젝트라도 수익이 생기는 순간 Pro($20/월)로 올라가야 안전합니다.

Pro는 월 $20에 $20 사용 크레딧이 포함되어 있어서, 트래픽이 적은 초기 스타트업은 실제로는 추가 비용 없이 운영되는 경우가 많습니다. 트래픽이 늘어나면 종량제로 자동 청구됩니다.

Vercel vs Netlify vs Cafe24 — 어떤 도구가 맞나

마케터 입장에서는 Next.js·React 기반의 랜딩페이지·캠페인 페이지라면 Vercel, 순수 정적 사이트나 노코드 폼·인증이 중요하다면 Netlify, 쇼핑몰이나 워드프레스 블로그라면 Cafe24 식으로 구분하면 됩니다. 세 가지를 같이 쓰는 회사도 많습니다.

⚠️ 알아두어야 할 단점 4가지

마케팅 자료에는 잘 안 나오지만, 실제 운영하다 보면 마주치는 한계입니다.

1. Hobby 플랜의 상업적 사용 금지 — 가장 흔히 놓치는 함정. 광고 트래픽을 받거나 결제가 발생하는 페이지는 Pro 필수.
2. 함수 실행 시간 제한 — Hobby는 10초, Pro는 60초까지만 서버리스 함수가 실행됩니다. 무거운 AI API 호출이나 PDF 생성 같은 작업은 별도 인프라(Railway, Render)가 필요합니다.
3. 이미지 변환 쿼터 — Vercel Image Optimization은 Hobby 월 5,000회, Pro 월 5,000회 무료 후 종량제. 트래픽이 많아지면 Cloudflare Images 같은 외부 서비스가 더 저렴할 수 있습니다.
4. 로그 보관 기간 짧음 — Hobby는 1일, Pro는 3일치 로그만 봅니다. 장기 디버깅이나 컴플라이언스가 필요하면 Datadog·Logtail 같은 외부 로그 도구를 붙여야 합니다.

자주 묻는 질문

Vercel은 무료로 쓸 수 있나요?

네, Hobby 플랜은 무료입니다. 단 개인 포트폴리오·학습 프로젝트·비상업적 사이드 프로젝트에만 허용됩니다. 회사 사이트·광고 랜딩페이지·결제가 발생하는 페이지는 약관 위반이라 Pro($20/월) 이상이 필요합니다.

Vercel 시작하려면 뭐가 필요한가요?

GitHub 계정과 배포할 코드 저장소만 있으면 됩니다. vercel.com에 GitHub 계정으로 가입한 뒤 "Import Project"를 누르고 저장소를 선택하면 자동으로 프레임워크를 감지해서 빌드합니다. 별도 설치는 필요 없고 브라우저에서 모든 작업이 가능합니다.

Vercel과 Netlify의 차이점은?

Vercel은 Next.js를 만든 회사여서 React·Next.js에 가장 최적화되어 있고, Netlify는 정적 사이트와 폼·인증 같은 부가 기능이 강합니다. 가장 큰 실무 차이는 Netlify는 무료 플랜에서도 상업적 사용이 허용되는 반면, Vercel Hobby는 비상업적 용도만 허용된다는 점입니다.

Vercel은 한국어를 지원하나요?

대시보드 UI는 영어가 기본이지만 메뉴 구조가 단순해서 한국어 매뉴얼 없이도 사용 가능합니다. 도메인·환경변수·로그 같은 핵심 기능은 모두 직관적입니다. 서울 리전 CDN을 포함하고 있어 한국 사용자 접속 속도도 우수합니다.

Vercel로 만든 사이트를 다른 곳으로 옮길 수 있나요?

네, 소스 코드는 GitHub에 그대로 있기 때문에 언제든 Netlify·Cloudflare Pages·AWS Amplify 같은 다른 플랫폼으로 이전 가능합니다. Vercel은 호스팅만 담당하고 코드 소유권은 사용자에게 있어서 락인 위험이 낮습니다. 단 Vercel 전용 기능(Edge Config, Vercel KV 등)을 사용했다면 그 부분은 다시 작성해야 합니다.

💡 한 발 더 — 나의 생각

22기 랜딩페이지를 Vercel로 옮기면서 가장 크게 느낀 건, 마케터에게 Vercel은 "배포 도구"가 아니라 "광고 캠페인 인프라"라는 점입니다.

기존에 Cafe24·Wix·Notion 페이지로 랜딩을 만들 때는 메시지를 한 번 정하면 그게 끝이었습니다. 카피를 바꾸려면 다시 디자이너·개발자에게 부탁하고, 그동안 광고는 일단 돌아갑니다. Vercel 프리뷰 URL을 알고 나서 흐름이 뒤집혔습니다. 광고 카피 후보 3개를 만들고, 각각 다른 브랜치로 push하면 30분 안에 3개의 살아있는 페이지가 생깁니다. UTM만 다르게 꽂으면 채널별·소재별 전환율을 분리해서 측정할 수 있습니다.

마케터가 직접 코드를 쓸 필요는 없습니다. Claude Code·Cursor가 이미 한국어 프롬프트로 페이지를 만들어주고, Vercel은 그 결과를 배포만 합니다. 마케터의 일은 "어떤 메시지를 어떤 채널에 띄울지" 결정하는 것으로 좁혀집니다. 이 흐름은 앞으로 12개월 안에 마케터 채용 공고의 자격 요건을 바꿀 가능성이 높습니다. "Vercel·Cursor·Claude Code 기본 사용 가능"이 마케터 JD에 들어가는 날이 멀지 않았다고 봅니다.

그리고 한 가지 더 — Hobby 플랜 상업적 사용 금지는 진심입니다. 지피터스 운영 초기에 Hobby로 시작했다가 트래픽이 커지면서 Vercel에서 상업적 사용 위반 안내 메일을 받은 적이 있습니다. 회사 도메인·결제·광고 트래픽이 들어가는 페이지는 처음부터 Pro($20)로 시작하세요. 한 달 $20은 광고비 한 번 더 쓰는 것보다 훨씬 저렴한 보험입니다.

참고 자료

• Vercel 공식 사이트
• Vercel Pricing 공식 페이지
• Vercel Deployments 공식 문서
• Vercel vs Netlify 공식 비교
• Vercel Hobby 플랜 약관

원문: https://vercel.com/