The End of the Static Screen: Architecting Intent-Driven UX — Gus Iwanaga, commercetools

한 줄 핵심

이 영상은 고정된 화면 중심 UX를 버리고, 사용자 의도와 UI 프로토콜·오케스트레이션을 통해 동적으로 구성되는 생성형 UX로 전환해야 한다는 점과 그 구현·운영상의 과제를 구체적으로 보여준다.

시간별 요약

1. 0:00
   발표 주제 변경과 다루려는 핵심 기존의 에이전트 루프나 하네스 이야기가 아니라, 생성형 UX와 UI를 제대로 설계한 팀의 교훈을 다루는 방향으로 주제를 바꾼다. 문제 정의, 데모, UI 프로토콜, 그리고 팀이 겪는 과제까지 순서대로 보여주겠다는 흐름이 잡힌다.
2. 2:26
   우리는 여전히 소프트웨어에 적응하고 있다 지난 40년 동안 소프트웨어는 계속 정적 경험을 배포해 왔고, GPT 이후에도 많은 부분은 여전히 고정되어 있다. 사용자와 고객은 서로 다른 SaaS마다 각기 다른 정신모델을 익혀야 하며, 그 인지적 부담은 여전히 사람에게 남아 있다.
3. 3:35
   세 개의 인터페이스와 온보딩 비용 CRM, 표 형식 도구, 또 다른 복잡한 UI 사례를 통해 기능과 팀 수가 많아질수록 화면은 정보 과부하가 되고 온보딩 비용이 커진다는 점을 보여준다. 앱마다 로직이 달라 사용자는 매번 새로 배워야 하며, 이 누적 비용이 기존 UX의 핵심 문제로 드러난다.
4. 5:54
   API 우선 회사에서 출발한 질문 API first 회사에서 AI 관점으로 소프트웨어와 상호작용 방식을 근본적으로 바꿀 수 있는가라는 질문이 제품 기획의 출발점이 된다. 이 질문에 대한 답이 이후 데모로 이어지는 생성형 UX 제품의 토대가 된다.
5. 7:00
   실패한 데모: 하나의 질의, 네 가지 다른 레이아웃 초기에는 같은 쿼리에도 서로 다른 레이아웃과 구성 결과가 나와 일관성이 무너졌고, 실제 제품으로는 배포할 수 없는 수준이었다. 이후 현재 버전에서는 orchestrator가 의도를 추출하고 도구를 찾아 컨텍스트를 모아, 더 의미 있는 UI를 생성하는 방향으로 개선된다.
6. 9:20
   오케스트레이터가 작동하는 방식 오케스트레이터는 쿼리의 intent를 분류하고, 그에 맞는 first party·third party 도구나 MCP 서버의 출력을 모아 UX agent가 렌더링할 수 있는 재료를 만든다. 여기서 핵심은 AI가 배치와 정보구조까지 결정하되, 사람이 가이드한 결과가 실제로는 더 납득 가능한 수준으로 올라왔다는 점이다.
7. 11:35
   통제: 의견이 강한 컴포넌트 배포 세 가지 렌더링 방식 중 첫 번째는 컴포넌트를 그대로 배포해 에이전트가 선택한 대로 표시하는 통제형 접근이다. Booking처럼 제약이 명확한 경우에는 잘 맞지만, B2B SaaS처럼 설정이 많은 환경에서는 과도한 규정이 오히려 혼란을 키울 수 있다.
8. 12:44
   열린 방식: 전체를 모델에 맡기기 두 번째 방식은 LLM에게 경험 전체를 자유롭게 조합하게 맡기는 접근이며, Claude에서 org chart를 즉시 생성하는 예가 나온다. 다만 출력과 결과를 통제하기 어렵기 때문에, 디자인 감각과 판단이 중요한 제품에서는 전부 맡기는 방식이 위험하다는 한계가 강조된다.
9. 14:59
   선언형 접근과 이를 지탱하는 프로토콜 가운데 방식은 HTMX, JSON render, OpenUI 같은 프로토콜을 활용하는 선언형 접근으로, intent 분류 뒤 도구 호출과 컴포넌트 매핑을 거쳐 UI 명세를 만든다. Zod schema와 컴포넌트 카탈로그를 함께 사용해 design system에 맞는 React UI를 렌더링하며, copy까지 완전 자율로 두지 않고 균형을 잡는다.
10. 17:21
    에이전트가 고른 컴포넌트를 누가 배치하는가 컴포넌트 선택 이후의 핵심 문제는 정보구조를 누가 책임질 것인가이며, 무작위 배치는 곧 UX 품질 저하로 이어진다. 이를 해결하기 위해 atomic design을 차용해 layout, slot, sub slot, component의 계층을 정의하고, UX 지식을 에이전트에 코딩한다.
11. 18:30
    Atomic Design을 빌려 계층을 뒤집기 기존의 layout → slot → sub slot → component 흐름을, 오케스트레이터가 먼저 component를 고른 뒤 slot과 template으로 역매핑하는 구조로 뒤집는다. 동시에 catalog와 layout의 속성, curation 규칙, 다양한 프로토콜을 계속 테스트해야 하므로 설계와 운영 난도가 매우 높다.
12. 21:56
    팀이 더 이상 픽셀을 설계하지 않을 때 AI가 화면의 상당 부분을 결정하게 되면서 팀의 일은 픽셀 디자인에서 schema, catalog curation, 규칙, synthetic data, interaction pattern 설계로 이동한다. 사람·제품·프로세스의 균형이 중요해지고, 이 전환은 이미 시작됐으며 결국 대부분의 팀이 맞닥뜨릴 변화로 정리된다.

실무 인사이트

• 생성형 UX를 도입할 때는 화면 생성 자체보다 intent 분류, 컴포넌트 매핑, 레이아웃 통제 규칙을 먼저 설계해야 일관성을 확보할 수 있다.
• 컴포넌트 카탈로그와 schema는 에이전트와 UI 사이의 계약이므로, 디자인 시스템 수준의 정합성과 curation 절차를 운영 자산으로 봐야 한다.
• 팀 역량은 픽셀 제작보다 schema·규칙·테스트 데이터·정보구조를 설계하는 방향으로 재편해야 하며, 사람·제품·프로세스의 역할 분담을 미리 정해야 한다.