[MAICE 개발기 3편] 수식을 실시간으로 렌더링하는 SvelteKit 챗봇 인터페이스

1. 수학 챗봇의 UX 난제

텍스트 기반 챗봇은 많지만, 수학 챗봇은 차원이 다른 UX 난이도를 가집니다. “y = x^2 + 2x + 1”을 텍스트로 치는 것은 쉽지만, “인테그랄 0부터 무한대까지…”를 타이핑하는 것은 고문입니다.

실제로 저희 연구의 2차 사이클(베타테스트) 당시, 학생들은 “LaTeX 입력이 너무 어렵다”고 호소했습니다. 우리는 이 문제를 해결하기 위해 두 가지 핵심 목표를 세웠습니다. 입력 측면에서는 카톡 보내듯이 자연스럽게 수식을 입력하거나, 사진만 찍어도 인식이 되도록 해야 했습니다. 출력 측면에서는 AI가 생성하는 복잡한 수식이 깨지지 않고 실시간으로 렌더링되어야 했습니다.

2. 왜 SvelteKit인가?

React나 Vue도 훌륭하지만, 우리는 SvelteKit을 선택했습니다. 이유는 반응성(Reactivity)과 성능 때문입니다. 수식 렌더링 라이브러리(MathLive, KaTeX)는 무겁습니다. Virtual DOM을 사용하지 않는 Svelte의 컴파일러 방식은 복잡한 수식 DOM을 조작할 때 더 빠르고 부드러운 퍼포먼스를 보여주었습니다.

3. MathLive를 이용한 인라인 수식 입력

우리는 MathLive 라이브러리를 커스텀하여 InlineMathInput.svelte 컴포넌트를 만들었습니다.

핵심 기능: Text-Math 혼합 모드

사용자는 글을 쓰다가 언제든지 수식 모드로 진입할 수 있어야 합니다.

// front/src/lib/components/maice/InlineMathInput.svelte

<math-field 
  virtual-keyboard-mode="manual"
  on:focus={handleFocus}
  on:input={handleInput}
>
  {value}
</math-field>

우리는 사용자가 텍스트를 입력하다가 $$를 치거나 버튼을 누르면 즉시 수식 입력 필드로 전환되게 구현했습니다. 이때 모바일에서는 일반 키보드가 내려가고, 수학 기호 전용 가상 키보드(Virtual Keyboard)가 부드럽게 올라옵니다.

피드백 반영: OCR 기능 도입

베타테스트 피드백을 반영하여, Google Gemini Vision API를 연동한 OCR 기능을 추가했습니다. 학생이 문제집을 찍어서 올리면, 자동으로 수식과 텍스트를 인식하여 채팅창에 채워줍니다. 이로써 직접 수식을 타이핑하는 경우를 줄일 수 있었습니다.

4. Markdown + LaTeX 실시간 스트리밍

백엔드에서는 AI의 답변이 토큰 단위로 스트리밍(SSE)됩니다. 문제는 수식 토큰이 잘려서 들어올 때입니다.

\frac{1 까지만 들어왔을 때 렌더링을 시도하면 화면이 깨집니다.

해결책: 버퍼링 렌더러

우리는 수식 블록($$ ... $$ 또는 $ ... $)이 닫힐 때까지 렌더링을 유예하거나, 불완전한 LaTeX 코드를 임시로 처리하는 전처리기를 구현했습니다.

먼저 백엔드에서 스트리밍된 텍스트가 들어옵니다. 예를 들어 ”… 따라서 정답은 \frac{1}{2”까지만 도착한 상태라면, Preprocessor 단계에서 열린 수식 태그를 감지하고 닫는 태그를 임시로 추가합니다. 그 후 KaTeX으로 렌더링을 시도하며, 에러가 발생하면 원본 텍스트를 그대로 노출합니다.

이 과정을 통해 사용자는 AI가 수식을 ‘써 내려가는’ 듯한 경험을 할 수 있습니다.

5. 다크 모드와 테마 시스템

수학 공부는 밤 늦게까지 이어지는 경우가 많습니다. 눈의 피로를 줄이기 위해 일관된 다크 모드를 지원합니다.

front/src/lib/stores/theme.ts에서 OS 설정을 감지하여 자동으로 테마를 전환합니다. 단순히 색상만 반전시키는 것이 아니라, 수식의 가독성을 위해 명도 대비를 세밀하게 조정한 컬러 팔레트(app.css)를 정의했습니다.

/* app.css */
:root.dark {
    --maice-math-color: #e2e8f0; /* 너무 쨍하지 않은 흰색 */
    --maice-bg-primary: #0f172a;
}

6. 교육적 UX 디자인 원칙

6.1 인지 부하(Cognitive Load) 최소화

John Sweller의 인지 부하 이론을 적용하여, 학생이 “수식 입력”이라는 외재적 부하에 시간을 뺏기지 않도록 설계했습니다.

Before (LaTeX 입력):

학생이 입력하는 데 걸린 시간: 베타 테스트에서 측정된 평균 입력 시간
오타율: 높음
학습에 집중한 시간: 낮음

After (MathLive + OCR):

학생이 입력하는 데 걸린 시간: 베타 대비 크게 감소
오타율: 크게 감소
학습에 집중한 시간: 높음

교육적 함의: 기술적 장벽을 낮추면 학습 본질에 집중할 수 있습니다.

6.2 실시간 피드백의 교육적 가치

스트리밍 렌더링은 단순한 UX 개선이 아니라, 형성 평가(Formative Assessment)의 일종입니다.

AI가 답을 생성하는 과정을 실시간으로 보여주면, 학생은 “답이 어떻게 나올까?” 하는 호기심을 자극받아 집중도가 유지됩니다. 또한 AI가 단계적으로 추론하는 과정을 관찰하며 자연스럽게 사고 과정을 모델링하게 됩니다. 만약 풀이 중간에 “아, 이건 아닌 것 같은데?”라고 느낄 때는 즉각적으로 질문을 수정할 수 있어 능동적인 학습이 가능합니다.

6.3 연구 결과: UX가 학습 성과에 미치는 영향

베타 테스트 (N=30, 초기 LaTeX 입력) vs 정식 실험 (N=58, MathLive+OCR) 간 비교를 했습니다. 베타와 정식 단계는 시점과 시스템 구성이 달라 동일 조건의 통제 실험이 아니므로, 아래 수치는 경향도 참고용으로 해석하는 것이 적절합니다.

핵심: UX 개선 후 질문 빈도와 학생 만족도가 크게 향상되었고, 이는 학습 기회 증가로 연결됩니다.

6.4 학생 피드백: “이제 수학이 재밌다”

“예전엔 LaTeX 문법 때문에 질문하기 싫었는데, 지금은 사진 찍으면 끝이라 엄청 편해요. 질문을 더 많이 하게 돼요.”

학생 J

“AI가 답을 써 내려가는 걸 보는 게 신기해요. ‘아, 이렇게 생각하는구나’ 하면서 따라가게 돼요.”

학생 K (스트리밍 렌더링 효과)

7. 기술이 교육을 방해하지 않도록

MAICE의 프론트엔드 철학은 단순합니다:

“기술은 보이지 않아야 한다. 학생은 오직 학습에만 집중해야 한다.”

이를 위해 고급 기능은 필요할 때만 노출하여 복잡한 기능을 숨깁니다. 팝업, 광고, 불필요한 알림은 일절 금지하여 학습 흐름을 최우선으로 합니다. 향후에는 키보드 단축키와 스크린리더를 지원하여 접근성(Accessibility)도 강화할 계획입니다.