Persona.js

Persona: WebMCP 기반의 혁신적인 VanillaJS 에이전트 UI 라이브러리

현대적인 웹 환경에서 AI 에이전트의 역할은 단순한 채팅 이상으로 확장되고 있습니다. Persona는 웹을 위한 에이전틱(Agentic) 프론트엔드 경험을 구축할 수 있도록 설계된 순수 자바스크립트(VanillaJS) 기반의 에이전트 UI 라이브러리입니다. 가볍고 확장성이 뛰어나며, 특히 WebMCP-native 설계를 통해 브라우저 내에서 지능형 에이전트가 도구와 상호작용하는 방식을 혁신합니다.

Persona를 사용하면 개발자는 복잡한 설정 없이도 강력한 AI 인터페이스를 서비스에 녹여낼 수 있습니다. 이 글에서는 Persona의 정의부터 주요 기능, 사용 방법 및 다양한 활용 사례를 심도 있게 살펴보겠습니다.

---

What's Persona?

Persona는 Runtype Labs에서 개발한 오픈 소스 프로젝트로, 웹 애플리케이션에 지능형 AI 에이전트 UI를 통합하기 위한 전문 라이브러리입니다. 가장 큰 특징은 프레임워크에 의존하지 않는 VanillaJS 기반이라는 점과, 에이전트 표준 프로토콜인 WebMCP를 네이티브로 지원한다는 점입니다.

Persona는 단순한 채팅창이 아닙니다. 페이지 내의 검색, 장바구니, 예약 시스템, 폼 작성 등 다양한 기능을 에이전트가 직접 제어할 수 있게 해주는 가교 역할을 합니다. Shadow DOM을 사용하여 기존 사이트의 스타일과 충돌하지 않으며, 어떤 스택의 백엔드와도 연결할 수 있는 유연성을 제공합니다.

---

Persona의 핵심 기능 (Features)

Persona는 개발자와 사용자 모두에게 최상의 경험을 제공하기 위해 다음과 같은 강력한 기능들을 포함하고 있습니다.

1. WebMCP 네이티브 지원

Persona는 브라우저 내 도구 표준인 WebMCP를 기반으로 작동합니다. document.modelContext를 통해 페이지 내의 도구들을 자동으로 검색하고, 에이전트가 이를 실행하기 전 사용자의 승인을 받는 프로세스가 내장되어 있습니다. 이를 통해 에이전트가 직접 앱을 조작하는 '에이전틱'한 경험이 가능해집니다.

2. 완벽한 스타일 격리 (Isolation)

Shadow DOM 렌더링과 프리픽스(Prefix)가 적용된 CSS를 사용하여, Persona 위젯은 호스트 페이지의 스타일과 완전히 분리됩니다. 위젯 내부의 스타일이 외부로 새어나가지 않으며, 외부의 스타일이 위젯 내부로 침범하지 않아 어떤 페이지에도 안전하게 드롭인(Drop-in)할 수 있습니다.

3. 유연한 백엔드 전송 프로토콜 (Transport)

Persona는 SSE(Server-Sent Events) 스트리밍을 지원하며, 플러그형 파서를 통해 어떤 요청이나 이벤트 형태도 수용할 수 있습니다. customFetch와 parseSSEEvent를 사용하면 기존에 사용 중인 어떤 백엔드 스택과도 연동이 가능합니다.

4. 고도화된 테마 시스템 (Theming)

브랜드의 아이덴티티에 맞춰 UI를 커스터마이징할 수 있는 3계층 토큰 트리(Palette, Semantic, Component)를 제공합니다. 다크 모드 지원은 물론, 실시간 테마 편집기를 통해 위젯을 포크(Fork)하지 않고도 완벽하게 스타일을 맞출 수 있습니다.

5. 가벼운 무게와 고성능

불필요한 종속성 없이 순수 자바스크립트로 작성되어 성능 저하 없이 빠르게 로드됩니다. 모바일과 데스크톱 모두에서 매끄러운 사용자 경험을 보장합니다.

---

