Streamdown v2 — AI 스트리밍용 react-markdown 대체 라이브러리 플러그인 아키텍처 도입

AI 스트리밍 앱을 위한 react-markdown 대체 라이브러리 Streamdown이 v2에서 플러그인 기반 아키텍처로 전환해 번들 크기를 대폭 줄였다. 코드 블록·Mermaid·수식·동아시아 언어 등을 필요한 플러그인만 임포트해 선택적으로 로드하며, 스트리밍 중 커서 인디케이터와 configurable한 마크다운 힐링 옵션도 추가됐다.

핵심 포인트

플러그인 기반 아키텍처로 전환해 @streamdown/code, @streamdown/mermaid, @streamdown/math, @streamdown/cjk를 필요한 것만 임포트할 수 있다.
스트리밍 콘텐츠 끝에 블링킹 커서 인디케이터를 기본 제공해 콘텐츠 생성 중임을 시각적으로 표시한다.
마크다운 힐링 라이브러리 Remend를 configurable하게 열어 링크·이미지 완성, 볼드·이탤릭, KaTeX, Setext 헤딩 등을 선택적으로 적용할 수 있다.
선택적 로딩으로 이전 버전 대비 번들 풋프린트를 크게 줄였다.

상세 정리

배경: AI 스트리밍 앱에서 react-markdown을 그대로 사용하면 불필요한 플러그인까지 번들에 포함됐다. Streamdown v2는 가장 많이 요청된 번들 크기 축소를 플러그인 아키텍처로 해결했다.
@streamdown/code: 코드 블록 렌더링. 소스 코드 하이라이팅을 포함한다.
@streamdown/mermaid: Mermaid 다이어그램 렌더링 지원.
@streamdown/math: LaTeX/KaTeX 수식 렌더링 지원.
@streamdown/cjk: 중국어·일본어·한국어 등 동아시아 언어 처리.
커서 인디케이터: 스트리밍 콘텐츠 끝에 블링킹 텍스트 커서가 표시돼 콘텐츠가 아직 생성 중임을 사용자에게 알린다.
Remend configurable: 마크다운 힐링 수준을 직접 조정한다. 링크/이미지 완성, 텍스트 포매팅(볼드·이탤릭·볼드-이탤릭), 인라인 코드·취소선, KaTeX, Setext 헤딩 처리를 각각 켜고 끌 수 있다.
렌더링 정확도 vs 성능: Remend 옵션으로 완전한 마크다운 힐링과 성능 사이의 트레이드오프를 유스케이스에 맞게 조정할 수 있다.