LLM 스트리밍 UI의 한계, Markdoc 태그 문법으로 해결

Context

LLM 출력물에 차트나 폼 같은 인터랙티브 컴포넌트를 결합하는 과정에서 렌더링 계층 충돌 발생. JSON 블록 방식은 스트리밍 중 파싱 불능 상태가 되어 사용자 경험을 저해함. JSX나 커스텀 DSL 방식은 모델의 환각 유발 및 토큰 낭비라는 한계 존재.

Technical Solution

• Markdoc의 커스텀 태그 구분자([% %])를 도입하여 일반 텍스트와 컴포넌트를 명확히 분리하는 설계
• 룩어헤드나 백트래킹 없이 실시간 감지가 가능한 문자 단위 상태 머신 기반 Tokenizer 구축
• IN_PROSE, IN_TAG, IN_STRING 세 가지 상태를 정의하여 스트리밍 데이터를 실시간으로 분류하는 파서 구현
• Zod 스키마를 통한 컴포넌트 태그 및 속성 검증으로 런타임 에러를 방지하는 ComponentRegistry 적용
• 테마 중립적 설계를 위해 currentColor 및 inherit 속성을 활용하여 UI 확장성을 확보한 Renderer 구성
• 컴포넌트 레지스트리 기반의 시스템 프롬프트 자동 생성 기능을 통한 LLM 출력 정밀도 향상

Key Takeaway

스트리밍 환경의 UI 렌더링은 상태 기반의 결정론적 파싱 구조가 필수적이며, 모델의 학습 데이터에 포함된 표준 문법을 활용하는 것이 프롬프트 비용과 정확도 측면에서 유리함.