Claude 블로그 되짚어보기 #97 — Inline Visuals, Generative UI 시대 (2026)

원문 정보

• 제목: Claude builds interactive visuals right in your conversation
• 링크: claude.com/blog/claude-builds-visuals
• 발행: 2026년 3월 12일 (4월 22일 Cowork 확장)
• 카테고리: Claude Apps / Education, Productivity, Work, Learning

글의 요지

Claude가 대화 안에 inline 시각화 생성. 차트, 다이어그램, 인터랙티브 visualization. Artifacts와 다름 — ephemeral (대화 진화 따라 변경/사라짐), inline (side panel X), 다운로드 X. HTML + SVG 생성 (이미지 생성 X). 2025년 가을 "Imagine with Claude" preview의 정식 버전. 모든 plan beta.

Artifacts vs Inline Visuals — 핵심 구별

본문 인용:

"Claude's conversations already include artifacts: permanent tools and documents created by Claude, designed to be shared or downloaded as more polished work. By contrast, these charts, diagrams and visualizations serve a different purpose: Claude builds them to aid users' understanding as it's discussing the topic at hand. They appear in-line, rather than in a side panel, and they're temporary—they change or disappear as the conversation evolves."

Artifacts (이전):

• 영구 (저장 가능)
• Side panel
• 다운로드 가능
• "공식 결과물"

Inline Visuals (이 글):

• 일시적 (대화 따라 변화)
• 인라인 (대화 안)
• 다운로드 X
• "이해 보조"

사례

본문이 제시:

• 복리 (compound interest) — 시간별 곡선
• 주기율표 — 클릭 가능 인터랙티브
• 공항 패턴 — 비행 다이어그램
• 레시피 — 재료 + 단계 카드
• 날씨 — 시각 위젯

작동 방식 (Miles K., Medium 분석)

"It is generating raw HTML and SVG on the fly, in response to the specific prompt, and rendering it in a sandboxed iframe. A hook called widgetRenderer receives the model's output and handles the rendering. A ResizeObserver inside the iframe reports the content height back to the parent window so the visual scales seamlessly within the conversation."

(prompt에 raw HTML + SVG 즉석 생성, sandboxed iframe 렌더링. widgetRenderer가 받음. ResizeObserver가 높이 보고)

핵심 단계:
1. Inference time routing — Claude가 결정: text? tool? visual?
2. Visual 선택 시: HTML + SVG 생성
3. Sandboxed iframe 렌더링
4. ResizeObserver = 동적 크기 조정

이게 Generative UI 패러다임:

• 정적 chart 라이브러리 X
• pre-built 차트 X
• 즉석 생성된 코드

MCP App이 아니다 (오해 정정)

Miles K. 인용:

"Several people on X have called the Visualizer an MCP app. That framing deserves a direct response because it is causing real confusion. ... MCP is a protocol for tool connectivity. It defines how a model connects to external tools, data sources, and services through a standardized interface. What Claude's Visualizer is doing operates at a different layer entirely: the model decides at inference time how to respond."

(Visualizer = MCP app 아님. MCP는 "외부 도구 연결". Visualizer는 "inference time 응답 결정" — 다른 layer)

추가 출력 형식 (같은 발표)

본문 외:

• Recipe cards — 재료 + 단계
• Weather visuals — 위젯
• Multiple choice inputs — 인터랙티브 질문
• Figma, Canva, Slack — 외부 앱 통합

경쟁 비교

The New Stack 인용:

• OpenAI (며칠 전): "Dynamic Visual Explanations" — 수학·과학 학생 중심
• Google Gemini Ultra ($200/월, 2025년 12월): 인터랙티브 차트
• Anthropic (이 글): 모든 plan 무료

---

2026년에 다시 읽으며 — 내가 본 것

1. "Generative UI = 새 패러다임"

이 글의 가장 깊은 통찰 — AI 출력 형식의 본질 변화.

전통 패러다임:

• AI = text → text 함수
• 사용자 = text 읽음
• 시각화 = 별도 도구

새 패러다임 (Generative UI):

• AI = text → HTML/SVG/code 생성
• 사용자 = 인터랙티브 위젯과 상호작용
• "읽기" X, "탐색" O

비교 — UI 진화:

