선생님을 위한 따라하기 가이드

Vercel로
인터넷에 올리기.

Vercel도 폴더를 화면에 끌어다 놓기만 하면 누구나 열어 볼 수 있는 내 링크가 생기게 됩니다(Vercel Drop). GitHub에 저장소가 있다면 저장소와 이어 두고, GitHub에서 파일을 고칠 때마다 사이트가 저절로 바뀌게 할 수도 있습니다. 연습 파일로 올려 보고, 고친 파일을 다시 올리는 데까지 같이 해보겠습니다!

위쪽 탭이나 아래 ‘다음’ 버튼으로 한 단계씩 따라와주세요. 단계마다 누를 곳을 화면에 보이는 영어 이름 그대로 굵은 글씨로 적어 두었습니다.

완성하면 이런 주소가 생깁니다

https://my-science-quiz.vercel.app/hello.html

프로젝트 이름은 3단계에서 정합니다. 학생들에게 줄 정확한 주소는 4단계에서 확인합니다.

파일 이름은 올린 파일입니다. 이름이 index.html 이면 생략해도 열립니다.

시작하기 전에 꼭 알아 두실 두 가지

🔗 학생에게는 짧은 주소를 줍니다Vercel은 올릴 때마다 긴 주소도 함께 만듭니다. 긴 주소는 학생이 열면 Vercel 로그인 화면이 나올 수 있어서, 학생들에게는 Domains 에 적힌 짧은 주소 하나만 나눠 줍니다. (4단계)

🧑‍🏫 무료(Hobby)는 개인·비상업 용도입니다무료 요금제는 개인·비상업 용도로만 쓰게 되어 있습니다. 한 달에 100GB까지 내보낼 수 있고, 하루에 100번까지 올릴 수 있습니다. 쓸 수 있는 양을 넘기면 대부분 30일을 기다려야 다시 씁니다.

영어 화면 그대로 따라해주세요

Vercel 화면은 영어로 되어 있습니다. 크롬이 “이 페이지를 번역할까요?” 하고 물어보면 번역하지 말아주세요. 번역하면 버튼 이름이 이 매뉴얼에 적힌 이름과 달라져서 오히려 더 헷갈리게 됩니다. 아래 단어만 알아두시면 충분합니다^^

Sign Up가입하기

Hobby무료 요금제 (개인 용도)

Continue with GitHubGitHub 계정으로 계속하기

Deploy올리기

Project프로젝트 (사이트 하나)

Domains학생에게 줄 주소

Deployments올린 기록 (긴 주소)

Settings설정

Import가져오기 (GitHub 저장소 잇기)

Deployment Protection누가 볼 수 있는지 정하는 설정

두 번 연습하고, 하나는 골라서 합니다

첫 실습 · 연습 묶음 올리기

이 페이지에서 내려받은 my-first-web.zip 을 끌어다 놓아 사이트를 만들고, 학생에게 줄 짧은 주소를 확인합니다. (1~4단계)

두 번째 실습 · 고친 묶음 다시 올리기

my-first-web-v2.zip 을 같은 프로젝트에 다시 올려, 링크는 그대로이고 내용만 바뀌는지 확인합니다. (5단계)

골라서 · GitHub 저장소와 잇기

GitHub 매뉴얼로 저장소를 만드셨다면 저장소와 이어서, GitHub에서 고칠 때마다 사이트가 저절로 바뀌게 합니다. (6단계)

준비물

🐙GitHub 계정 (권장) 또는 이메일

💻인터넷 되는 컴퓨터 (크롬 권장)

🗂️연습 묶음 (이 페이지에서 내려받습니다)

⏱️15분

한눈에 보는 순서

