본문 바로가기
Insight & Trend/AL & LLM

텍스트만 뱉는 AI는 그만? 요즘 뜨는 'Generative UI' 찍먹해보기

coincidenceone-one 2026. 1. 25. 11:23

최근 프론트엔드 관련 뉴스나 아티클을 보면서 'Generative UI(생성형 UI)'라는 키워드가 자꾸 눈에 밟히더라고요. 처음엔 "그냥 AI가 코딩 짜주는 거랑 뭐가 달라?"라고 생각했는데, 좀 더 파고들어 보니 우리가 알던 챗봇과는 꽤 다른 개념이었습니다.

단순히 텍스트로 답을 주는 게 아니라, AI가 상황에 맞는 리액트 컴포넌트를 직접 그려서 보여주는 방식이더군요. 2026년 웹 트렌드로 자주 언급되길래, 이게 정확히 어떤 원리이고 어떻게 구현하는지 궁금해서 한번 정리해봤습니다.

  1. Generative UI가 뭔가요?
    보통 우리가 ChatGPT API를 연동하면 텍스트로 된 응답(string)을 받잖아요? 그런데 Generative UI는 AI가 사용자의 의도를 파악해서, 텍스트 대신 UI 컴포넌트를 렌더링해주는 개념입니다.

예를 들어 날씨를 물어봤을 때, 텍스트로 "맑음, 20도입니다"라고 하는 대신, 미리 만들어둔 컴포넌트에 데이터를 담아서 화면에 띄워주는 식이죠.

기존: "주식 보여줘" -> (텍스트로 주가 나열) 👎

Generative UI: "주식 보여줘" -> (예쁜 차트 컴포넌트가 뿅! 하고 나옴) 👍

이게 가능해진 건 React Server Components(RSC)의 스트리밍 기술 덕분이라고 합니다. 서버에서 LLM이 판단하자마자 UI 코드를 클라이언트로 쏴주는 구조인 거죠.

  1. 어떻게 구현하나? (Vercel AI SDK)
    찾아보니 Next.js 환경에서는 Vercel에서 만든 ai/rsc 패키지를 쓰는 게 가장 정석적인 방법 같았습니다. 핵심은 streamUI라는 함수였는데, 사용법이 꽤 흥미로웠습니다.

서버 액션 쪽 코드 (구경하기):

'use server';

import { streamUI } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
// 미리 만들어둔 컴포넌트들을 가져옵니다.
import { WeatherCard, StockChart } from './components';

export async function continueConversation(input: string) {
// streamUI 함수가 AI 모델과 UI 사이를 중계해줍니다.
const result = await streamUI({
model: openai('gpt-4o'),
prompt: input,
// 1. 일반적인 대화일 때는 텍스트 렌더링
text: ({ content }) =>

{content}
,
// 2. 특정 도구(Tool)가 필요하다고 판단될 때 UI 렌더링
tools: {
  getWeather: {
    description: '날씨 정보를 요청할 때 사용',
    parameters: z.object({ city: z.string() }),
    generate: async ({ city }) => {
      // 여기서 API를 호출하고 데이터를 받아옵니다.
      const weatherData = await fetchWeatherApi(city); 
      // ★ 핵심: 텍스트가 아니라 컴포넌트를 리턴합니다!
      return <WeatherCard city={city} data={weatherData} />;
    },
  },
},
});

return result.value;
}

 

코드를 보면 zod 라이브러리로 스키마를 정의해주고, generate 부분에서 아예 리액트 컴포넌트 자체를 리턴해버립니다. 이렇게 하면 클라이언트에서는 별다른 처리 없이 그냥 이 결과를 받아서 화면에 뿌려주기만 하면 되더라고요.

  1. 직접 공부해보며 느낀 점
    사실 처음에는 "그냥 클라이언트에서 데이터 받아서 조건부 렌더링(if/else)하면 되는 거 아니야?"라고 생각했습니다.

그런데 Generative UI 방식을 쓰면 프론트엔드 코드가 훨씬 유연해질 것 같다는 생각이 들었습니다. 미리 모든 경우의 수를 하드코딩할 필요 없이, AI가 판단해서 적절한 도구(컴포넌트)를 꺼내 쓰는 방식이니까요.

물론 아직은 API 비용 문제나 속도 이슈가 있겠지만, 사용자 경험(UX) 측면에서는 확실히 매력적인 기술 같습니다. "말만 하면 앱이 알아서 UI를 바꿔주는 시대"가 생각보다 빨리 올 수도 있겠다는 생각이 드네요.

Next.js 사용하시는 분들은 시간 날 때 Vercel AI SDK 문서 한번 훑어보셔도 재밌을 것 같습니다!

티스토리툴바