GitHub · Vercel · Netlify 가이드

+

GitHub에 올린 코드를 Vercel·Netlify가 자동으로 웹 주소로 띄워줍니다

GitHub Pages https://내아이디.github.io/프로젝트이름/ → Vercel https://내프로젝트.vercel.app/ Netlify https://내프로젝트.netlify.app/

💼 바쁜 리더라면, 이 세 가지만 기억하면 됩니다

① GitHub = 코드를 안전하게 보관하는 창고입니다. 구글 드라이브의 코드 버전이라고 생각하면 됩니다.

② Vercel · Netlify = 창고에 있는 코드를 실제 웹사이트 주소로 띄워주는 배달 서비스입니다.

③ 내가 할 일 = 명령어를 외울 필요 없이 Claude에게 한국어로 말하는 것뿐입니다. 직접 만든 랜딩페이지·대시보드·데모를 개발자나 외주 없이 바로 공개할 수 있습니다.

GitHub는 무엇인가요?

항목	GitHub바로가기 ↗
한 줄 정체성	코드를 저장·관리·공유하는 클라우드 창고
무엇을 할 수 있나	코드를 인터넷에 백업하고, 변경 이력을 남겨 이전 상태로 되돌리고, 여러 사람이 함께 작업하거나 코드를 공개할 수 있습니다.
만든 사람·연도	2008년 톰 프레스턴 워너, 크리스 완스트라스 등이 창립했습니다. 2018년 마이크로소프트가 인수했습니다.
이름의 뜻·어원	Git(버전 관리 도구) + Hub(중심·허브)의 조합입니다. 2005년에 리누스 토르발스가 만든 도구 'Git'을 인터넷에 모아두는 허브 역할을 한다는 뜻에서, 2008년에 'GitHub'이라는 이름이 붙었습니다. 참고로 영어 단어 git은 영국 속어로 "고집불통" 또는 "얼간이"를 뜻합니다. 토르발스가 자기 이름처럼 고집 센 프로그램이라며 농담조로 붙인 이름이라고 알려져 있습니다.

배포 서비스, Vercel과 Netlify는 무엇이 다른가요?

한 줄 요약 · 둘 다 GitHub과 연동해, 푸시(내 변경사항을 GitHub에 올리는 일)하면 자동으로 배포(웹에 올려 누구나 접속하게 만드는 일)해 주는 서비스입니다. Next.js·React 같은 동적 앱이면 Vercel, 정적 사이트(화면이 거의 바뀌지 않는 일반 웹사이트)에 폼·함수를 간단히 붙이려면 Netlify가 강점을 보입니다. 처음에는 둘 중 무엇을 골라도 정적 사이트는 똑같이 잘 올라갑니다.

항목	Vercel바로가기 ↗	Netlify바로가기 ↗
한 줄 정체성	Next.js를 만든 회사가 운영하는 배포 플랫폼	정적 사이트(Jamstack) 배포를 대중화한 원조 서비스
만든 사람·연도	2015년 기예르모 라우치가 ZEIT로 창업, 2020년 Vercel로 개명했습니다.	2014년 매트 빌만과 크리스천 바흐가 BitBalloon으로 창업, 2015년 Netlify로 개명했습니다.
이름의 뜻·어원	라틴어 vertere(베르테레, 돌다·전환하다)에서 따온 신조어로, "전환·움직임"의 어감을 담았습니다.	Net(네트워크·인터넷) + -ify(~하게 만들다)의 조합입니다. "웹 배포를 누구나 쉽게"라는 의미를 담았습니다. 'Jamstack'이라는 용어를 만든 회사로도 알려져 있습니다.
가장 강한 영역	Next.js·React 같은 동적 프레임워크, 서버리스 함수, 빠른 글로벌 배포	정적 사이트, 폼·인증·함수 같은 내장 기능, 빌드 플러그인 생태계
자동 배포·미리보기	GitHub 푸시 시 자동 빌드 + 브랜치·PR별 Preview URL 제공	동일하게 푸시 시 자동 빌드 + Deploy Preview 제공
무료 플랜·기본 주소	Hobby 플랜(개인·비상업) · `프로젝트.vercel.app`	Free 플랜(개인·소규모) · `프로젝트.netlify.app`
이런 분께 추천	Next.js 앱이나 동적 기능이 핵심인 프로젝트	정적 사이트에 폼·함수를 손쉽게 붙이고 싶은 프로젝트