가입주소창에 vercel.com/signup 을 열고 무료인 Hobby 를 고른 뒤 이름을 적습니다. Continue with GitHub(GitHub 계정이 없으면 이메일)로 가입하고, 대시보드가 보이면 끝입니다.
파일 준비연습 묶음 my-first-web.zip 을 내려받습니다. 직접 만든 파일은 폴더 하나에 모으고, 첫 화면 파일 이름을 index.html 로 둡니다.
올리기로그인한 채로 vercel.com/drop 에 묶음을 끌어다 놓고, 프로젝트 이름을 영어 소문자로 적은 뒤 Deploy 를 누릅니다.
링크 나누기프로젝트 화면의 Domains 에 적힌 짧은 주소(이름.vercel.app)를 학생에게 줍니다. Deployments 에 보이는 긴 주소는 나누지 않습니다.
다시 올리기고친 폴더를 통째로 대시보드의 내 프로젝트 화면에 끌어다 놓습니다. vercel.com/drop 에 다시 놓으면 새 프로젝트가 생깁니다.
GitHub와 잇기 (골라서)vercel.com/new 에서 저장소 옆 Import 를 누르고 Deploy 를 누릅니다. 그 뒤로는 GitHub에서 고칠 때마다 사이트가 저절로 바뀝니다.

GitHub Pages, Netlify, Vercel 가운데 무엇을 쓸까요

셋 다 HTML 파일에 무료로 주소를 붙여 줍니다. 올리는 방법과 조심할 점이 조금씩 다릅니다.

	GitHub Pages	Netlify	Vercel
올리는 법	저장소에 파일을 올리고 Pages를 켭니다	폴더를 끌어다 놓습니다	폴더를 끌어다 놓거나, GitHub 저장소와 잇습니다
주소	`아이디.github.io/저장소/`	`이름.netlify.app`	`이름.vercel.app`
무료로 쓰는 양	사이트 1GB, 한 달 100GB	한 달 300크레딧 (올릴 때마다 15)	개인·비상업 용도 한 달 100GB, 하루 100번 올리기
조심할 점	저장소를 Public으로 만듭니다	새 프로젝트는 비공개로 시작합니다	학생에게는 짧은 주소를 줍니다
가입 나이	만 13세 이상	만 16세 이상 (개인정보 처리방침)	만 16세 이상
이럴 때	자료를 모아 두고 오래 쓸 때	파일을 가장 빨리 올려 볼 때	GitHub에서 고치면 사이트도 저절로 바뀌게 할 때

GitHub Pages따라하기 Netlify따라하기 Vercel지금 보고 계신 매뉴얼

2026년 10월 5일 각 회사의 공식 안내를 기준으로 정리했습니다. 무료로 쓰는 양과 조건은 바뀔 수 있습니다.

Vercel 가입하기 Sign Up

내 Vercel 계정을 만들어보겠습니다! Vercel Drop은 로그인해야 쓸 수 있습니다.

주소창에 vercel.com/signup 을 입력해 들어가 주세요.
요금제를 고르라고 하면 무료인 Hobby 를 고르고, 이름을 적어 주세요.
가입 방법은 Continue with GitHub 를 권합니다. GitHub 매뉴얼에서 만든 계정으로 가입해 두면 6단계에서 저장소를 이을 때 편합니다. GitHub 계정이 없으면 이메일로 가입하셔도 됩니다.
Vercel 첫 화면(대시보드)이 보이면 가입이 끝난 것입니다.

📷 화면 사진을 준비하고 있습니다Vercel 가입 화면 (Hobby 고르기와 가입 방법)

📷 화면 사진을 준비하고 있습니다가입을 마친 뒤 처음 보이는 대시보드

무료(Hobby)는 개인·비상업 용도입니다

Vercel 약관에 Hobby 요금제는 개인적이거나 비상업적인 용도로만 쓰게 되어 있습니다. 수업 자료를 나누는 데 쓰고, 돈을 받는 일에는 쓰지 않습니다.

학생 계정으로 시키지 않습니다

Vercel 약관은 만 16세 이상만 쓸 수 있게 되어 있습니다. 중학생 작품을 올릴 때도 선생님 계정으로 올려주세요.