Persona 사용 방법 (How to Use)

Persona는 NPM 패키지 또는 스크립트 태그를 통해 간편하게 설치하고 실행할 수 있습니다.

설치 방법

NPM 사용 시:

npm install @runtypelabs/persona

기본 위젯 초기화

Persona는 플로팅(Floating), 도킹(Docked), 전체 화면(Fullscreen)의 세 가지 레이아웃을 지원합니다. 가장 기본이 되는 플로팅 위젯의 설정 예시는 다음과 같습니다.

import "@runtypelabs/persona/widget.css";
import { initAgentWidget } from "@runtypelabs/persona";

initAgentWidget({
  target: "#chat",
  config: {
    apiUrl: "https://your-api.com/chat",
    // 기본 설정은 플로팅 런처입니다.
  },
});

WebMCP 도구 등록 예시

에이전트가 페이지 내의 기능을 제어하게 하려면 다음과 같이 도구를 등록할 수 있습니다.

document.modelContext.registerTool({
  name: "search_products",
  description: "카탈로그를 검색합니다.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" },
    },
    required: ["query"],
  },
  async execute({ query }) {
    return searchCatalog(query);
  },
});

이렇게 등록된 도구는 Persona 에이전트가 자동으로 인식하여 대화 중에 사용자에게 필요한 기능을 제안하게 됩니다.

---

활용 사례 (Use Case)

Persona는 다양한 비즈니스 시나리오에서 강력한 힘을 발휘합니다.

• 이커머스 스토어프런트: 사용자가 채팅을 통해 제품을 검색하고 장바구니에 담으며 결제 단계까지 안내받을 수 있는 지능형 쇼핑 어시스턴트를 구축할 수 있습니다.
• 고객 지원 및 온보딩: 복잡한 문서를 읽는 대신 에이전트에게 질문하여 즉각적인 답변을 얻고, 서비스의 주요 기능을 직접 안내받는 가이드를 제공합니다.
• 스케줄러 및 캘린더: 에이전트가 사용자의 일정을 확인하고 직접 예약 폼을 작성하거나 변경하는 기능을 구현할 수 있습니다.
• 데이터 분석 도구: 대시보드 옆에 도킹된 에이전트가 데이터를 분석하고 사용자의 요청에 따라 실시간으로 그래프를 생성하거나 필터를 적용합니다.

---

자주 묻는 질문 (FAQ)

Q: Persona를 사용하기 위해 특정 프레임워크가 필요한가요?

A: 아니요. Persona는 VanillaJS로 작성되었으므로 React, Vue, Svelte와 같은 프레임워크는 물론, 프레임워크를 사용하지 않는 일반 HTML 페이지에서도 완벽하게 작동합니다.

Q: 백엔드 구성은 어떻게 해야 하나요?

A: Persona는 SSE를 지원하는 모든 백엔드와 연동됩니다. OpenAI Agents SDK, LangGraph.js, Vercel AI SDK 등을 사용하는 예제가 제공되며, Node.js, Deno, Bun, Cloudflare Workers 등 다양한 환경에서 실행 가능합니다.

Q: 기존 사이트의 디자인과 어울릴까요?

A: 네, Persona는 매우 강력한 테마 시스템을 갖추고 있습니다. 실시간 테마 편집기를 사용하여 브랜드의 색상과 폰트 등을 세밀하게 조정할 수 있어 기존 사이트와 일체감 있는 UI를 구성할 수 있습니다.

Q: 에이전트가 마음대로 결제를 진행하면 어떡하죠?

A: Persona는 WebMCP 표준을 준수하며, 모든 중요한 액션(도구 실행) 전에 반드시 사용자의 승인을 받는 UI 프로세스를 내장하고 있어 보안과 통제력을 유지합니다.

---

Persona는 단순한 라이브러리를 넘어 웹 애플리케이션이 AI와 상호작용하는 새로운 표준을 제시합니다. 지금 바로 Persona를 도입하여 여러분의 웹 서비스를 더욱 지능적이고 역동적인 공간으로 변모시켜 보세요.