GitHub Pages 가입부터 교구 첫 배포까지 | 교사용 10분 가이드 — HTML 교구 무료 호스팅
📌 이 글 요약
- GitHub Pages는 무료 웹 호스팅 서비스입니다. 내가 만든 HTML 교구를 인터넷에 올릴 수 있어요.
- 가입 → 저장소 만들기 → 파일 올리기 → Pages 켜기, 딱 4단계면 끝.
- 코딩 지식 없어도 됩니다. 드래그앤드롭으로 파일을 올리면 자동으로 웹사이트가 생깁니다.
- 소요 시간: 약 10분
GitHub이 뭔지 몰라도 괜찮아요. 저도 3달 전까지 몰랐습니다.
"HTML 교구를 만들었는데, 학생들한테 어떻게 보여주지?" 이 고민에서 출발했어요. USB에 담아 컴퓨터실에서만 쓰자니 아깝고, 학교 서버에 올리자니 절차가 복잡하고. 그러다 동료 선생님한테 GitHub Pages라는 걸 듣고 10분 만에 첫 교구를 인터넷에 올렸습니다. 그 방법을 그대로 공유합니다.
왜 GitHub Pages인가?
| 장점 | 설명 |
|---|---|
| 완전 무료 | 신용카드 등록 없이, 영원히 무료입니다. |
| 영구 보관 | 파일을 지우지 않는 한 사이트가 사라지지 않아요. 학기가 바뀌어도 그대로. |
| 빠른 속도 | 전 세계 CDN으로 배포되어 로딩이 빠릅니다. |
| HTTPS 자동 | 보안 인증서가 자동 적용되어, 학교 네트워크에서도 차단 없이 접속돼요. |
| 커스텀 도메인 | 원하면 나만의 도메인(예: tools.쌤이름.com)도 연결 가능합니다. |
한 마디로, "내가 만든 HTML 파일을 인터넷 주소로 바꿔주는 무료 서비스"라고 생각하면 됩니다.
Step 1. GitHub 가입하기
✅ 따라하기
- github.com에 접속합니다.
- 오른쪽 위 "Sign up" 버튼을 클릭합니다.
- 이메일 주소를 입력합니다. (학교 이메일도 OK, Gmail도 OK)
- 비밀번호를 설정합니다. (영문+숫자 15자 이상, 또는 영문+숫자+특수문자 8자 이상)
- 사용자 이름(Username)을 정합니다. 이 이름이 나중에 웹 주소에 들어가요!
예: 사용자 이름이math-teacher-kim이면 → 주소가math-teacher-kim.github.io가 됩니다. - 간단한 퍼즐 인증을 통과합니다. (로봇 방지용)
- 입력한 이메일로 인증 코드가 도착합니다. 6자리 숫자를 입력하면 가입 완료!
💡 Tip: 사용자 이름은 나중에 바꿀 수 있지만, 웹 주소도 같이 바뀌므로 처음부터 깔끔하게 정하는 게 좋아요. 짧고 기억하기 쉬운 영문이 좋습니다.
Step 2. 저장소(Repository) 만들기
"저장소"는 파일을 담는 폴더라고 생각하면 됩니다. 교구 파일을 올릴 공간을 먼저 만들어야 해요.
✅ 따라하기
- 로그인 후, 왼쪽 위 "+" 버튼 또는 오른쪽 위의 "+" → "New repository"를 클릭합니다.
- Repository name에 이름을 입력합니다.
추천 이름:my-tools(영문 소문자, 하이픈 사용) - Description은 비워도 됩니다. (선택사항)
- Public을 선택합니다. (Public이어야 무료로 웹사이트가 만들어져요)
- "Add a README file"에 체크합니다. (저장소가 빈 상태면 이후 단계가 불편해요)
- 초록색 "Create repository" 버튼을 클릭합니다.
축하합니다! 파일을 올릴 공간이 생겼습니다. 화면에 README.md 파일 하나가 보이면 성공이에요.
Step 3. HTML 파일 올리기
이제 내가 만든 HTML 교구 파일을 올릴 차례입니다. 복잡한 프로그램 설치 없이, 웹 브라우저에서 드래그앤드롭으로 올릴 수 있어요.
✅ 따라하기
- 방금 만든 저장소 페이지에서 "Add file" → "Upload files"를 클릭합니다.
- 내 컴퓨터에서 HTML 파일을 드래그앤드롭합니다. (또는 "choose your files" 클릭)
- 여러 파일을 한꺼번에 올려도 됩니다. CSS, 이미지 파일도 함께 올리세요.
- 아래쪽 "Commit changes" 영역에서:
- 첫 번째 칸:
교구 파일 업로드같은 메모를 적습니다. - 두 번째 칸: 비워도 됩니다.
- 첫 번째 칸:
- 초록색 "Commit changes" 버튼을 클릭합니다.
저장소 메인 화면에 올린 파일 이름이 보이면 성공입니다.
⚠️ 파일 이름 주의사항
파일 이름에 한글이나 공백이 들어가면 주소가 복잡해집니다.
quiz-game.html ← 좋음
퀴즈 게임.html ← 작동은 하지만 주소가 깨져 보임
Step 4. GitHub Pages 활성화하기
파일을 올린 것만으로는 웹사이트가 되지 않아요. Pages 기능을 켜야 합니다. 스위치를 올리는 것과 같아요.
✅ 따라하기
- 저장소 페이지 상단 메뉴에서 "Settings" (톱니바퀴 모양)을 클릭합니다.
- 왼쪽 사이드바에서 "Pages"를 클릭합니다.
- "Source" 항목에서 "Deploy from a branch"를 선택합니다.
- "Branch" 드롭다운에서 "main"을 선택합니다.
- 오른쪽 폴더 드롭다운은 "/ (root)" 그대로 둡니다.
- "Save" 버튼을 클릭합니다.
Save를 누르면 상단에 "GitHub Pages source saved."라는 메시지가 나타납니다. 이제 1~2분만 기다리면 웹사이트가 만들어집니다!
Step 5. 접속 확인하기
웹사이트 주소는 이런 규칙으로 만들어집니다:
예시:
- 사용자 이름:
math-teacher-kim - 저장소 이름:
my-tools - 파일 이름:
quiz-game.html
→ 접속 주소: https://math-teacher-kim.github.io/my-tools/quiz-game.html
✅ 따라하기
- Settings → Pages 페이지를 새로고침합니다.
- 상단에 "Your site is live at ..."이라는 초록색 메시지가 보이면 성공!
- 그 링크를 클릭해서 접속해 봅니다.
- 아직 안 보이면 1~2분 더 기다린 후 다시 새로고침하세요.
내 교구가 인터넷 브라우저에서 잘 열리면, 이제 전 세계 어디서든 접속할 수 있는 상태입니다!
학생에게 공유하기
웹사이트 주소가 생겼으니, 학생들에게 공유하는 건 간단합니다.
🔗
URL 직접 공유
주소를 복사해서 카카오톡, 밴드, 학교 공지에 붙여넣기
🏫
구글 클래스룸
과제 또는 자료에 링크로 추가하면 학생이 클릭 한 번으로 접속
💡 Tip: URL이 길어서 불편하면 han.gl(네이버 단축 URL)로 줄일 수 있어요. 예: han.gl/abc123
💡 알아두면 좋은 팁
파일을 수정하면 자동으로 반영됩니다
교구에 오타를 발견했나요? GitHub에서 파일을 수정(또는 다시 업로드)하고 Commit하면, 1~2분 후 자동으로 웹사이트에 반영됩니다. 별도 작업이 필요 없어요.
- 파일 수정 방법: 저장소에서 파일 클릭 → 연필 아이콘(Edit) 클릭 → 수정 → Commit changes
- 파일 교체 방법: 같은 이름의 파일을 다시 Upload하면 덮어씌워집니다.
- 파일 삭제 방법: 파일 클릭 → 오른쪽 위 "..." → Delete file → Commit changes
- 용량 제한: 저장소당 1GB, 사이트당 1GB. 일반 HTML 교구라면 걱정할 필요 없어요.
- 여러 교구 올리기: 하나의 저장소에 HTML 파일을 여러 개 올리면 각각 다른 주소로 접속 가능합니다.
🎯 전체 흐름 정리
| Step 1 | GitHub 가입 (이메일 인증) |
| Step 2 | 저장소(Repository) 만들기 |
| Step 3 | HTML 파일 업로드 |
| Step 4 | Settings → Pages 활성화 |
| Step 5 | 접속 확인 & 학생에게 공유 |
처음이 어렵지, 한 번 해보면 다음부터는 파일 올리고 Commit 누르는 것만 반복하면 됩니다. "내가 만든 교구에 인터넷 주소가 생겼다"는 게 이렇게 뿌듯한 일인 줄 몰랐어요.
혹시 막히는 부분이 있으면 댓글로 알려주세요. 같이 해결해 봐요!
대화 참여하기