고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
내가 만든 index.html 한 장이 내이름.vercel.app이라는 인터넷 주소로 바뀌는 데는 10분이면 충분합니다.
이 글은 Vercel(버셀)에 GitHub 계정으로 가입하고, 저장소를 연결해서, 정적 홈페이지 한 장을 무료로 배포하는 과정을 처음부터 끝까지 따라 하는 실습입니다.
결론부터 말하면, 카드 등록 없이 무료로 시작할 수 있고, 한 번 연결해두면 이후에는 코드를 고쳐 올릴 때마다 알아서 다시 배포됩니다.
이 글은 "개발 도구 따라하기" 시리즈 5편입니다.
GitHub 계정과 저장소가 이미 있다는 전제로 시작하니, 아직 없다면 시리즈 3편 git-github-beginner-setup(Git·GitHub 계정과 저장소 만들기)을 먼저 보고 오는 편이 좋습니다.
예상 소요 시간은 약 10분입니다.
Vercel은 GitHub 저장소를 연결해 정적 홈페이지를 무료로 배포하는 서비스입니다. GitHub 계정으로 가입하고, New Project에서 저장소를 Import한 뒤 Deploy만 누르면 프로젝트이름.vercel.app 주소가 자동으로 생깁니다. 개인 홈페이지·포트폴리오는 무료 Hobby 플랜으로 충분합니다.
Vercel이 뭐고, 왜 초보에게 편한가
Vercel은 쉽게 말해, 내가 만든 웹페이지 파일을 인터넷에 올려주고 주소까지 붙여주는 호스팅 서비스입니다.
정적 사이트라는 말이 자주 나오는데, 여기서는 index.html·CSS·이미지처럼 서버 프로그램 없이 화면만 보여주는 페이지를 뜻합니다.
초보에게 편한 이유는 두 가지입니다.
첫째, GitHub 저장소만 연결하면 복잡한 서버 설정 없이 배포가 끝납니다.
둘째, 한 번 연결해두면 코드를 고쳐 올릴 때마다 자동으로 다시 배포됩니다.
개인적으로는 "터미널 명령어를 몰라도 버튼 몇 번으로 내 주소가 생긴다"는 점이 입문자에게 가장 큰 장점이라고 봅니다.
Step 1. Vercel에 GitHub 계정으로 가입하기
먼저 Vercel과 GitHub를 연결해두면, 앞으로 저장소를 바로 불러올 수 있습니다.
가입 페이지에서 Continue with GitHub 버튼을 누릅니다.
이미 있는 GitHub 계정으로 로그인하면, 저장소 연동이 준비된 상태로 가입이 끝납니다.
가입 도중 GitHub App 권한을 승인하는 화면이 나옵니다.
여기서 저장소 접근 범위를 All repositories(모든 저장소)나 Only select repositories(선택한 저장소만) 중에서 고르게 됩니다.
초보라면 Only select repositories로 이번에 올릴 저장소 하나만 골라도 됩니다.
필요하면 나중에 GitHub 설정에서 저장소를 추가할 수 있습니다.
이 권한은 "push하면 자동 배포"를 위한 것으로, Vercel이 저장소를 읽고 변경을 감지할 수 있게 해줍니다.
✅ 이렇게 보이면 성공: 로그인 후 Vercel 대시보드(내 프로젝트 목록 화면)가 열리고, 오른쪽 위나 가운데에Add New…또는New Project버튼이 보이면 가입이 끝난 것입니다.
⚠️ 이게 안 되면: 권한 화면에서 저장소를 하나도 안 골랐다면, 다음 단계의 Import 목록이 비어 보일 수 있습니다.
이럴 때는 뒤에서 다룰 "Adjust GitHub App Permissions"로 저장소를 추가하면 됩니다.
Step 2. New Project에서 내 저장소 Import하기
이번에는 GitHub에 있는 내 저장소를 Vercel로 불러올 차례입니다.
대시보드에서 Add New… → Project를 누르거나, New Project 버튼을 누릅니다.
Import Git Repository 목록이 나오면, 홈페이지 파일이 들어 있는 저장소를 찾습니다.
해당 저장소 옆의 Import 버튼을 누릅니다.
참고로 저장소에 넣어둘 최소 index.html은 이 정도면 충분합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 첫 홈페이지</title>
</head>
<body>
<h1>안녕하세요, 제 첫 홈페이지입니다</h1>
<p>Vercel로 배포한 정적 페이지예요.</p>
</body>
</html>파일명은 반드시 소문자 index.html이어야 합니다.
대문자 Index.html이면 접속했을 때 404 오류가 날 수 있습니다.
✅ 이렇게 보이면 성공: Import 목록에서 내 저장소가 보이고, Import를 누르면 설정 화면(Configure Project)으로 넘어갑니다.
⚠️ 이게 안 되면: 목록에 내 저장소가 아예 안 보이는 경우가 가장 흔합니다.
Import 화면의 Adjust GitHub App Permissions를 눌러 해당 저장소를 접근 목록에 추가하세요.
개인 저장소는 본인이 소유자(Owner)여야 불러올 수 있고, 공동 작업자(Collaborator) 자격만으로는 임포트되지 않습니다.
Step 3. Deploy 눌러서 내 주소 받기
이제 실제로 배포를 실행해 *.vercel.app 주소를 받아볼 차례입니다.
설정 화면(Configure Project)이 열리면 프로젝트 이름을 확인합니다.
Framework Preset(프레임워크 종류) 항목이 보이는데, index.html 한 장짜리 정적 페이지라면 Other로 두거나 감지 안 됨 상태 그대로 둡니다.
Build나 Output 설정은 비워둔 채로 Deploy 버튼을 누릅니다.
정적 HTML은 빌드 과정이 필요 없어서 별도 설정 없이 그대로 올라갑니다.
Vercel 공식 문서 표현으로는, 정적 파일(HTML·CSS·이미지)을 프로젝트 루트나 public이라는 폴더에서 찾아 서빙한다고 합니다.
즉 index.html을 저장소 맨 위(루트)에 두면 됩니다.
✅ 이렇게 보이면 성공: 배포가 끝나면 축하 화면과 함께 프로젝트이름.vercel.app 주소가 나타납니다. 그 주소를 눌러 내가 만든 페이지가 뜨면 완료입니다.
⚠️ 이게 안 되면: 프레임워크가 엉뚱하게 잡혀 빌드를 시도하다 실패하는 경우가 있습니다.
이럴 때는 Framework Preset을 Other로 바꾸고 Build·Output 설정을 비운 채 다시 Deploy하면 됩니다.
코드를 고치면 매번 다시 배포해야 할까
아닙니다. 한 번 연결해두면 git push만 해도 Vercel이 알아서 다시 배포합니다.
Vercel 공식 문서에는 "연결된 뒤로는 push할 때마다 기본적으로 배포한다"고 적혀 있습니다.
흐름을 한 줄로 풀면 이렇습니다.
코드를 GitHub에 push → Vercel이 변경을 감지 → 자동으로 빌드·배포 → 같은 주소에 새 버전 반영.
버튼을 따로 누를 필요가 없습니다.
종이책에 비유하면, 원고를 고쳐서 출판사에 넘기기만 하면 전국 서점에 깔린 책이 알아서 새 판으로 바뀌는 것과 비슷합니다. 내가 서점마다 뛰어다닐 필요가 없습니다.
보통 main 브랜치에 올린 최신 코드가 실제 주소에 바로 반영됩니다.
잘못 올렸더라도, 문제가 된 커밋을 되돌리면(revert) 직전 버전이 즉시 다시 라이브가 됩니다.
초보 입장에서는 "잘못 올려도 이전으로 바로 돌아간다"는 점이 꽤 든든합니다.
이렇게 push 한 번으로 배포까지 이어지는 흐름은, 자동화 구축기(blog-automation-buildlog)에서 다룬 "사람이 반복 작업을 안 하게 만드는" 방향과 같은 결입니다.
정말 무료인가, 애드센스를 붙여도 될까
개인 홈페이지·포트폴리오·이력서라면 무료 Hobby 플랜으로 충분합니다.
다만 광고를 붙이거나 상품을 팔면 이야기가 달라지니, 이 부분은 꼭 짚고 넘어가야 합니다.
먼저 무료 플랜의 월간 한도를 봅니다.
| 항목 | Hobby 무료 한도(월) | 초보 눈높이 메모 |
|---|---|---|
| 대역폭(Fast Data Transfer) | 최대 100 GB | 개인 페이지 한 장이면 거의 못 채움 |
| 하루 배포 수 | 100회 | 하루에 수정 몇 번 하는 정도로는 여유 |
| 프로젝트 수 | 200개 | 여러 개 만들어도 넉넉함 |
| 이미지 변환 | 최대 5,000회 | 정적 페이지엔 거의 무관 |
수치는 Vercel 공식 문서(Hobby 플랜·Fair Use 가이드라인, 2026년 7월 기준)를 따랐습니다.
한도를 넘어도 요금이 자동으로 붙지는 않습니다.
대신 대부분의 경우 해당 기능이 30일이 지날 때까지 일시 정지되는 방식입니다.
그래서 카드 등록 없이 시작해도 예상치 못한 청구가 생길 걱정은 적습니다.
여기서 초보가 놓치기 쉬운 함정이 하나 있습니다.
Vercel 무료 Hobby 플랜은 비상업적 개인 사용만 허용합니다. 광고 삽입(구글 애드센스 포함), 상품 판매, 제작 대가 수령, 기부 요청은 모두 상업적 사용으로 분류되어 유료 Pro 플랜이 필요합니다.
Vercel 공식 Fair Use 가이드라인(2026-06 기준)은 "누군가의 금전적 이익을 목적으로 한 배포"를 상업적 사용으로 정의합니다.
결제 처리, 상품·서비스 광고, 제휴 링크가 주 목적인 사이트, 그리고 애드센스 같은 광고 삽입이 여기에 포함됩니다.
기부 요청까지 상업적 사용에 들어간다는 점은 특히 놓치기 쉽습니다.
Pro 플랜은 개발자 시트 기준 월 20달러(2026년 7월 기준)입니다.
개인적으로는, 블로그나 포트폴리오에 애드센스를 붙일 계획이 조금이라도 있다면 처음부터 이 규정을 알고 시작하는 게 낫다고 봅니다.
CLI로도 배포할 수 있다 (몰라도 됩니다)
웹 UI 말고, 터미널에서 명령어로 배포하는 방법도 있습니다.
CLI는 터미널에서 명령어를 입력해 실행하는 방식입니다.
설치는 npm i -g vercel, 로그인은 vercel login, 배포는 프로젝트 폴더에서 vercel 명령을 입력하면 됩니다.
첫 실행 때는 프로젝트를 설정할지, 어느 계정으로 올릴지, 기존 프로젝트에 연결할지, 이름은 무엇으로 할지 등을 대략 이런 순서로 물어봅니다.
실제 주소로 바로 올리려면 vercel --prod를 씁니다.
다만 웹 UI로 한 번 배포해두면 이후에는 git push만 해도 되므로, CLI는 몰라도 됩니다.
알아두면 좋은 보조 경로 정도로만 기억해두세요.
자주 막히는 부분
초보가 실제로 가장 많이 걸리는 세 가지를 모았습니다.
저장소가 Import 목록에 안 보여요
GitHub App 권한을 "선택한 저장소만"으로 줬는데 해당 저장소를 안 골랐거나, 저장소를 나중에 만든 경우입니다.
Import 화면의 Adjust GitHub App Permissions에서 저장소를 접근 목록에 추가하세요.
개인 저장소는 본인이 소유자여야 임포트됩니다.
접속하면 404 NOT_FOUND가 떠요
대부분 index.html이 서빙되는 위치에 없기 때문입니다.
파일이 하위 폴더에 있거나, 파일명이 대문자 Index.html이거나, Root·Output 디렉토리 설정이 실제 구조와 안 맞을 때 생깁니다.
index.html을 저장소 루트(또는 public 폴더)에 두고, 파일명을 소문자로 맞추면 대부분 해결됩니다.
페이지는 뜨는데 스타일이 다 깨져요
HTML에서 CSS·이미지 경로를 잘못 지정했거나 대소문자를 틀린 경우입니다.
href="style.css"처럼 index.html 기준 상대경로로 쓰고, 파일명 대소문자를 정확히 맞추세요.
Final Check
배포 후 아래 항목을 순서대로 확인하면 됩니다.
☐ GitHub 저장소 루트에 소문자 index.html이 있는가
☐ Vercel에 GitHub 계정으로 가입·로그인했는가
☐ New Project → 저장소 Import → Deploy까지 마쳤는가
☐ 프로젝트이름.vercel.app 주소로 접속해 페이지가 뜨는가
☐ 코드를 수정해 git push했을 때 자동으로 새 배포가 뜨는가
☐ 광고·판매·기부 없이 개인 용도로만 쓰는가 (무료 Hobby 유지 조건)
결론
정리하면, index.html 한 장을 GitHub에 올리고 Vercel에서 Import → Deploy만 하면 내 인터넷 주소가 생깁니다.
이후에는 코드를 고쳐 push할 때마다 자동으로 다시 배포되니, 처음 한 번만 연결해두면 됩니다.
개인적으로는 이 "내 손으로 만든 페이지가 실제 주소로 열리는 순간"이 개발 입문에서 가장 동기부여가 되는 경험이라고 생각합니다.
주소만 있는 *.vercel.app로도 충분하고, 내 도메인 연결은 프로젝트 Settings → Domains에서 나중에 붙이면 됩니다.
다음 편은 조금 더 나아가, 개발 환경을 통째로 담는 도구인 Docker Desktop을 다룰 예정입니다(선택편).
터미널이 아직 낯설다면 이번 Vercel 배포까지만 해두어도 충분한 한 걸음입니다.
참고한 자료
Vercel 공식 문서의 Hobby 플랜 안내, Fair Use 가이드라인(상업적 사용 정의·대역폭), GitHub 프로젝트 배포·자동 배포 문서, CLI 배포 문서, 그리고 404 오류 디버깅 KB 문서를 참고했습니다. 수치와 한도는 2026년 6~7월 기준 공식 문서를 따랐으며, 요금·한도는 지역과 시점에 따라 달라질 수 있어 발행 전 공식 문서 확인이 필요합니다.
728x90
반응형
'서버·개발 > 코드 노트' 카테고리의 다른 글
| localhost와 포트 번호란 — :3000, :8080이 대체 뭐야 (0) | 2026.07.20 |
|---|---|
| 쿠키·캐시·세션 차이 쉽게 정리 — 헷갈리는 셋을 한 번에 (0) | 2026.07.20 |
| Docker Desktop 설치 따라하기 — 윈도우 초보자용, 언제 필요한지까지 (0) | 2026.07.18 |
| 터미널용 Claude Code 설치 완전 따라하기 — 윈도우·맥 초보자용 (0) | 2026.07.18 |
| Git 설치와 GitHub 가입·연동 완전 따라하기 — 첫 push까지 한 번에 (1) | 2026.07.18 |
댓글 영역