MAIC-UI: 생성형 UI를 활용한 인터랙티브 교육 콘텐츠 제작

MAIC-UI: Making Interactive Courseware with Generative UI

인터랙티브 STEM 교육 콘텐츠를 제작하는 데는 일반적으로 HTML/CSS/JavaScript 전문 지식이 필요하며, 이는 교육자들에게 장벽이 됩니다. 생성형 AI는 HTML 코드를 생성할 수 있지만, 기존 도구들은 인터랙티브 시뮬레이션 대신 정적인 프레젠테이션을 생성하고, 긴 문서에는 어려움을 겪으며, 교육적 정확성을 확보하는 메커니즘이 부족합니다. 또한, 수정 시 전체적인 재생성은 200~600초가 소요되어 창의적인 작업 흐름을 방해합니다. 본 논문에서는 교육자들이 교재, PPT, PDF 등에서 인터랙티브 교육 콘텐츠를 생성하고 빠르게 편집할 수 있는 제로 코드 제작 시스템인 MAIC-UI를 소개합니다. MAIC-UI는 다음과 같은 특징을 갖습니다: (1) 다중 모드 이해를 통한 구조화된 지식 분석을 통해 교육적 정확성을 보장합니다; (2) 콘텐츠 정렬과 시각적 개선을 분리하는 2단계 생성-검증-최적화 파이프라인을 사용합니다; (3) 통합된 Diff 기반의 점진적 생성을 통해 클릭 한 번으로 위치를 찾고 수정할 수 있으며, 10초 미만의 반복 주기를 달성합니다. 40명의 참가자를 대상으로 한 통제된 실험 연구 결과, MAIC-UI는 수정 횟수를 줄이고 (4.9회 vs. 7.0회), 직접적인 텍스트-HTML 생성 방식보다 학습 용이성과 제어 가능성을 크게 향상시켰습니다. 53명의 고등학생을 대상으로 3개월 동안 실제 교실에 적용한 결과, MAIC-UI는 학습 주도성을 높이고 학습 결과의 격차를 줄이는 데 기여했습니다. 파일럿 수업은 MAIC-UI를 사용한 반이 STEM 과목에서 평균 9.21점의 성적 향상을 보인 반면, 대조군 수업은 -2.32점의 성적 변화를 보였습니다. MAIC-UI의 코드는 https://github.com/THU-MAIC/MAIC-UI 에서 확인할 수 있습니다.

Creating interactive STEM courseware traditionally requires HTML/CSS/JavaScript expertise, leaving barriers for educators. While generative AI can produce HTML codes, existing tools generate static presentations rather than interactive simulations, struggle with long documents, and lack pedagogical accuracy mechanisms. Furthermore, full regeneration for modifications requires 200--600 seconds, disrupting creative flow. We present MAIC-UI, a zero-code authoring system that enables educators to create and rapidly edit interactive courseware from textbooks, PPTs, and PDFs. MAIC-UI employs: (1) structured knowledge analysis with multi-modal understanding to ensure pedagogical rigor; (2) a two-stage generate-verify-optimize pipeline separating content alignment from visual refinement; and (3) Click-to-Locate editing with Unified Diff-based incremental generation achieving sub-10-second iteration cycles. A controlled lab study with 40 participants shows MAIC-UI reduces editing iterations (4.9 vs. 7.0) and significantly improves learnability and controllability compared to direct Text-to-HTML generation. A three-month classroom deployment with 53 high school students demonstrates that MAIC-UI fosters learning agency and reduces outcome disparities -- the pilot class achieved 9.21-point gains in STEM subjects compared to -2.32 points in control classes. Our code is available at https://github.com/THU-MAIC/MAIC-UI.