Chaos and Order

💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

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

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

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

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

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

이번 글은 그 설계법.

1장 · AI UX의 본질적 난점

일반 UX와 다른 4가지

(1) 응답 시간의 변동성

쿼리마다 0.5초 ~ 30초 편차
로딩 스피너만 보여주는 건 최악

(2) 결과의 불확실성

같은 입력에 다른 출력
"이 답이 맞나?" 의심이 기본

(3) 환각(Hallucination) 리스크

자신감 있게 틀린 정보 제시
신뢰의 계층화 필요

(4) 작업의 장기성

Agent가 여러 단계 실행
중간 단계를 어떻게 보여주느냐가 UX의 반

그래서 필요한 것

점진적 피드백 (Progressive Feedback)
취소·수정 가능성 (Correction Paths)
출처·근거 표시 (Attribution)
신뢰도 시각화 (Uncertainty Viz)
사용자 제어권 (User Control)

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

왜 Streaming?

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

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

완성 시간은 같아도 첫 토큰 노출 시간(TTFT)이 짧으면 사용자는 "빠르다"고 느낀다
읽기 속도와 생성 속도가 맞으면 최적

기술 스택

(1) Server-Sent Events (SSE)

HTTP 한 방향 스트림
가장 널리 쓰임, 브라우저 기본 지원

(2) WebSocket

양방향. 복잡 Agent·협업형 앱에 적합

(3) HTTP/2·HTTP/3 Streaming

다중 스트림·헤더 압축

(4) React Server Component Streaming

Next.js·RR7에서 내장 지원
<Suspense> 경계로 조각 전송

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 디테일

타이핑 커서 깜빡임 (생성 중 표시)
부분 Markdown 렌더 — 미완성 코드 블록도 우선 렌더
자동 스크롤 (사용자가 읽던 곳이 아니면 건드리지 말기)
중단(Stop) 버튼 — 사용자가 멈출 수 있음
재생성(Regenerate) — 원하지 않는 답 다시

3장 · Tool Use와 Generative UI 렌더링

전통적 Tool Use UX

LLM이 JSON 툴 호출 → 서버가 실행 → 결과 텍스트로 삽입
화면에는 여전히 "텍스트"

Generative UI UX

툴 결과를 UI 컴포넌트로 렌더
예: "날씨 알려줘" → 날씨 카드 컴포넌트 렌더
예: "비행기 검색해줘" → 항공편 리스트·필터

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 컴포넌트가 스트림된다.

장점

사용자가 상호작용 가능 (날씨 카드 클릭 → 세부)
정보 밀도 훨씬 높음
브랜드 일관성 (자체 디자인 시스템 사용)

단점

구현 복잡도 ↑
모델이 언제 어느 UI를 호출할지 Prompt 설계 필요
Fallback UI 필수 (에러·Tool 실패)

4장 · Tool Use 상태의 시각화

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

3단계 시각화

(1) Planning 단계

"당신의 질문을 3단계로 나눠 해결하겠습니다"
체크리스트 스타일

(2) Execution 단계

"현재 2단계 실행 중: 웹 검색"
단계별 스피너, 완료 시 체크

(3) Completion 단계

"5개 결과를 찾았습니다"
결과 요약 + 세부 펼치기

실제 패턴

ChatGPT Search / Deep Research

상단에 "사용한 소스 X개"
중간에 진행 상황 (검색 중·추론 중·작성 중)
완료 후 출처 링크

Perplexity

스텝별 타임라인 표시
인라인 인용 각주 [1] [2]

Cursor

파일 편집 시 diff 뷰
승인·거부 버튼

Claude (Anthropic)

Artifacts: 긴 코드·문서를 별도 패널
최근 Projects·Deep Research 기능

핵심 원칙

절대 블랙박스로 두지 말 것 — 10초 이상 아무것도 안 보이면 사용자 이탈
취소 가능성 — "이 Agent를 중지"
단계별 미리보기 — 완료 전에도 중간 결과 노출

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