1 / 6

올릴 파일 준비하기

올릴 파일을 한 묶음으로 준비해보겠습니다! 연습할 때는 이 페이지의 연습 묶음을 내려받고, 직접 만든 파일은 폴더 하나에 모아 주세요.

① 연습 묶음 내려받기

아래 내려받기 단추를 누르면 다운로드 폴더에 my-first-web.zip 이 저장됩니다. 압축은 풀지 않고 이 파일 그대로 올립니다.

my-first-web.zip

index.html 축하 화면 · 주소만 쳐도 열립니다

hello.html 두 번째 파일 · 주소 끝에 /hello.html 을 붙여 엽니다

올리고 나면 이렇게 보이게 됩니다

🎉

Vercel로 배포하기, 정말 쉽죠?

선생님, 누구나 할 수 있어요!

② 직접 만든 파일이라면

바탕화면에 새 폴더를 하나 만들고, 이름을 띄어쓰기 없는 영어로 정해 주세요. (예: science-quiz)
첫 화면이 될 파일의 이름을 index.html 로 해서 이 폴더 바로 안에 넣어 주세요. 그래야 주소만 쳐도 열립니다.
그림이나 다른 HTML 파일도 같은 폴더에 넣어 주세요. 3단계에서 이 폴더를 통째로 끌어다 놓습니다.

✓ 이렇게 넣어 주세요

📁 science-quiz📄 index.html📄 hello.html🖼 photo.png이 폴더를 통째로 끌어다 놓습니다.

✕ 이러면 첫 화면이 열리지 않습니다

📁 바탕화면의 다른 폴더📁 science-quiz📄 index.html바깥 폴더를 끌어다 놓으면 index.html 이 한 겹 더 안쪽에 있게 됩니다.

index.html 이 없으면 Vercel이 물어봅니다

폴더 맨 위에 index.html 이 없으면, Vercel이 올릴 때 Root (/) 메뉴에서 첫 화면으로 보여 줄 파일을 고르라고 합니다. 처음부터 첫 화면 파일 이름을 index.html 로 해 두는 편이 헷갈리지 않습니다.

왜 꼭 index.html 일까요?

주소가 / 로 끝나면 사이트는 그 폴더의 대표 파일을 알아서 찾아 보여 줍니다. 그 대표 파일의 이름이 index.html 입니다. 자세한 설명은 GitHub 매뉴얼 3단계 맨 아래에 있습니다.

2 / 6

끌어다 놓아 올리기 Vercel Drop

준비한 묶음을 Vercel 화면에 끌어다 놓아 사이트를 만들어보겠습니다! 이름을 정하고 Deploy 를 한 번 누르면 됩니다.

로그인한 상태에서 주소창에 vercel.com/drop 을 입력해 들어가 주세요.
다운로드 폴더의 my-first-web.zip 을 화면에 끌어다 놓아 주세요. 끌어오기가 어려우면 화면의 file 이나 folder 를 눌러 골라 주셔도 됩니다.
올릴 곳(팀)은 그대로 두고, 프로젝트 이름을 띄어쓰기 없는 영어 소문자로 적어 주세요. (예: my-science-quiz)
Deploy 를 누르고 잠깐 기다리면 사이트가 만들어지고 주소가 생깁니다.

📷 화면 사진을 준비하고 있습니다vercel.com/drop 의 끌어다 놓는 화면

📷 화면 사진을 준비하고 있습니다프로젝트 이름을 적고 Deploy 를 누르는 화면

📷 화면 사진을 준비하고 있습니다올리기가 끝난 프로젝트 화면

zip 파일을 그대로 올려도 되나요?

네. Vercel Drop은 파일, 폴더, .zip 을 모두 받습니다. 압축을 풀었다면 풀린 폴더를 끌어다 놓으셔도 됩니다.

3 / 6

학생에게 줄 링크 확인하기 Domains

