[심층분석] AI를 화면에 그려주는 프론트엔드, CopilotKit과 AG-UI 프로토콜 이야기

챗봇은 이제 기본, 진짜 승부는 '화면'에서 갈려요

요즘 AI 기능 하나쯤 안 붙인 서비스를 찾기가 더 어렵죠. 그런데 막상 만들어보면 다들 비슷한 벽에 부딪혀요. "챗봇 창 하나 띄우는 건 했는데, 그 다음은?" 하는 거죠.

생각해보면 우리가 ChatGPT 같은 걸 쓸 때도 결국은 까만 글자만 주르륵 나오잖아요. 그런데 실제 서비스에서는 그것만으론 부족하거든요. 예를 들어 사용자가 "이번 달 매출 보여줘"라고 하면, 글로 줄줄 설명하는 것보다 진짜 차트 한 장이 뜨는 게 훨씬 낫잖아요. "항공권 예약해줘"라고 하면 좌석 선택 UI가 화면에 나타나는 게 자연스럽고요.

이걸 만들려고 하면 생각보다 일이 커져요. AI가 "이런 화면을 보여줘"라고 결정한 걸, 실제 React나 Angular 컴포넌트로 바꿔서 화면에 그려야 하고, 사용자가 그 화면에서 뭔가를 클릭하면 다시 AI한테 "사용자가 이걸 골랐어"라고 전달해야 하죠. 이 왔다 갔다 하는 연결고리를 일일이 손으로 짜면 코드가 금방 스파게티가 돼요.

오늘 소개할 CopilotKit은 바로 이 골치 아픈 부분을 통째로 대신해주는 도구예요. "에이전트를 위한 프론트엔드 스택"이라는 한 줄 소개가 핵심을 잘 담고 있어요. AI(에이전트)가 만들어내는 결과를 사용자 눈앞의 화면으로 매끄럽게 이어주는 다리 역할을 하는 거죠.

그래서 CopilotKit이 정확히 뭘 해주는 거예요?

원래 CopilotKit은 React 라이브러리로 시작했는데, 지금은 React뿐 아니라 Angular, Vue, React Native(모바일 앱), 심지어 Slack 같은 메신저 워크스페이스까지 지원하는 멀티 플랫폼 프레임워크로 컸어요. 같은 AI 에이전트 하나로 웹앱도, 모바일 앱도, 팀 슬랙 채널도 다 굴릴 수 있다는 게 핵심 자랑거리예요.

주요 기능을 하나씩 쉽게 풀어볼게요.

1. Chat UI (채팅 화면)

가장 기본이 되는 채팅 인터페이스예요. 그냥 입력창 하나가 아니라, 메시지 스트리밍(AI 답변이 한 글자씩 타이핑되듯 흘러나오는 거), 도구 호출 표시, 에이전트 응답 표시까지 다 들어있어요. 게다가 디자인을 마음대로 바꿀 수 있어서 우리 서비스 분위기에 맞게 꾸밀 수 있고요.

2. Backend Tool Rendering (백엔드 도구를 화면으로)

이게 좀 신기한 기능인데요. AI가 서버 쪽 기능(백엔드 도구)을 호출하면, 그 결과가 그냥 텍스트가 아니라 UI 컴포넌트로 바로 화면에 그려져요. 쉽게 비유하면, 주방(백엔드)에서 요리를 만들었는데 접시에 예쁘게 플레이팅까지 해서 손님 테이블(화면)에 바로 올려주는 거예요. 중간에 "이걸 어떻게 보여주지?" 고민할 필요가 없는 거죠.

3. Generative UI (화면을 그때그때 만들어내는 AI)

Generative UI라는 말이 좀 어렵게 들릴 텐데, 이게 뭐냐면 AI가 상황에 따라 화면 요소를 실시간으로 만들어내고 바꾸는 것을 말해요. 미리 정해둔 화면을 보여주는 게 아니라, 사용자가 뭘 원하는지와 AI의 현재 상태에 맞춰서 즉석에서 UI를 짜는 거예요. 마치 점원이 손님 요구에 따라 그 자리에서 메뉴판을 새로 그려주는 느낌이랄까요.

4. Shared State (상태 공유)

