Thinking 패널 | UI 디자인 사전

설명

Claude의 Extended Thinking, OpenAI o1과 o3, DeepSeek R1, Cursor의 Composer가 도입한 추론 가시화 방식입니다. AI 답변 위쪽에 접힌 채로 'Thinking…' 또는 '6초 동안 생각함' 같은 라벨이 보이고, 클릭하면 모델이 머릿속에서 거친 체크리스트와 고민, 반박, 결론을 작은 회색 글씨로 펼쳐서 보여 줘요. 답변 본문과는 시각적으로 분명히 구분되도록 색을 옅게 하거나 들여쓰기, 다른 폰트로 위계를 잡습니다. 사용자가 답변에 의문이 생기면 추론을 펴서 직접 짚어 볼 수 있어요.

🖼️ 미니어처

6초 동안 생각함 ▾

💬 AI에게 이렇게 말하세요

AI 메시지 위에 'Thinking 패널'을 만들어 주세요. 기본 접힘 상태이고 헤더에는 'XX초 동안 생각함' + chevron 아이콘.
펼치면 모델 추론 텍스트를 옅은 회색 + 작은 폰트로 표시. 답변 본문과 시각적으로 분리 (얇은 좌측 border + 들여쓰기).
추론 중에는 'Thinking...' + 점멸 dots 애니메이션. 추론이 끝나면 헤더 라벨이 'XX초 동안 생각함'으로 바뀝니다.

왜 추론을 보여주나요

추론을 보여 주는 진짜 이유는 사용자가 답변에서 어긋난 부분을 빠르게 짚어 다음 턴에서 바로 잡을 수 있게 하기 위해서예요. AI가 어떤 흐름으로 결론에 닿았는지 펼쳐서 보면, 어디서부터 잘못된 가정이 들어갔는지 사용자가 직접 발견할 수 있습니다. 단순히 ’AI가 이렇게 생각해요’를 보여 주기만 하면 신기하다가 끝나지만, 교정 도구로 쓰면 사용자가 진짜 협업자가 돼요.

⚡ 사용 예 (한 줄)

{message.reasoning && <Collapsible><CollapsibleTrigger>{`${duration}초 동안 생각함`}</CollapsibleTrigger><CollapsibleContent className="text-xs text-muted-foreground border-l pl-3">{message.reasoning}</CollapsibleContent></Collapsible>}

🧩 컴포넌트 매핑

shadcn/ui Collapsible을 씁니다. Anthropic Claude API의 thinking blocks를 그대로 받아 렌더하고, Vercel AI SDK 5의 reasoning 필드를 활용해요. lucide-react ChevronDown과 Brain 아이콘을 함께 사용합니다.

🚫

이렇게 하지 마세요

추론과 답변을 같은 폰트, 같은 위계로 쭉 붙여 두면 사용자가 어디까지가 답이고 어디부터가 추론인지 헷갈려요. 추론은 항상 보조 위계로 시각적으로 한 단 낮춰서 보여 줍니다.

🇰🇷

국내 UI 특징

헤더 라벨은 '6초 동안 생각함'처럼 자연스러운 한국어가 좋습니다. 영어 'Thought for 6 seconds'를 그대로 직역하기보다 한국 사용자가 듣기 친숙한 표현이에요. '6초 추론'으로 더 줄일 수도 있지만 의미가 살짝 약해져서, 사전에서는 '생각함'을 권장합니다. 추론 텍스트가 길어지면 '… 더 보기'로 접어 주세요.