AI와 HTML 인터렉티브 교안 만들기 (자동화 구축과정 진행중)

소개

지난 글에서 AI와의 인터뷰를 통해 제 업무를 세분화하고, 'AI가 자동화할 영역'과 '내가 결정할 영역'의 경계를 명확히 긋는 과정을 나누었습니다. 업무 정의가 끝났으니, 이제 가장 반복적이고 시간이 많이 소요되는 작업인 ‘강의 교안 제작’을 자동화 구축과정을 공유해보려 합니다.

진행 방법

Antigravity 환경에서 Claude와 Gemini 모델을 교차 활용하여 작업을 진행

1. 워크플로우 개선

강의 요청 정보(대상, 인원, 시간, 주제 등)를 자동 분석하고 산출물 생성까지 이어지는 전체 프로세스를 개선하기 위해, 맞춤형 오케스트레이터(lecture-prep-orchestrator)를 설계했습니다

한국어 화면의 스크린샷

2. PPT 대신 HTML 교안 생성 스킬 적용

단순히 텍스트만 띄우는 것이 아니라 실제 강의 현장에서 유용한 다크 모드, 실시간 타이머 등 여러가지 기능이 포함된 인터랙티브 슬라이드를 AI가 직접 코딩하여 파일을 생성하도록 html-lecture-generator 스킬을 새롭게 구축했습니다.

컴퓨터 화면에 한국어 스크린샷

3. 파이프라인 연결 및 Dry Run 테스트

실제 '블로그 글쓰기 입문' 강의 요청을 진행중이라 기존에 만들었던 교안을 바탕으로 수정하고 다듬는 과정을 시스템을 연속 실행해 보았습니다.

- 분석: 수강생 수준 및 페인포인트 파악 (AI)

- 기획: 90분 커리큘럼 및 실습 과제 도출 (AI)

- 내용 작성: html 교안 자료 초안 작성 (AI)

- 파일 생성: 앞선 데이터를 바탕으로 인터랙티브 기능이 탑재된 week3_lecture.html 파일 생성
- 아래는 생성된 html 파일 캡쳐 화면

한국어 웹사이트의 스크린샷

결과와 배운 점

1. 정적 PPT가 주지 못하는 다이나믹한 HTML 교안 그리고 배포 용이성

웹 기반의 교안은 실시간 타이머나 다크 모드 전환 같은 동적 요소를 쉽고 가볍게 담아낼 수 있고 기존 PPT 기반의 자료 보다 배포가 용이함

2. 향후 과제: 연결의 자동화

‘강의 교안 제작’ 기능을 한 단계 고도화하고, 다른 영역의 개선 가능한 부분도 자동화 구축 과정에 단계적으로 반영할 계획입니다.

도움 받은 글

21기 AI워크스페이스 스터디

2
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요