🚀 중학생 따라하기 가이드

내가 만든 걸
인터넷에 올리기!

AI(Gemini)로 만든 코드를 GitHub Pages에 올려서, 친구한테 링크로 자랑하는 방법이야. 컴퓨터만 있으면 10분이면 끝!

📌 위쪽 탭이나 아래 ‘다음 →’ 버튼으로 한 단계씩 따라오면 돼. 막혀도 당황하지 마! 맨 끝 ‘안 될 때 🆘’ 탭에 거의 모든 문제의 답이 정리돼 있어. 선생님 부르기 전에 거기부터 보고, 그래도 안 되면 AI한테 직접 물어보자!

🎒 준비물

📧구글 계정 (Gemini용)

💻인터넷 되는 컴퓨터

🧩Gemini Canvas로 만든 내 코드

⏱️10분의 여유

🛣️ 코드를 올리는 두 가지 방법

4단계에서 아래 둘 중 하나만 고르면 돼. 미리 살짝 봐두자!

복붙 방식 (제일 추천!)

코드를 복사해서 GitHub에 바로 붙여넣기. 다운로드·이름 바꾸기가 없어서 실수가 거의 없어. 파일이 1개일 때 최고.

업로드 방식

파일로 다운로드해서 올리기. 파일이 여러 개거나 다운로드가 편하면 이 방법. 대신 파일 이름을 조심해야 해(함정 있음 ⚠️).

🗺️ 한눈에 보는 순서

1 가입→ 2 코드확인→ 3 저장소→ 4 코드올리기→ 5 Pages→ 6 링크 🎉

GitHub 가입하기

GitHub는 내 파일을 올려두고 인터넷에 공개할 수 있는 곳이야. 무료로 가입하면 돼!

github.com 접속→Sign up→가입 완료

주소창에 github.com 을 입력해 접속 → 오른쪽 위 Sign up 클릭.
이메일 주소 입력 → Continue.
비밀번호 만들기 (영어+숫자 섞어서) → Continue.
사용자 이름(Username) 정하기 — 남이 안 쓰는 영어 이름으로. → Continue.
‘사람인지 확인’ 퍼즐이 나오면 풀고 끝내기.
가입 메일로 온 인증 코드(숫자)를 입력하라고 하면 메일함을 열어 코드를 넣어줘.

⚠️ 사용자 이름(아이디)은 신중하게!

가입할 때 정한 사용자 이름이 곧 내 사이트 주소가 돼. 예) 아이디가 hong-science면 → 내 주소는 hong-science.github.io/... 로 시작해. 기억하기 쉬운 걸로 정하고 잘 적어두자 (6단계에서 써!).

📶 교실 꿀팁

같은 와이파이로 여러 명이 한꺼번에 가입하면 막힐 수 있어. 그러면 휴대폰 핫스팟으로 가입해 봐.

✅ 완료!

로그인된 GitHub 화면이 보이면 가입 끝!

1 / 6

내 코드가 ‘HTML’이 맞는지 확인 중요

이제 Gemini로 가자! GitHub Pages는 HTML만 인터넷 페이지로 보여줄 수 있어. Gemini가 가끔 HTML이 아닌 코드를 줄 때가 있어서, 이걸 먼저 확인해야 헛고생을 안 해.

👀 Canvas 코드의 맨 윗줄을 봐! (그림/화면만 보이고 코드가 안 보이면 ‘코드(Code)’ 보기로 바꿔서 확인해.)

✅ 이렇게 시작하면 OK!

<!DOCTYPE html><html lang="ko">

❌ 이렇게 시작하면 아직 HTML이 아니야

import React from "react"function App() { ... }def main(): (← 파이썬)```jsx / ```python

⚠️ HTML이 아니면?

아래 마법의 문장을 복사해서 Gemini 채팅에 그대로 붙여넣어 줘. 그러면 HTML 파일로 다시 만들어 줄 거야.

GEMINI에 붙여넣기

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

🧩 파일이 여러 개로 나뉘어 나왔다면?

가끔 Gemini가 index.html + style.css + script.js처럼 여러 파일로 줄 때가 있어. 그래도 작동은 하지만, 위 마법의 문장으로 “한 파일로 합쳐줘” 하면 훨씬 올리기 쉬워져. (한 파일이면 4단계 ‘복붙 방식’이 가능!)

✅ 통과 기준