프론트엔드(사용자 화면)와 AI 에이전트가 같은 데이터를 실시간으로 나눠 보는 기능이에요. 예를 들어 사용자가 화면에서 장바구니에 물건을 담으면 AI도 그걸 바로 알고, 반대로 AI가 뭔가를 바꾸면 화면에도 즉시 반영돼요. 둘이 같은 화이트보드를 보면서 일하는 셈이죠.

5. Human-in-the-loop (사람이 중간에 개입하기)

이 표현도 풀어보면, AI가 멋대로 다 처리하지 않고 중요한 순간엔 사람한테 물어보는 구조예요. 예를 들어 AI가 "이 메일 보낼까요?" 하고 사용자 확인을 받은 뒤에야 실제로 보내는 식이죠. AI한테 모든 걸 맡기기 불안한 작업에서 안전장치 역할을 해줘요.

진짜 핵심은 'AG-UI 프로토콜'이에요

CopilotKit을 만든 팀이 자랑스럽게 내세우는 게 하나 있어요. 바로 AG-UI 프로토콜을 만든 회사라는 점이에요. 그리고 이 프로토콜이 사실 이 이야기의 가장 중요한 대목이에요.

프로토콜이라는 건, 쉽게 말해서 서로 다른 프로그램끼리 대화할 때 쓰는 약속된 언어예요. 우리가 외국인과 대화하려면 공통 언어가 필요하듯, AI 에이전트와 화면(UI)이 소통하려면 공통 규칙이 필요하거든요. AG-UI는 'Agent-UI', 즉 에이전트와 사용자 화면 사이의 표준 대화 규칙인 거예요.

왜 이게 중요하냐면요. AI 분야에는 이미 LangChain, Mastra, PydanticAI 같은 에이전트 만드는 프레임워크가 엄청 많아요. 백엔드에서 AI를 만드는 방식은 제각각인데, 이걸 화면에 연결하는 방식까지 다 제각각이면 개발자가 너무 힘들겠죠. AG-UI는 "백엔드를 뭘로 만들든, 화면이랑 연결할 때는 이 규칙을 따르자"고 정해주는 공통 표준이에요.

그리고 놀라운 건, 이 프로토콜을 Google, LangChain, AWS, Microsoft, Mastra, PydanticAI 같은 거물들이 채택했다는 거예요. 한 스타트업이 만든 규칙을 빅테크들이 따라 쓴다는 건, 그만큼 "에이전트와 UI를 잇는 표준이 꼭 필요했다"는 업계 공감대가 있었다는 뜻이거든요.

비유하자면 이래요. 예전에 휴대폰 충전기가 제조사마다 다 달라서 불편했잖아요? 그러다 USB-C로 통일되니까 다들 편해졌고요. AG-UI는 'AI 에이전트 세계의 USB-C'를 노리는 거예요. CopilotKit은 그 표준을 가장 잘 쓰는 도구 모음이자, 표준을 만든 장본인이라는 위치를 차지한 거죠.

비슷한 도구들과 뭐가 다를까요?

이 분야에 CopilotKit만 있는 건 아니에요. 몇 가지를 쉬운 비유로 비교해볼게요.

• Vercel의 AI SDK: AI 응답을 다루는 데는 강력하지만, 주로 텍스트 스트리밍과 기본적인 도구 호출에 초점이 맞춰져 있어요. CopilotKit은 여기서 한발 더 나가 "AI가 만든 결과를 실제 UI 컴포넌트로 그리는" 부분과 "상태 공유"에 더 집중해요. AI SDK가 '재료 손질'이라면 CopilotKit은 '완성된 요리 플레이팅'까지 챙긴다고 보면 돼요.
• 순수 LangChain / LangGraph: 이건 AI의 '두뇌'를 만드는 쪽이에요. 여러 단계를 거쳐 생각하고 도구를 쓰는 똑똑한 에이전트를 만들 수 있죠. 하지만 그 두뇌가 사용자 화면과 어떻게 만날지는 직접 짜야 했어요. CopilotKit(과 AG-UI)은 바로 그 '두뇌와 얼굴을 잇는' 빠진 조각을 채워줘요. 실제로 LangChain이 AG-UI를 채택했다는 게 둘이 경쟁이 아니라 보완 관계라는 걸 보여줘요.
• 직접 다 만들기: 물론 WebSocket이랑 React 상태 관리로 직접 구현할 수도 있어요. 근데 스트리밍, 도구 호출, 상태 동기화, 사람 개입 승인까지 다 손으로 짜면 정말 한세월이거든요. CopilotKit을 쓰면 이 공통 작업을 건너뛰고 우리 서비스의 핵심에만 집중할 수 있어요.