학생들에게 나눠 줄 짧은 주소를 확인하고 열어보겠습니다! 긴 주소를 나누면 학생 화면에 로그인 창이 뜰 수 있습니다.

① Domains 의 짧은 주소 찾기

프로젝트 화면에서 Domains 에 적힌 주소를 찾아 주세요. 보통 프로젝트이름.vercel.app 처럼 짧습니다. 이 주소가 학생들에게 줄 주소입니다.
Deployments 목록에 보이는 긴 주소는 올릴 때마다 새로 생기는 주소입니다. 학생에게는 나누지 않습니다.

📷 화면 사진을 준비하고 있습니다프로젝트 화면의 Domains (짧은 주소)

② 내 링크 열기

https://my-science-quiz.vercel.app/

index.html 이 열립니다. (축하 화면)

https://my-science-quiz.vercel.app/hello.html

hello.html 이 열립니다. (끝에 파일 이름을 붙인 경우)

my-science-quiz 자리에는 Domains 에 적힌 주소의 앞부분이 들어갑니다.

Domains 에 적힌 주소의 앞부분

학생 화면으로 확인하기

크롬의 시크릿 창(Ctrl + Shift + N)이나 로그인하지 않은 휴대폰으로 짧은 주소를 열어 보세요. 축하 화면이 보이면 학생들도 볼 수 있는 것입니다.

긴 주소에서 로그인 창이 뜨는 까닭

프로젝트의 Deployment Protection 이 켜져 있으면, 긴 주소를 연 사람은 Vercel 로그인 화면으로 넘어갑니다. 기본 보호 범위(Standard Protection)에서 짧은 주소(Domains)는 빠져 있어서, 짧은 주소만 나누면 설정을 바꿀 필요가 없습니다.

4 / 6

고친 파일 다시 올리기

파일을 고친 뒤 같은 주소에 새 내용을 올려보겠습니다! 링크는 그대로이고 내용만 바뀝니다.

① 고친 묶음 내려받기

연습용으로 축하 화면을 고쳐 둔 묶음입니다. 다운로드 폴더에 my-first-web-v2.zip 이 저장됩니다.

my-first-web-v2.zip

index.html 고친 축하 화면 (초록색으로 바뀜)

hello.html 그대로 · 폴더 전체를 다시 올리기 때문에 함께 들어 있습니다

올리고 나면 이렇게 보이게 됩니다

🔄

고친 판이 올라갔습니다!

링크는 그대로이고 내용만 바뀌었습니다.

② 대시보드의 프로젝트에 끌어다 놓기

Vercel 대시보드에서 내 프로젝트를 열어 주세요.
my-first-web-v2.zip 을 프로젝트 화면에 끌어다 놓아 주세요. 같은 프로젝트에 새로 올린 판이 만들어집니다.
잠깐 기다렸다가 짧은 주소를 새로고침하면 “고친 판이 올라갔습니다!” 화면이 보입니다.

📷 화면 사진을 준비하고 있습니다프로젝트 화면에 고친 묶음을 끌어다 놓는 모습

vercel.com/drop 에 다시 놓으면 새 프로젝트가 생깁니다

고친 파일은 꼭 대시보드의 내 프로젝트에 끌어다 놓아 주세요. vercel.com/drop 에 다시 놓으면 주소가 다른 새 프로젝트가 만들어집니다.

바뀐 파일만이 아니라 폴더 전체를 올려 주세요

새로 올린 판에는 그때 올린 파일만 들어갑니다. 고친 파일 하나만 올리면 나머지 파일이 사라지니, 늘 폴더를 통째로 올려 주세요.

두 실습 모두 마치셨습니다!

수업 자료나 학생 작품을 올리실 때 다시 열어보실 수 있도록 이 페이지에 순서대로 정리해두었습니다^^

5 / 6

GitHub 저장소와 잇기 (골라서) Import

