AI 에이전트 시대

PPT 대신
HTML 교안을 활용하는 이유

강사용 AI 기반 웹 교안 워크숍

ChatGPT · Gemini · Claude — 강의 자료 제작과 배포의 새로운 방식

반응형 교안
인터랙티브 실습
링크형 자료 허브

Instructor

강사 소개

AI를 활용해 교육 콘텐츠를 더 빠르게 설계하고, 강의 현장에서 바로 쓸 수 있는 디지털 교안을 만드는 방법을 안내합니다.

오늘의 역할

코드를 가르치는 시간이 아니라, AI에게 말로 교안을 설계시키는 방법을 함께 실습합니다.

강의 관점

강사 입장에서 배포, 수정, 실습 안내, 사후 자료 제공까지 이어지는 전체 흐름을 봅니다.

Roadmap

오늘의 목차

1왜 PPT 대신 HTML 교안인가?
반응형, 배포, 인터랙션, 검색성의 관점
2HTML 교안의 솔직한 한계와 보완책
코드 두려움, 인쇄, 서버 업로드 문제를 다루는 법
3강의 현장 활용 시나리오
워크북, 리소스 허브, 디지털 핸드아웃
4AI로 HTML 교안 만들기 실습
만능 프롬프트와 인터랙티브 기능 추가

Part 1

왜 PPT 대신 HTML 교안인가?

핵심은 “예쁜 페이지”가 아니라 수강생이 바로 쓰고, 강사가 바로 고칠 수 있는 자료입니다.

PPT 중심 교안

파일이 무겁고 재배포가 번거롭다.
모바일 화면에서 확대와 이동이 필요하다.
링크, 복사, 토글 같은 실습 기능이 제한적이다.

HTML 중심 교안

링크 하나로 열고 업데이트할 수 있다.
PC, 태블릿, 모바일에 맞춰 자동 정렬된다.
버튼, 검색, 복사, 토글을 강의 흐름에 넣을 수 있다.

Pros

HTML 교안의 주요 장점

멀티 디바이스 가독성

수강생이 노트북으로 실습하면서 스마트폰으로 교안을 볼 때도 화면 크기에 맞게 레이아웃이 조절됩니다.

업데이트와 배포

무거운 PPT 파일을 다시 보내지 않고, HTML 파일이나 웹 링크만 공유해 수정 사항을 반영할 수 있습니다.

인터랙티브 요소

프롬프트 복사 버튼, 퀴즈 토글, 바로가기 버튼을 넣어 수강생의 행동을 자연스럽게 유도합니다.

무한 스크롤과 검색

페이지 수 제한 없이 자료를 담고, 수강생은 Ctrl + F로 필요한 키워드를 바로 찾을 수 있습니다.

친AI 텍스트 환경

프롬프트, 코드, 결과물을 서식 깨짐 없이 정돈해 보여주기 좋습니다.

강의 후 허브

영상, 드라이브 자료, 참고 링크를 한곳에 모아 사후 학습 페이지로 확장할 수 있습니다.

Use Cases

강의 현장에서 이렇게 씁니다

실습형 워크북

왼쪽에는 이론과 프롬프트, 오른쪽에는 실습 가이드를 배치해 따라 하기 흐름을 만듭니다.

리소스 허브

강의가 끝난 뒤에도 참고할 영상, 링크, 추천 도서, 심화 프롬프트를 한 페이지에 정리합니다.

디지털 핸드아웃

이동 중에도 모바일로 읽을 수 있는 요약본을 제공해 복습 접근성을 높입니다.

AI 실습 안내서

수강생이 버튼으로 프롬프트를 복사하고, 바로 AI 도구에 붙여넣어 실습하게 만듭니다.

Cons & Strategy

솔직한 한계와 보완책

코드에 대한 막연한 두려움

“코드 한 줄 몰라도 괜찮습니다. 우리는 ChatGPT에게 말로 디자인을 시킬 것입니다.”라고 안내합니다.