코드 맨 윗줄이 <!DOCTYPE html> 이 되면 합격! 다음 단계로 ㄱㄱ

2 / 6

새 저장소(Repository) 만들기

GitHub로 돌아가자! ‘저장소’는 내 파일을 올려두는 방이라고 생각하면 돼. 먼저 빈 방을 하나 만들 거야.

🔘 ‘새 저장소’ 버튼 찾기 — 화면마다 달라!

사람마다 화면이 조금씩 달라서 버튼 위치가 헷갈려. 아래 중 보이는 걸로 하나만 하면 돼.

오른쪽 위에 + 만 보이면 → + 클릭 → 펼쳐지는 메뉴에서 New repository 클릭.
New 또는 New repository 초록 버튼이 바로 보이면 → 그냥 클릭.
왼쪽에 ‘Repositories’ 목록 옆 초록 New가 보이면 → 클릭.

🦾 위가 다 안 보이거나 헷갈리면 — 무적의 방법!

주소창에 이걸 그대로 입력해 → github.com/new
그러면 버튼을 안 찾아도 저장소 만들기 화면이 바로 떠. (이게 제일 확실해서 추천!)

📝 만들기 화면 채우기

Repository name: 띄어쓰기·한글 없이 영어로 아무거나. (예: my-first-web) 공백·한글 ❌
Public을 꼭 선택! (Private이면 무료 Pages가 안 되고 친구도 못 봐!)
나머지(Description, README 등)는 안 건드려도 돼.
맨 아래 초록 버튼 Create repository 클릭. (버튼이 그냥 Create로 보일 수도 있어 — 같은 거야!)

github.com/new→이름 입력→Public 체크→Create repository

⚠️ ‘Create repository’ 버튼이 회색이라 안 눌려요

거의 다 이름(Repository name)을 안 적어서야. 영어 이름을 적으면 버튼이 초록색으로 바뀌면서 눌려.

🔗 알아두기

여기서 정한 저장소 이름도 내 주소에 들어가 → (아이디).github.io/저장소이름/ (6단계에서 확인!)

3 / 6

코드 올리기 + 파일 이름 정하기 제일 중요 ⭐

이제 만든 코드를 방(저장소)에 넣을 거야. 아래 두 방법 중 하나만 고르면 돼. 어떤 방법이든 파일 이름은 index.html이 되는 게 핵심이야 (이유는 아래에서 설명!).

🅰️ 복붙 방식 파일 1개면 강추 · 실수 거의 없음

코드를 복사해서 GitHub에 바로 붙여넣어. 다운로드도, 이름 바꾸기도 없어서 뒤에 나올 ‘이중 확장자 함정’이 아예 안 생겨!

Gemini Canvas에서 코드 보기(Code)로 바꾼 뒤 코드 전체 복사. (코드 칸 안을 클릭 → Ctrl+A → Ctrl+C, 또는 복사 아이콘)
GitHub 저장소 화면에서 Add file → Create new file 클릭.
맨 위 파일 이름 칸에 정확히 index.html 입력. ← 여기가 핵심! 꼭 index.html
아래 큰 칸에 코드 붙여넣기 (Ctrl+V).
오른쪽 위(또는 아래) 초록 Commit changes → 작은 창이 뜨면 한 번 더 Commit changes.

😎 왜 이게 편할까?

이름을 직접 index.html로 타이핑하니까 index.html.html 같은 함정이 안 생겨. 파일 1개면 이 방법이 제일 안전해!

🅱️ 업로드 방식 파일 여러 개거나 다운로드가 편할 때

파일로 다운로드해서 올려. 대신 파일 이름을 조심해야 해 (바로 아래 함정 꼭 읽기 ⚠️).

Gemini Canvas 위쪽 ⬇️ 다운로드 아이콘 클릭 → ‘다운로드’ 폴더에 저장됨.
파일 이름을 index.html로 바꾸기. ← 아래 ‘이중 확장자 함정’ 꼭 보기!
GitHub 저장소에서 Add file → Upload files 클릭.
파일을 화면 안으로 끌어다 놓기 (여러 개면 한꺼번에 OK).
아래로 내려 초록 Commit changes 클릭.

※ 파일이 여러 개면 메인(첫 화면) 파일을 index.html로, 나머지는 이름 그대로 두면 돼.

🤔 왜 꼭 index.html이어야 해?