왜 GitHub와 배포 서비스를 함께 쓸까요?

역할이 다릅니다. GitHub은 '코드 창고', Vercel·Netlify는 '서비스 운영 환경'입니다. 코드는 GitHub에 두고, 자동 배포·빠른 속도·동적 기능이 필요할 때 Vercel·Netlify로 띄웁니다.

GitHub Pages만으로 충분한 경우

오픈소스 프로젝트의 문서나 데모를 코드와 함께 공개할 때
회사 소개·랜딩 페이지처럼 단순한 정적 사이트
블로그·문서·포트폴리오처럼 화면이 거의 바뀌지 않는 사이트
다른 서비스 가입 없이 GitHub 한 계정으로 끝내고 싶을 때

Vercel·Netlify가 진가를 발휘하는 경우

로그인·대시보드·DB 연동처럼 동적 기능이 있는 웹앱을 띄울 때
Next.js·React 같은 프레임워크 앱을 자동 빌드·배포할 때
브랜치별 미리보기 URL로 변경 전·후를 비교할 때
서버나 인프라를 직접 관리하지 않고 빠르게 서비스를 띄우고 싶을 때

이 단계의 목표

GitHub 계정을 만들고 첫 번째 저장소를 생성합니다

1

github.com 접속 → Sign up

github.com에 접속해서 Sign up 버튼을 클릭합니다. 이메일, 비밀번호, 사용자명을 입력하면 끝입니다.

💡 사용자명은 나중에 URL에 포함됩니다. 기억하기 쉬운 영문으로 만드세요. (예: honggildong → hong.github.io)

2

새 저장소 만들기

로그인 후 왼쪽 상단 New 버튼을 클릭합니다.

                    # 저장소 설정
Repository name: my-project    ← 프로젝트 이름 입력
Public / Private 선택          ← 공개 or 비공개
[Create repository] 클릭
                

※ Private(비공개)으로 만들면 나만 볼 수 있습니다.

3

API Key (Personal Access Token) 발급 가장 까다로운 단계

Claude Code가 GitHub에 접근하려면 인증 키가 필요합니다. 화면 위치가 자주 바뀌니 천천히 따라가세요.

1

👤

프로필 클릭

우측 상단 프로필 사진 → Settings

2

🔧

Developer Settings

왼쪽 맨 하단 Developer settings 클릭

3

🔑

토큰 생성

Personal access tokens → Tokens (classic) → Generate new token

                    # 토큰 설정
Note: claude-code-access        ← 이름 (자유롭게)
Expiration: 90 days             ← 유효기간
Scopes: repo 체크 ✓             ← 저장소 접근 권한
[Generate token] 클릭 → 토큰 복사 (한 번만 표시됩니다!)
                

🔒 보안 주의: 이 토큰은 비밀번호와 같습니다. Claude에게 전달할 때 "이 키는 절대 메모리나 파일에 저장하지 마"라고 함께 말하세요. 세션이 끝나면 토큰을 재발급받는 것이 안전합니다.

이 단계의 목표

Claude Code에서 프로젝트를 GitHub에 올립니다

💬 시작 전 확인: Claude Code가 열려 있고, 작업할 프로젝트 폴더가 현재 열려 있어야 합니다. STEP 1에서 발급받은 API Key도 준비하세요.

1

API Key를 Claude에게 전달하기

Claude Code에서 GitHub에 처음 접근할 때 API Key가 필요합니다. 이렇게 말하세요:

                    # Claude에게 이렇게 말하세요
