안녕하세요, 소플입니다.

생성형 AI가 대중화되면서, AI와 상호작용하는 애플리케이션이 점점 늘어나고 있습니다.

이러한 애플리케이션에서는 AI가 실시간으로 텍스트를 생성하는 경우가 많은데요,

이때 생성된 텍스트가 마크다운 형식일 경우, 이를 적절히 렌더링하는 것이 중요합니다.

하지만 AI가 스트리밍 형식으로 마크다운을 생성하는 도중에는 포맷이 깨져서 나오는 경우가 많습니다.

이를 해결하기 위해 Vercel에서는 최근 Streamdown이라는 라이브러리를 공개했습니다.

이번 매거진에서는 스트리밍에 최적화 된 마크다운 렌더러인 Streamdown에 대해 알아보도록 하겠습니다.

---

Streamdown이란? 🤔

Streamdown은 AI 기반 스트리밍 환경에 특화된 Markdown 렌더링 라이브러리입니다.

Next.js, AI SDK, AI Elements 등을 개발한 Vercel에서 만든 오픈소스 프로젝트로,

기존에 리액트에서 마크다운을 렌더링하기 위해 사용하던 react-markdown의 완전한 대체재로 설계되었습니다.

Streamdown은 AI 모델이 실시간으로 생성하는 마크다운 텍스트를 처리할 때 발생하는 포맷 깨짐 문제를 해결합니다.

일반적인 마크다운 렌더러들은 완성된 텍스트를 기반으로 작동합니다.

하지만 ChatGPT나 Claude와 같은 AI 모델은 토큰 단위로 텍스트를 생성하기 때문에,

전체 텍스트가 완성되기 전까지 사용자는 아직 완성되지 않은 마크다운 구문을 실시간으로 보게 됩니다.

예를 들어, AI가 **중요한이라고 텍스트를 생성한 후 닫는 **를 입력하지 않았을 때, 기존 렌더러는 이를 제대로 처리하지 못합니다.

Streamdown은 바로 이런 상황에서 자연스럽고 완성도 높은 렌더링을 제공하는 것을 목표로 합니다.

Streamdown은 AI Elements의 Response 컴포넌트를 구동하는 핵심 엔진이기도 하며,

독립적인 패키지로도 사용할 수 있어 다양한 AI 애플리케이션 프로젝트에 적용할 수 있습니다.

---

Streamdown의 주요 기능 📌

Streamdown의 가장 핵심 기능은 바로 미완성된 마크다운 블록 파싱을 통한 스트리밍 최적화입니다.

이는 아직 미완성 된 마크다운 블록이라도, 해당 블록이 마치 완성된 것처럼 사용자에게 보여주는 것을 의미합니다.

헤딩, 인라인 코드, 볼드, 이탤릭, 링크 등의 마트다운 요소가 아직 완성되지 않았을 때도 사용자에게 시각적 피드백을 제공합니다.

예를 들면, AI가 볼드 텍스트를 작성하기 시작했지만 아직 완료하지 않았을 때, 코드 블록의 백틱을 하나만 입력한 상황 등에서도 적절히 렌더링 해줍니다.

이를 통해, 스트리밍 과정에서 사용자 경험을 크게 향상시킬 수 있습니다.

그리고 아래와 같은 추가 기능들도 제공합니다.

• GitHub Flavored Markdown 지원
  • Table, Task List, Strike(취소선) 등의 확장 기능 제공
  • 기술 문서나 프로젝트 관리 도구에서 특히 유용
• 수식 렌더링
  • KaTeX를 통해 LaTeX 형식의 수학 표현식을 아름답게 표시
  • 교육용 AI나 기술 문서 생성 도구에서 필수적인 기능
• 코드 구문 강조
  • Shiki를 활용하여 다양한 프로그래밍 언어에 대해 정확하고 아름다운 하이라이팅 제공
  • 복사 버튼이 내장되어 있어 사용자가 코드를 쉽게 클립보드에 복사할 수 있음
