일시성 격차: AI-Generated UI에서 데이터 손실을 오픈소스 해결책으로 해결
Source: Dev.to
저는 전문 작가가 아니며, 이 분야는 비교적 새로운 문제 영역이기 때문에 최선을 다해 설명하겠습니다.
Generative UI (GenUI)는 일반적으로 AI 에이전트가 뷰 정의(보통 JSON)를 프런트엔드에 전달하는 것을 의미합니다. 프런트엔드는 해당 정의를 기반으로 컴포넌트를 렌더링하고, 동작을 에이전트에 다시 연결합니다. 이러한 뷰는 본질적으로 일시적입니다—페이지를 새로 고치거나 에이전트가 레이아웃을 재생성하도록 하면 이전 구조가 종종 교체됩니다. 장점은 놀랍습니다: 복잡한 앱의 인터페이스가 작업 흐름에 즉시 맞춰 조정될 수 있습니다. 추가 필드가 세 개 필요하나요? 문제 없습니다. 하지만 이러한 유연성은 심각한 문제를 야기합니다.
일시성 격차
나는 이 문제를 The Ephemerality Gap이라고 부르기 시작했다. 이전에 누군가 이 용어를 사용했을 수도 있지만, 여기서 내가 정의하는 바는 다음과 같다:
Generative UI 채택에 대한 장벽은 토큰 스트리밍이나 모델 지연이 아니다. 사용자가 AI가 방금 생성한 50개 필드 양식을 작성하고 있다고 상상해 보라. 중간에 또 다른 필드가 필요하다고 깨닫고 AI에게 추가해 달라고 요청한다. AI는 도움이 되려 애쓰며 인터페이스를 다시 생성하고, 그 순간 사용자가 입력한 모든 내용이 사라진다—사용자가 삭제한 것이 아니라 프레임워크가 UI를 단순히 재구성하면서 상태를 초기화했기 때문이다.
왜 “그냥 데이터베이스에 저장하면” 안 되는가
일반적인 제안은 다음과 같습니다:
“사용자의 데이터를 데이터베이스에 저장하세요.”
그렇게 하면 작동하지 않습니다. 이 문제는 단순한 데이터베이스 읽기/쓰기보다 git merge에 훨씬 가깝게 동작합니다. UI 구조 자체가 에이전트가 인터페이스를 수정할 때마다 진화합니다.
기술적 문제
대부분의 UI 프레임워크는 구조적 키를 매칭하여 상태를 추적합니다. 구조가 충분히 변경되면 프레임워크는 기존 노드가 사라졌다고 판단하고 모든 것을 재설정합니다.
현재 뷰 정의
{
"section": {
"key": "section_1",
"children": [
{
"key": "input_2",
"type": "string",
"value": "John Doe"
}
]
}
}에이전트가 새로운 뷰를 반환함
AI가 입력을 새로운 그룹으로 감싸거나 계층 구조를 변경하기로 합니다:
{
"section": {
"key": "section_1",
"children": [
{
"group": {
"key": "group_99",
"children": [
{
"key": "input_3",
"type": "select",
"value": "???"
}
]
}
}
]
}
}키나 타입이 이전 프레임과 더 이상 일치하지 않기 때문에, 프레임워크는 본질적으로 “이게 뭔지 모르겠어. 삭제해.” 라고 말하는 셈입니다. 노드가 재설정되고 데이터가 사라집니다. 키는 일치하지만 타입이 변경되면(예: string → object) 런타임에서 애플리케이션이 충돌할 수도 있습니다.
이것이 Ephemerality Gap(일시성 격차)입니다: 사용자 의도와 UI의 끊임없이 변하는 구조적 상태 사이의 단절을 의미합니다.
접근 방식
해결책은 개념적으로 간단합니다: 사용자 상태는 내구성이 있어야 하며 뷰 구조와는 별개여야 합니다.
- 지속적인 의미적 정체성 – 사용자 데이터를 UI 노드에 묶는 대신, 안정적인 식별자를 사용해 입력을 추적합니다.
- 조정 단계 – 뷰 구조가 변경될 때마다:
- 데이터 조각이 새로운 뷰에 더 이상 매핑되지 않으면 삭제하지 않고 유지합니다.
- AI가 나중에 해당 컨트롤을 다시 도입하면 데이터를 자동으로 재활용합니다.
- AI가 사용자가 입력한 내용을 덮어쓰려 하면, 제안을 캐시해 두고 사용자가 수락 여부를 결정하도록 합니다.
이 모델에서는 AI가 사용자 입력을 덮어쓰지 않습니다.
내가 만든 것
저는 Continuum이라는 런타임을 만들었습니다. 이 런타임은 AI 에이전트와 프론트엔드 프레임워크 사이에 위치하여 지속 가능한 상태 레이어와 리컨실리이션 로직을 처리합니다.
- GitHub:
- Website:
커뮤니티 피드백 요청
에이전트 기반 인터페이스를 구축하고 있다면, UI가 하드코딩되지 않았을 때 상태 지속성을 어떻게 처리하고 계신가요? 다른 사람들이 이 문제에 어떻게 접근하고 있는지 정말 궁금합니다. 레포지토리를 자유롭게 시도해 보고, 깨뜨려 보며, 포크해 보세요.