GitHub 매뉴얼로 저장소를 만드셨다면, 저장소와 이어서 GitHub에서 고칠 때마다 사이트가 저절로 바뀌게 해보겠습니다!

이 단계는 골라서 하시면 됩니다. 끌어다 놓기만으로 충분하시면 건너뛰셔도 괜찮습니다.

주소창에 vercel.com/new 를 입력해 들어가 주세요.
GitHub 계정을 처음 잇는다면, GitHub 화면이 열리고 Vercel이 볼 수 있는 저장소를 고르라고 합니다. 이을 저장소를 골라 허락해 주세요.
저장소 목록에서 이을 저장소(예: my-first-web) 옆의 Import 를 눌러 주세요.
설정은 그대로 두고 Deploy 를 눌러 주세요. 새 프로젝트가 만들어지고, 4단계처럼 Domains 에 짧은 주소가 생깁니다.

📷 화면 사진을 준비하고 있습니다vercel.com/new 에서 GitHub 저장소 옆 Import 를 누르는 화면

📷 화면 사진을 준비하고 있습니다저장소와 이어진 프로젝트 화면

이제 GitHub에서 고치면 사이트도 바뀝니다

GitHub 저장소에서 파일을 고치고 Commit changes 를 누르면, Vercel이 알아서 새로 올립니다. 잠시 뒤 짧은 주소를 새로고침해 보세요.

Drop으로 만든 프로젝트와는 다른 프로젝트입니다

3단계에서 끌어다 놓아 만든 프로젝트는 GitHub과 이어지지 않습니다. 저장소와 이은 프로젝트는 주소가 따로 생기니, 학생들에게는 둘 중 하나의 주소만 나눠 주세요.

무료(Hobby)로 이을 수 있는 저장소

무료 요금제에서는 내 개인 저장소만 이을 수 있습니다. 학교나 모임의 GitHub 조직(organization)에 있는 비공개 저장소는 이을 수 없습니다.

6 / 6

안 될 때

막혔을 때는 이 순서로 확인해주세요

아래 ‘자주 나는 오류’에서 같은 증상을 찾아 그대로 따라해주세요.
직접 만든 코드가 이상하게 보이면 ‘내가 만든 코드가 HTML 이 아닐 때’를 봐주세요.
그래도 안 되면 AI 에게 묻는 문장을 복사해서 Gemini·ChatGPT·Claude 에 붙여넣어주세요.
마지막으로 체크리스트로 하나씩 점검해주세요.

자주 나는 오류 (증상과 해결)

🔐

학생이 열면 Vercel 로그인 화면이 뜸

긴 주소(Deployments 의 주소)를 나눈 경우입니다. 프로젝트 화면의 Domains 에 적힌 짧은 주소를 나눠 주세요. (4단계)

🔗

‘404: NOT_FOUND’ 가 뜸

폴더 바로 안에 index.html 이 없습니다. 파일 이름을 index.html 로 하거나 폴더가 한 겹 더 들어가 있지 않은지 확인하고 다시 올려 주세요. 다른 이름의 파일은 주소 끝에 이름을 붙여 엽니다. (2단계)

🆕

고친 파일을 올렸더니 주소가 다른 사이트가 생김

vercel.com/drop 에 다시 놓은 경우입니다. 대시보드의 내 프로젝트에 끌어다 놓아 주세요. (5단계)

🧩

다시 올렸더니 다른 파일이 사라짐

고친 파일만 올린 경우입니다. 폴더 전체를 다시 올려 주세요. (5단계)

🔄

GitHub에서 고쳤는데 사이트가 그대로

Drop으로 만든 프로젝트는 GitHub과 이어져 있지 않습니다. 6단계처럼 저장소를 이어 새 프로젝트를 만들어 주세요.

📂

이을 저장소가 목록에 없음

