MAIC-UI: 생성형 UI를 활용한 대화형 교과 과정 제작 도구

교사가 전문적인 코딩 지식 없이도 정적인 교과서 내용을 학생이 직접 조작할 수 있는 대화형 시뮬레이션으로 변환할 수 있게 돕는다. 기존 AI 도구들이 단순히 정적인 웹페이지를 만드는 데 그쳤던 한계를 극복하고, 교육적 정확성과 빠른 수정 속도를 동시에 확보했다.

기존의 LLM 기반 코드 생성은 전체 파일을 매번 새로 작성해야 하므로 수정 시 대기 시간이 길고, 이 과정에서 이전의 정상적인 코드까지 망가지는 불안정성이 있었다. MAIC-UI는 이를 해결하기 위해 소프트웨어 공학의 버전 관리 개념인 Diff(차이점) 메커니즘을 도입했다.

먼저 교과서의 텍스트와 이미지를 Embedding 공간에서 분석하여 '절차적 지식'을 추출하고, 이를 시뮬레이션의 상태 값과 연결한다. 사용자가 특정 UI 요소를 클릭하면 시스템은 해당 요소에 대응하는 DOM 구조와 코드를 즉시 식별한다.

수정 요청 시 LLM은 전체 코드가 아닌 변경이 필요한 부분에 대한 'Patch' 코드만 생성하며, Unified Diff 형식을 통해 기존 코드 구조를 유지하면서 특정 라인만 교체한다. 결과적으로 사용자는 마치 종이에 스케치하듯 실시간으로 교육 자료를 다듬을 수 있게 된다.

MAIC-UI는 멀티모달 분석, 2단계 생성, 그리고 증분 편집의 세 단계로 구성된다. 분석 단계에서는 Vision-Language Model을 사용하여 문서 이미지에서 Main Topics, Key Concepts, Procedural Concepts 등 6가지 핵심 필드를 추출한다.

생성 단계는 Stage 1(Content-Aligned)에서 HTML/JavaScript 로직을 구성하고, Stage 2(Visual Polish)에서 테마 색상과 애니메이션을 적용한다. 각 단계 직후에는 HTML Validator가 [생성된 코드 → 구문 분석 → 오류 감지] 과정을 거쳐 실행 가능한 코드인지 검증하며, 실패 시 피드백을 AI에게 다시 전달하여 자가 수정을 유도한다.

편집 단계에서는 Click-to-Locate 모듈이 사용자의 클릭 이벤트에서 XPath와 CSS Selector를 추출한다. [클릭 위치 + 자연어 명령 + 전체 컨텍스트]를 입력으로 받아 AI가 Unified Diff 형식의 출력을 내놓으면, 시스템은 이를 기존 소스에 적용하여 10초 이내에 화면을 갱신한다.

40명의 참가자를 대상으로 한 실험에서 MAIC-UI는 직접적인 Text-to-HTML 방식 대비 편집 반복 횟수를 7.0회에서 4.9회로 줄였으며, 시스템 학습 용이성과 제어 가능성 점수를 유의미하게 높였다.

3개월간 53명의 고등학생을 대상으로 진행한 실제 수업 적용 결과, MAIC-UI를 활용한 실험 집단은 STEM 과목 점수가 9.21점 상승한 반면, 전통적 수업을 받은 통제 집단은 2.32점 하락했다. 특히 성적 하위 25% 학생들의 점수 향상 폭이 더 크고 성적 편차가 줄어드는 등 교육 격차 해소 효과가 확인됐다.

MAIC-UI의 아키텍처는 React 18 프론트엔드와 FastAPI 백엔드로 구성된다. 멀티모달 분석에는 GLM-4.6V를, 텍스트 및 코드 생성에는 GLM-4.7 모델을 사용하며 각각의 온도(temperature) 설정을 0.2와 0.3으로 최적화하여 일관성을 확보했다.

핵심 기술인 Unified Diff 프로세싱은 Python의 difflib을 활용하여 구현되었으며, AI가 생성한 패치를 기존 코드에 적용할 때 발생할 수 있는 미세한 스타일 차이를 극복하기 위해 Fuzzy Context Matching 기법을 적용했다. 이를 통해 패치 적용 성공률을 높이고 전체 재생성 대비 토큰 사용량을 약 90% 절감했다.

현재 시스템은 단일 페이지 시뮬레이션 생성에 집중하고 있어 긴 서사나 순차적인 여러 페이지의 교과 과정을 구성하는 데 한계가 있다. 또한 Vision-Language Model이 복잡한 전문 도표나 특수 기호를 오독할 가능성이 여전히 존재한다.