## AI가 생각하는 과정을 보여주자 최근 LLM들은 Chain-of-Thought 방식으로 추론 과정을 단계별로 보여줄 수 있다. Claude의 `` 블록이 대표적이다. XGen에서 이 추론 과정을 시각적으로 표현하는 ThinkBlock 컴포넌트를 구현했다. ### ThinkBlock이란 ThinkBlock은 AI의 추론 과정을 접을 수 있는 블록 형태로 표시하는 컴포넌트다. 사용자는 최종 응답만 볼 수도 있고, 궁금하면 펼쳐서 AI가 어떻게 생각했는지 확인할 수 있다. ### 컴포넌트 구현 ```tsx interface ThinkBlockProps { thinking: string; isStreaming?: boolean; } const ThinkBlock: React.FC = ({ thinking, isStreaming }) => { const [isExpanded, setIsExpanded] = useState(false); return (

{isExpanded && (

)}

); }; ``` ### 스트리밍 중 ThinkBlock 처리 SSE 스트리밍에서 `` 태그가 시작되면 ThinkBlock을 생성하고, 태그가 닫힐 때까지 thinking 영역에 추가한다. 태그가 닫히면 이후 텍스트는 일반 응답으로 처리한다. ```typescript function parseStreamChunk(buffer: string): ParseResult { const thinkingMatch = buffer.match(/([\s\S]*?)<\/thinking>/); if (thinkingMatch) { const thinking = thinkingMatch[1]; const answer = buffer.replace(/[\s\S]*?<\/thinking>/, '').trim(); return { thinking, answer, isThinkingComplete: true }; } // 아직 thinking 태그가 닫히지 않은 경우 const openMatch = buffer.match(/([\s\S]*)/); if (openMatch) { return { thinking: openMatch[1], answer: '', isThinkingComplete: false }; } return { thinking: '', answer: buffer, isThinkingComplete: true }; } ``` ### 디자인 결정: 기본 접힘 vs 펼침 초기에는 ThinkBlock을 기본 펼침으로 설정했지만, 사용자 테스트 결과 대부분이 추론 과정보다 최종 답변에 관심이 많아 기본 접힘으로 변경했다. 단, 개발자 모드에서는 기본 펼침으로 표시한다. ### 다단계 추론 시각화 복잡한 워크플로우에서는 여러 노드가 순차적으로 추론하는 경우가 있다. 각 노드의 ThinkBlock을 중첩해서 보여주면 전체 추론 흐름을 파악할 수 있다. ### 애니메이션 디테일 ThinkBlock이 접히고 펼쳐질 때 `framer-motion`의 `AnimatePresence`를 활용해 자연스러운 높이 전환 애니메이션을 적용했다. 작은 디테일이지만 UX 품질을 높여주는 요소다.