• 1990s: HTML (정적)
• 2000s: AJAX (동적)
• 2010s: SPA (앱-like)
• 2020s: AI-Generated UI (즉석)

각 wave가 "인터페이스가 무엇" 의 정의를 변경.

2. "Inference-Time Routing" 의 의사결정

Miles K.가 강조한 핵심:

"The hard part is the routing decision Claude makes at inference time: should I respond with text, call a tool, or generate a visual component? And if a visual, which kind?"

(하드 부분 = 추론 시 결정: text? tool? visual? visual이면 어떤 종류?)

이게 "AI = 의사결정자" 의 정확한 사례:

• 텍스트가 충분한가?
• 시각이 더 나은가?
• 어떤 시각?
• 인터랙티브 vs 정적?

이 결정 자체가 AI 능력의 새 차원:

• 이전: "답 생성"
• 이제: "답의 형식 + 답" 둘 다

3. "Imagine with Claude" 의 1년 진화

타임라인:

• 2025년 가을: "Imagine with Claude" preview (실험)
• 2026년 3월 12일: 이 글 (정식 beta)
• 2026년 4월 22일: Cowork 확장
• 2026년 4월 17일: Claude Design (별도 product)

각 단계:
1. 실험: 가능성 시그널
2. Beta: 광범위 사용자
3. 확장: enterprise (Cowork)
4. 분리: 전용 product (Claude Design)

이 진화가 "실험 → 정식 → 확장 → 분리" 의 Anthropic 패턴.

4. "OpenAI vs Anthropic 시각화" 의 시장 분화

The New Stack 인용:

• OpenAI: 수학·과학 학생 중심 (좁은)
• Google: $200/월 (비싼)
• Anthropic: 모든 plan 무료 (넓은)

이 분화의 의미:

• OpenAI: 교육 segment
• Google: premium segment
• Anthropic: mass market + enterprise

비교 — 가격 모델:

• Google = exclusivity
• Anthropic = accessibility
• OpenAI = vertical 특화

Anthropic 전략:

• "무료로 광범위 채택"
• → 사용자 수 증가
• → 학습 데이터 + feedback
• → 모델 개선
• → 더 좋은 시각화

이 "free + breadth" 가 long-term 우위 동력.

5. "Claude Design 분리" 의 후속

본문 외 — Claude Design (2026년 4월 17일):

• 별도 product (Anthropic Labs)
• 디자인, 프로토타입, 슬라이드, one-pager
• "디자이너 도구"

이 분리:

• 일반 chat = inline visuals
• 전문 작업 = Claude Design
• 다른 가격 모델

비교 — Adobe Photoshop vs Canva:

• Pro tool (Photoshop) vs 일반 (Canva)
• 다른 시장
• 다른 가격

Anthropic도 같은 분화. Visualizer (일반) + Design (Pro).

6. "Sandboxed iframe" 의 보안 디자인

Miles K.가 강조한 디자인:

• HTML/SVG 임의 코드
• → sandboxed iframe
• → 메인 앱 격리
• 보안 보장

이게 Production AI 보안의 정석:

• AI = 신뢰할 수 없는 출력
• 격리 = 안전
• 사용자 = 안심

비교 — 다른 시도:

• AI 출력 직접 실행 (위험)
• AI 출력 → 검증 → 실행 (느림)
• Sandboxed iframe (Anthropic) = 즉시 + 안전

7. "30초 생성 시간" 의 트레이드오프

The New Stack 비판:

"Creating these visuals can take a while. Users are accustomed to finding answers in seconds, especially if they are just looking for an image. When it often takes half a minute to create a graphic in Claude, maybe doing a basic search will feel like a better option."

(생성 시간 ~30초. 사용자는 초 단위 답에 익숙. 단순 이미지면 검색이 더 나음)

이 nuance:

• 단순 정보: 검색이 빠름
• 복잡 시각화: AI가 가치
• 분명한 use case 차이

비교:

• "Rome 사진?" → Google 이미지 (빠름)
• "복리 인터랙티브 시각화?" → Claude (가치)

이 "빠른 vs 깊은" 의 use case 분리가 자연스런 시장 진화다.

8. "Recipe + Weather" 의 specialized 출력

본문 강조:

• Recipe = 재료 카드 + 단계
• Weather = 시각 위젯
• 사전 정의 형식

이게 "AI 출력의 specialization" :

• 일반 text X
• 도메인별 최적 형식
• 사용자 인지 부담 ↓

비교 — 일반 ChatGPT:

• 모든 답 = text
• 사용자가 "읽고 추출"
• 인지 부담

Anthropic:

• "recipe면 카드"
• "weather면 위젯"
• 인지 부담 ↓

이 "답의 형식이 답의 일부" 라는 통찰이 "AI UX 디자인" 의 새 원칙이다.

9. "Compound Interest = Calculator without Ads"

The New Stack의 흥미로운 비유:

"It'll create an interactive chart that's pretty much what you would find if you searched for a compound interest calculator on Google — just without the ads, auto-playing videos, and cookie banners."

(Google에서 "compound interest calculator" 검색 = 광고 + 자동 재생 비디오 + cookie banner. AI = 광고 없는 calculator.)

이게 "AI vs 웹" 의 사용자 경험 비교:

• 웹: 광고 모델 = SEO + spam
• AI: 직접 생성 = clean

미래 시나리오:

• "수많은 calculator 사이트" 가치 ↓
• AI가 즉석 생성
• ad-supported 인터넷 모델 위협

이게 "AI = 인터넷 ad 모델 위협" 의 정확한 사례다.

10. "OpenGenerativeUI Reverse Engineering" 의 표준 형성

Miles K. 인용:

• CopilotKit 팀이 reverse engineer
• OpenGenerativeUI 라이브러리 출시
• 다른 회사도 같은 패턴 사용 가능

이게 표준 정의 → 반향 패턴:
1. Anthropic이 출시
2. 오픈소스 reverse engineer
3. 다른 회사 적용
4. 표준 정착

비교:

• MCP (#41 글): Anthropic 표준 → 산업
• Skills (#75 글): Anthropic 패턴 → 산업
• Generative UI (이 글): Anthropic 출시 → reverse → 산업

각 "표준 정의자" 위치 = 시장 우위.

11. "Multiple Choice Inputs" 의 conversation 진화

본문 외 — Multiple choice 인터랙티브 질문:

• AI: "어떤 옵션?" 질문
• 사용자: 클릭 (typing 안 함)
• 빠른 답

이게 "대화 = text only" 시대의 끝:

• 이전: 모든 답 = 타이핑
• 이제: 클릭, 선택, 인터랙션
• "빠른 진화"

비교 — 인간 대화:

• "이거 vs 저거?" — 손짓
• "왼쪽?" — 끄덕임
• non-verbal 시그널

AI 대화도 같음. non-text 시그널 가속.

---

마무리

이 글은 "인터랙티브 차트 추가" 같지만, 실제로는 AI 출력 형식의 본질 변화다.

• Generative UI: 새 패러다임
• Inference-time Routing: AI 의사결정
• Imagine with Claude → Design: 1년 진화
• Free + Breadth: 시장 전략
• Sandboxed iframe: 보안 디자인
• 30초 트레이드오프: use case 분리
• Recipe + Weather: specialized 형식
• Calculator without Ads: 웹 모델 위협
• OpenGenerativeUI: 표준 형성
• Multiple Choice: non-text 진화

2026년 3월 12일 시점은 "AI = text 응답" 시대가 끝난 시점이다. AI = 동적 인터페이스 생성의 정착.

흥미로운 건 이 글이 AI 인터페이스의 거대 진화 라는 점이다:

• 2022: ChatGPT (text)
• 2024: Artifacts (영구 결과)
• 2026: Inline Visuals (일시 인터페이스)

각 layer가 "AI = 무엇" 의 정의 확장:

• AI = 답
• AI = 도구
• AI = 인터페이스 자체

이 마지막이 가장 깊은 변화다. AI가 자기 인터페이스를 생성.

비교 — OS 진화:

• DOS: command line
• Mac/Windows: GUI
• iOS: touch
• AI: dynamic generative UI

각 wave = 거대 산업 변화.

다음 글 (#98): CSV #20 — 다음 발표. 이 inline visuals 후 어떤 진화? AI 인터페이스의 다음 layer가 보인다.