MAIC-UI: 생성적 UI를 활용한 대화형 코스웨어 제작

초록

기존의 인터랙티브 STEM 코스웨어 제작에는 HTML/CSS/JavaScript 전문 지식이 필요하여 교육자들에게 진입 장벽으로 작용해왔습니다. 생성형 AI가 HTML 코드를 생성할 수는 있지만, 기존 도구들은 인터랙티브 시뮬레이션 대신 정적 프레젠테이션을 생성하고, 장문 문서 처리에 어려움을 겪으며, 교육학적 정확성 검증 메커니즘이 부족합니다. 또한 수정 시 전체 재생성에 200~600초가 소요되어 창의적 흐름이 단절되는 문제가 있습니다. 본 논문에서는 교육자가 교과서, PPT, PDF로부터 인터랙티브 코스웨어를 제작하고 신속하게 편집할 수 있는 제로코드 저작 시스템인 MAIC-UI를 제안합니다. MAIC-UI는 다음 세 가지 핵심 기술을 적용합니다: (1) 교육학적 엄밀성을 보장하기 위한 다중 모드 이해 기반 구조화된 지식 분석, (2) 내용 정렬과 시각적 정제를 분리하는 2단계 생성-검증-최적화 파이프라인, (3) 통합 Diff 기반 증분 생성으로 10초 미만 반복 주기를 구현하는 Click-to-Locate 편집. 40명의 참가자를 대상으로 한 실험실 연구 결과, MAIC-UI가 직접적인 Text-to-HTML 생성 방식에 비해 편집 반복 횟수를 줄이고(4.9회 대 7.0회) 학습성과 제어력을 크게 향상시킨 것으로 나타났습니다. 53명의 고등학생을 대상으로 3개월간 진행된 교실 현장 적용 결과, MAIC-UI가 학습 주도성을 향상시키고 성과 격차를 줄이는 효과가 입증되었습니다. 실험반은 STEM 과목에서 9.21점의 성적 향상을 보인 반면, 대조반은 -2.32점의 변화를 보였습니다. 본 연구의 코드는 https://github.com/THU-MAIC/MAIC-UI에서 확인할 수 있습니다.

English

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.

MAIC-UI: 생성적 UI를 활용한 대화형 코스웨어 제작

MAIC-UI: Making Interactive Courseware with Generative UI

초록

Support