## 스트리밍 채팅 인터페이스 구축 AI 플랫폼에서 채팅은 단순 요청-응답이 아니다. LLM이 토큰을 생성하는 동안 실시간으로 표시해야 유저 경험이 좋아진다. XGen에서 SSE(Server-Sent Events) 기반 스트리밍 채팅 UI를 구현한 과정을 기록한다. ### SSE vs WebSocket, 왜 SSE를 선택했나 처음엔 WebSocket을 고려했지만, 채팅 스트리밍은 서버→클라이언트 단방향 통신이 대부분이라 SSE가 더 적합했다. 연결 관리도 더 단순하고, HTTP/2 환경에서 멀티플렉싱까지 지원된다. ### 핵심 구현: useStreamChat 훅 ```typescript function useStreamChat(workflowId: string) { const [messages, setMessages] = useState([]); const [isStreaming, setIsStreaming] = useState(false); const sendMessage = useCallback(async (content: string) => { const userMessage: ChatMessage = { id: crypto.randomUUID(), role: 'user', content, timestamp: new Date(), }; setMessages((prev) => [...prev, userMessage]); setIsStreaming(true); const assistantId = crypto.randomUUID(); setMessages((prev) => [ ...prev, { id: assistantId, role: 'assistant', content: '', timestamp: new Date() }, ]); const response = await fetch(`/api/workflow/${workflowId}/chat`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: content }), }); const reader = response.body!.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); const lines = chunk.split('\n').filter((l) => l.startsWith('data: ')); for (const line of lines) { const data = JSON.parse(line.slice(6)); if (data.type === 'token') { setMessages((prev) => prev.map((m) => m.id === assistantId ? { ...m, content: m.content + data.content } : m ) ); } } } setIsStreaming(false); }, [workflowId]); return { messages, sendMessage, isStreaming }; } ``` ### 채팅 버블 컴포넌트 스트리밍 중인 메시지와 완료된 메시지를 구분해서 표시한다. 스트리밍 중에는 커서 애니메이션을 추가하고, 마크다운 렌더링은 완료 후 적용한다. ```tsx const ChatBubble: React.FC<{ message: ChatMessage; isStreaming: boolean }> = ({ message, isStreaming, }) => (

{isStreaming ? ( {message.content}▊ ) : ( )}

); ``` ### 성능 이슈와 해결 토큰이 빠르게 들어오면 `setMessages`가 초당 수십 번 호출된다. 초기엔 버벅거림이 있었는데, `requestAnimationFrame` 배치 처리와 `useRef`로 중간 버퍼링을 적용해서 해결했다. 체감 성능이 크게 개선됐다.