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

Netlify로
인터넷에 올리기.

만든 파일이 든 폴더를 Netlify 화면에 끌어다 놓기만 하면 누구나 열어 볼 수 있는 내 링크가 생기게 됩니다. GitHub처럼 저장소를 만들지 않아도 되어서, 배포를 처음 해 보실 때 가장 간단한 방법입니다. 연습 파일로 한 번 올려 보고, 고친 파일을 다시 올리는 데까지 같이 해보겠습니다!

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

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

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

프로젝트 이름은 처음에 아무렇게나 지어지고, 5단계에서 알아보기 쉬운 이름으로 바꿉니다.

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

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

🔒 처음에는 나만 볼 수 있습니다2026년 7월 28일 이후에 가입한 계정은 새 프로젝트가 비공개로 시작합니다. 그대로 두면 학생이 열었을 때 ‘권한이 없다’는 화면이 나옵니다. 4단계에서 공개로 바꿉니다.

🪙 올릴 때마다 크레딧이 듭니다무료 요금제는 한 달 300크레딧이고, 한 번 올릴 때마다 15크레딧이 빠집니다. 학생들이 열어 보는 양에도 조금씩 듭니다(1GB에 20크레딧). 다 쓰면 내 사이트가 모두 멈추니, 고칠 것을 모아서 한 번에 올려주세요.

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

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

Sign up가입하기

Projects내 프로젝트(사이트) 목록

Add new project새 프로젝트 만들기

Deploy manually파일을 직접 끌어다 올리기

Production deploys실제 사이트에 올린 기록

Project configuration프로젝트 설정

Project visibility누가 볼 수 있는지

Public공개 (누구나 볼 수 있음)

Private비공개 (나만 볼 수 있음)

Customize이름 바꾸기 메뉴가 있는 곳

두 번 연습합니다

첫 실습 · 연습 묶음 올리기

이 페이지에서 내려받은 my-first-web.zip 을 끌어다 놓아 사이트를 만들고, 공개로 바꾸고, 이름을 정합니다. (1~5단계)

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

my-first-web-v2.zip 을 같은 프로젝트에 다시 올려, 링크는 그대로이고 내용만 바뀌는지 확인합니다. 파일을 고칠 때마다 쓰는 방법입니다. (6단계)

준비물

📧이메일, 구글, GitHub 계정 가운데 하나

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

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

⏱️15분

한눈에 보는 순서

가입주소창에 app.netlify.com 을 열고 GitHub, Google, Email 가운데 하나로 가입합니다. 내 프로젝트 목록(Projects)이 보이면 끝입니다.
파일 준비연습 묶음 my-first-web.zip 을 내려받습니다. 직접 만든 파일은 폴더 하나에 모으고, 첫 화면 파일 이름을 index.html 로 둡니다.
올리기로그인한 채로 app.netlify.com/drop 을 열고, 점선 상자에 묶음을 끌어다 놓습니다. ….netlify.app 주소가 생깁니다.
공개프로젝트 화면의 Make public 을 누릅니다. 단추가 없으면 Project configuration 의 General 에서 Project visibility 를 Public 으로 바꾸고 Save 를 누릅니다.
이름·링크Customize 에서 Manage project name and cover image 를 골라 이름을 바꿉니다. 주소가 https://새이름.netlify.app 이 되고, 시크릿 창으로 열어 학생 화면을 확인합니다.
다시 올리기고친 폴더를 통째로 프로젝트 화면의 Production deploys 아래 칸에 끌어다 놓습니다. 링크는 그대로이고 내용만 바뀝니다.

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일 각 회사의 공식 안내를 기준으로 정리했습니다. 무료로 쓰는 양과 조건은 바뀔 수 있습니다.

Netlify 가입하기 Sign up

내 Netlify 계정을 만들어보겠습니다! 로그인한 상태로 올려야 사이트가 내 것으로 남고, 4단계에서 공개로 바꿀 수 있습니다.

주소창에 app.netlify.com 을 입력해 들어가 주세요. 처음이면 가입 화면이 나옵니다.
가입 방법을 하나 골라 주세요. GitHub 매뉴얼에서 만든 계정이 있으면 GitHub으로, 없으면 Google이나 Email로 가입하셔도 됩니다.
가입하는 동안 이름이나 쓰려는 목적을 묻는 질문이 나오면 답하고 넘어가 주세요.
내 프로젝트 목록(Projects) 화면이 보이면 가입이 끝난 것입니다.