웹사이트는 누가 폴더(주소)에 들어오면, 거기서 “기본으로 보여줄 대표 파일”을 자동으로 찾아. 전 세계가 약속한 그 대표 파일 이름이 바로 index.html이야.

그래서 파일 이름이 index.html이면 → 주소 끝에 아무것도 안 붙여도 자동으로 열려! 👏

🍽️ 비유: 식당(폴더)에 들어가면 직원이 자동으로 펼쳐주는 ‘대표 메뉴판’이 index.html이야. 이름이 다르면(예: game.html) 식당이 “그 메뉴판이 어디 있죠?” 하고 못 찾아서 → 404(없음) 에러를 띄워. 그땐 주소 끝에 파일 이름을 직접 말해줘야(붙여야) 열려.

결론: 파일이 1개면 무조건 index.html이 제일 편하고 안전해! (안 그러면 6단계에서 404 만날 확률 ↑)

⚠️ 업로드 방식에서 1등으로 많이 하는 실수
— ‘이중 확장자(.html.html)’ 함정!

Gemini에서 다운로드한 파일은 이미 .html 파일이야 (진짜 이름: 예 myapp.html). 그런데 윈도우는 보통 .html을 숨겨서 화면엔 myapp만 보여줘.

이 상태에서 이름 바꾸기로 index.html이라고 통째로 치면?

화면엔 index.html→진짜 이름은 index.html.html 😱

숨겨진 .html 뒤에 또 .html이 붙어버려 → 사이트가 index.html을 못 찾아서 404!

✅ 올바른 방법 (이대로만 해!)

먼저 확장자를 보이게 켜기 — 윈도우 탐색기 위쪽 보기(View) → ‘파일 확장명’에 체크 ✅ (맥: Finder → 설정 → 고급 → ‘모든 파일 확장자 보기’ 켜기)
이제 myapp.html처럼 .html이 보일 거야.
오른쪽 클릭 → 이름 바꾸기 → 앞의 myapp만 지우고 index로 → index.html. 점(.html)은 절대 건드리지 마!
진짜 이름이 정확히 index.html(점이 1개)인지 눈으로 확인.

✅ 이게 맞아 (점 .html 하나)

index.html

❌ 이러면 404 / 코드가 글자로 보임

index.html.html (점이 둘)index.html.txt (끝이 .txt)index (.html이 없음)

⚠️ 공통 주의

폴더째 올리지 말고 파일만 올려. 저장소 첫 화면에 index.html이 바로 보여야 해(폴더 속에 숨으면 404).

✅ 여기까지 했으면

저장소 첫 화면에 index.html이 보일 거야. 이제 켜기만 하면 돼 → 다음!

4 / 6

GitHub Pages 켜기

파일을 올렸다고 끝이 아니야. 인터넷에 공개하는 스위치를 켜야 링크가 생겨!

⚙️ Settings→Pages→Branch: main / (root)→Save

저장소 화면 위쪽 메뉴에서 Settings(톱니바퀴) 클릭. (맨 오른쪽 위 ‘내 프로필’ 설정 말고, 저장소 안의 Settings야!)
왼쪽 메뉴에서 Pages 클릭.
Source를 ‘Deploy from a branch’로 두고, Branch는 main, 폴더는 / (root) 선택 → Save.

💡 Settings가 두 군데라 헷갈려!

GitHub엔 Settings가 ① 내 프로필 설정, ② 저장소 설정 두 군데 있어. 저장소 이름이 화면 위에 보이는 쪽의 Settings를 눌러야 ‘Pages’ 메뉴가 나와!

⏳ Save 눌러도 링크가 바로 안 떠!

이건 정상이야. GitHub이 사이트를 ‘짓는(build)’ 데 시간이 걸려. 다음 단계(6)에서 기다렸다가 새로고침하면 링크가 나타나!

5 / 6

내 링크 받기 (조금만 기다려!)

⏳ 먼저! ‘기다리기’가 핵심이야

Save를 누른 직후엔 링크가 아직 없어. GitHub이 사이트를 만드는 데 보통 1~2분(가끔 3~5분) 걸려. 이때 “링크가 없네?” 하고 포기하면 안 돼! 잠깐 기다렸다가 새로고침하면 돼.

📍 링크는 어디에 떠?

Pages 설정 화면(5단계에서 Save 누른 그 화면) 그대로 둔 채 1~2분 기다리기.
키보드 F5(또는 새로고침 버튼)로 그 화면을 새로고침.
그러면 화면 맨 위쪽에 초록색 박스가 생기면서 이렇게 떠 👇