> GitHub Personal Access Token은 ghp_xxxxxxxxxxxx야
> 이 키는 절대 메모리나 파일에 저장하지 마
                

🔒 보안: API Key는 해당 세션에서만 사용하고, 코드나 파일에 절대 저장하지 마세요. 토큰이 노출되면 즉시 GitHub에서 삭제하고 재발급하세요.

2

처음 올릴 때

이미 내 컴퓨터에 프로젝트가 있다면 Claude에게 말하세요:

                    # Claude에게 이렇게 말하세요
> 이 프로젝트를 GitHub에 올려줘
> GitHub 주소는 https://github.com/내아이디/my-project 야
                

GitHub에 있는 프로젝트를 내려받고 싶다면:

                    # Claude에게 이렇게 말하세요
> https://github.com/내아이디/my-project 클론해줘
                

※ Claude가 알아서 git 명령어를 실행해줍니다. 명령어를 외울 필요 없습니다.

3

이후에 수정했을 때

🗣️ 한국어로 말하면 Claude가 알아서 git 명령어를 실행합니다

하고 싶은 것	Claude에게 이렇게 말하세요
변경사항 저장하기	"지금까지 바꾼 거 커밋해줘"
GitHub에 올리기	"GitHub에 푸시해줘"
최신 코드 받기	"GitHub에서 최신 코드 받아줘"
이전 버전으로 돌리기	"마지막 커밋 전으로 되돌려줘"

이 단계의 목표

GitHub의 무료 호스팅 기능을 켜서 내 URL로 사이트가 열리는 것을 확인합니다

💬 어디까지 하면 되나요? 블로그·소개 페이지·포트폴리오처럼 화면이 거의 바뀌지 않는 정적 사이트라면, 이 STEP 3만으로 공개가 끝납니다. 로그인·결제·데이터베이스 같은 동적 기능이 필요하거나, 푸시할 때마다 자동으로 갱신되게 하고 싶다면 STEP 4로 이어가세요.

GitHub Pages 활성화 3단계

1

⚙️

Settings 클릭

저장소 상단 탭에서 Settings 선택

2

📄

Pages 메뉴

왼쪽 사이드바에서 Pages 클릭

3

🚀

branch 선택 후 Save

main 브랜치 선택 → Save
1~2분 후 공개됩니다

저장소에 올린 HTML/CSS/JS 파일이 바로 웹사이트로 공개됩니다. 내 URL은:

https://내아이디.github.io/프로젝트이름/

예) 아이디 hong, 저장소 my-site → https://hong.github.io/my-site/

이 단계의 목표

GitHub와 Vercel(또는 Netlify)을 연동해 푸시하면 자동으로 사이트가 갱신되도록 만듭니다

💬 어느 쪽을 따라 하면 되나요? 아래 1~4단계는 Vercel 기준입니다. Netlify도 흐름이 같으니 맨 아래 'Netlify도 똑같습니다' 박스만 참고하세요. 둘 중 하나만 연동해도 충분합니다.

1

vercel.com 접속 → GitHub로 로그인

vercel.com에 접속해서 Sign Up 또는 Continue with GitHub을 클릭합니다. GitHub 계정과 자동으로 연동되므로 새로 회원가입을 하지 않아도 됩니다.

💡 권한 요청 화면이 뜨면 Authorize Vercel을 눌러 저장소 접근을 허용합니다. 처음에는 무료 Hobby 플랜으로 시작해도 충분합니다.

2

새 프로젝트 만들기 (Import)

대시보드 우측 상단 Add New ▾ → Project를 누르고, GitHub 저장소 목록에서 STEP 1에서 만든 저장소를 찾아 Import 버튼을 클릭합니다.

                    # Import 화면 설정
Project Name: my-project        ← 자동 입력됨
Framework Preset: Other         ← 정적 HTML이면 그대로
Root Directory: ./              ← 보통 그대로 둠
[Deploy] 클릭
                

