Bound GenUI™ Engine: 엔터프라이즈를 위한 안전한 생성형 UI 플랫폼

핵심 공학 원칙: 생성 계약 (Contract)
핵심 슬로건: “모델이 HTML이나 스크립트를 쓰면, 그 출력은 브라우저에서 절대 실행되지 않습니다.”

1. 개요 (Overview)

전통적인 대화형 AI 인터페이스는 긴 텍스트 답변이나 마크다운 표로 정보를 제공하여 사용자의 인지 피로를 가중시킵니다. 반면, 최근 시도되는 동적 코드 생성(Code-generating UI) 방식은 모델이 HTML, Tailwind 스타일, Vue/React 컴포넌트 코드를 직접 생성하게 함으로써 XSS(크로스 사이트 스크립팅), Prototype Pollution, auto-import 우회 공격이라는 치명적인 보안 구멍을 발생시킵니다.

Bound GenUI™ Engine은 이 두 극단의 한계를 완전히 해결합니다. 모델은 오직 사전 정의된 Zod 스키마에 부합하는 UiTurn JSON 명세만을 생성하며, 클라이언트는 메모리에 사전 등록된 11대 화이트리스트 컴포넌트 객체 맵을 통해서만 UI를 안전하게 렌더링합니다.

2. 닫힌 양방향 피드백 루프 (Bidirectional Closed Loop)

Bound GenUI™ Engine의 핵심 차별점은 일회성 화면 렌더링에 그치지 않고, 생성된 UI 상에서의 모든 사용자 인터랙션이 모델의 다음 추론으로 안전하게 순환된다는 점입니다.

sequenceDiagram
    autonumber
    actor User as 사용자 (브라우저)
    participant Client as Bound Client Renderer
    participant Gate as Server (authorizeUiEvent)
    participant LLM as Model (Strict Outputs)

    User->>Client: "미채점 학생 과제 현황 및 평가 요약 보여줘"
    Client->>Gate: POST /api/chat (user_text)
    Gate->>LLM: generateTurn (Strict Schema 주입)
    LLM-->>Gate: UiTurn JSON (ComparisonTable + MetricStrip)
    Gate-->>Client: 서브트리 점진적 스트리밍 렌더링
    Note over Client: 화이트리스트 11대 컴포넌트만 안전하게 마운트

    User->>Client: ComparisonTable 특정 학생 행 클릭 (row_select)
    Client->>Gate: POST /api/chat { type: "user_action", event: UiEvent }
    Note over Gate: [인가 검증: authorizeUiEvent]<br/>1) 세션 및 generationId 일치 확인<br/>2) 직전 턴 컴포넌트 실존 여부<br/>3) 허용 액션 및 rowId 일치 확인
    alt 인가 실패
        Gate-->>Client: 403 EVENT_NOT_AUTHORIZED
    else 인가 성공
        Gate->>LLM: 선택된 학생의 피드백 폼 및 점수 입력 UI 생성 요청
        LLM-->>Client: 후속 맞춤형 UI 턴 렌더링
    end

3. 핵심 아키텍처 사양 (Core Specifications)

3.1 11대 사전 승인 컴포넌트 카탈로그

문자열 컴포넌트 이름을 동적 마운트하지 않고, 컴포넌트 생성 함수가 매핑된 ComponentRegistryMap을 통해 안전한 컴포넌트만 인스턴스화합니다.

레이아웃: Stack, Grid, Card
데이터 시각화: ComparisonTable, MetricStrip, DiagramCard
업무 실행: ActionBar, TodoList, MorningBriefing, FinancialSimulator, MarkdownText

3.2 트리 DoS 방어 체계 (`TREE_LIMITS`)

악의적인 프롬프트 인젝션으로 인해 모델이 수천 개의 중첩 컴포넌트를 출력하여 브라우저 메모리를 고갈시키는 트리 DoS를 원천 차단합니다.

MAX_DEPTH: 4 (컴포넌트 중첩 최대 깊이)
MAX_NODES: 40 (화면당 렌더링 가능한 총 노드 수)
MAX_ACTIONS_PER_NODE: 8 (노드당 바인딩 가능한 액션 수)
한도 초과 시 즉각적으로 경고 배너 및 안전한 Fallback 노드로 자동 대체.

4. 도입 기대 효과 및 정량 메트릭스

보안 무결성 100%: 임의 스크립트 실행 및 Nuxt/Vue auto-import 우회 탈취 0건 달성.
279개 단위/통합 테스트 100% 통과: 2.0초 이내에 완료되는 견고한 자동화 테스트 스위트 보유.
업무 처리 시간 70% 단축: 텍스트 채팅으로 질문을 주고받는 대신, 클릭 한 번으로 복합 업무가 완결되는 인터랙티브 UI 경험 제공.

Bound GenUI™ Engine