# 비개발자가 15분 만에 GitHub와 Vercel로 웹사이트를 인터넷에 올리기

- 작성자: [물음표](https://community.clauders.ai/member/imported-member-2zAShO5ExO)
- 공간: [바이브 코딩](https://community.clauders.ai/claude-code)
- 게시: 2026-07-24
- 연재: [AI 온보딩: 첫 배포와 업무 도구](https://community.clauders.ai/series/ai-onboarding-first-deploy) 1/5편
- 태그: #AI온보딩
- 주소: https://community.clauders.ai/claude-code/post/%EB%B9%84%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-15%EB%B6%84-%EB%A7%8C%EC%97%90-github%EC%99%80-vercel%EB%A1%9C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A5%BC-%EC%9D%B8%ED%84%B0%EB%84%B7%EC%97%90-%EC%98%AC%EB%A6%AC%EA%B8%B0-617eca54-0303-8c4c-8238-5d556bbe9606

---

### 1단계: GitHub 가입 및 저장소 만들기

**1️⃣ GitHub 가입**

- [https://github.com](https://github.com/) 방문 → **Sign up** 클릭
- 이메일, 비밀번호, 사용자명 입력
- 이메일 인증 완료

**2️⃣ 새 저장소(Repository) 만들기**

- GitHub 로그인 후 우측 상단 **+** → **New repository** 클릭
- 저장소 이름 입력 (예: `Clauders_study`)
- **Private** 선택 (공개하고 싶지 않다면) 또는 **Public** 선택
- **Create repository** 클릭

화면에 나타날 HTTPS 주소를 **복사해두세요.** 나중에 필요합니다.

```
예: https://github.com/당신아이디/Clauders_study.git
복사
```

### 2단계: Git과 GitHub CLI 설치

**Windows 사용자 기준:**

✅ **Git 확인**

- Windows PowerShell 열기 (Windows 키 + “powershell” 검색)
- 이 명령어 실행:

```
git --version
복사
```

- 버전이 나오면 이미 설치됨. ✓

❌ **GitHub CLI 설치** (Git은 있지만 gh는 없을 가능성)

- PowerShell에서 이 명령어 실행:

```
winget install GitHub.cli
복사
```

- 약관 동의 메시지 나오면 **Y** 입력 후 Enter
- 설치 완료 후 **PowerShell을 새로 열어야** `gh` 명령어가 작동합니다. (중요!)

> **⚠️ 주의**: 설치 후 같은 PowerShell 창에서 `gh`를 바로 실행하면 “명령어를 찾을 수 없다”고 뜹니다. PowerShell을 종료했다가 다시 열어야 합니다.

### 3단계: 로컬 폴더를 GitHub에 올리기

**1️⃣ 폴더 이동**

- PowerShell에서 당신의 프로젝트 폴더로 이동:

```
cd C:\Users\당신아이디\Documents\GitHub\project3
복사
```

**2️⃣ Git 설정**

- 폴더에서 이 명령어들을 순서대로 실행:

```
git remote set-url origin https://github.com/당신아이디/Clauders_study.git
복사
```

(위의 URL을 당신의 GitHub 저장소 URL로 바꿔주세요)

**3️⃣ 모든 파일 추가 및 커밋**

```
git add .
git commit -m "Initial commit: Upload learning hub site"
복사
```

**4️⃣ GitHub에 업로드 (Push)**

```
git push -u origin master
복사
```

끝! 🎉 GitHub에 파일이 올라갔습니다.

### 4단계: Vercel에 배포하기

**1️⃣ Vercel 가입**

- [https://vercel.com](https://vercel.com/) 방문
- **Sign Up** → **Continue with GitHub** 클릭
- GitHub 로그인
- “Authorize Vercel” 클릭
- Team name 입력 (예: `jayleeproject3`)

**2️⃣ 프로젝트 배포**

- Vercel 대시보드에서 **Add New** → **Import Project** 클릭
- **Continue with GitHub** 클릭
- GitHub 저장소 목록에서 `Clauders_study` 선택
- 설정은 그대로 두고 **Deploy** 클릭
- 1-2분 기다리면… **“Congratulations!”** 🎉

**3️⃣ 당신의 웹사이트 주소 확인**

- 배포 완료 후 대시보드에서 **Continue to Dashboard** 클릭
- 당신의 웹사이트 URL 확인 (예: `Clauders-study.vercel.app`)

### 1️⃣ 생각보다 훨씬 쉬웠다

남들이 “개인 URL로 사이트 공유한다”고 하는 걸 보면서 “되게 어려운 거 아닌가?” 하고 생각했는데, 실제로 해보니:

- GitHub 가입: 3분
- 파일 업로드: 3분
- Vercel 배포: 2분
- 총 **15분**

“이게 다야?” 하는 느낌.

### 2️⃣ 가이드와 AI의 조합이 최고

- **아루나님의 가이드**: 전체 흐름을 알 수 있어서 헷갈리지 않음
- **Claude의 도움**: 가이드에 없는 부분(PowerShell 재시작, 대역폭 개념 등)을 빠르게 해결

처음이라면 둘 중 하나만 있었어도 막혔을 부분이 많았을 텐데, 조합이 완벽했다.

### 3️⃣ 막혔던 부분과 해결법

**문제**: GitHub CLI 설치 후 `gh` 명령어가 안 먹힘

```
gh: command not found
복사
```

**원인**: 설치 후 같은 PowerShell 창에서 바로 실행하려고 함

**해결**: PowerShell을 종료하고 **새로 열어서** 다시 시도 → 성공!

### 4️⃣ Vercel 무료 배포의 모든 것

Vercel 무료 요금제로 충분한 이유:

- **대역폭**: 월 100GB 무료

  - 대역폭 = 방문자들이 사이트에서 다운로드하는 데이터양
  - 개인 학습 사이트는 보통 월 1-10GB만 사용
  - 100GB는 수십만 명이 매일 방문해야 넘음 → 개인 사이트로는 걱정 불필요 ✓
- **빌드 시간**: 시간당 45분 무료 → 개인 사이트로는 충분
- **배포**: 무료 & 자동 (GitHub push하면 자동 배포)

### 5️⃣ GitHub-Vercel 자동 연동의 원리

이제부터의 작업 흐름:

```
로컬 폴더에서 파일 수정
    ↓
git add . → git commit → git push
    ↓
GitHub에 업로드됨
    ↓
Vercel이 자동 감지 & 빌드 & 배포
    ↓
당신의 웹사이트 URL이 자동으로 업데이트됨 ✓
복사
```

매번 Vercel 대시보드에 들어갈 필요 없음. GitHub push만 하면 끝!

### 1️⃣ 앞으로의 사이트 관리

이제 project3 폴더에서:

- 콘텐츠 추가 (마크다운 파일 작성)
- 디자인 수정 (CSS 수정)
- 기능 추가 (코드 수정)

모두 **git push 한 번**이면 인터넷 사이트에 자동 반영됨.

### 2️⃣ 다음 학습

- GitHub와 Vercel의 관계 이해: 나머지 “배포” 개념이 쉬워질 기초
- 앞으로 사이트를 운영하며 자연스럽게 Git 명령어 숙달

### 3️⃣ 공유할 때

“내 웹사이트: [당신의 URL]“이라고 바로 공유 가능!