2026년 Vercel에 웹사이트 배포하는 두 가지 방법

발행: 3일 전 (2026년 6월 9일 PM 07:07 GMT+9)

12 분 소요

출처: Dev.to

대부분의 Vercel 튜토리얼은 프로젝트가 이미 Git 저장소에 존재한다고 가정합니다.
이는 유지보수를 계획하고 있는 애플리케이션에 보통 맞는 워크플로우이지만, 때때로 ChatGPT, Claude, Gemini 등으로 생성한 정적 HTML 페이지 하나만 가지고 전체 저장소를 만들지 않고도 공개 URL이 필요할 때가 있습니다.
이 가이드는 두 상황을 모두 다룹니다.

GitHub에서 프로젝트 배포하기
AI가 만든 정적 페이지를 HTML Deployer 로 퍼블리시하기

Vercel은 웹 프로젝트를 빌드하고 배포하기 위한 클라우드 플랫폼입니다.
Git 저장소에 직접 연결해 프로젝트를 빌드하고 공개 배포 URL을 생성할 수 있습니다. 연결된 브랜치에 새 커밋을 푸시하면 Vercel이 자동으로 새로운 배포를 만들어 줍니다.

Vercel은 많은 일반적인 프레임워크의 설정을 자동으로 감지하지만, 다음과 같은 항목은 직접 커스터마이징할 수 있습니다.

루트 디렉터리
빌드 명령어
출력 디렉터리
환경 변수
프레임워크 프리셋

개인 프로젝트와 실험용이라면 보통 Free Hobby 플랜이 시작점이 됩니다. 프로덕션 프로젝트에 사용하기 전에 현재 사용 제한을 확인하세요.

언제 어떤 워크플로우를 선택해야 할까?

이 워크플로우는 버전 관리, 정기적인 업데이트, 협업, 자동 배포가 필요한 프로젝트에 가장 적합합니다.
필요한 준비물:

GitHub 계정
Vercel 계정
프로젝트가 들어있는 GitHub 저장소
유효한 진입 파일 또는 빌드 설정

간단한 정적 웹사이트의 저장소 구조 예시:

my-website/
├── index.html
├── styles.css
├── script.js
└── images/

배포하기 전에 로컬에서 웹사이트가 정상 동작하는지 확인하세요.

1. Vercel 계정 만들기

Vercel에 접속해 계정을 생성합니다.
GitHub 계정으로 로그인하면 배포 과정에서 저장소 연결이 훨씬 쉬워집니다.
회원가입 과정에서 요구되는 이메일 인증이나 계정 확인 절차를 마칩니다.

2. 새 프로젝트 생성 및 GitHub 연결

Vercel 대시보드에서 New Project 를 클릭하고 Git provider 로 GitHub 를 선택합니다.

Vercel이 저장소에 접근할 수 있도록 권한을 요청합니다. 모든 저장소에 접근을 허용하거나 특정 저장소만 선택할 수 있습니다.

권한 부여가 끝나면 프로젝트 가져오기 화면으로 돌아갑니다.
배포하고 싶은 저장소를 찾아 Import 를 클릭합니다.

Vercel이 저장소를 분석하고 프레임워크와 빌드 설정을 자동으로 감지합니다.

단순 정적 HTML 프로젝트라면 별도 변경이 필요 없을 수 있습니다.
프레임워크 기반 프로젝트라면 감지된 설정을 검토하고 필요에 따라 수정합니다.

배포 전 확인해야 할 항목

항목	설명
Project name	Vercel 대시보드에서 프로젝트를 식별하는 이름이며, 기본 배포 URL에도 영향을 줄 수 있습니다.
Framework preset	Vercel이 자동 감지한 프레임워크가 실제 프로젝트와 일치하는지 확인합니다.
Root directory	웹사이트가 저장소 루트가 아닌 하위 폴더에 있을 경우 경로를 지정합니다. 예시: `repository/` `├── documentation/` `└── website/` `├── index.html` `└── styles.css` → Root directory 를 `website` 로 설정
Build command / Output directory	프레임워크 기반 프로젝트는 보통 빌드 명령어와 출력 디렉터리가 필요합니다. 예시: `Build command: npm run build` `Output directory: dist`
Environment variables	API 키, 서비스 URL 등 저장소에 직접 커밋하면 안 되는 값들을 여기서 추가합니다. 절대 비공개 자격 증명을 GitHub에 커밋하지 마세요.

설정이 모두 올바르게 보이면 Deploy 버튼을 클릭합니다.

