GitHub · Vercel · Netlify 가이드

+

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

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

이 네 가지만 기억하면 됩니다

① Git = 내 컴퓨터에서 파일이 바뀐 과정을 시점마다 저장해 두는 도구입니다. 문서의 버전 기록이라고 생각하면 됩니다.

② GitHub = 그 기록을 안전하게 보관하는 창고입니다. 코드용 구글 드라이브라고 보면 됩니다.

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

④ 내가 할 일 = 명령어를 외울 필요 없이 AI에게 자연어로 말하는 것뿐입니다. Claude Code든 Codex든 방법은 같습니다. 내가 만든 랜딩페이지와 대시보드, 데모를 개발자 없이 바로 공개할 수 있습니다.

Git과 GitHub, 이름이 비슷한데 무엇이 다른가요?

항목	Git바로가기 ↗	GitHub바로가기 ↗
한 줄로	내 컴퓨터에서 도는 버전 관리 도구	그 기록을 올려 두는 인터넷 창고
어디에서 작동하나	내 노트북 안. 인터넷이 없어도 씁니다	인터넷. 접속해야 씁니다
무엇에 쓰나	저장 · 되돌리기 · 가지 나누기	백업 · 공유 · 협업 · 공개
비용이 드나	무료입니다. 오픈소스입니다	개인은 무료, 팀 관리 기능부터 유료입니다
내 코드가 보이나	내 컴퓨터 안에만 있어 안 보입니다	공개(Public)와 비공개(Private)를 직접 고를 수 있습니다
없으면	버전 관리가 되지 않습니다	노트북이 고장 나면 함께 사라집니다

만든이와 이름의 유래

Git · 2005년 리누스 토르발스가 리눅스 개발을 위해 만들었습니다. 영어 단어 git은 영국 속어로 "고집불통" 또는 "얼간이"를 뜻하는데, 토르발스가 자기 이름처럼 고집 센 프로그램이라며 농담조로 붙였다고 알려져 있습니다.

GitHub · 2008년 톰 프레스턴 워너, 크리스 완스트라스 등이 창립했고 2018년 마이크로소프트가 인수했습니다. 이름은 Git(버전 관리 도구)과 Hub(중심·허브)의 조합으로, Git 저장소를 인터넷에 모아 두는 허브라는 뜻입니다.

다른 선택지 · Git은 사실상 표준이라 대체할 도구가 거의 없습니다. GitHub 자리에는 GitLab이나 Bitbucket 같은 서비스도 쓸 수 있습니다.

그래서 둘은 어떻게 이어지나요?

내 컴퓨터

작업 폴더

지금 만들고 고치는 파일이 있는 곳입니다.

커밋 Commit →↓ 지금 상태를 저장

내 컴퓨터

Git 기록

저장한 시점이 순서대로 쌓입니다. 인터넷이 없어도 됩니다.

푸시 Push →↓ 인터넷으로 올리기

인터넷

GitHub 저장소

프로젝트 하나가 통째로 올라가는 폴더입니다. 줄여서 레포라고 부릅니다.

Vercel과 Netlify는 어떤 서비스인가요?

한 줄 요약 · 둘 다 GitHub과 연동하는 서비스입니다. 내가 푸시(변경사항을 GitHub에 올리는 일)하면 알아서 배포(웹에 올려 누구나 접속하게 만드는 일)합니다. React·Next.js(웹 화면을 부품처럼 조립해 만드는 개발 도구, 아래에서 자세히)로 만든 앱처럼 화면이 자주 바뀌면 Vercel이 강합니다. 화면이 거의 바뀌지 않는 정적 사이트에 폼과 함수를 간단히 붙이려면 Netlify가 강합니다.

