Remend: 스트리밍 AI 응답의 깨진 마크다운 자동 복구 npm 패키지

AI 모델이 토큰 단위로 스트리밍 출력할 때 발생하는 불완전한 마크다운 구문을 자동으로 복구하는 npm 패키지 Remend 가 독립 라이브러리로 출시됐다. 스트리밍 진행 중에도 닫히지 않은 코드 펜스, 불완전한 강조 마커, 미완성 링크 등을 실시간으로 완성해 렌더러에 전달한다.

핵심 포인트

문제: AI 스트리밍 출력은 토큰 단위로 도착해 중간 상태에서 코드 펜스 미닫힘, **bold** 반쪽, 링크 괄호 미완성 등 깨진 마크다운이 렌더링에 그대로 노출된다.
해결: Remend 가 스트리밍 중 끊긴 구문을 자동 감지·완성 후 렌더러에 넘기고, 실제 닫는 마커가 도착하면 자연스럽게 업데이트한다.
LaTeX·제품 코드 엣지 케이스: LaTeX 수식의 언더스코어와 제품명의 특수문자를 마크다운 문법으로 오탐지하지 않는 규칙을 포함한다.
통합: unified 생태계(remark-parse, rehype-stringify)를 포함해 모든 마크다운 렌더러의 전처리 단계에 npm i remend 한 줄로 연결 가능하다.

상세 정리

배경: 스트리밍 AI 응답이 보편화되면서 토큰 단위 출력이 마크다운 파서에 전달될 때 구문 완성 전 상태가 렌더링되는 문제가 실용 이슈로 떠올랐다.
주요 깨짐 패턴: 닫히지 않은 코드 펜스(```), 반만 들어온 bold 마커(**), 열린 채 끝난 [링크](, 미완성 리스트 항목이 대표적이다.
자동 완성 동작: "This is bold text" 처럼 반쪽 마커가 온 순간 완성된 형태로 렌더러에 넘기고, 이후 실제 닫는 마커가 스트림에 도착하면 seamless 하게 업데이트한다.
LaTeX 처리: 수식 내 언더스코어(a_b)를 이탤릭 마커로 오탐지하지 않도록 별도 파싱 규칙을 탑재한다.
제품 코드 처리: 변수명·제품명에 포함된 특수문자를 마크다운 구문으로 잘못 처리하지 않는 규칙도 포함된다.
전처리 구조: 기존 마크다운 렌더러 앞에 붙는 전처리 스텝으로 설계되어 remark + rehype 파이프라인 예시를 공식 제공한다.
출처: Streamdown 패키지의 스트림 종료 처리 로직에서 독립 분리됐으며, 실제 프로덕션 AI 애플리케이션에서 배틀테스트를 거쳤다.

왜 읽나AI 스트리밍 채팅이나 문서 생성 기능을 개발 중인 프론트엔드 개발자가 렌더링 품질 문제를 즉시 해결하는 데 적용 가능한 실용 도구다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Remend: 스트리밍 AI 응답의 깨진 마크다운 자동 복구 npm 패키지

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기