🔧 박스가 안 보이고 “짓는 중”이면?

처음엔 “Your site is being built…” 같은 메시지나 빈 화면일 수 있어. 1~2분 더 기다리고 다시 새로고침(F5). 진행 상황을 보고 싶으면 저장소 위쪽 Actions 탭 → 주황 점 = 짓는 중, 초록 체크 = 완성이야.

🧱 내 주소가 어떻게 생겼는지

주소 = 아이디 + 저장소 이름

https://(내아이디).github.io/(저장소이름)/
(내아이디) = 1단계 사용자 이름 · (저장소이름) = 3단계에서 만든 이름

① 파일 이름이 index.html이면

주소 끝에 아무것도 안 붙여도 자동으로 열려.
https://(내아이디).github.io/(저장소이름)/

② 파일 이름이 다르면 (예: game.html)

주소 맨 끝에 그 파일 이름을 붙여야 열려!
https://(내아이디).github.io/(저장소이름)/game.html
파일이 여러 개면 각각 이름을 붙여서 들어가면 돼 → .../quiz.html …

😱 링크 눌렀더니 ‘404 File not found’가 떴어!

당황 ㄴㄴ! 거의 다 파일 이름을 index.html로 안 해서야. 해결법이 ‘안 될 때 🆘’ 탭에 단계별로 다 있어. 거기로 가서 그대로 따라 하면 풀려!

🎉 링크가 열렸다면!

축하해 — 너는 이제 ‘배포’할 줄 아는 사람이야! 이 링크를 친구·가족한테 보내서 자랑하자.

6 / 6

🆘 막혔을 때 — 선생님 부르기 전에!

선생님은 30명을 한꺼번에 못 도와줘. 그리고 너는 이미 AI로 코드를 만든 사람이잖아? 문제 해결도 아래 순서로 하면 거의 다 스스로 풀 수 있어 💪

아래 ‘404 집중 해결’과 ‘자주 나는 오류’를 먼저 읽고 그대로 따라 하기.
그래도 안 되면 맨 아래 AI에게 묻는 문장을 복사해서 Gemini·ChatGPT에 붙여넣고 해결하기.
스스로 체크리스트로 점검하기.
이걸 다 했는데도 안 되면 → 그때 선생님!

😱 ‘404 — File not found’가 떴어!

99%는 파일 이름이 index.html이 아니라서야. 침착하게 아래 둘 중 하나로 해결하면 돼.

빠른 해결 제일 빠름

주소 끝에 진짜 파일 이름을 붙이기 — 이름을 안 바꿔도 바로 들어가져!

저장소 첫 화면에서 내가 올린 파일의 정확한 이름을 확인. 대소문자까지 똑같이! (예: game.html)
내 링크 끝에 그 이름을 붙여서 접속 → https://(아이디).github.io/(저장소이름)/game.html
열리면 성공! (파일 여러 개면 각각 이름 붙여서 들어가면 돼)

확실한 해결 한 번에 끝

이름을 index.html로 바꿔서 다시 올리기 — 그럼 주소 끝에 안 붙여도 열려.

복붙 방식이었으면: 저장소에서 Add file → Create new file → 이름 index.html → 코드 붙여넣기 → Commit. (이름 틀린 옛 파일은 클릭 → 휴지통🗑️ 아이콘으로 삭제)
업로드 방식이었으면: 컴퓨터에서 파일 이름을 index.html로 고쳐서(이중 확장자 함정 주의 — 4단계 참고) 다시 Upload files.
올린 뒤 1~2분 기다리고 링크 새로고침.

그래도 404면 이것들 확인!

• 대소문자 틀림? (Index.html ≠ index.html)
• 이중 확장자? (index.html.html) → 4단계 함정 다시 보기
• 파일이 폴더 속에 숨음? → 저장소 첫 화면에 .html이 바로 보여야 함
• 너무 빨리 봄? → 1~2분 더 기다리고 강력 새로고침 Ctrl+Shift+R
• 저장소가 Private? → Public으로

😵 자주 나는 오류 모음 (증상 → 원인 → 해결)

🔗

링크 누르면 404 (제일 흔함)

파일 이름이 index.html이 아니라서. 주소 끝에 파일 이름을 붙이거나, 이름을 index.html로 바꿔 다시 올리기 → 위 ‘404 집중 해결’.

✌️