항목	Vercel바로가기 ↗	Netlify바로가기 ↗
한 줄 정체성	Next.js(React 기반 개발 도구)를 만든 회사가 운영하는 배포 플랫폼	정적 사이트(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 Pages만으로 충분한 경우

회사 소개·랜딩 페이지처럼 단순한 정적 사이트
블로그·문서·포트폴리오처럼 화면이 거의 바뀌지 않는 사이트
다른 서비스 가입 없이 GitHub 한 계정으로 끝내고 싶을 때

Vercel·Netlify가 필요한 경우

로그인·대시보드·DB 연동처럼 동적 기능이 있는 웹앱을 띄울 때
React·Next.js로 만든 앱을 자동으로 빌드·배포할 때
브랜치별 미리보기 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

AI 코딩 도구와 GitHub 연결하기

AI가 내 저장소에 접근하려면 인증이 필요합니다. 컴퓨터에 한 번만 해 두면 되고, Claude Code와 Codex가 그 인증을 함께 씁니다. 방법은 두 가지입니다. 둘 중 하나만 하면 됩니다.

방법 A GitHub CLI로 로그인 권장

GitHub가 공식으로 만든 gh 명령어를 설치하고 한 번 로그인하면 끝납니다. 인증 키는 GitHub가 알아서 발급해 윈도우 자격 증명 관리자(맥은 키체인)에 넣어 줍니다.

윈도우 Windows

                                # PowerShell에 입력
winget install --id GitHub.cli
                            

winget이 없다면 cli.github.com에서 .msi 설치 파일을 내려받아 실행하세요. 설치한 뒤에는 터미널을 껐다 켜야 명령어가 잡힙니다.

맥 macOS

                                # 터미널에 입력
brew install gh
                            

Homebrew가 없다면 cli.github.com에서 .pkg 설치 파일을 내려받아 더블클릭해도 됩니다.

                        # 윈도우·맥 모두 같은 명령어
gh auth login
                    

※ 질문이 차례로 나옵니다. 방향키로 고르고 Enter를 누르세요. 버전에 따라 문구가 조금 다를 수 있습니다.

What account do you want to log into? → GitHub.com
What is your preferred protocol for Git operations? → HTTPS
Authenticate Git with your GitHub credentials? → Yes
How would you like to authenticate? → Login with a web browser
화면에 XXXX-XXXX 형태의 여덟 자리 코드가 뜹니다. 그대로 복사하고 Enter를 누르면 브라우저가 열립니다.
브라우저에 코드를 붙여넣고 Authorize github 버튼을 누르면 연결이 끝납니다.

                        # 잘 됐는지 확인
gh auth status
                    

※ ✓ Logged in to github.com account 내아이디가 보이면 연결된 것입니다.

연결을 끊고 싶다면 · 터미널에 gh auth logout을 입력하면 됩니다. GitHub 웹에서 지우려면 Settings → Applications → Authorized OAuth Apps → GitHub CLI → Revoke를 누르세요.

방법 B Personal Access Token 발급 까다로운 방법

설치 없이 브라우저만으로 인증 키를 직접 만드는 방법입니다. 화면 위치가 자주 바뀌니 천천히 따라가세요.

1

프로필 클릭

우측 상단 프로필 사진 → Settings

2

Developer Settings

왼쪽 맨 하단 Developer settings 클릭

3

토큰 생성

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

                    # 토큰 설정
Note: claude-code-access
← 이름 (자유롭게)
Expiration: 30 days
← 짧을수록 안전합니다
Scopes: repo 만 체크
← 나머지는 그대로 두세요
[Generate token] → 토큰 복사
← 벗어나면 다시 못 봅니다
                

토큰을 다룰 때 지킬 네 가지

유효기간은 30일로 짧게 잡으세요. 만료되면 같은 방법으로 다시 만들면 됩니다.
권한은 repo 하나만 체크하세요. 목록에 체크박스가 수십 개 보여도 나머지는 손대지 않습니다. 권한이 적을수록 새어 나갔을 때 피해가 작습니다.
메신저·메일·메모 앱에 붙여넣지 마세요. 바로 쓰는 것이 원칙입니다.
조금이라도 이상하면 지우세요. Settings → Developer settings → Tokens (classic)에서 해당 토큰을 Delete하면 그 즉시 폐기됩니다.

이 단계의 목표

AI 코딩 도구에서 프로젝트를 GitHub에 올립니다

시작 전 확인: Claude Code나 Codex가 실행 중이어야 하고, 작업할 프로젝트 폴더가 열려 있어야 합니다. 인증은 앞의 가입하기에서 이미 끝났으니 따로 준비할 것은 없습니다.

앞에서 방법 B(토큰)를 골랐다면 · 토큰을 AI에게 전달하기

방법 A(gh auth login)로 연결했다면 이 칸은 볼 필요가 없습니다. 토큰을 직접 만들었다면, AI가 GitHub에 처음 접근할 때 이렇게 말하세요.

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

※ ghp_로 시작하는 긴 문자열이 토큰입니다. 위 예시 자리에 복사한 값을 그대로 붙여넣으세요.

여기서 꼭 지킬 것 · 토큰은 이 대화에서만 쓰고, 코드나 파일에 저장하지 마세요. 오늘 작업이 끝나면 GitHub에서 토큰을 지워도 됩니다. 다음에 필요하면 다시 만들면 됩니다. 남겨 둔 채 잊는 것보다 그 편이 안전합니다.

1

처음 올릴 때

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

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

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

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

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

2

이후에 수정할 때

자연어로 말하면 AI가 알아서 git 명령어를 실행합니다

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

이 단계의 목표

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

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

GitHub Pages 활성화 3단계

1

Settings 클릭

해당 저장소 상단 탭에서 Settings 선택

2

Pages 메뉴

왼쪽 사이드바에서 Pages 클릭

3

branch 선택 후 Save

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

저장소에 올린 HTML/CSS/JS 파일이 그대로 웹사이트로 공개됩니다. 주소는 다음과 같습니다.

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 저장소 목록에서 앞에서 만든 저장소를 찾아 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

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

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

                    # AI에게 이렇게 말하세요
> 변경사항 커밋하고 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) · 한 저장소를 여러 폴더에서 동시에 다루기

워크트리는 같은 프로젝트를 여러 폴더에 동시에 펼쳐 두는 기능입니다. 한 폴더에서 새 기능을 개발하면서 옆 폴더에서 긴급 수정을 처리할 수 있습니다. 하던 작업을 멈추지 않아도 됩니다.

언제 쓰면 좋을까요?

자주 쓰이는 상황

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

핵심 명령어 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 가입하기

github.com 접속 → Sign up

새 저장소 만들기

AI 코딩 도구와 GitHub 연결하기

프로필 클릭

Developer Settings

토큰 생성

AI로 올리기

처음 올릴 때

이후에 수정할 때

GitHub Pages로 공개하기

Settings 클릭

Pages 메뉴

branch 선택 후 Save

Vercel·Netlify로 배포하기

vercel.com 접속 → GitHub로 로그인

새 프로젝트 만들기 (Import)

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

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

더 알고 싶다면

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