신뢰 등급 3단계

(1) 확실

출처가 명확, 검증된 사실
일반 텍스트

(2) 추정

AI의 해석·요약
이탤릭 or 옅은 색
"AI의 해석입니다" 배지

(3) 불확실/경고

최신 정보 부재 or 낮은 신뢰도
경고 아이콘·색 (주황/빨강)
"정확성을 검증해주세요" 문구

출처 표시

인라인 각주

[1] [2] 스타일, 클릭 시 출처
Perplexity·You.com 표준

Hover Card

링크 hover 시 미리보기

Source Sidebar

응답 옆 별도 패널

환각 방어 UX

출처 없는 주장 강조 (background 다르게)
"모를 수도 있음" 공식 표현: "확인되지 않았지만..."
숫자·날짜·고유명사는 별도 하이라이트 (환각 잦은 영역)

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

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

채팅 UI가 적합한 경우

탐색적 질문 (연구·학습)
맥락이 길고 누적되는 작업
답이 불분명한 질문

채팅 UI가 부적합한 경우

정해진 워크플로우 (폼 + AI 도움)
빈번한 반복 작업 (단축키 UX)
정확한 명령 (에이전트 CLI)

2025년 주요 UX 패턴

(1) Composer + Chat

Cursor·Claude Code 스타일
에디터·파일 트리 + 사이드 AI 패널

(2) Inline AI

Notion AI·Linear·GitHub Copilot
텍스트 커서 위치에서 / or 단축키 호출

(3) Canvas / Artifacts

Claude Projects, ChatGPT Canvas
좌: 대화, 우: 편집 가능 산출물
장문 작성·코드 작업에 최적

(4) Agent Console

Devin·OpenHands
파일 시스템·브라우저·터미널 전부 보여줌
"AI와 함께 어깨 너머" 느낌

(5) Commander Palette

Cmd+K 스타일 (Linear·Arc·Raycast)
빠른 AI 명령 입력

7장 · Feedback과 Correction 패턴

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

기본 피드백 3개

👍 / 👎 (thumbs up/down)
Regenerate (다시 시도)
Copy (복사)

고급 피드백

Edit Response — AI 답을 사용자가 수정
Explain why — 왜 이렇게 답했는지 AI 설명
Change tone — 더 간결하게·더 상세하게
Continue writing — 이어서 작성

Correction UX 원칙

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

Ctrl+Z (로컬), 또는 채팅 내 Edit·Delete

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

전체 재생성 vs 부분 수정 옵션
코드라면 diff 리뷰 UI

(3) 학습을 위한 피드백

"뭐가 잘못됐나요?" 구조화된 피드백
모델 개선·평가 데이터로 활용

대표 구현

Cursor

파일 편집 시 "Accept / Reject / Reject All"
부분 수락 가능

Linear Magic

AI 초안 생성 → 인라인 편집 → 확정
필드별 수용·거부

Notion AI

"Continue·Improve·Shorter·Longer" 옵션
블록 단위 수정

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

왜 HITL이 중요한가

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

결제·삭제·외부 호출 = 비가역
접근 권한·민감 정보
환각이 실제 피해로

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

승인 UX 패턴

(1) Preview + Confirm

"이메일을 이렇게 보내려 합니다" → 확인·수정·취소
기본 구조

(2) Graduated Trust

처음엔 모든 액션 승인, 신뢰 쌓이면 자동화 확대
사용자 선택권

(3) Policy-Gated

특정 카테고리(결제·삭제·외부)만 승인 필요
안전한 작업은 자율

(4) Interrupt & Resume

Agent가 작업 중단·사용자 개입·재개

