통제형 생성 UI

통제형 생성 UI (Controlled generative UI)

생성 UI(generative UI) 스펙트럼에서 통제형(controlled) 생성 UI는 '저자가 통제하는' 맨 끝에 위치해요. 컴포넌트는 여러분이 직접 작성하고, 에이전트는 그중 어떤 것을 렌더링할지, 어떤 데이터를 넘길지만 결정하죠. 에이전트는 마크업을 만들어내지 않아요. 여러분이 만들고 테스트한 고정된 인터페이스 집합에서 하나를 고를 뿐이에요. 이 패턴은 어떤 생성 UI 방식보다 예측 가능성이 가장 높습니다. 모든 컴포넌트가 여러분의 코드베이스에서 나오기 때문에 브랜딩, 레이아웃, 접근성, 동작을 정확히 통제할 수 있고, 에이전트가 표면화하는 모든 것이 이미 리뷰를 통과했음을 보장할 수 있죠. 그 대가로 드는 비용은 엔지니어링 비용이에요. 새 기능마다 미리 작성해둔 컴포넌트가 필요하니까요. 컴포넌트 라이브러리가 경계(boundary)가 되어, 에이전트는 여러분이 배포한 것만 렌더링할 수 있습니다.

출처: LangChain 공식 문서 — controlled-generative-ui

이 접근법을 언제 쓸까요? (When to use this approach)

트래픽이 가장 많고 브랜드가 중요한 서페이스에 통제형 생성 UI를 쓰세요. 출력의 집합이 미리 알려져 있고, 정확성이 참신함보다 중요한 곳이죠. 폼, 확인(confirmation) 흐름, 그리고 엄격한 브랜딩이나 접근성 요구사항이 있는 서페이스가 대표적이에요. 에이전트가 여러분이 예상하지 못한 레이아웃을 조합하길 원할 때, 즉 보조 상호작용의 긴 꼬리(long tail)에서는 스펙트럼을 따라 한 단계 더 나아가 선언형 생성 UI를 쓰면 됩니다.

통제형 생성 UI는 네 가지 기법을 다루는데, 에이전트가 전체 인터페이스를 고르는 것에서 시작해서 프론트엔드가 에이전트 내부 상태에 반응하는 것까지 이어져요.

도구로서의 컴포넌트 (Components as tools)

UI 컴포넌트를 에이전트에게 도구를 노출하듯 노출해요. 각 컴포넌트는 이름(name), 설명(description), 타입이 지정된 속성(typed properties) 집합을 갖고, 에이전트는 응답의 일부로 컴포넌트를 선택하고 데이터를 공급하죠. 프론트엔드는 에이전트의 선택을 실제 구현에 매핑합니다. 이렇게 하면 에이전트의 일이 작아져요. '이 순간에 맞는 사전 승인된 인터페이스'를 고르기만 하면 되고, 그것이 어떻게 보이고 동작하는지에 대한 모든 것은 코드가 담당하니까요. CopilotKit은 이 패턴을 components as tools로 문서화하고 있어요.

도구 호출 렌더링 (Tool-call rendering)

에이전트가 도구를 호출하면 그 호출은 pending → complete 또는 failed 같은 수명주기를 거쳐요. 도구 호출 렌더링은 각 단계를 목적에 맞는 UI로 바꿔줍니다. 검색이 실행되는 동안 로딩 카드, 결과가 돌아왔을 때 결과 카드, 실패했을 때 에러 상태 같은 것들이죠. 원시 JSON 대신에요. 이렇게 하면 에이전트의 행동이 읽기 쉬워지고, 사용자에게 무슨 일이 일어나고 있는지에 대한 확신을 줍니다. 도구 호출(Tool calling) 패턴을 참고하세요.

상태 렌더링 (State rendering)

에이전트는 메시지 목록 너머에도 지속적이고 타입이 지정된 상태를 노출해요. 할 일(todos), 파이프라인 출력, 인용(citations), 샌드박스 파일, 메트릭, 커스텀 비즈니스 객체 같은 것들이죠. 상태 렌더링은 그 상태에 컴포넌트를 바인딩해서, UI가 '대화의 기록'(transcript)이 아니라 에이전트 작업의 살아있는 뷰가 되게 합니다. 에이전트가 상태를 갱신하면 인터페이스도 함께 갱신되죠. 프론트엔드 개요에서 타입이 지정된 에이전트 상태(typed agent state)를 참고하고, 단일 타입 응답 페이로드를 커스텀 UI로 매핑하려면 구조화된 출력(Structured output)을 보세요.

추론 (Reasoning)

확장 사고(extended thinking)를 지원하는 모델은 최종 답과 분리된 추론(reasoning) 을 만들어내요. 추론을 렌더링하면 사용자에게 에이전트가 어떻게 결과에 도달했는지 보여줄 수 있어서, 신뢰를 쌓고 디버깅을 돕고 감사를 지원합니다. 추론이 언제, 어떻게 보일지도 여러분이 통제해요. 예를 들어 응답과 분리된 접이식(collapsible) 블록으로 표시할 수 있죠. Reasoning tokens 패턴을 참고하세요.

통제형 생성 UI