※ Next.js · React · Vite 같은 프레임워크는 Vercel이 자동으로 감지합니다.

3

1~2분 대기 → 배포된 URL 확인

Deploy를 누르면 1~2분 안에 빌드가 끝나고, Vercel이 자동으로 무료 도메인을 만들어줍니다. 만들어진 URL은 다음과 같은 형식입니다.

https://프로젝트이름.vercel.app/

예) 저장소 my-site → https://my-site.vercel.app/

💡 내 도메인이 있다면 Settings → Domains에서 직접 연결할 수 있습니다.

4

이후엔 푸시만 하면 자동 재배포

한 번 연동해두면, 다음부터는 Claude에게 푸시해달라고 말하는 것만으로 사이트가 자동으로 갱신됩니다.

                    # Claude에게 이렇게 말하세요
> 변경사항 커밋하고 GitHub에 푸시해줘
                

※ 푸시 직후 Vercel 대시보드에서 빌드 진행 상황을 실시간으로 볼 수 있습니다.

Netlify도 똑같습니다

Netlify를 고른 경우에도 흐름은 위 Vercel과 거의 같습니다. 버튼·메뉴 이름만 다릅니다.

단계	Vercel	Netlify
1. 로그인	vercel.com → Continue with GitHub	netlify.com → Sign up / Log in with GitHub
2. 불러오기	Add New ▾ → Project → Import	Add new site → Import an existing project → GitHub 저장소 선택
3. 배포	Framework·Root 확인 → Deploy	빌드 설정(정적이면 비워둠) → Deploy site
4. 주소	`프로젝트.vercel.app`	`프로젝트.netlify.app`

💡 Netlify도 한 번 연동하면 이후엔 GitHub에 푸시만 해도 자동으로 재배포됩니다. 내 도메인은 Site settings → Domain management에서 연결합니다.

꼭 알아야 할 용어

용어	뜻	쉽게 말하면
push (푸시)	내 컴퓨터 → GitHub으로 올리기	구글 드라이브에 업로드
pull (풀)	GitHub → 내 컴퓨터로 받기	구글 드라이브에서 다운로드
clone (클론)	GitHub 저장소를 통째로 복사	공유 폴더를 내 컴퓨터에 복사
commit (커밋)	변경 내용을 로컬에 저장	게임 세이브 포인트
branch (브랜치)	독립된 작업 공간	원본 복사해서 따로 작업
PR (풀 리퀘스트)	코드 변경을 검토 요청	"이거 확인해주세요" 요청서
fork (포크)	남의 저장소를 내 계정으로 복사	남의 레시피를 내 노트에 복사
conflict (충돌)	같은 부분을 다르게 수정했을 때	두 사람이 같은 문장을 다르게 고침
.gitignore	Git이 무시할 파일 목록	"이 파일들은 추적하지 마" 목록

Git 용어, 왜 이런 이름이 붙었을까요?

용어	어원 / 유래
Git	2005년 리누스 토르발스(Linux 창시자)가 만들었습니다. "git"은 영국 속어로 "고집불통"이라는 뜻. 그는 농담으로 "내 이름처럼 고집 센 프로그램"이라며 이름을 붙였습니다.
commit	"commit to paper(기록하다)"에서 유래. 변경 내용을 영구적으로 기록한다는 의미입니다. 게임의 세이브 포인트처럼 특정 시점을 확정하는 행위입니다.
push / pull	방향 비유입니다. 내 컴퓨터에서 서버로 밀어내면(push), 서버에서 내 컴퓨터로 당겨오면(pull)이라고 표현합니다.
branch	나무 가지(branch)에서 유래. 메인 줄기(main)에서 뻗어나온 독립 작업 공간을 나뭇가지에 비유한 것입니다.
clone	생물학의 클론(유전적으로 동일한 복제체)에서 유래. 저장소를 100% 동일하게 복사한다는 뜻입니다.
repository	라틴어 "repositorium(레포지토리움, 보관소·창고)"에서 유래. 코드와 히스토리를 보관하는 공간을 뜻합니다.
fork	갈림길(fork in the road)에서 유래. 남의 저장소를 내 계정으로 복사해 독립적인 방향으로 발전시킨다는 의미입니다.

