제너레이티브 UI는 AI가 답을 글로만 쓰지 않고, 그 자리에서 화면을 골라 그려 주는 방식이에요. “로마 여행 계획 짜 줘”라고 하면 긴 문단 대신 호텔 카드, 지도, 평점, 예약 버튼이 나오는 식이죠. 핵심은 모델이 HTML을 마음대로 짜는 게 아니라, 개발자가 미리 만들어 둔 컴포넌트 중에서 “무엇을, 어떤 값으로” 띄울지만 정한다는 점이에요.
시점부터 짚을게요. 새 기술은 아니에요. 이름이 널리 퍼진 건 2024년 3월 1일 Vercel이 AI SDK 3.0에서 “Generative UI”를 내놓으면서부터예요. 모델이 도구를 호출하면 React 컴포넌트가 스트리밍되는 구조였죠. 이번에 다시 뜬 건 Thesys의 오픈소스 OpenUI가 1.0을 찍었기 때문이에요. 패키지는 2026년 10월 12일에 나왔고, 공식 발표는 10월 15일(미국 기준, 한국 시간으로는 16일)이었어요. MIT 라이선스이고 깃허브 스타는 1만 1천 개가 넘어요. 자체 언어인 OpenUI Lang이 JSON보다 토큰을 최대 67% 덜 쓴다고 하는데, 이건 만든 쪽 주장이에요. 오늘의 뉴스는 “제너레이티브 UI가 처음 나왔다”가 아니라 “이제 어느 모델이든 붙여 쓸 수 있는 오픈 표준 후보가 1.0이 됐다”예요.
Claude만 쓰던 개발자라면 이렇게 나눠 보세요.
– 모델이 맡을 일: 지금 이 답에 표가 맞는지, 차트나 입력 폼이 맞는지 고르고 값을 채우는 일까지만요.
– 내 코드가 맡을 일: 컴포넌트 자체, 실제 데이터 조회, 버튼을 눌렀을 때 일어나는 예약·결제·저장 같은 동작이에요. 버튼은 모델이 띄워도, 누른 뒤의 일은 꼭 내 코드가 검증하고 실행하게 두세요.
– 언제 쓰나: 비교, 선택, 입력이 필요한 답일 때 효과가 커요. 상품 비교, 일정 고르기, 대시보드 요약 같은 경우죠.
– 언제 쓰지 않나: 짧은 설명형 답은 그냥 글이 나아요. 화면 구성이 늘 똑같다면 모델에게 맡기지 말고 평범한 UI로 고정하는 게 빠르고 싸요.
시작은 카드, 표, 폼처럼 컴포넌트 서너 개로 작게 해 보세요. 모델이 이상한 값을 내면 글로 보여 주는 대비책도 함께 두고요. Claude Code를 쓴다면 OpenUI가 제공하는 에이전트 스킬(npx skills add thesysdev/skills --skill openui)로 뼈대를 바로 잡을 수 있어요.
연관 용어
– MCP Apps: MCP 도구가 글 대신 ui:// 주소의 HTML 화면을 돌려주고, 앱이 그걸 격리된 iframe에 띄우는 확장이에요. Vercel 가이드
– 컴포넌트 라이브러리: 모델이 고를 수 있는 컴포넌트 목록이에요. 이 목록이 곧 모델에게 주는 일종의 메뉴판이라, 작고 명확할수록 결과가 안정적이에요.
– 스트리밍 렌더링: 모델이 출력을 다 끝내기 전에 받은 만큼 화면을 먼저 그리는 방식이에요. 체감 속도에 큰 차이를 만들어요.