에이전트 기반 UI 시스템 아이디어 정리

share, idea · 2026-3-5

← 리스트로

Agent-Driven UI with StateSurface

Concept Proposal

1. Overview

이 문서는 StateSurface를 기반으로 한 Agent-driven UI 아키텍처를 정리한다.
핵심 아이디어는 AI Agent가 UI 상태(state)를 설계하고 업데이트하며, StateSurface runtime이 이를 DOM으로 투영(projection)하는 구조이다.

이 모델에서는 AI가 직접 HTML을 생성하지 않고 Surface 상태 프로토콜을 통해 UI를 제어한다.

2. Core Idea

기존 AI UI 모델:


AI → HTML 생성 → DOM

문제:

  • DOM 구조 불안정
  • 스타일 충돌
  • UI 깨짐
  • 유지보수 어려움

StateSurface 기반 모델:


AI → State Protocol → StateSurface Runtime → DOM Projection

AI는 상태(state)와 surface 선택만 수행하며 실제 UI 렌더링은 runtime이 담당한다.

3. System Architecture

전체 구조:


User
↓
AI Agent
↓
Web Harness (Context + Surface Registry)
↓
StateSurface Runtime
↓
DOM Projection

구성 요소:

AI Agent

  • 사용자 의도 분석
  • surface 선택
  • state 업데이트

Web Harness

  • Agent와 UI 사이의 오케스트레이터
  • context 제공
  • surface registry 제공
  • state protocol 관리

StateSurface Runtime

  • state → DOM projection 수행
  • UI 안정성 유지

4. Surface-Based UI Model

UI는 surface 단위로 구성된다.

예:

<body>
  <h-state type="sales-chart"></h-state>
  <h-state type="summary-panel"></h-state>
  <h-state type="region-table"></h-state>
</body>

각 surface는 UI projection slot 역할을 한다.

Agent는 surface를 생성하지 않고 활성화 및 상태 업데이트만 수행한다.

5. Surface Registry

Agent는 사용 가능한 UI surface 목록을 알고 있어야 한다.

예:

{
  "surfaces": [
    {
      "type": "chart",
      "description": "visualize numeric data",
      "input": "number[]"
    },
    {
      "type": "table",
      "description": "display structured data"
    },
    {
      "type": "summary",
      "description": "text summary"
    }
  ]
}

Agent는 이 정보를 기반으로 적절한 UI surface를 선택한다.

6. State Protocol

Agent는 UI 상태를 직접 변경한다.

예:

{
  "surface": "sales-chart",
  "patch": {
    "data": [120, 150, 180]
  }
}

Runtime 처리:

state update
↓
surface projection
↓
DOM update

7. Streaming UI Updates

Agent reasoning 과정에서 UI는 점진적으로 업데이트될 수 있다.

Agent reasoning
↓
state patch stream
↓
UI updates

예:

1s → chart 생성
2s → summary 추가
3s → prediction 표시

사용자는 점진적으로 완성되는 UI를 경험한다.

8. Tailwind-Based Styling

Agent가 UI 스타일을 쉽게 조합할 수 있도록 Tailwind CSS와 같은 utility CSS 시스템을 활용할 수 있다.

예:

<h-state
  type="sales-chart"
  class="col-span-6 p-4 bg-white rounded-xl shadow"
></h-state>

장점:

  • CSS cascade 이해 필요 없음
  • 스타일을 token 기반으로 조합 가능
  • 디자인 시스템 유지 가능

9. Agent Layout Composition

Agent는 layout도 조합할 수 있다.

예:

{
  "layout": "grid",
  "surfaces": [
    { "type": "sales-chart", "class": "col-span-8" },
    { "type": "summary-panel", "class": "col-span-4" }
  ]
}

Runtime이 이를 기반으로 dashboard UI를 구성한다.

10. Harness Responsibilities

웹 기반 하네스는 다음 역할을 수행한다.

Context Manager

Agent에게 현재 상태 전달

{
  "userGoal": "analyze monthly sales",
  "activeSurfaces": ["sales-chart"],
  "state": {
    "sales": [120,150,180]
  }
}

Surface Registry

사용 가능한 UI surface 목록 제공

State Protocol

Agent → UI 상태 변경 인터페이스

Streaming Interface

state patch stream 전달

11. Advantages of This Model

UI 안정성

AI가 DOM을 직접 생성하지 않음

Agent-friendly Interface

Agent는 DOM 대신 다음만 이해하면 됨

surface
state
actions

Streaming UI

Agent reasoning과 동시에 UI 업데이트 가능

Design System Compatibility

Tailwind 등 기존 디자인 시스템 활용 가능

12. Conceptual Positioning

StateSurface는 단순 UI 프레임워크가 아니라 다음과 같이 정의할 수 있다.

Agent
↓
Surface Protocol
↓
StateSurface Runtime
↓
DOM Projection

즉,

StateSurface = Agent-compatible UI runtime

또는

Agent-native UI protocol for the web

13. Future Possibilities

이 모델은 다음 방향으로 확장될 수 있다.

Dynamic Surface Creation

Agent가 필요한 UI surface를 구성

Multi-Surface Workspaces

AI dashboard / workspace UI

Agent UI OS

Agent가 UI를 지속적으로 구성하고 업데이트하는 환경

14. Summary

핵심 아이디어:

  • AI는 UI를 직접 생성하지 않는다
  • AI는 surface와 state를 제어한다
  • StateSurface runtime이 DOM으로 투영한다

Architecture:

Agent → State Protocol → StateSurface → DOM

이 모델은 Agentic Web 시대에 안정적인 AI-driven UI 패턴이 될 가능성이 있다.