GitHub에서 Vercel이 볼 수 있는 저장소를 고를 때 빠진 경우입니다. 연결 화면에서 그 저장소를 다시 허락해 주세요. 조직(organization)의 비공개 저장소는 무료 요금제에서 이을 수 없습니다. (6단계)

⏳

오늘은 더 올릴 수 없다고 나옴

무료 요금제는 하루 100번까지 올릴 수 있습니다. 고칠 것을 모아서 올려 주세요.

🔤

한글이 깨져 보임

코드 맨 위쪽에 <meta charset="UTF-8"> 이 있는지 확인해 주세요.

🔁

고쳤는데 예전 화면이 계속 보임

브라우저가 예전 화면을 기억하고 있어서 그렇습니다. 강력 새로고침(Ctrl+Shift+R, 맥은 ⌘+Shift+R)을 해주세요.

🌐

버튼 이름이 설명과 다름

크롬 번역이 켜져 있는 경우입니다. 주소창 오른쪽의 번역 아이콘을 눌러 영어(원문)로 되돌려주세요.

내가 만든 코드가 HTML 이 아닐 때

올렸는데 화면이 이상하거나, 코드 글자만 보이거나, 열리지 않는다면 그 코드가 ‘HTML 한 파일’이 아닐 수 있습니다. 코드 맨 윗줄이 <!DOCTYPE html> 인지 먼저 확인해주세요. 아니라면 아래 문장을 AI 채팅에 붙여넣어 HTML 한 파일로 다시 받아 주세요.

AI 에 붙여넣기

지금 만든 걸 HTML 파일 하나로 다시 만들어줘. HTML, CSS, JavaScript를 전부 한 파일에 넣고, 맨 윗줄은 <!DOCTYPE html> 으로 시작하게 해줘. 다른 파일 없이 이 파일 하나만으로 작동해야 해. 파일 이름은 index.html 로 해줘.

그래도 안 되면 AI 에게 물어보세요

Gemini·ChatGPT·Claude 중 아무거나 열고 아래 문장을 복사해서 붙여넣어주세요. ___ 부분은 상황에 맞게 채워주시면 됩니다.

AI 에게 붙여넣기 (___ 채우기)

나는 Vercel에 HTML 파일을 올려서 학생들에게 링크로 나누려고 해. 그런데 문제가 생겼어.

[문제: ___ ]  (예: 학생이 열면 Vercel 로그인 화면이 떠)

- 올린 방법: ___  (예: vercel.com/drop 에 zip을 끌어다 놓음 / GitHub 저장소를 Import 함)
- 올린 폴더 안의 파일 이름: ___  (예: index.html, quiz.html, photo.png)
- 내 주소: https://___.vercel.app/
- 코드 맨 윗줄: ___  (예: <!DOCTYPE html>)

차근차근, 무엇이 문제이고 어떻게 고치는지 순서대로 알려줘. Vercel 버튼 이름은 영어 그대로 알려줘.

잘 물어보는 요령

“안 돼요”라고만 쓰면 AI 도 알 수가 없습니다. 화면에 뜬 글자와 내 주소를 그대로 알려줄수록 정확한 답이 나옵니다. 화면을 캡처해서 같이 붙여넣으셔도 좋습니다.

스스로 점검하기 (눌러서 체크)

✓로그인한 상태로 올렸습니다.
✓폴더 바로 안에 index.html 이 있습니다. (한 겹 더 들어간 폴더 ❌)
✓학생들에게 Domains 의 짧은 주소를 나눴습니다.
✓시크릿 창으로 짧은 주소를 열어 확인했습니다.
✓고친 파일은 대시보드의 내 프로젝트에 폴더 전체로 올렸습니다.
✓index.html 이 아닌 파일은 주소 끝에 파일 이름을 붙였습니다.
✓파일 이름 끝이 .html 하나입니다. (.html.html ❌)

위가 전부 ✓ 인데도 안 된다면 ‘AI 에게 물어보세요’ 문장을 복사해서 붙여넣어보세요.

끝