생성형 UI(GenUI)란? 언어 모델이 실시간으로 웹 화면을 만드는 원리와 한계

핵심 메시지

• 웹사이트는 모든 방문자에게 같은 화면을 보여줘야 해서, 이미 아이폰을 쓰는 사람에게도 아이폰을 사라고 권하는 낭비가 생긴다.
• 생성형 UI(GenUI)는 언어 모델이 사용자 정보와 대화 맥락을 근거로 화면에 띄울 구성 요소를 실시간으로 고르고 채우는 방식이다.
• 시연한 노트북 쇼핑 도우미는 28세 개발자 페르소나에 맞춰 제품 타일·단일 상세·제품 비교 화면을 대화 흐름에 따라 계속 바꿔 보여줬다.
• 구현은 LangGraph로 세 가지 도구(타일·상세·비교)를 정의하고, 호출된 도구 이름을 프런트엔드 컴포넌트에 매핑해 스트리밍으로 갈아끼우는 구조다.
• 생성형 UI에 대한 반론은 사용자가 자기 요구를 말로 정확히 설명해야 한다는 점, 그리고 개인 데이터를 대량으로 넘겨야 한다는 점을 지적한다.

쉽게 이해하기

우리가 하루 중 많은 시간을 보내는 웹사이트는 수많은 사람의 손을 거쳐 설계된다. 다만 그 설계는 방문자 한 명이 아니라 방문자 전체를 대상으로 하기 때문에, 누구에게나 통할 만한 하나의 공통 화면으로 수렴한다. 발표자는 애플 홈페이지를 예로 들어, 이미 최신 아이폰과 애플워치를 쓰고 있는 자신에게 아이폰을 소개하는 화면이 뜨는 것은 사실상 쓸모없는 정보라고 지적한다.

생성형 UI는 이 지점을 겨냥한다. 지시문과 사용자 행동 기록, 보유 데이터, 심지어 현재 화면 정보까지 모아 생성 모델에 넣고, 그 결과로 화면에 어떤 구성 요소를 띄울지 실시간으로 정하는 방식이다. 여기서 말하는 생성형 UI는 챗GPT 같은 도구로 디자인 시안이나 프런트엔드 코드를 뽑아내는 작업과는 다르다. 결과물이 아니라 사용자가 보는 화면 자체가 그때그때 만들어진다는 점이 핵심이다.

발표자가 만든 시연은 노트북 쇼핑 도우미다. 배경에는 '28세 소프트웨어 개발자, 가벼운 노트북 선호, 개발용 성능 필요, 가격에 민감함' 같은 페르소나와 검색·구매 이력이 들어 있다. 인사말만 건네도 이름을 부르며 가벼운 노트북과 리눅스 호환성을 먼저 묻고, 노트북을 찾는다고 말하면 오른쪽 화면이 개발자용 중급 노트북 목록으로 통째로 바뀐다. 램 32GB를 원한다고 하자 특정 모델 하나를 추천하는 화면으로, 더 싼 대안을 묻자 다른 후보 목록으로, 두 제품의 차이를 묻자 사양 비교 화면으로 계속 모습을 바꾼다.

속을 열어 보면 구조는 의외로 단순하다. 백엔드는 파이썬으로 LangGraph 기반 대화 흐름을 만들고, 언어 모델이 답을 바로 내놓거나 도구를 호출하도록 갈라진다. 도구는 제품 상세, 제품 비교, 제품 타일 세 가지이며, 각각 제품 ID와 함께 표시할 설명 문구를 인자로 받아 이미지·사양·문구를 JSON으로 돌려준다. 프런트엔드는 호출된 도구 이름을 대응하는 화면 컴포넌트에 연결해 먼저 로딩 상태를 띄우고, 인자가 도착하면 완성된 컴포넌트로 교체한다. 제품 정보는 데이터베이스 없이 CSV 파일에 담아 두었다.

발표자는 장점만 말하지 않는다. 생성형 UI를 비판하는 글에서 그가 수긍한 대목은 이 방식이 '사용자가 자기 요구를 말로 표현할 수 있다'는 전제에 기대고 있다는 점이다. 램이 무엇인지 모르는 사람은 애초에 무엇을 요구해야 할지 모른다. 시스템이 후속 질문을 제안하는 방식으로 어느 정도 보완할 수 있지만 한계는 남는다. 개인 데이터를 넘겨야 한다는 문제도 마찬가지다. 그럼에도 그는 챗봇 창이 아예 사라지고, 접속하는 순간 그 사람에게 맞는 화면이 만들어지는 웹을 더 흥미로운 방향으로 본다.

주요 인사이트

• 생성형 UI의 무게중심은 '무엇을 말하느냐'가 아니라 '무엇을 보여주느냐'에 있다. 기존 시연 대부분이 채팅창 안에 카드 하나를 띄우는 수준에 머무는 반면, 이 시연은 화면 절반을 통째로 모델이 통제한다.
• 모델에게 자유롭게 화면을 그리게 두지 않고 타일·상세·비교라는 세 가지 완성된 컴포넌트만 고르게 한 점이 실용적이다. 선택지는 모델이 정하되 화면 품질은 개발자가 보장하는 절충이다.
• 도구 호출이 곧 화면 전환 신호가 되므로, 도구 이름과 컴포넌트를 매핑해 두면 로딩 화면부터 완성 화면까지 스트리밍으로 자연스럽게 이어진다. 에이전트 구조를 그대로 UI 구조로 옮긴 셈이다.
• 개인화의 품질은 모델보다 배경 데이터에 좌우된다. 시연에서 화면을 바꾼 실제 근거는 페르소나 문서와 대화 이력이었고, 이는 개인정보를 얼마나 넘길 것인가라는 문제와 직결된다.
• 이 접근은 완성된 제품이라기보다 공개된 예제 코드 위에서 확인해 볼 수 있는 실험이다. 발표자 역시 기존 오픈소스 예제를 변형해 만들었다고 밝히고 저장소를 공개했다.

자주 묻는 질문

관련 AI 소식