HTML을 에이전트에게 제공하지 마세요

Source: Dev.to

TL;DR — AI에게 블랙 박스가 아닌 화이트 박스를 제공하라

대부분의 AI 에이전트는 Black Box 방식으로 웹 앱과 상호작용합니다: DOM 덤프나 스크린샷을 소비하고, 무엇을 클릭해야 할지 추측합니다. HTML은 기계용으로 설계된 것이 아닙니다. AI 입장에서는 DOM이 비즈니스 로직이 희미하게 묻혀 있는 잡음에 불과합니다.

이 글은 White Box 접근법을 주장합니다: 애플리케이션의 구조, 규칙, 상태, 유효한 전이 등을 직접 드러내는 Semantic State Layer를 노출합니다. 이는 UI를 대체하는 것이 아니라 전통적인 사용자 인터페이스와 함께 **Intelligence Interface (II)**를 제공하는 것입니다.

직접 사용해 보기 → Manifesto Playground

1. Black Box: AI + 웹 앱의 현재 상황

오늘날 대부분의 팀이 웹 앱에 “AI를 추가”하는 방법은 다음과 같습니다:

• LangChain, AutoGPT 또는 브라우저 자동화를 사용한다
• Playwright 또는 Puppeteer를 구동한다
• DOM이나 스크린샷을 모델에 전달한다
• 클릭해야 할 대상을 모델이 알아내길 기대한다

이것이 Black Box 접근법입니다. 에이전트는 렌더링된 표면만을 보고 나머지를 추론해야 합니다.

DOM 덤프의 문제점은 무엇인가?

<div class="product-name">
  <label>Product Name</label>
  <input type="text" name="name" />
  <span class="error">This field is required.</span>
</div>

에이전트 관점에서:

에이전트는 추측할 수밖에 없습니다. CSS 리팩터링은 모든 것을 깨뜨리고, 레이아웃 변경은 모델을 혼란스럽게 합니다. 로직은 전혀 노출되지 않았으며—시각적인 투영만 존재합니다.

Signal 90 %.

2. White Box: 애플리케이션의 뇌 노출

대안은 White Box 프로토콜입니다. HTML을 보여주는 대신, 엔진은 Semantic Snapshot을 노출합니다 — 이는 에이전트가 직접 읽을 수 있는 애플리케이션 내부 상태의 구조화된 표현입니다.

{
  "topology": {
    "viewId": "product-create",
    "mode": "create",
    "sections": [
      { "id": "basic", "title": "Basic Info", "fields": ["name", "productType"] },
      { "id": "shipping", "title": "Shipping", "fields": ["shippingWeight"] }
    ]
  },
  "state": {
    "form": { "isValid": false, "isDirty": false },
    "fields": {
      "name": {
        "value": "",
        "meta": { "valid": false, "hidden": false, "disabled": false, "errors": ["Required"] }
      },
      "productType": {
        "value": "PHYSICAL",
        "meta": { "valid": true, "hidden": false, "disabled": false, "errors": [] }
      },
      "shippingWeight": {
        "value": null,
        "meta": { "valid": true, "hidden": false, "disabled": false, "errors": [] }
      }
    }
  },
  "constraints": {
    "name": { "required": true, "minLength": 2, "maxLength": 100 },
    "shippingWeight": { "min": 0, "max": 2000, "dependsOn": ["productType"] }
  },
  "interactions": [
    { "id": "updateField:name", "intent": "updateField", "target": "name", "available": true },
    { "id": "updateField:productType", "intent": "updateField", "target": "productType", "available": true },
    { "id": "submit", "intent": "submit", "available": false, "reason": "Name is required" }
  ]
}

이제 에이전트는 다음을 갖게 됩니다:

• Topology – 화면 구조, 섹션, 필드 계층
• State – 현재 값, 유효성, 가시성, 필드별 오류
• Constraints – 필수 여부, 최소/최대, 의존성
• Interactions – 가능한 행동과 일부가 차단된 이유

추측이 없습니다. 추론이 없습니다. 에이전트는 애플리케이션의 뇌를 직접 읽습니다.

3. 실제 사용 사례: “주를 어디서 선택하나요?”

🎮 실제 동작 보기: Manifesto Playground – 필드 값을 변경