📷 화면 사진을 준비하고 있습니다Netlify 가입 화면 (가입 방법을 고르는 단추들)

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

로그인하지 않고 올리면 임시 비밀번호가 걸립니다

Netlify Drop은 로그인하지 않아도 파일을 올릴 수 있습니다. 하지만 그렇게 올린 사이트에는 임시 비밀번호가 걸려 있어서 학생에게 보여 줄 수 없습니다. 꼭 로그인한 뒤에 올려주세요.

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

Netlify는 만 16세 미만에게는 서비스하지 않는다고 개인정보 처리방침에 적어 두었습니다. 중학생 작품을 올릴 때도 선생님 계정으로 올려주세요.

1 / 6

올릴 파일 준비하기

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

① 연습 묶음 내려받기

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

my-first-web.zip

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

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

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

🎉

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

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

② 직접 만든 파일이라면

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

✓ 이렇게 넣어 주세요

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

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

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

파일 크기를 확인해 주세요

Netlify는 전체 50MB 아래로 올릴 때 가장 잘 되고, 한 파일이 10MB를 넘으면 올리다가 멈출 수 있다고 안내합니다. 동영상은 폴더에 넣지 말고 유튜브 링크로 바꿔 주세요.

왜 꼭 index.html 일까요?

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

2 / 6

끌어다 놓아 올리기 Deploy manually

준비한 묶음을 Netlify 화면에 끌어다 놓아 사이트를 만들어보겠습니다! 올라가는 데 몇 초면 됩니다.

① 끌어다 놓는 화면 열기

로그인한 상태에서 아래 두 방법 가운데 편한 것 하나만 골라 열어 주세요.

주소창에 app.netlify.com/drop 을 입력합니다.
또는 Projects 화면에서 Add new project 를 누르고 Deploy manually 를 고릅니다.

📷 화면 사진을 준비하고 있습니다점선 상자가 있는 끌어다 놓기 화면

② 점선 상자에 끌어다 놓기

다운로드 폴더를 열고 my-first-web.zip 을 점선 상자 안으로 끌어다 놓아 주세요. 직접 만든 파일은 2단계에서 만든 폴더를 통째로 끌어다 놓습니다.
잠깐 기다리면 프로젝트 화면이 열리고, 아무렇게나 지어진 이름의 주소(….netlify.app)가 생깁니다.

📷 화면 사진을 준비하고 있습니다올리기가 끝난 프로젝트 화면 (주소가 보이는 곳)

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

네. Netlify가 묶음을 풀어서 올려 줍니다. 압축을 풀었다면 풀린 폴더를 끌어다 놓으셔도 됩니다.

여기까지 하셨다면

프로젝트 화면에 ….netlify.app 주소가 보이실 겁니다. 새로 가입한 계정이면 아직 비공개라서 학생들은 열 수 없습니다. 바로 4단계로 가서 공개로 바꿔 주세요.

3 / 6

공개로 바꾸기 Project visibility

사이트를 학생들도 열 수 있게 공개로 바꿔보겠습니다! 이 단계를 건너뛰면 학생 화면에는 ‘권한이 없다’는 Netlify 안내가 뜹니다.

① Make public 누르기

첫 올리기가 끝나면 프로젝트 화면에 Make public 단추가 생깁니다. 보이면 눌러 주세요.

📷 화면 사진을 준비하고 있습니다프로젝트 화면의 Make public 단추

② 단추가 보이지 않으면 설정에서 바꾸기

Project configuration 에 들어가 General 을 고릅니다.
Visitor access 아래 Project visibility 에서 공개(Public)를 고르고 Save 를 눌러 주세요.

📷 화면 사진을 준비하고 있습니다Project visibility 에서 Public 을 고르는 화면

비공개로 두면 누가 볼 수 있나요?

무료 요금제에서는 주인(나)만 볼 수 있고, 다른 사람을 초대할 수도 없습니다. 학생과 나누는 사이트는 꼭 공개로 바꿔 주세요.

학생 화면으로 확인하기

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

4 / 6

이름 바꾸고 링크 열기 Customize

아무렇게나 붙은 이름을 알아보기 쉬운 이름으로 바꾸고, 내 링크를 열어보겠습니다!

① 프로젝트 이름 바꾸기