한국 개발자에게는 어떤 의미일까요?

구체적인 상황을 몇 개 그려볼게요.

시나리오 1 — 사내 업무 자동화 봇. 회사에서 "슬랙에서 AI한테 휴가 신청하면 자동으로 처리되게 해줘"라는 요청을 받았다고 쳐요. CopilotKit은 Slack 워크스페이스를 지원하니까, 웹용으로 만든 에이전트를 거의 그대로 슬랙에 붙일 수 있어요. 그리고 Human-in-the-loop 기능으로 "팀장님 승인 후 처리" 단계를 넣으면 안전하고요.

시나리오 2 — 데이터 대시보드에 AI 붙이기. 사용자가 자연어로 "지난 분기 지역별 매출 비교해줘"라고 하면, Generative UI로 막대 차트가 바로 화면에 뜨게 만들 수 있어요. 매번 차트 종류마다 화면을 미리 만들 필요가 없는 거죠.

시나리오 3 — 스타트업 MVP. AI 기능을 빠르게 붙여서 데모를 보여줘야 하는 상황이라면, "1분 만에 AI 추가"라는 슬로건처럼 채팅 UI를 빠르게 얹어 시제품을 만들 수 있어요.

도입할 때 고려할 점도 솔직히 말씀드릴게요. 첫째, 추상화의 양면성이에요. 편하게 다 해주는 만큼, 내부에서 무슨 일이 일어나는지 모르면 문제가 생겼을 때 디버깅이 어려울 수 있어요. 둘째, 빠른 변화예요. AG-UI 표준 자체가 한창 자리 잡는 중이라 버전이 자주 바뀔 수 있으니, 프로덕션에 넣기 전엔 버전 고정을 잘 해두는 게 좋아요.

학습 로드맵을 추천하자면 이래요. ① 먼저 React 기본기와 상태 관리 개념을 다져두세요. ② 그 다음 AI 도구 호출(function calling)이 뭔지 감을 잡으세요. ③ CopilotKit 공식 예제로 채팅 UI부터 띄워보고, ④ 익숙해지면 Generative UI와 Shared State로 넘어가세요. ⑤ 여유가 되면 AG-UI 프로토콜 문서를 읽어보면 "아, 이래서 이렇게 동작하는구나" 하고 전체 그림이 잡혀요.

마무리: 'AI 두뇌'에서 'AI 경험'으로

지난 1~2년이 AI를 똑똑하게 만드는 '두뇌' 경쟁이었다면, 이제 무게추는 "그 똑똑함을 사용자가 어떻게 체감하게 할 것인가" 로 옮겨가고 있어요. 아무리 좋은 AI도 사용자가 쓰기 불편하면 의미가 없으니까요. CopilotKit과 AG-UI 프로토콜은 바로 이 '경험' 영역에 표준을 세우려는 시도예요.

특히 빅테크들이 한 스타트업의 프로토콜을 함께 채택했다는 건, 앞으로 '에이전트 ↔ 화면' 연결 방식이 점점 표준화될 거라는 신호로 읽을 수 있어요. 그렇게 되면 우리 개발자들은 매번 바닥부터 만들 필요 없이, 표준 위에서 더 창의적인 AI 경험을 빠르게 만들 수 있게 되겠죠.

여러분은 어떠세요? 지금 만들고 있는 서비스에 AI를 붙인다면, 단순 챗봇 창으로 충분할까요, 아니면 화면이 살아 움직이는 Generative UI까지 필요할까요? 그리고 AI에게 어디까지 맡기고 어디서부터 사람이 개입해야 한다고 생각하세요? 여러분의 경험과 생각을 댓글로 들려주세요!