교육 현장에서 AI HTML 활용하기
— 강사·학생 워크플로우
강의 자료 하나 만드는 데 PowerPoint를 열고, 슬라이드를 꾸미고, PDF로 내보내고, LMS에 올리는 데 한 시간이 걸린다.
학생은 과제를 제출하려면 GitHub 계정을 만들고, 저장소를 파고, 파일을 올려야 한다.
AI가 HTML을 즉석에서 만들어주는 지금, 배포와 공유가 병목이 된다.
html.to는 그 병목만 제거한다. 강사는 수업 직전에 자료를 완성하고,
학생은 로그인 없이 과제 링크를 제출한다.
필요한 것
- AI 도구 하나 — ChatGPT, Claude, Gemini, Cursor 중 아무거나
htmlto.puzl.co.kr— 계정 불필요, 무료, 브라우저만 있으면 됨- 공유할 HTML 파일 또는 코드 블록
단계별 가이드
-
AI에 구체적인 지시를 내린다.
막연한 요청 대신 출력 형태를 명시한다. 예:"퀴즈 10문제를 HTML 단일 파일로 만들어줘. 정답 선택 시 초록색으로 표시되고, 마지막에 점수를 보여줘."Claude나 ChatGPT는 즉시 완성된 HTML을 출력한다. -
HTML 코드 전체를 복사한다.
AI 응답창의 코드 블록 우측Copy버튼을 클릭한다. 파일로 저장할 필요 없다. -
htmlto.puzl.co.kr에 접속한다.
별도 로그인 없이 메인 화면이 바로 편집기다. -
코드를 붙여넣거나 파일을 드롭한다.
편집기에Ctrl+V로 붙여넣거나,.html파일을 드래그 앤 드롭한다. 우측 패널에 렌더링된 결과가 실시간으로 보인다. -
결과를 확인한다.
의도한 대로 보이는지 확인한다. 문제가 있으면 AI에 재요청 후 코드를 교체한다. -
필요하면 비밀번호를 설정한다.
수강생 전용 자료라면LOCK버튼으로 비밀번호를 건다. AES-256 암호화가 적용된다. 비밀번호는 수업 채팅방에만 공유하면 된다. -
SHARE를 클릭한다.
링크가 클립보드에 자동 복사된다. 형식은htmlto.puzl.co.kr/v/xxxxxxxx. -
링크를 전달한다.
LMS 공지, 카카오톡, 슬랙, 이메일 — 어디든 붙여넣으면 된다. 받는 사람은 클릭 한 번으로 브라우저에서 바로 실행된 결과를 본다.
Pro Tips
-
프롬프트에 "단일 파일"을 명시하라.
외부 CDN이나 이미지 참조가 없는 self-contained HTML을 요청해야 html.to에서 완전히 렌더링된다.
"외부 파일 없이 단일 HTML 파일로만 작성해줘"를 프롬프트 끝에 추가하는 것만으로 충분하다. -
링크를 LMS 과제 제출함에 넣어라.
학생이 GitHub 저장소 URL 대신
html.to링크를 제출하면, 강사는 별도 환경 없이 브라우저에서 바로 채점할 수 있다. - 수정이 필요하면 새 링크를 발급하라. 기존 링크를 수정하는 것보다 AI에 재요청해 새 코드를 붙여넣고 새 링크를 발급하는 게 빠르다. 버전 관리 개념으로 링크를 번호로 관리해도 된다.
-
인터랙티브 요소를 적극 활용하라.
정적 PDF 대신 클릭 가능한 퀴즈, 드래그 앤 드롭 정렬 문제, 타이머 내장 시험지를
AI가 HTML로 만들어준다.
html.to링크 하나로 배포하면 학생은 앱 설치 없이 실행한다. - 비밀번호는 수업 직전에 공유하라. 자료를 미리 올려두고 비밀번호는 수업 시작 시점에 공개하면, 별도 타이머나 잠금 없이 공개 시점을 조절할 수 있다.
수업 현장 시나리오
시나리오 1 — 강사: 수업 직전 퀴즈 자료 배포
수업 5분 전, Claude에 "오늘 다룰 함수 개념 O/X 퀴즈 8문제를 단일 HTML로 만들어줘"를 입력한다.
출력된 코드를 html.to에 붙여넣고 링크를 생성한 뒤, 수업 채팅방에 올린다.
학생들은 스마트폰으로 링크를 열어 즉시 퀴즈를 푼다. PDF 변환도, LMS 업로드도 없다.
시나리오 2 — 학생: HTML/CSS 과제 제출
HTML 기초 수업에서 강사가 "개인 포트폴리오 페이지를 만들어 제출하라"고 한다.
학생은 ChatGPT로 초안을 만들고, 직접 코드를 수정하거나 추가 프롬프트로 개선한다.
완성된 파일을 html.to에 드롭해 링크를 생성한 뒤 과제 제출함에 URL을 붙여넣는다.
강사는 브라우저에서 링크만 열면 렌더링된 결과를 본다.
시나리오 3 — 코딩 부트캠프: 팀 프로젝트 중간 점검
팀 단위 프로젝트에서 각 팀이 중간 결과물을 발표한다.
GitHub Pages 설정에 시간을 쓰는 대신, 팀원 한 명이 완성된 HTML을
html.to에 올려 링크를 Slack에 공유한다.
강사와 다른 팀은 링크를 클릭해 즉시 결과를 확인하고 피드백을 남긴다.
FAQ
Q. 학생이 html.to 계정 없이 과제를 제출할 수 있나요?
가능하다. html.to는 계정 없이도 HTML을 업로드하고 공유 링크를 생성할 수 있다.
학생은 로그인 없이 링크를 만들어 강사에게 제출하면 된다.
Q. 강사가 학생에게만 수업 자료를 공개하려면 어떻게 하나요?
html.to의 비밀번호 보호 기능(AES-256)을 사용하면 된다.
파일 업로드 후 비밀번호를 설정하면, 해당 비밀번호를 아는 수강생만 링크를 열 수 있다.
Q. AI가 만든 HTML 수업 자료는 얼마나 오래 보관되나요?
html.to는 영구 저장을 기본으로 제공한다.
한 학기 내내, 또는 이후에도 같은 링크로 접근 가능하다.
수업 자료 공유에서 병목은 도구가 아니라 배포다.
AI가 HTML을 만들고, html.to가 링크를 만든다.
나머지는 가르치는 일에 쓰면 된다.
지금 바로 써보기 →