🚀

EPISODE 01

코드 한 줄로 시작하는 첫 배포

GitHub + Vercel로 5분 만에 내 홈페이지 만들기

GitHub에 코드를 올리기만 하면 Vercel이 자동 배포하는 현대적인 워크플로우를 익히고, https://내이름.vercel.app 으로 작동하는 첫 홈페이지를 만듭니다.

HTMLGitHubVercel배포

소요 시간

⏱ 약 2시간

난이도

📊 완전 초보

선수 조건

🎯 없음 — 노트북과 이메일 계정만 있으면 OK

결과물

https://내이름.vercel.app 형태의 진짜 작동하는 홈페이지

이 강의에서 배우는 것

1GitHub과 Vercel이 무엇이고 왜 함께 쓰는지 이해한다
2첫 HTML 파일을 작성해 GitHub 저장소에 올린다
3Vercel과 GitHub을 연결해 자동 배포 파이프라인을 만든다
4코드를 수정하면 자동으로 다시 배포되는 흐름을 직접 체험한다

강의 흐름 한눈에 보기

시간	단계	무엇을 배우나
0:00 ~ 0:15	1. 왜 GitHub + Vercel인가?	개념 잡기
0:15 ~ 0:30	2. 계정 만들기	GitHub, Vercel 가입
0:30 ~ 0:50	3. 첫 HTML 파일 만들기	웹페이지의 정체
0:50 ~ 1:10	4. GitHub에 업로드하기	코드를 인터넷에 올리기
1:10 ~ 1:30	5. Vercel로 배포하기	진짜 주소가 생기는 순간
1:30 ~ 1:50	6. 수정해보기	푸시 → 자동 배포 체험
1:50 ~ 2:00	7. 마무리 & 다음 단계	어디로 더 나아갈까

1. 왜 GitHub + Vercel인가?

“홈페이지 하나 만드는 게 뭐가 어렵다고?”

예전에는 홈페이지 하나 띄우려면 이런 과정을 거쳤습니다.

서버 컴퓨터를 빌린다 (한 달에 몇 만 원)
리눅스 명령어로 웹서버를 깐다
FTP 프로그램으로 파일을 올린다
도메인을 사고 연결한다
뭔가 수정할 때마다 위 과정을 반복

지금은? 파일 만들고 → 깃허브에 올리고 → 버셀이 알아서 띄움. 끝.

GitHub과 Vercel의 역할 분담

쉽게 비유하면 이렇습니다.

GitHub = 내 코드를 보관하는 클라우드 저장소 (구글 드라이브의 개발자 버전)
Vercel = 그 저장소를 보고 자동으로 홈페이지를 띄워주는 도우미

text

[내 컴퓨터] ──코드 작성── [GitHub] ──자동 감지── [Vercel] ──공개── [전 세계]

왜 이 조합이 표준이 됐나

무료: 개인 프로젝트는 둘 다 공짜
빠름: 코드 푸시하면 30초 내에 전 세계에 반영
자동화: 한 번 연결하면 그 다음부턴 신경 쓸 게 없음
전문가도 씀: 진짜 회사들도 이 방식으로 서비스를 운영함

잠깐, GitHub Pages도 있던데?

GitHub에는 자체적으로 홈페이지를 띄워주는 'GitHub Pages' 기능이 있긴 합니다. 그런데 우리가 Vercel을 쓰는 이유는 다음과 같습니다.

Vercel이 더 빠르고 더 쉽고, 나중에 React/Next.js 같은 진짜 앱도 그대로 올릴 수 있음
GitHub Pages는 단순한 정적 파일만 잘 띄우지만, Vercel은 그 이상으로 확장 가능
실무에서 더 많이 쓰는 도구를 처음부터 익혀두는 게 이득

2. 계정 만들기

2-1. GitHub 가입

https://github.com 접속
우측 상단 Sign up 클릭
이메일 → 비밀번호 → 사용자명(username) 입력
이메일 인증 완료