Vercel이 필요한 의존성을 설치하고 빌드 과정을 실행한 뒤 배포를 완료합니다. 배포가 끝나면 브라우저에서 열 수 있는 공개 URL이 제공됩니다.

3. 이후 업데이트 흐름

저장소가 연결된 뒤에는 다시 가져올 필요가 없습니다. 로컬에서 프로젝트를 수정하고 커밋한 뒤 GitHub에 푸시하면:

git add .
git commit -m "Update landing page"
git push

Vercel이 새로운 커밋을 감지해 자동으로 새로운 배포를 생성합니다. 이전 배포를 검토하거나, 변경 사항을 비교하고, 프로젝트 설정을 관리하거나, 커스텀 도메인을 연결할 수 있습니다.

Git 없이 바로 배포하고 싶을 때

때로는 Git 기반 워크플로우가 과도하게 복잡할 수 있습니다. 예를 들어, ChatGPT, Claude, Gemini 등에게 다음과 같은 것을 만들도록 요청했을 때:

랜딩 페이지
포트폴리오
제품 프로토타입
이벤트 페이지
캠페인 페이지
작은 정적 웹사이트

코드를 파일에 복사하고 저장소를 만든 뒤 GitHub에 푸시하고 Vercel에 가져오는 방법도 있지만, 단일 정적 페이지라면 더 간단한 흐름이 필요합니다.

HTML Deployer 소개

저는 HTML Deployer 라는 Chrome 확장 프로그램을 만들었습니다. 이 확장은 지원되는 AI 채팅 화면에서 생성된 HTML을 자동으로 감지하고, 반응형 미리보기를 제공하며, 설정된 호스팅 대상으로 바로 퍼블리시합니다.

주의: 유지보수되는 애플리케이션을 대체하기 위한 것이 아니라, 정적 AI‑생성 페이지를 빠르게 공유 URL로 바꾸고 싶을 때 유용합니다.

Vercel 연결 설정 (한 번만 하면 됨)

HTML Deployer 설정 화면 열기
Add Vercel 을 퍼블리시 타깃으로 추가
필요한 Vercel 설정 입력 (API 토큰, 프로젝트 ID 등)
타깃 저장
연결이 정상 작동하는지 확인

필요한 정확한 자격 증명은 확장에서 사용하는 배포 방식에 따라 다릅니다.

실제 배포 흐름

ChatGPT, Claude, Gemini 등에서 완전한 HTML 페이지 생성
HTML 코드 옆에 있는 Deploy 버튼 클릭
데스크톱, 태블릿, 모바일에서 미리보기 확인
레이아웃이나 콘텐츠 문제 수정
퍼블리시 타깃으로 Vercel 선택
Deploy to Host 클릭
생성된 URL을 열어 실시간 페이지 테스트

배포 전 미리보기를 확인하는 것이 중요합니다. AI‑생성 HTML은 특정 화면 크기에서는 정상처럼 보여도 모바일 레이아웃이 깨지거나 이미지가 누락되거나, 잘못된 링크·스크립트가 포함될 수 있습니다.

상황별 권장 워크플로우

상황	권장 워크플로우
유지보수가 필요한 웹 애플리케이션	GitHub + Vercel
팀 프로젝트	GitHub + Vercel
빈번한 업데이트가 필요한 프로젝트	GitHub + Vercel
Next.js·React 등 프레임워크 사용	GitHub + Vercel
단일 AI‑생성 HTML 페이지	HTML Deployer 혹은 수동 정적 배포
빠른 프로토타입·캠페인 페이지	HTML Deployer
버전 히스토리가 필요한 프로젝트	GitHub + Vercel

GitHub 워크플로우는 초기 설정에 시간이 조금 더 걸리지만, 정식 버전 관리와 지속적인 개발 기반을 제공합니다.
확장 프로그램 워크플로우는 설정 단계를 크게 줄여 주지만, 작은 정적 페이지에 더 적합합니다.

배포 후 반드시 체크할 항목

데스크톱·모바일 레이아웃
네비게이션 링크
이미지·외부 자산 로드 여부
폼 동작
JavaScript 인터랙션
페이지 타이틀·메타데이터
HTTPS 적용 여부
환경 변수 설정
커스텀 도메인 구성
브라우저 콘솔 오류

배포가 성공했다는 것은 파일이 정상적으로 퍼블리시됐다는 의미일 뿐, 웹사이트 전체가 올바르게 동작한다는 보장은 아닙니다.

결론

GitHub + Vercel : 프로젝트가 계속 성장하고, 버전 관리·협업·자동 배포가 필요할 때 사용합니다.
HTML Deployer : AI 도구가 만든 단일 정적 페이지