React와 Next.js는 무엇인가요?

용어	쉬운 설명	대표 사용 사례
React (리액트)	2013년 페이스북(Meta)이 공개한 자바스크립트 라이브러리입니다. 화면을 작은 부품(컴포넌트)으로 나눠 조립하는 방식입니다. 🧱 비유 · 레고 블록처럼 화면 조각을 만들어 두고 조립합니다. 같은 블록을 여러 페이지에 재사용해 개발이 빨라집니다.	인스타그램, 넷플릭스, 에어비앤비, 페이스북
Next.js (넥스트JS)	2016년 Vercel이 공개한 React 기반 프레임워크입니다. React에 서버 처리·자동 라우팅·이미지 최적화·SEO 같은 기능을 더했습니다. 📦 비유 · React가 '레고 블록'이라면, Next.js는 '조립 매뉴얼과 부속이 한 박스에 담긴 풀세트'입니다.	틱톡, 노션, 트위치, 훌루

워크트리(worktree) · 한 저장소를 여러 폴더에서 동시에 다루기

워크트리는 같은 프로젝트를 여러 폴더에 동시에 펼쳐 두는 기능입니다. 한 폴더에서 신규 기능을 개발하면서 옆 폴더에서는 긴급 수정을 진행할 수 있어, 작업 흐름이 끊기지 않습니다.

언제 쓰면 좋을까요?

💡 자주 쓰이는 상황

개발 도중 긴급 수정 요청이 왔을 때, 작업을 멈추지 않고 옆 폴더에서 바로 처리
동료 코드를 검토할 때, 내 폴더는 그대로 둔 채 별도 폴더에서 확인
Claude Code에게 작업을 맡길 때, 내 폴더와 분리해 충돌 예방

핵심 명령어 3가지

                        # 새 워크트리 만들기 (fix-login 브랜치를 ../my-project-fix 폴더로 펼침)
git worktree add ../my-project-fix fix-login

# 현재 만들어진 워크트리 목록 보기
git worktree list

# 다 쓴 워크트리 정리하기
git worktree remove ../my-project-fix
                    

※ add 뒤에는 새로 만들 폴더 경로와 그 폴더에서 사용할 브랜치 이름을 차례대로 적습니다.

⚠️ 주의 · 같은 작업 버전(브랜치)을 두 폴더에서 동시에 열 수는 없습니다. 한 작업 버전은 한 폴더에서만 열 수 있다고 기억하시면 됩니다. 서로 다른 작업 버전은 얼마든지 동시에 펼쳐 둘 수 있습니다.

GitHub · Vercel · Netlify

GitHub에 올린 코드를 Vercel·Netlify가 자동으로 웹 주소로 띄워줍니다

GitHub Pages만으로 충분한 경우

Vercel·Netlify가 진가를 발휘하는 경우

STEP 1: GitHub 가입하기

github.com 접속 → Sign up

새 저장소 만들기

API Key (Personal Access Token) 발급 가장 까다로운 단계

프로필 클릭

Developer Settings

토큰 생성

STEP 2: Claude로 올리기

API Key를 Claude에게 전달하기

처음 올릴 때

이후에 수정했을 때

STEP 3: GitHub Pages로 공개하기

Settings 클릭

Pages 메뉴

branch 선택 후 Save

STEP 4: Vercel·Netlify로 배포하기

vercel.com 접속 → GitHub로 로그인

새 프로젝트 만들기 (Import)

1~2분 대기 → 배포된 URL 확인

이후엔 푸시만 하면 자동 재배포

STEP 5: 더 알고 싶다면

이제 내 프로젝트로 직접 띄워볼 차례입니다