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

소개

지난 글에서는 <강의 교안 제작> 자동화 첫걸음으로, PPT 대신 HTML 인터렉티브 교안을 생성하는 파이프라인(1단계) 구축 과정을 공유했습니다.

이번 여기에는 여기서 한 걸음 더 나아가, <의뢰 접수 부터 최종 웹(URL) 배포 까지 고도화>을 진행하는 고도화진행과정을 나누고자 합니다.

진행 방법

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

1. 입력 채널 완전 자동화 (Input Automation) (진행중)

기존에는 제가 "강의 준비해 줘"라며 텍스트를 입력해야 파이프라인이 시작되었습니다.

이를 개선하여 [구글 폼 ➔ 노션 DB (GAS 웹훅)] 연동을 lecture-prep-orchestrator 에이전트에 통합했습니다. 이제는 새로운 강의 의뢰가 노션에 들어오면, 에이전트가 이를 알아서 감지하고 대상과 주제를 파싱하여 먼저 초안 작업을 시작하는 프로세스로 업그레이드 중입니다.


2. 추가 기능 업그레이드 (진행중)

단순한 슬라이드를 넘어 실제 오프라인 강의에서 강사를 돕기 위해,
기존의 html-lecture-generator 에 추가 기능을 스킬에 추가 (아래 추가 기능 예시)
- 부드러운 화면 전환(Morph/Fade): 파워포인트 처럼 슬라이드 나타내기 애니메이션 기능 구현
- 임베딩 전용 뷰: 유튜브 영상이나 퀴즈 링크 팝업을 교안 이탈 없이 내부에서 실행.

  1. 서포 배포 자동화 (진행중)
    - 가장 번거로웠던 마지막 과정, 수동 터미널 업로드(`git push`) 명령을 스크립트로 위임

    - HTML 교안이 완성되는 즉시 에이전트가 백그라운드에서 deploy_to_github.ps1 파워쉘 스크립트를 스스로 실행합니다. 결과적으로 저에게는 성공 메시지와 공유용 최종 웹 URL 단 하나만 도착하게 됩니다.

결과와 배운 점

1. 진정한 파이프라인의 완성: 스크립트 위임의 힘

폼 연동부터 백그라운드 배포 로직까지 AI에게 권한을 위임하니,
이제는 "확인/승인"만 누르는 관리자 역할로 한 층 더 올라선 기분입니다.

2. 향후 과제: 수강생 피드백 루프 연결

다음 단계로는 배포된 교안 하단에 삽입된 설문을 통해, "이전 수강생의 피드백" 데이터가 다시 노션 DB로 들어와 다음번 강의에 반영되는 시스템을 구축해 볼 계획입니다.

도움 받은 글

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

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요