오프라인 인쇄의 어려움

HTML은 디지털 전용 교안임을 명시하고, 필요할 때는 PDF 저장용 스타일을 별도로 제공합니다.

서버 업로드와 배포 문제

구글 드라이브 공유, Netlify, GitHub Pages 같은 무료 배포 방법을 실습에 포함하면 해결됩니다.

강사용 설명 팁 열기

HTML 교안은 PPT를 완전히 대체하기보다, 실습형 강의와 사후 자료 제공에서 특히 강합니다. “상황에 맞게 도구를 고르는 능력”으로 설명하면 거부감이 줄어듭니다.

Prompt 1

반응형 HTML 교안 생성 프롬프트

아래 프롬프트는 강사님들이 ChatGPT에 바로 붙여넣어 실습할 수 있는 기본형입니다.

기본 레이아웃 생성

너는 웹 프론트엔드 개발자이자 교육 콘텐츠 디자이너야.
강사들이 사용할 수 있는 깔끔하고 모던한 HTML 강의 교안 템플릿을 만들어줘.

[디자인 요구사항]
1. 테크 블루(#0070C0)를 포인트 컬러로 사용하고, 배경은 화이트/연한 그레이 톤으로 해줘.
2. PC, 태블릿, 모바일에서 모두 깨지지 않는 반응형 웹 디자인으로 구성해줘.
3. 충분한 여백과 깔끔한 고딕 계열 웹폰트를 적용해줘.

[구성 요소]
- 상단: 강의 제목과 강사 소개
- 본문: 인포 박스, 학습 목차 리스트, 텍스트와 이미지 본문 섹션

HTML과 CSS를 하나의 파일로 합쳐서 완벽하게 동작하는 코드로 출력해줘.

Prompt 2

강사용 인터랙티브 기능 추가

프롬프트 복사 버튼

긴 프롬프트를 수강생이 실수 없이 가져가도록 버튼 한 번으로 클립보드에 복사합니다.

아코디언 토글

퀴즈 정답, 심화 팁, 보충 설명을 접어두었다가 필요한 순간 열어 보여줍니다.

기능 추가 요청

위에서 만든 HTML 교안 템플릿에 강사들이 많이 쓰는 두 가지 기능을 추가해줘.

1. 프롬프트 복사 버튼
- 회색 코드 상자 우측 상단에 [복사하기] 버튼을 만들어줘.
- 클릭하면 텍스트가 클립보드에 복사되고 버튼 문구가 잠시 [복사 완료!]로 바뀌게 해줘.

2. 아코디언 토글
- 퀴즈 풀이 또는 숨겨진 팁을 접었다 펼 수 있는 섹션으로 만들어줘.

기존 디자인에 자연스럽게 녹여 전체 코드를 다시 작성해줘.

Resources

동영상 자료

강의 후에도 수강생이 바로 복습할 수 있도록 핵심 영상을 교안 안에서 미리 볼 수 있게 제공합니다.

유튜브 바로가기

강사님에게 필요한 메시지

PPT는 여전히 발표에 강합니다. HTML 교안은 실습, 공유, 검색, 사후 학습에 강합니다.

오늘의 결론

AI에게 말로 요청하면, 강사도 자신만의 웹페이지형 교안을 충분히 만들 수 있습니다.

로컬 file 환경에서는 브라우저 보안 정책이나 YouTube 설정 때문에 미리보기가 재생되지 않을 수 있습니다. 이 경우 왼쪽의 유튜브 바로가기 버튼을 이용하세요.

Closing

좋은 교안은
다음 행동을 쉽게 만듭니다

수강생이 읽고, 누르고, 복사하고, 다시 찾아볼 수 있다면 교안은 단순한 자료를 넘어 강의 경험의 일부가 됩니다.

Tip: 키보드의 좌우 방향키로도 페이지를 넘길 수 있습니다.

PPT 대신HTML 교안을 활용하는 이유