Chaos and Order

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

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

프롤로그 · 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) 응답 시간의 변동성**

- 쿼리마다 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';

export function Chat() {

const { messages, input, handleInputChange, handleSubmit } = useChat();

return (

{messages.map(m => (

))}

);

}

서버:

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';

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

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.