⚠️

사용자명은 신중하게! 이게 평생 따라다니는 개발자 ID가 됩니다. URL에도 들어가요. 좋은 예: kim-jihoon, jihoon-dev, codingnow / 나쁜 예: xxlovelyxx, test123, asdfasdf

2-2. Vercel 가입

https://vercel.com 접속
Sign Up 클릭
“Continue with GitHub” 선택 (이게 핵심!)
GitHub 계정으로 로그인 → Vercel이 GitHub에 접근하는 권한 허용
Hobby(무료) 플랜 선택

💡

Vercel은 GitHub 계정으로 가입하는 게 정석입니다. 따로 비밀번호 만들지 마세요. 두 서비스가 연결되어 있어야 자동 배포가 작동합니다.

3. 첫 HTML 파일 만들기

3-1. HTML이 뭔가요?

HTML은 그냥 글자에 의미를 붙이는 약속입니다.

html

<h1>나는 큰 제목이야</h1>
<p>나는 그냥 문단이야</p>

<h1>을 보면 브라우저가 “아, 이건 큰 제목이구나” 하고 크게 보여주고, <p>를 보면 “이건 문단이구나” 하고 평범하게 보여줍니다. 그게 다입니다.

3-2. 파일 만들기

메모장이나 VS Code 같은 텍스트 에디터를 엽니다. (한컴오피스 X, 워드 X — 반드시 텍스트 에디터)

💡

VS Code가 없다면 https://code.visualstudio.com 에서 다운로드. 무료입니다.

바탕화면에 my-website라는 폴더를 만들고, 그 안에 index.html이라는 파일을 만듭니다.

⚠️

파일 이름은 반드시 index.html — 다른 이름이면 안 됩니다. 웹서버가 찾는 기본 파일 이름이 정해져 있어요.

