푸땡로그
Go back

OpenGenerativeUI 살펴보기: Claude식 인터랙티브 시각화를 직접 구현하는 오픈소스

AI 챗봇은 이제 텍스트를 꽤 잘 만듭니다.
하지만 점점 더 중요한 건 “얼마나 잘 말하느냐”보다 얼마나 잘 보여주느냐가 되고 있습니다.

어떤 정보는 문장보다 시각화가 훨씬 빠릅니다.
알고리듬 동작 과정, 데이터 비교, 프로세스 설명, 3D 구조, 인터랙티브 도구 같은 것들은 긴 텍스트보다 직접 보이는 UI가 훨씬 이해하기 쉽습니다.

이 지점에서 흥미로운 프로젝트가 하나 나왔습니다.
바로 OpenGenerativeUI입니다.

이 프로젝트는 Claude의 인터랙티브 시각 자료 생성 경험을 떠올리게 하는 형태를 오픈소스로 구현한 프레임워크입니다.
단순한 데모가 아니라, AI 에이전트가 필요에 따라 차트·다이어그램·애니메이션·위젯을 생성해서 보여주는 구조를 실제로 어떻게 만들 수 있는지 보여준다는 점에서 꽤 재미있습니다.

OpenGenerativeUI는 무엇인가요?

OpenGenerativeUI는 CopilotKit과 LangGraph를 기반으로, AI가 대화 중에 생성형 UI(Generative UI) 를 직접 만들어 보여주는 오픈소스 프로젝트입니다.

핵심은 단순합니다.

즉, 이 프로젝트는 “AI가 말을 잘한다”를 넘어서
AI가 상황에 맞는 인터페이스를 직접 만든다는 방향을 실험합니다.

왜 이게 중요한가요?

요즘 AI 제품은 점점 더 비슷해지고 있습니다.
모델 성능만으로 차별화하기가 점점 어려워지고 있기 때문입니다.

그래서 앞으로 더 중요해질 질문은 이런 것들입니다.

OpenGenerativeUI가 흥미로운 이유는 바로 이 지점에 있습니다.
이 프로젝트는 “챗봇 답변”을 만들기보다, 대화형 결과물을 만든다는 발상을 전면에 둡니다.

예를 들어 사용자가 이런 요청을 했다고 해봅시다.

이때 텍스트만 던지는 대신,
AI가 아예 보는 방식의 답변을 생성하는 겁니다.

어떤 걸 만들 수 있나요?

공개된 설명을 보면 OpenGenerativeUI는 꽤 다양한 형태를 다룹니다.

이걸 보면 단순히 “차트를 그려준다” 수준이 아닙니다.
오히려 프롬프트 기반 인터페이스 생성기에 더 가깝습니다.

구조는 어떻게 되어 있나

프로젝트 소개 기준으로 이 저장소는 Turborepo 기반 모노레포 구조를 사용합니다.

대략적인 구조는 이렇습니다.

flowchart LR
    A[사용자 프롬프트] --> B[CopilotKit 채팅 UI]
    B --> C[LangGraph 에이전트]
    C --> D{응답 방식 결정}
    D -->|텍스트| E[일반 답변]
    D -->|도구 호출| F[Action / Tool]
    D -->|시각 컴포넌트| G[HTML/SVG/UI 생성]
    G --> H[iframe sandbox 렌더링]

설명만 보면 꽤 직관적입니다.

즉, 프런트엔드와 에이전트가 분리되어 있고,
AI는 “무엇을 보여줄지” 결정하고, 프런트엔드는 그 결과를 실제 UI로 렌더링하는 역할을 맡습니다.

작동 방식이 꽤 잘 짜여 있습니다

이 프로젝트에서 특히 눈에 띄는 부분은 생성된 UI를 iframe sandbox 안에서 렌더링한다는 점입니다.

이건 생각보다 중요합니다.

생성형 UI는 본질적으로 위험할 수 있습니다.
AI가 만든 HTML이나 스크립트를 그대로 페이지에 주입하면 보안 문제가 생길 수 있기 때문입니다.

OpenGenerativeUI는 이 문제를 피하기 위해 다음 같은 방향을 택합니다.

즉, “그럴듯한 데모”가 아니라
실제 제품에 가까운 렌더링 경험을 의식하고 있다는 점이 좋습니다.

Tip 생성형 UI에서 가장 중요한 건 예쁜 결과물이 아니라 안전한 렌더링 경계입니다. OpenGenerativeUI가 iframe sandbox를 선택한 건 꽤 현실적인 판단으로 보입니다.

기술 선택도 꽤 납득이 갑니다

OpenGenerativeUI는 요청 유형에 따라 적절한 기술을 고르는 방식도 강조합니다.

예를 들어:

이 방식이 중요한 이유는,
모든 시각화에 같은 도구를 들이대면 결과가 금방 어색해지기 때문입니다.