실전 구현 (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 트렌드

Model Context Protocol (MCP) 표준화 → Claude·Cursor·Codex CLI에서 공통
Anthropic Computer Use (2024 10월) — 에이전트가 브라우저·데스크톱 조작, 승인 게이트 필수
OpenAI Operator (2025 초) — 유사 기능, 안전 장치·이상 탐지 강화

9장 · Progressive Disclosure와 AI

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

예시

Claude Artifacts

대화는 가벼운 요약
세부 산출물은 별도 패널 (펼쳐 보기)

Perplexity Sources

응답은 본문, 각주 클릭 시 출처 확장

GitHub Copilot Chat

코드 제안 시 간단 표시, 상세 설명은 "Why?" 클릭

원칙

요약이 기본, 세부는 선택
단계별 심화: 초보자 → 고급자 경로
밀도 조절: 한 화면에 모든 것 X

10장 · 에러 UX와 복구

에러 종류

(1) Rate Limit / Usage Limit

"오늘 사용량이 다 됐습니다" — 명확한 안내 + 업그레이드 링크

(2) Tool Execution Failure

"웹 검색에 실패했습니다. 재시도하시겠습니까?"
부분 성공 표시 (일부 Tool은 성공)

(3) Content Policy Violation

"이 요청은 처리할 수 없습니다" — 이유 간략히, 대안 제시

(4) Model/Network Timeout

"시간 초과. 더 간단한 질문으로 시도해주세요"

Retry UX

기본 자동 retry (1-2회) + 사용자 수동
모델 Fallback (GPT-4 → Claude → 소형 모델)
상태 유지 (이전 대화 손실 없음)

오류 방지

Input Validation: 너무 짧은·모호한 입력 경고
Token Budget 경고: "이 긴 파일을 처리하려면..."
Cost Preview: "예상 비용: $0.05"

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

ChatGPT (OpenAI)

Streaming·Canvas·Search·Memory·Voice
가장 넓은 기능, 다소 무거움
Deep Research 모드 2025 초 도입

Claude (Anthropic)

Artifacts로 작업 분리
Projects로 컨텍스트 관리
Style matching 톤 맞춤
개발자·writer 팬덤

Perplexity

Answer Engine 포지셔닝
인라인 출처·사이드바 소스
Pro Search·Focus (Academic·YouTube·Reddit)

Cursor (IDE AI)

Composer 다중 파일 편집
Tab 예측의 정확도 최고
shadcn 레벨의 "복사해서 쓰는" 방향

Claude Code (Anthropic CLI)

터미널 기반 에이전트
CLAUDE.md·MCP 표준화
시니어 개발자 생산성 혁신

Notion AI

인라인 호출·블록 단위 조작
워크스페이스 전체 검색과 결합

Linear Magic

티켓 자동 작성·정리·우선순위
작업 플로우와 자연스러운 통합

v0 by Vercel

프롬프트 → UI 생성
shadcn 컴포넌트로 바로 출력
디자인→코드 격차 해소

Bolt.new / Lovable

프롬프트 → 풀스택 앱 자동 생성
배포까지 한 번에

Granola·Otter·Fireflies

회의 자동 요약·Action Item
통합 플러그인으로 캘린더 연동

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

요구사항

사용자가 "SF 영화 추천해줘"
AI가 영화 5개 카드로 응답
각 카드 클릭 시 세부 정보 (Tool 2차 호출)
세부에서 "트레일러 보기" 버튼

설계

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 디테일

Tool 실행 중 Skeleton 카드
이미지 Lazy load
카드 Hover 시 빠른 정보 미리보기
"다른 추천도 보여줘" follow-up 버튼

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

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

View Transitions API 실전 (Chrome·Safari·Firefox 2024-2025)
Motion One, Framer Motion, GSAP 비교
Svelte Motion·Solid Motion
CSS Animations 2025 (scroll-driven, timeline-scope)
애니메이션의 접근성 (reduced-motion)
성능·60fps·GPU·CSS Containment
모바일 제스처 애니메이션 (React Spring, Motion Layout)
Apple/Google 디자인 언어에서 Motion의 역할
한국 서비스의 Motion 문화 (토스 사례)
AI 생성 애니메이션 도구

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

다음 글에서 만나자.

에필로그 · 체크리스트 12

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

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

— Season 6 Ep 3, Fin.