3-3. 다음 코드를 그대로 붙여넣기

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>김지훈의 첫 홈페이지</title>
    <style>
        body {
            font-family: sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 { color: #2563eb; }
        .card {
            background: #f3f4f6;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>안녕하세요, 김지훈입니다 👋</h1>
    <p>저는 웹개발을 배우고 있는 학생입니다.</p>
    <div class="card">
        <h2>관심사</h2>
        <ul>
            <li>웹 프론트엔드</li>
            <li>게임 개발</li>
            <li>커피 ☕</li>
        </ul>
    </div>
    <div class="card">
        <h2>연락처</h2>
        <p>이메일: jihoon@example.com</p>
    </div>
</body>
</html>

3-4. 더블클릭해서 열어보기

index.html을 더블클릭하면 브라우저에 짠~ 하고 뜹니다. 축하합니다, 이미 홈페이지를 만들었습니다.

다만 지금은 내 컴퓨터에서만 보이는 상태예요. 주소창을 보면 file:///... 으로 시작하죠? 이걸 인터넷에 올려야 다른 사람도 볼 수 있습니다.

3-5. 자기 정보로 바꿔보기

이름, 관심사, 이메일을 본인 것으로 수정하세요. 저장하고 브라우저 새로고침(F5).

4. GitHub에 업로드하기

ℹ️

“git”이라는 게 따로 있고, “GitHub”는 그 git을 쓰는 회사 서비스입니다. 우리는 명령어 git을 안 쓰고, GitHub 웹사이트에서 클릭으로 처음 업로드하겠습니다. 가장 쉬운 방법이에요.

4-1. 새 저장소(Repository) 만들기

GitHub 로그인 후 우측 상단 + → New repository
Repository name: my-website 입력
Public 선택 (Private이면 무료 플랜에서 Vercel 연결이 까다로워집니다)
Add a README file 체크 ✅
맨 아래 Create repository 클릭

4-2. 파일 업로드하기

저장소 페이지가 나왔습니다. 화면에서:

Add file 버튼 → Upload files 클릭
아까 만든 index.html을 드래그해서 드롭
화면 아래로 스크롤 → 초록색 Commit changes 버튼 클릭

이제 화면에 index.html이 보이면 성공입니다.

💡

commit이 뭐예요? “이 변경사항을 저장하겠다”는 뜻입니다. 게임 세이브 포인트라고 생각하면 비슷해요. 매 commit이 하나의 저장 시점이 되고, 나중에 어떤 시점이든 돌아갈 수 있어요.

5. Vercel로 배포하기 — 하이라이트

여기가 마법이 일어나는 순간입니다.

5-1. Vercel 대시보드에서 새 프로젝트

https://vercel.com/dashboard 접속
Add New… → Project 클릭
Import Git Repository 섹션에 GitHub 저장소 목록이 뜸

5-2. 권한 허용 (처음 한 번만)

만약 저장소가 안 보이면 Adjust GitHub App Permissions 또는 Configure GitHub App 클릭 → GitHub로 이동 → 어떤 저장소에 접근 허용할지 선택 → 저장.

모든 저장소 허용 (간편) 또는
특정 저장소만 허용 (보안)

처음에는 그냥 모든 저장소 허용해도 괜찮습니다.

5-3. 임포트 & 배포

my-website 옆의 Import 버튼 클릭
설정 화면이 뜨는데 아무것도 건드리지 마세요 (Framework Preset: Other / Root Directory: ./ / Build Command: 비워두기)
큼지막한 Deploy 버튼 클릭

5-4. 30초 기다리기

화면에서 빌드 로그가 흘러갑니다. 알록달록한 색종이가 떨어지면(🎉 confetti 애니메이션) 배포 완료입니다.

5-5. 내 홈페이지 주소 확인

화면에 my-website-xxx.vercel.app 같은 주소가 뜹니다. 클릭!

축하합니다. 이제 전 세계 누구나 이 주소로 접속할 수 있습니다. 친구한테 카톡으로 보내보세요.

6. 수정해보기 — 진짜 마법은 지금부터

6-1. GitHub에서 직접 수정

GitHub 저장소로 돌아가기
index.html 파일 클릭
우측 위 연필(✏️) 아이콘 클릭 → 편집 모드
아무 글자나 바꿔보기 (예: 안녕하세요 → 반갑습니다)
화면 아래 Commit changes 클릭
또 한 번 Commit changes (커밋 메시지 입력 모달)

6-2. Vercel을 보세요

Vercel 대시보드로 가면 자동으로 새 빌드가 돌아가고 있습니다. 끝나면 홈페이지 새로고침. 바뀌어 있어요.

이게 핵심입니다.

ℹ️

코드를 GitHub에 올리기만 하면 → Vercel이 알아채고 → 자동으로 새 버전을 배포해줍니다. 우리가 할 일은 코드를 쓰는 것뿐.

6-3. 도전 과제 (난이도 순)

🟢 좋아하는 색깔로 h1의 색을 바꿔보기 (color: red, #ff5733 등)
🟢 사진 추가하기 (<img src="이미지URL" width="200">), 이미지는 Unsplash에서 가져와도 OK
🟡 새 섹션 만들기 (<div class="card"> 복사해서 추가)
🟡 링크 추가하기 (<a href="https://github.com/내아이디">내 GitHub</a>)
🔴 두 번째 페이지 만들기 (about.html 추가 → index.html에서 링크 걸기)

6-4. 자주 막히는 지점

저장 안 됨: GitHub에서 편집 후 반드시 Commit changes 두 번 눌러야 합니다 (편집 시작 + 최종 저장).
변경사항이 안 보임: 브라우저 캐시 때문일 수 있어요. Ctrl+Shift+R (Mac은 Cmd+Shift+R)로 강력 새로고침.
빌드 실패: Vercel 대시보드에 빨간 에러가 떴다면, 보통 HTML 파일 이름이 index.html이 아니거나 파일이 저장소 최상위에 없는 경우입니다.

7. 마무리 & 다음 단계

오늘 우리가 한 일

text

[index.html 작성]
    ↓
[GitHub 저장소에 업로드]
    ↓
[Vercel과 연결]
    ↓
[자동 배포]
    ↓
[https://my-website-xxx.vercel.app — 전 세계 공개]
    ↓
[수정 → 커밋 → 자동 재배포]

이 흐름이 머리에 들어왔다면, 현업 웹 개발의 80%를 이해한 것입니다. 정말로요. 회사들도 이 사이클로 일합니다. 차이는 그저 코드가 더 복잡하다는 것뿐이에요.

다음에 배우면 좋은 것들

단계	무엇을	왜
다음주	CSS 본격 학습	페이지를 진짜 예쁘게
그 다음	Git 명령어	웹에서 클릭 말고 터미널로 작업
한 달 후	JavaScript 기초	버튼 클릭 같은 동작 만들기
두 달 후	React + Next.js	Vercel의 진짜 본업
그 후	커스텀 도메인 연결	.vercel.app 말고 .com 같은 진짜 도메인

마지막 한 마디

오늘 만든 페이지는 계속 살아 있습니다. 일주일 뒤든 1년 뒤든 그 주소로 접속하면 그대로 있어요. 1년 뒤에 본인이 만든 첫 페이지를 보면, 분명 부끄러우면서도 뿌듯할 거예요.

코드는 한 줄씩 늘려가는 겁니다. 오늘은 그 첫 줄을 쓴 날입니다. 🎉

부록 A — 자주 묻는 질문 (FAQ)

Q. 정말 무료인가요? 신용카드 안 내도 돼요?

네. GitHub Free, Vercel Hobby 플랜 둘 다 카드 등록 없이 평생 무료입니다. 트래픽이 월 100GB를 넘거나 상업적으로 크게 쓰지 않는 한 비용이 안 나옵니다.

Q. 도메인을 .com 으로 바꾸고 싶어요.

가능합니다. 도메인 등록 사이트(가비아, Cloudflare 등)에서 도메인을 사고, Vercel 프로젝트 설정의 Domains 탭에서 연결하면 됩니다. 보통 도메인 가격은 연 1~2만 원.

Q. 다른 사람이 내 코드를 베끼면 어쩌죠?

Public 저장소는 누구나 코드를 볼 수 있긴 합니다. 하지만 입문 단계에서는 신경 쓰지 마세요. 어차피 비슷한 코드는 인터넷에 널려 있고, 진짜 가치 있는 건 코드가 아니라 만든 사람의 아이디어입니다.

Q. 핸드폰으로도 보이나요?

보입니다. 다만 화면 크기에 맞게 자동으로 예쁘게 보이게 하려면 CSS의 반응형 디자인을 따로 배워야 해요. 다음 강의 주제로 좋습니다.

Q. 저장소를 지우면 홈페이지도 사라지나요?

네. GitHub 저장소를 지우거나 비공개로 돌리면 Vercel 배포도 곧 멈춥니다. 저장소를 함부로 지우지 마세요.

부록 B — 강사용 운영 팁

15분 단위로 휴식 신호 주기. 초보자는 한 단계 막히면 5분간 멍해집니다. 빨리 잡아내야 함.
계정 만들기 단계에서 가장 많이 막힙니다. 이메일 인증 메일이 안 와서, 비밀번호 규칙이 까다로워서 등. 시간 여유 있게 잡으세요.
Vercel의 화면 UI는 1~2년에 한 번씩 바뀝니다. 강의 직전에 본인이 한 번 처음부터 끝까지 따라해보고 스크린샷을 다시 찍는 걸 권합니다.
수강생마다 결과물이 다 다르게 나오는 게 좋습니다. 마지막 20분의 자유 실습 시간이 만족도를 결정합니다.
“왜 이렇게 되는 거예요?”라는 질문이 나올 때, 깊이 들어가지 마세요. “그건 다음 시간에”로 미루는 게 1~2시간 특강에서는 옳습니다.

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