전통적인 컴퓨팅에서는 사용자 인터페이스가 미리 정의됩니다. 개발자가 모든 버튼, 메뉴, 창을 꼼꼼하게 코딩합니다. 그러나 각 상호작용에 따라 사용자의 컨텍스트에 맞게 조정되는 인터페이스를 실시간으로 생성할 수 있다면 어떨까요? 저희는 무한한 생성형 컴퓨터 경험을 위해 연구용 프로토타입(Google AI Studio에서 데모 앱 보기)을 개발하여 이 문제에 대해 알아보았습니다.
이 연구용 프로토타입은 각 화면이 대형 언어 모델에 의해 즉석에서 생성되는 운영체제를 시뮬레이션합니다. 이 프로토타입은 Gemini 2.5 Flash-Lite를 사용하는데, 이 모델의 짧은 지연 시간은 즉각적으로 느껴지는 반응형 상호작용을 만드는 데 매우 중요합니다. 사용자는 정적 파일 시스템을 탐색하는 대신 클릭할 때마다 모델이 구축/재구축하는 환경과 상호작용합니다. 이 글에서는 이 프로토타입의 핵심 기술 개념을 간략하게 설명하겠습니다.
즉석에서 UI를 생성하려면 각 요청에 대한 명확한 구조와 컨텍스트를 모델에 제공해야 합니다. 저희는 모델의 입력을 'UI 구성'과 'UI 상호작용'의 두 부분으로 나누어 프롬프트를 설계했습니다.
UI 구성은 UI 생성을 위한 일련의 고정된 규칙을 포함하는 시스템 프롬프트입니다. 이러한 규칙은 OS 수준 스타일링, 홈 화면 형식, 지도 같은 요소를 포함하기 위한 논리 등 일관된 요소를 정의합니다.
UI 상호작용은 사용자가 가장 최근에 수행한 작업(예: 마우스로 아이콘 클릭)을 캡처하는 JSON 객체입니다. 이 객체는 모델이 다음 화면을 생성하도록 유도하는 특정 쿼리 역할을 합니다. 예를 들어, 메모장 앱에서 'Save Note' 아이콘을 클릭하면 다음과 같은 객체가 생성될 수 있습니다.
{
// `id`: 버튼의 `data-interaction-id` 속성에서 가져온 고유 ID입니다.
id: 'save_note_action',
// `type`: `data-interaction-type`의 상호작용 유형입니다.
type: 'button_press',
// `value`: 버튼에 `data-value-from` 속성이 있으므로 시스템이 ID가
// 'notepad_main_textarea'인 textarea에서 콘텐츠를 검색합니다.
value: 'Meeting notes\n- Discuss Q3 roadmap\n- Finalize budget',
// `elementType`: 클릭한 요소의 HTML 태그입니다.
elementType: 'button',
// `elementText`: 버튼 내부에 표시되는 텍스트입니다.
elementText: 'Save Note',
// `appContext`: 사용자가 현재 사용 중인 애플리케이션의 ID입니다.
// 이 ID는 `App.tsx`의 `activeApp` 상태에서 가져옵니다.
appContext: 'notepad_app'
}두 부분으로 구성된 이 컨텍스트 설정 접근 방식을 통해 모델은 특정한 실시간 사용자 입력에 따라 새로운 화면을 생성하면서도 일관된 스타일과 느낌을 유지할 수 있습니다.
단일 상호작용은 즉각적인 컨텍스트를 제공하지만, 연속적인 상호작용은 더욱 풍성한 스토리를 전해줍니다. 연구용 프로토타입은 과거 N개의 상호작용 흔적을 사용해 맥락상 관련성이 더욱 높은 화면을 생성할 수 있습니다. 예를 들어, 사용자가 이전에 장바구니나 여행 예약 앱을 방문했는지 그 여부에 따라 계산기에서 생성되는 콘텐츠가 달라질 수 있습니다. 이 상호작용 흔적의 길이를 조정함으로써 컨텍스트의 정확도와 UI 가변성 간의 균형을 조정할 수 있습니다.
빠른 시스템을 제공하려면 모델이 전체 UI 화면을 생성할 때까지 기다리지 않고 즉시 렌더링을 시작해야 합니다. 연구용 프로토타입은 모델 스트리밍과 브라우저의 네이티브 파서를 활용하여 프로그레시브 렌더링을 구현합니다. 모델이 HTML 코드를 청크 단위로 생성하면, 해당 코드를 구성요소의 상태에 지속적으로 추가합니다. 그러면 React가 콘텐츠를 다시 렌더링하여 유효한 HTML 요소가 수신되는 즉시 브라우저가 이를 표시할 수 있도록 합니다. 이를 통해 사용자는 인터페이스가 거의 즉시 화면에 구현되는 경험을 할 수 있습니다.
기본적으로, 이 모델은 사용자 입력이 있을 때마다 새 화면을 처음부터 생성합니다. 즉, 동일한 폴더를 두 번 방문하면 완전히 다른 콘텐츠가 생성될 수 있습니다. 우리에게 익숙한 GUI가 정적이라는 점을 감안할 때, 이처럼 비결정적인 상태 비추적(stateless) 경험이 항상 선호되지 않을 수 있습니다. 프로토타입에 상태 저장 기능을 도입하기 위해 데모 시스템에는 세션별 UI 그래프를 모델링하기 위한 메모리 내 캐시를 만드는 옵션이 있습니다. 사용자가 이미 생성된 화면으로 이동하면 시스템은 Gemini를 다시 쿼리하지 않고 그래프에서 저장된 버전을 제공합니다. 사용자가 캐시에 없는 새 화면을 요청하면 UI 그래프가 점진적으로 확장됩니다. 이 방식은 모델의 샘플링 온도를 단순히 낮추는 경우 발생할 수 있는 생성형 출력의 품질 저하 없이 상태를 제공합니다.
개념적 프로토타입이긴 하지만, 이 연구용 프로토타입의 기본 프레임워크는 보다 실용적인 사용 사례에 적용될 수 있습니다.
이와 같은 새로운 개념을 탐구하는 일은 인간과 컴퓨터의 상호작용에 대한 새로운 패러다임의 진화 방식을 이해하는 데 도움이 됩니다. 모델의 속도가 점점 더 빨라지고 기능도 계속 향상되고 있습니다. 이에 저희는 미래 연구 및 개발에서 생성형 인터페이스가 유망한 분야라고 생각합니다.