프로젝트 화면(Project overview)에서 Customize 를 누르고 Manage project name and cover image 를 골라 주세요.
이름 칸에 띄어쓰기 없는 영어 소문자와 숫자, 붙임표(-)로 새 이름을 적고 저장해 주세요. (예: my-science-quiz)
주소가 https://새이름.netlify.app 으로 바뀝니다. 이미 다른 사람이 쓰고 있는 이름이면 다른 이름을 골라 주세요.

📷 화면 사진을 준비하고 있습니다프로젝트 이름을 바꾸는 화면

학생들에게 나눈 뒤에는 이름을 바꾸지 말아주세요

이름을 바꾸면 주소도 함께 바뀝니다. 링크를 나눠 준 뒤에 바꾸면 학생들이 새 주소를 다시 받아야 합니다.

② 내 링크 열기

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

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

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

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

my-science-quiz 자리에는 내가 정한 프로젝트 이름이 들어갑니다.

내 프로젝트 이름

여기까지 하셨다면

첫 실습을 마치셨습니다. 이 주소를 학생들에게 나눠 주면 됩니다. 주소가 길면 QR 코드로 만들어 칠판에 띄워 주셔도 좋습니다.

5 / 6

고친 파일 다시 올리기 Production deploys

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

① 고친 묶음 내려받기

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

my-first-web-v2.zip

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

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

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

🔄

고친 판이 올라갔습니다!

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

② 프로젝트 화면에 끌어다 놓기

내 프로젝트 화면으로 가서 Production deploys 아래에 있는 끌어다 놓는 칸을 찾아 주세요.
my-first-web-v2.zip 을 그 칸에 끌어다 놓아 주세요.
잠깐 기다렸다가 내 링크를 새로고침하면 “고친 판이 올라갔습니다!” 화면이 보입니다.

📷 화면 사진을 준비하고 있습니다Production deploys 아래 끌어다 놓는 칸

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

다시 올릴 때마다 사이트 전체가 새로 올린 폴더의 내용으로 바뀝니다. 고친 파일 하나만 올리면 나머지 파일이 사라지니, 늘 폴더를 통째로 올려 주세요. 연습 묶음 v2에 hello.html 이 그대로 들어 있는 것도 그 때문입니다.

크레딧을 아끼는 법

올릴 때마다 15크레딧이 빠집니다. 내 컴퓨터에서 index.html 을 두 번 눌러 브라우저로 먼저 확인하고, 고칠 것을 모아서 한 번에 올려 주세요.

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

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

6 / 6

안 될 때

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

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

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

🔒

학생이 열면 ‘권한이 없다’는 화면

프로젝트가 아직 비공개입니다. Make public 을 누르거나 Project visibility 를 Public 으로 바꿔 주세요. (4단계)

🔑

비밀번호를 묻는 화면

로그인하지 않고 올린 사이트입니다. 로그인한 뒤 그 사이트를 내 계정으로 가져오거나, 로그인한 상태에서 다시 올려 주세요. (1단계)

🔗

‘Page not found’ 가 뜸

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

⛔

‘Site not available’ 이 뜸

이번 달 크레딧을 다 쓴 것입니다. 다음 달이 시작되면 다시 열리고, 그 전에 열려면 유료 요금제로 바꿔야 합니다. 고칠 것을 모아서 올리면 막을 수 있습니다. (시작)

⏳

올리다가 멈춤

한 파일이 10MB를 넘는지 확인해 주세요. 동영상이나 큰 사진은 줄이거나 빼고 다시 올려 주세요. (2단계)

🧩

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

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

🖼️

그림이 보이지 않음

그림 파일을 같은 폴더에 넣었는지, 코드 속 파일 이름과 대소문자까지 같은지 확인해 주세요.

🔤

한글이 깨져 보임

코드 맨 위쪽에 <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 에게 붙여넣기 (___ 채우기)

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

[문제: ___ ]  (예: 학생이 열면 권한이 없다는 화면이 떠)

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

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

잘 물어보는 요령

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

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

✓로그인한 상태로 올렸습니다.
✓폴더 바로 안에 index.html 이 있습니다. (한 겹 더 들어간 폴더 ❌)
✓프로젝트가 공개(Public) 입니다.
✓시크릿 창으로 주소를 열어 확인했습니다.
✓index.html 이 아닌 파일은 주소 끝에 파일 이름을 붙였습니다.
✓다시 올릴 때 폴더 전체를 올렸습니다.
✓파일 이름 끝이 .html 하나입니다. (.html.html ❌)

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

끝