📌 이 글 요약
- Claude가 만들어준 HTML 파일 → CodePen에 붙여넣기 → URL 공유 = 30초 배포 끝
- URL 뒤에
/full붙이면 에디터 없이 교구만 보임 (핵심!) - 무료, 회원가입 1분, 별도 설치 없음
- 빠른 테스트는 CodePen / 정식 배포는 GitHub — 용도가 다릅니다
Claude가 만들어준 HTML, 학생한테 어떻게 보내요?
"선생님, Claude한테 학습 교구 만들어달라고 했더니 HTML 파일을 줬는데... 이걸 어떻게 학생들한테 보내요?"
연수 때 가장 많이 받는 질문입니다. Claude가 만들어주는 인터랙티브 교구, 퀴즈, 시뮬레이션 — 결과물은 훌륭한데 공유가 문제예요. 카톡으로 HTML 파일 보내봤자 열리지도 않고, 이메일 첨부하면 보안 경고 뜨고.
CodePen 쓰면 30초면 됩니다. 진짜로요. 복사, 붙여넣기, URL 복사. 끝.
CodePen이 뭔가요?
CodePen은 웹 브라우저에서 바로 코드를 작성하고 실행할 수 있는 온라인 에디터입니다. 개발자들이 코드 조각을 공유할 때 많이 쓰는 서비스인데, 교사 입장에서 핵심은 이겁니다:
- 무료 — 회원가입도 무료, 구글 계정으로 1분이면 끝
- 설치 없음 — 브라우저만 있으면 됨 (크롬, 엣지 다 됨)
- URL 하나로 공유 — 만든 결과물에 고유 주소가 생김
- 즉시 실행 — 코드 붙여넣는 순간 바로 결과가 보임
쉽게 말하면 "웹에서 돌아가는 메모장 + 미리보기 + 공유 링크" 세트라고 생각하면 됩니다.
Step 1 — codepen.io 가입하기
- codepen.io 접속
- 우측 상단 "Sign Up" 클릭
- "Sign Up with Google" 선택 → 구글 계정으로 로그인
- 끝. 프로필 설정은 나중에 해도 됩니다.
이메일 가입도 되지만, 구글 계정 연동이 가장 빠릅니다. 학교 구글 계정(@xxx.es.kr)으로도 됩니다.
Step 2 — New Pen 만들기
- 로그인 후 좌측 메뉴에서 "Pen" 클릭 (또는 우측 상단 "+ New" → "Pen")
- 화면이 3칸으로 나뉘어 나타남: HTML | CSS | JS
- 아래쪽에 미리보기 창이 보임 — 여기서 결과가 바로 표시됩니다
CSS, JS 탭은 신경 안 써도 됩니다. Claude가 만든 HTML에는 보통 스타일과 스크립트가 다 포함되어 있으니까요.
Step 3 — HTML 탭에 코드 붙여넣기
- Claude가 만들어준 HTML 코드를 전체 선택(Ctrl+A) → 복사(Ctrl+C)
- CodePen의 HTML 탭을 클릭
- 붙여넣기(Ctrl+V)
- 아래쪽 미리보기에서 결과가 즉시 나타남!
💡 팁: Claude 대화창에서 코드 블록 우측 상단에 "Copy" 버튼이 있어요. 그걸 누르면 코드 전체가 한 번에 복사됩니다. 마우스로 드래그해서 선택할 필요 없어요.
<!DOCTYPE html>부터 </html>까지 전부 넣으면 됩니다. CodePen이 알아서 파싱해줘요.
Step 4 — URL 복사해서 공유하기
- 코드를 붙여넣으면 자동 저장됨 (주소창에 URL 생성)
- 브라우저 주소창의 URL을 복사
- URL 끝에
/full을 붙여서 학생에게 공유!
💡 이게 핵심입니다
URL 뒤에 /full 을 붙이면
에디터 화면 없이, 교구만 전체화면으로 보입니다.
일반 URL
codepen.io/teacher/pen/AbCdEf
코드 에디터가 함께 보임 ❌
/full URL
codepen.io/teacher/full/AbCdEf
교구만 깔끔하게 보임 ✅
학생들이 코드를 볼 필요는 없잖아요. /full 주소를 공유하세요.
이 URL을 카톡, 클래스룸, 패들렛 어디든 붙여넣으면 됩니다. 학생이 클릭하면 바로 교구가 실행돼요. 앱 설치도 필요 없고, 로그인도 필요 없습니다.
GitHub Pages vs CodePen — 뭘 써야 하나요?
"GitHub Pages도 HTML 올릴 수 있다던데, 뭐가 다른가요?" 자주 받는 질문이에요. 간단히 정리하면:
| 비교 항목 | CodePen | GitHub Pages |
|---|---|---|
| 배포 속도 | ⚡ 30초 | 2~5분 |
| 난이도 | 매우 쉬움 | 보통 (레포 생성 필요) |
| 커스텀 도메인 | 불가 (무료) | 가능 (무료) |
| 파일 업로드 | 불가 (코드 직접 입력) | 가능 (이미지, CSS 등) |
| 여러 파일 관리 | 1 Pen = 1 페이지 | 폴더·파일 구조 가능 |
| 비공개 설정 | 유료만 (Pro 플랜) | Private 레포 가능 |
| 추천 용도 | 빠른 테스트·임시 공유 | 정식 배포·장기 운영 |
제 사용 패턴: Claude가 막 만들어준 교구를 수업 전에 빠르게 확인하고 싶을 때 → CodePen. 검증 끝나고 학생들한테 정식으로 배포할 때 → GitHub Pages. 둘 다 씁니다.
주의사항 — 이것만 알아두세요
⚠️ 무료 플랜 제한
- 모든 Pen이 Public — 무료 계정에서는 비공개 설정이 불가합니다. 코드가 공개되어도 괜찮은 교구만 올리세요. (학생 개인정보가 들어가는 건 절대 안 됩니다!)
- 파일 업로드 불가 — HTML 파일을 드래그해서 올리는 게 아니라, 코드를 직접 복사·붙여넣기해야 합니다.
- 외부 이미지 참조 — 이미지를 사용한 교구라면, 이미지가 외부 URL로 참조되어 있어야 합니다. 로컬 파일 경로(
C:\Users\...)는 당연히 안 됩니다.
💡 Tip: Claude한테 교구를 만들어달라고 할 때 "이미지는 placeholder나 SVG로 대체해줘"라고 요청하면 외부 이미지 의존 없이 바로 CodePen에 올릴 수 있어요.
전체 흐름 정리
정말 이게 끝입니다. 복잡한 서버 세팅도 없고, 터미널 명령어도 없고, Git 뭐시기도 없어요. 복사 → 붙여넣기 → 공유. 이 세 단어가 전부예요.
관련 글
다음 글 예고
GitHub Pages로 교구를 정식 배포하는 방법도 곧 정리할게요.
CodePen으로 테스트하고, GitHub으로 정착시키는 투 스텝 전략!
대화 참여하기