이름이 index.html.html이 됨

다운로드 파일이 이미 .html인데 또 .html을 붙여서. 확장자를 보이게 켜고 점 .html이 하나가 되게 → 4단계 함정.

📄

화면에 코드(글자)만 잔뜩 보임

이름 끝이 .txt가 됐거나(index.html.txt) HTML이 아님. 이름을 .html로, 코드 맨 윗줄이 <!DOCTYPE html>인지 확인 → 2·4단계.

🔒

사이트가 안 열리고 Pages도 못 켬

저장소가 Private이라서. Public이어야 무료로 공개돼. Settings에서 바꾸거나 Public으로 새로 만들기 → 3단계.

🔌

링크(주소) 자체가 안 생김

Pages 스위치를 안 켬. Settings → Pages에서 main/(root) 선택 후 Save → 5단계.

⏱️

방금 켰는데 링크가 없거나 404

너무 빨리 봐서. 빌드에 1~2분 걸려. 기다렸다가 Pages 화면 새로고침 → 6단계.

📁

파일을 올렸는데 첫 화면에 안 보임

폴더째 올려서 파일이 폴더 속에 숨음. index.html이 저장소 첫 화면에 바로 보여야 함 → 4단계.

🔠

주소에 파일명 붙였는데도 404

대소문자가 달라서. Game.html ≠ game.html. 저장소에 보이는 그대로 똑같이 입력.

⚙️

Settings에 ‘Pages’ 메뉴가 안 보임

프로필 설정을 잘못 들어감. 저장소 이름이 위에 보이는 화면의 Settings로 → 5단계.

➕

+만 보이고 저장소 만들기 못 찾음

화면마다 버튼이 달라서. 주소창에 github.com/new 입력하면 바로 만들기 화면 → 3단계.

🔁

고쳤는데 옛날 화면이 계속 보임

브라우저가 옛 버전을 기억(캐시)해서. 강력 새로고침 Ctrl+Shift+R (맥 ⌘+Shift+R).

🧩

코드가 HTML이 아님 (React/파이썬)

맨 윗줄이 <!DOCTYPE html>이 아님. 2단계 마법의 문장으로 한 파일 HTML로 다시 받기.

🤖 그래도 안 되면 — AI한테 직접 물어보기!

위에도 답이 없으면, Gemini·ChatGPT·Claude 아무거나 열고 아래 문장을 복사해서 붙여넣어. 그리고 ___ 부분을 네 상황에 맞게 채우면 돼. AI가 단계별로 알려줄 거야!

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

나는 GitHub Pages로 HTML 파일을 인터넷에 올리려고 해. 그런데 문제가 생겼어.

[문제: ___ ]  (예: 링크를 누르면 404 File not found가 떠)

- 내 아이디(사용자 이름): ___
- 저장소(repository) 이름: ___
- 올린 파일 이름: ___  (예: index.html / game.html)
- 내가 접속한 주소: https://___.github.io/___/
- 코드 맨 윗줄: ___  (예: <!DOCTYPE html>)

초등학생도 이해할 수 있게, 무엇이 문제이고 어떻게 고치는지 순서대로 알려줘.

💡 잘 물어보는 꿀팁

“안 돼요”만 쓰면 AI도 몰라. 화면에 뜬 에러 글자(404 등)와 내 주소를 그대로 알려줄수록 정확한 답이 나와!

🔎 스스로 점검 (눌러서 체크!)

✓파일 이름이 index.html이다 (또는 404면 주소 끝에 파일명을 붙였다 — 예: /game.html)
✓진짜 이름이 index.html.html이 아니다 (점 .html이 하나)
✓코드 맨 윗줄이 <!DOCTYPE html> 또는 <html>
✓저장소가 Public
✓index.html이 저장소 첫 화면에 바로 보인다 (폴더 안 ❌)
✓Pages에서 main / (root)로 Save했다
✓Save 후 1~2분 기다렸다가 새로고침해서 링크를 확인했다
✓주소의 대소문자를 저장소와 똑같이 입력했다

위가 전부 ✅인데도 안 되면 → ‘AI한테 직접 물어보기’ 문장을 복사해서 Gemini·ChatGPT에 붙여넣고 해결하자. 그래도 안 풀리면 그때 선생님 🙆

🌟 끝까지 해낸 너, 멋지다!

내가 만든 작품을 전 세계가 볼 수 있어. 링크를 자랑해보자.

끝