LLM 스트리밍 응답 안의 커스텀 태그를 브라우저에서 렌더

• LLM 어시스턴트 채팅의 응답 표시부 — 응답 안에 2D 도식·수식이 섞여 나옴

증상

• 도식을 보여주려면 서버가 이미지를 만들어 업로드하고 클라이언트가 다시 받아오는 왕복이 필요 — 느리고 서버에 저장 부담
• 응답 전체를 기다렸다 한 번에 보여주니 체감이 느림

원인

• 마크다운 렌더 파이프라인이 일반 텍스트만 처리 — 응답에 커스텀 태그가 섞여 와도 통과시킬 방법이 없어 서버에서 미리 그려 보내는 수밖에 없었음

조치

• 응답을 SSE로 토큰 단위 스트리밍하고, 받은 토큰을 마크다운 문자열에 누적하며 다시 렌더
• rehype-raw로 커스텀 태그를 파싱 단계에서 통과시키고 태그명을 컴포넌트로 치환 — 매핑된 컴포넌트가 태그 데이터를 받아 브라우저에서 도식을 직접 그림
• 수식은 KaTeX로 렌더. 텍스트·태그·수식이 한 파이프라인을 탐

결과

• 서버 왕복과 이미지 저장·업로드가 사라짐
• 스트리밍 도중에도 태그가 완성되는 즉시 그려짐 — 별도 요청 대기 없음

같은 스트리밍을 재사용 패키지로 일반화한 노트 → 헤드리스 채팅 UI 킷