LabHub

블로그

AI-Native UI·Generative UX 2025 완전 정복: Streaming UI, Tool Use Rendering, AI SDK(Vercel)·LangChain UI·LlamaIndex.TS UI, 대화형 인터페이스, Feedback·Correction UX, 불확실성 시각화, Human-in-the-loop, 2025년 AI 제품 UX 벤치마크 — Season 6 Ep 3

2026-04-15 · 19 분 읽기 · #ai-ui#generative-ui#streaming-ui#tool-use#ai-sdk#vercel-ai-sdk#langchain-ui#conversational-ui#human-in-the-loop#ai-ux#uncertainty-visualization

한국어English日本語

프롤로그 · AI가 생각하는 동안, 사용자는 무엇을 보는가

2022년 말 ChatGPT 이후 2년, AI 제품의 UX는 크게 셋으로 분화했다.

  1. Chatbot UX (2022-2023): 채팅창만 있다. "뭘 물어보지?"에서 멈춘다
  2. Agentic UX (2023-2024): Tool Use로 외부 액션 수행. UI는 여전히 채팅
  3. Generative UI (2024-2025): AI가 UI 자체를 생성. 카드·폼·차트가 대화 중 나타남

2025년의 AI 제품은 이 3세대가 혼재한다. 가장 뛰어난 제품은 Generative UI + 확실한 피드백 루프 + 신뢰 가능한 UX 의 조합.

"AI 제품의 가치는 응답 자체가 아니라, 응답을 기다리는 동안·응답 이후의 경험에서 결정된다."

이번 글은 그 설계법.

1장 · AI UX의 본질적 난점

일반 UX와 다른 4가지

(1) 응답 시간의 변동성

(2) 결과의 불확실성

(3) 환각(Hallucination) 리스크

(4) 작업의 장기성

그래서 필요한 것

2장 · Streaming UI — 토큰 단위 점진적 렌더

왜 Streaming?

LLM은 토큰을 하나씩 순차 생성한다. 전체 완성까지 10초 걸리는 응답을 첫 토큰부터 노출하면 체감 속도가 극적으로 빨라진다.

ChatGPT가 "답이 점점 나타나는" UX로 보여준 핵심 발견:

기술 스택

(1) Server-Sent Events (SSE)

(2) WebSocket

(3) HTTP/2·HTTP/3 Streaming

(4) React Server Component Streaming

Vercel AI SDK (2024-2025 표준)

'use client';
import { useChat } from 'ai/react';

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

서버:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({ model: openai('gpt-4o'), messages });
  return result.toDataStreamResponse();
}

중요한 UX 디테일

3장 · Tool Use와 Generative UI 렌더링

전통적 Tool Use UX

Generative UI UX

Vercel AI SDK - RSC 방식

// app/action.ts
'use server';
import { createAI, createStreamableUI } from 'ai/rsc';
import { WeatherCard } from './weather-card';

async function submit(input: string) {
  'use server';
  const ui = createStreamableUI(<LoadingCard />);
  (async () => {
    const weather = await fetchWeather(/* ... */);
    ui.done(<WeatherCard data={weather} />);
  })();
  return ui.value;
}

export const AI = createAI({ actions: { submit } });

사용자가 메시지를 보내면 텍스트가 아니라 React 컴포넌트가 스트림된다.

장점

단점

4장 · Tool Use 상태의 시각화

Agent가 여러 툴을 순차·병렬 호출할 때, 사용자에게 무엇을 하는지 보여줘야 한다.

3단계 시각화

(1) Planning 단계

(2) Execution 단계

(3) Completion 단계

실제 패턴

ChatGPT Search / Deep Research

Perplexity

Cursor

Claude (Anthropic)

핵심 원칙

5장 · 불확실성·환각의 시각화

신뢰 등급 3단계

(1) 확실

(2) 추정

(3) 불확실/경고

출처 표시

인라인 각주

Hover Card

Source Sidebar

환각 방어 UX

6장 · 대화형 인터페이스 설계

2022-2023은 "모두가 채팅 UI". 2025년은 목적에 맞는 UX로 분화.

채팅 UI가 적합한 경우

채팅 UI가 부적합한 경우

2025년 주요 UX 패턴

(1) Composer + Chat

(2) Inline AI

(3) Canvas / Artifacts

(4) Agent Console

(5) Commander Palette

7장 · Feedback과 Correction 패턴

AI 제품의 성숙도는 "틀렸을 때 어떻게 고치는가" 로 결정된다.

기본 피드백 3개

고급 피드백