즉, 이 프로젝트는 단순히 “생성”만이 아니라
어떤 요청에 어떤 시각 표현이 적절한가까지 고민하고 있습니다.

이건 앞으로 Generative UI가 더 발전할 때 핵심이 될 가능성이 높습니다.

이 프로젝트가 보여주는 더 큰 흐름

OpenGenerativeUI를 단순 오픈소스 데모로만 보면 아깝습니다.
이 프로젝트가 보여주는 더 큰 흐름은 따로 있습니다.

1. 챗봇에서 인터페이스로 이동

이제 AI는 단순히 텍스트를 반환하는 존재가 아니라,
필요하면 UI를 직접 만들어주는 방향으로 가고 있습니다.

2. 에이전트 + UI가 붙기 시작함

에이전트가 판단하고,
그 결과를 텍스트가 아니라 실행 가능한 시각 인터페이스로 돌려준다는 점이 중요합니다.

3. 생성형 UI는 앞으로 별도 제품군이 될 수 있음

지금은 “기능 하나”처럼 보이지만,
앞으로는 생성형 UI 자체가 독립적인 앱 패턴이 될 가능성이 큽니다.

예를 들어:

OpenGenerativeUI는 이 방향을 미리 보여주는 프로젝트에 가깝습니다.

실제로 어디에 유용할까

이런 프로젝트는 보기에는 멋있지만,
실무에서 어디에 쓸 수 있느냐가 중요합니다.

제가 보기엔 아래 영역에서 특히 잘 맞습니다.

교육/학습

알고리듬, 수학, 과학 개념처럼
“설명보다 시각화가 더 중요한 주제”에 잘 맞습니다.

데이터 설명

숫자나 비교 중심 정보는
텍스트보다 차트나 인터랙티브 요소가 이해가 훨씬 빠릅니다.

온보딩/가이드

사용 방법, 프로세스 설명, 단계별 흐름 안내에 유용합니다.

AI 에이전트 제품

텍스트 답변만으로 차별화가 어려운 AI 제품은
이런 생성형 UI가 좋은 무기가 될 수 있습니다.

주의 생성형 UI는 데모에서는 매우 인상적이지만, 실서비스에 넣을 때는 렌더링 안정성, 보안 경계, 성능, 실패 시 fallback UX를 반드시 같이 설계해야 합니다.

한계도 분명합니다

물론 이런 접근이 만능은 아닙니다.

1. 유지보수 난도가 높습니다

텍스트 답변보다 UI 생성은 훨씬 복잡합니다.
렌더링, 보안, 오류 처리, 상태 관리까지 함께 고려해야 합니다.

2. 요청 해석이 잘못되면 UI도 어색해집니다

AI가 어떤 시각 표현이 적절한지 잘못 판단하면
오히려 텍스트보다 더 혼란스러운 결과가 나올 수 있습니다.

3. 제품화하려면 품질 관리가 필요합니다

한두 번 멋진 데모가 나오는 것과,
항상 안정적으로 동작하는 제품을 만드는 건 완전히 다른 문제입니다.

즉, OpenGenerativeUI는 굉장히 흥미롭지만 동시에
실험과 제품화 사이의 거리도 분명히 보여주는 프로젝트입니다.

개인적으로 재미있는 이유

이 프로젝트가 특히 재미있는 건,
요즘 AI 제품의 경쟁 포인트가 어디로 이동하는지를 아주 잘 보여주기 때문입니다.

이전에는:

이런 질문이 중심이었습니다.

앞으로는 여기에 더해:

이런 질문이 붙게 될 것 같습니다.

OpenGenerativeUI는 바로 그 변화를 오픈소스 레벨에서 먼저 체험하게 해줍니다.

마무리

OpenGenerativeUI는 단순히 “멋진 AI 데모”가 아닙니다.
이 프로젝트는 AI가 텍스트를 넘어서 시각적 결과물과 인터페이스를 직접 생성하는 방향이 얼마나 빠르게 현실화되고 있는지를 보여줍니다.

CopilotKit, LangGraph, iframe sandbox, 시각화 결정 매트릭스 같은 요소를 조합한 방식도 꽤 설득력이 있습니다.
특히 “대화형 AI의 응답을 UI로 확장한다”는 발상은 앞으로 점점 더 자주 보게 될 가능성이 큽니다.

아직은 실험적인 면도 있지만,
적어도 이 프로젝트는 하나를 분명하게 보여줍니다.

앞으로의 AI 제품 경쟁은 답변 품질만이 아니라, 답변을 어떤 인터페이스로 보여주느냐의 경쟁이 될 수 있다는 점입니다.

그 기준에서 보면 OpenGenerativeUI는 꽤 흥미로운 출발점입니다.

참고 자료

Share this post on:
Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email
Previous Post
A11Y 주간 다이제스트: 2026.03.09 ~ 03.15
Next Post
defuddle 살펴보기: 어떤 웹페이지든 깔끔한 Markdown으로 추출하는 오픈소스