풀어쓰는 사회학 AI

홈
가이드

만든 교구 학생에게 공유하는 법 | Firebase·CodePen·QR코드 배포 완전 가이드

📌 이 글 요약

  • HTML 교구를 학생에게 보내는 3가지 배포 방법 (CodePen / Firebase / GitHub Pages)
  • 상황별 추천 — 테스트는 CodePen, 정식 수업은 Firebase, 아카이브는 GitHub Pages
  • QR코드 + 단축URL로 수업 시작 10초 만에 전원 접속시키는 팁

"HTML 파일이 있는데 학생한테 어떻게 주죠?"

Claude한테 교구 만들어달라고 하면 HTML 파일이 뚝딱 나옵니다. 내 컴퓨터에서 열면 잘 돌아가요. 근데 여기서 멈추는 분이 많습니다.

"이 파일을 어떻게 30명 학생한테 보내죠?"

카톡으로 보내자니 파일이고, 메일로 보내자니 귀찮고, USB로 돌리자니 2024년이 아니고... 답은 웹에 올리고 링크 하나 공유하는 겁니다. 어렵지 않아요. 방법별로 정리해드릴게요.

방법 1: CodePen (30초, 테스트용)

가장 빠릅니다. 계정 만들고 HTML 붙여넣으면 끝.

단계별 따라하기

  1. codepen.io 접속 → Sign Up (구글 계정으로 가능)
  2. 좌측 상단 "Pen" 클릭 → 새 Pen 생성
  3. HTML 탭에 교구 코드 전체 붙여넣기 (Ctrl+V)
  4. 자동으로 하단 미리보기에 교구가 나타남
  5. 우측 상단 "Save" → 생성된 URL 복사해서 학생에게 공유

💡 팁

Pen URL 뒤에 /full을 붙이면 코드 없이 결과물만 전체 화면으로 보입니다.
예: codepen.io/yourname/pen/abcde/full

장단점

장점단점
30초면 배포 완료무료 계정은 Pen이 공개됨
별도 설치 없음URL이 길고 못생김
실시간 수정 가능대용량 파일(이미지 多) 시 느림

방법 2: Firebase Hosting (5분, 정식 배포용)

구글이 운영하는 무료 호스팅 서비스입니다. https://내프로젝트.web.app 형태의 깔끔한 URL이 나오고, 속도도 빠릅니다. "진짜 웹사이트"처럼 배포하고 싶을 때 추천.

단계별 따라하기

  1. Firebase Console 접속 (구글 계정으로 로그인)
  2. "프로젝트 추가" 클릭 → 프로젝트 이름 입력 (예: my-class-tools)
  3. Analytics 설정은 "사용 안함" 선택 → 프로젝트 생성 완료
  4. 좌측 메뉴에서 "Hosting" 클릭 → "시작하기"
  5. 방법 A (CLI 없이 간단하게): Firebase Console에서 직접 업로드 불가 → 아래 CLI 사용
  6. 방법 B (CLI 사용, 추천):

// 터미널(명령프롬프트)에서 실행

npm install -g firebase-tools

firebase login

firebase init hosting

// public 폴더에 HTML 파일 넣기

firebase deploy

⚠️ CLI가 어려우면?

더 쉬운 대안: Firebase Console → Hosting → "앱 추가" 후, 콘솔에서 직접 배포가 가능한 프로젝트도 있습니다. 또는 아래 GitHub Pages 방법이 CLI 없이 가능해서 더 편할 수 있어요.

배포 완료되면 이런 URL을 받습니다:

https://my-class-tools.web.app

장단점

장점단점
깔끔한 .web.app URLCLI 설치 필요 (Node.js)
구글 서버 = 빠른 속도처음 세팅 시 5분 정도 소요
HTTPS 자동 (보안 인증서)무료 용량 한도 있음 (1GB, 충분함)
여러 교구를 하나의 프로젝트에 모을 수 있음수정 시 재배포 필요

방법 3: GitHub Pages (무료, 교구 여러 개 모을 때)

교구를 10개, 20개 계속 만들 거라면 GitHub Pages가 최고입니다. 폴더 구조로 정리되고, URL도 깔끔하고, 영구 무료입니다.

단계별 따라하기

  1. github.com 접속 → 회원가입 (무료)
  2. 우측 상단 "+" → "New repository"
  3. Repository name 입력 (예: class-tools) → Public 선택 → Create
  4. "Add file" → "Upload files" → HTML 파일 드래그&드롭
  5. "Commit changes" 클릭
  6. 상단 "Settings" 탭 → 좌측 메뉴 "Pages"
  7. Source: "Deploy from a branch" → Branch: "main" → Save
  8. 1~2분 기다리면 URL 생성 완료!

결과 URL:

https://유저이름.github.io/class-tools/교구파일.html

💡 폴더 구조 예시

class-tools/
├── index.html (목록 페이지)
├── ox-quiz.html
├── cbt-4choice.html
├── card-matching.html
└── timeline-sort.html

장단점

장점단점
완전 무료, 용량 제한 넉넉처음 GitHub이 낯설 수 있음
교구별 URL 자동 생성Public 저장소 = 코드 공개됨
버전 관리 (수정 이력 남음)반영까지 1~2분 걸림
여러 파일 한 곳에서 관리CLI 없으면 파일 수정이 약간 번거로움

공유 방법: QR코드 + 단축URL

링크가 생겼으면 이제 학생한테 공유할 차례입니다. 가장 빠른 방법은 QR코드를 TV/프로젝터에 띄우는 것입니다. 수업 시작 10초면 전원 접속 완료.

QR코드 무료 생성

사이트특징
qr.io가장 간단, 회원가입 불필요
QRCode Monkey색상/로고 커스텀 가능
ZXing구글 오픈소스, 심플

URL 단축

서비스특징
bit.ly클릭 통계 제공, 무료 계정 가능
han.gl한국어 단축 URL, 가입 불필요
url.kr국내 서비스, 빠름

🎯 실전 팁: 수업 루틴

  1. 교구 배포 후 QR코드 생성 (10초)
  2. 수업 시작 시 TV에 QR 띄우기
  3. 학생들 스마트폰 카메라로 스캔 → 바로 접속
  4. 접속 확인 후 활동 시작 — 끝!

상황별 추천 정리

상황추천 방법이유
빠르게 테스트만CodePen30초면 끝, 즉시 확인
정식 수업 배포Firebase Hosting깔끔한 URL, 빠른 속도
교구 아카이브 (10개+)GitHub Pages폴더 정리, 영구 무료
동료 교사에게 코드 공유CodePen코드 바로 보이고 수정 가능
학교 행사/공개수업Firebase전문적으로 보임, 안정적

🔗 관련 교구 글

HTML 교구를 학생에게 공유하는 배포 방법 가이드. CodePen, Firebase Hosting, GitHub Pages 단계별 설명. QR코드 단축URL 수업 활용 팁.
현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.