Correction UX 원칙

(1) 취소·뒤로가기 쉬워야

(2) 잘못된 부분만 고치게

(3) 학습을 위한 피드백

대표 구현

Cursor

Linear Magic

Notion AI

8장 · Human-in-the-loop Agent UX

왜 HITL이 중요한가

Agent가 자율적으로 결정·실행하면 위험:

해법: 중요 결정에 사람의 승인을 끼워넣는다.

승인 UX 패턴

(1) Preview + Confirm

(2) Graduated Trust

(3) Policy-Gated

(4) Interrupt & Resume

실전 구현 (LangGraph 예)

const graph = new StateGraph(State)
  .addNode('plan', plannerNode)
  .addNode('human_approval', humanApprovalNode)  // 대기 노드
  .addNode('execute', executorNode)
  .addEdge('plan', 'human_approval')
  .addConditionalEdges('human_approval', (state) =>
    state.approved ? 'execute' : 'plan'
  );

2025 트렌드

9장 · Progressive Disclosure와 AI

정보를 필요할 때 펼쳐 보여주는 전통적 UX 패턴. AI와 만나 강력해진다.

예시

Claude Artifacts

Perplexity Sources

GitHub Copilot Chat

원칙

10장 · 에러 UX와 복구

에러 종류

(1) Rate Limit / Usage Limit

(2) Tool Execution Failure

(3) Content Policy Violation

(4) Model/Network Timeout

Retry UX

오류 방지

11장 · 2025년 AI 제품 UX 벤치마크

ChatGPT (OpenAI)

Claude (Anthropic)

Perplexity

Cursor (IDE AI)

Claude Code (Anthropic CLI)

Notion AI

Linear Magic

v0 by Vercel

Bolt.new / Lovable

Granola·Otter·Fireflies

12장 · Generative UI 실전 — "영화 추천 챗봇"

요구사항

설계

Step 1: Tool 정의

const tools = {
  searchMovies: {
    description: 'Search movies by genre/query',
    parameters: z.object({ query: z.string() }),
    execute: async ({ query }) => await tmdbSearch(query),
  },
  getMovieDetails: {
    description: 'Get movie details by id',
    parameters: z.object({ id: z.string() }),
    execute: async ({ id }) => await tmdbDetails(id),
  },
};

Step 2: UI 컴포넌트 매핑

function renderToolResult(name: string, result: any) {
  if (name === 'searchMovies') return <MovieGrid movies={result} />;
  if (name === 'getMovieDetails') return <MovieDetails data={result} />;
  return null;
}

Step 3: 스트리밍 통합

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  tools,
  toolChoice: 'auto',
});

Step 4: UX 디테일

13장 · 다음 글 예고 — Season 6 Ep 4: "Motion·애니메이션의 새 시대"

UI 요소가 생기는 방법을 논했다면 다음은 UI가 움직이는 방법. Ep 4은 2025 모션 디자인.

"정지된 UI는 죽은 UI다. 적절한 모션이 제품을 살린다."

다음 글에서 만나자.

에필로그 · 체크리스트 12

  1. AI 응답이 Streaming으로 토큰 단위 렌더되는가?
  2. TTFT(첫 토큰 노출)가 1초 미만인가?
  3. Stop·Regenerate·Edit 가 모든 응답에 제공되는가?
  4. Tool Use 결과가 Generative UI 컴포넌트로 렌더되는가?
  5. Agent 실행 중 진행 상황이 시각적으로 드러나는가?
  6. 출처·신뢰 등급이 명확히 표시되는가?
  7. 민감 액션(결제·삭제)에 Human-in-the-loop 승인이 있는가?
  8. 부분 수정·재생성 UX가 제공되는가?
  9. 에러·Timeout 복구 경로가 명확한가?
  10. 모바일에서도 동일한 품질의 UX를 제공하는가?
  11. 접근성 (키보드·스크린리더·모션 감소)이 고려되는가?
  12. 피드백 데이터가 모델 개선·평가에 활용되는가?

"AI는 도구이고, UX는 그 도구를 사람이 쓸 수 있게 만든다. 최고의 AI 제품은 '마법처럼' 느껴지지만, 실제론 수많은 UX 디테일의 집합이다."

— Season 6 Ep 3, Fin.

원문 보기: https://www.youngju.dev/blog/culture/2026-04-15-ai-native-ui-generative-ux-complete-guide-streaming-ui-tool-use-rendering-ai-sdk-vercel-langchain-agent-human-in-the-loop-deep-dive-guide-2025

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다