• 보안 우선 설계
  • harden-react-markdown을 기반으로 구축되어 안전한 렌더링 보장
  • 신뢰할 수 없는 콘텐츠나 프롬프트 인젝션 공격으로부터 애플리케이션을 보호

---

Streamdown 사용 방법 ⌨️

Streamdown 사용 방법은 굉장히 간단하고 쉽습니다.

지금부터 각 단계 별로 하나씩 살펴보겠습니다.

설치 및 설정

먼저 아래와 같이 npm을 사용해서 패키지를 설치합니다.

npm install streamdown

이후 globals.css 파일에 아래 코드를 추가하여, Streamdown의 내장 스타일을 전체 프로젝트에 적용시킵니다.

@source "../node_modules/streamdown/dist/index.js";

이 때 경로가 프로젝트의 node_modules 폴더 경로와 일치해야 한다는 점에 유의하세요.

기본 사용법

기존에 react-markdown을 사용했다면, 해당 컴포넌트를 곧바로 Streamdown 컴포넌트로 대체하면 됩니다.

그렇지 않으면 아래 예시 코드와 같이 마크다운 텍스트를 Streamdown 컴포넌트로 감싸주면 됩니다.

import { Streamdown } from 'streamdown';

const markdown = "# Hello World\n\nThis is **streaming** markdown!";

function Page() {
    return <Streamdown>{markdown}</Streamdown>;
}

export default Page;

AI SDK와 함께 사용

Streamdown은 AI SDK와 함께 사용했을 때 그 진가가 발휘됩니다.

아래 코드는 AI SDK와 Streamdown을 함께 사용하는 예시 코드입니다.

'use client';

import { useState } from 'react';
import { useChat } from '@ai-sdk/react';
import { Streamdown } from 'streamdown';

export default function Page() {
    const [input, setInput] = useState('');
    const { messages, sendMessage, status } = useChat();

    return (
        <>
            {messages.map((message) => (
                <div key={message.id}>
                    {message.parts
                        .filter((part) => part.type === 'text')
                        .map((part, index) => (
                            <Streamdown key={index}>{part.text}</Streamdown>
                        ))}
                </div>
            ))}

            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    if (input.trim()) {
                        sendMessage({ text: input });
                        setInput('');
                    }
                }}>
                <input
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    disabled={status !== 'ready'}
                    placeholder='Say something...'
                />
                <button
                    type='submit'
                    disabled={status !== 'ready'}>
                    Submit
                </button>
            </form>
        </>
    );
}

위 예시 코드에서 AI가 실시간으로 텍스트를 생성할 때, message.parts 배열이 계속 업데이트 됩니다.

그리고 각 part에 들어있는 part.text 또한 계속 업데이트되는데,

이 때 Streamdown이 미완성된 마크다운 블록을 적절히 렌더링하게 됩니다.

사용법 자체는 굉장히 간단하죠?ㅎㅎ

---

마치며

Streamdown은 AI 시대의 새로운 요구사항에 맞춰 설계된 마크다운 렌더러입니다.

기존의 정적 Markdown 처리 방식의 한계를 뛰어넘어, 실시간 스트리밍 환경에서도 완벽한 사용자 경험을 제공합니다.

ChatGPT나 Claude 같은 대화형 AI 인터페이스를 개발하는 분들이라면,

Streamdown을 통해 사용자들에게 더욱 자연스럽고 완성도 높은 렌더링 결과를 제공할 수 있을거라고 생각합니다😀

---

🔗 참고 링크

• https://streamdown.ai/
• https://github.com/vercel/streamdown

---

이번 매거진에서는 스트리밍에 최적화 된 마크다운 렌더러인 Streamdown에 대해 알아보았습니다.

AI 애플리케이션을 개발하는 분들이라면 한 번씩 사용해보시면 좋을 것 같습니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