핵심 내용
GeekNews 최신 글에 올라온 Builder.io의 오픈소스 프로젝트 Agent-Native는 AI Agent용 기능을 기존 애플리케이션과 따로 구현하지 않고, 하나의 action을 UI와 Agent가 함께 호출하도록 만드는 TypeScript 프레임워크다. 프로젝트 README의 핵심 개념은 defineAction으로 기능을 한 번 정의하면 Agent에서는 tool로, React UI에서는 함수로, 동시에 HTTP·MCP·A2A·CLI에서도 동일한 action을 노출할 수 있다는 것이다.
Agent가 브라우저 UI를 사람처럼 클릭하는 방식이 아니라 UI가 사용하는 것과 동일한 permission·validation·business logic 계층을 호출한다는 점이 핵심이다. Agent가 수행한 작업은 UI에 바로 나타나고, UI에서 사용자가 변경한 상태도 Agent가 같은 application state로 활용할 수 있다. 현재 페이지, 선택된 record, 활성 view 같은 UI context도 Agent에게 전달할 수 있다.
프로젝트는 authentication/permissions, skills와 persistent memory, scheduled automation, 여러 specialist agent로 구성하는 agent teams, PostgreSQL backend와 local PGlite 등을 기본 구성요소로 제시한다. 예제 Agent로 회의기록, 디자인, 슬라이드, analytics, calendar, mail, assets, content workflow 등을 제공하고 있으며 MIT 계열 오픈소스 방식으로 repository가 공개돼 있다.
배경
많은 기존 제품은 기존 웹앱 API와 Agent tool을 별도로 만들어 기능이 중복된다. 예를 들어 사람이 UI에서 ‘고객 상태 변경’을 누르는 코드와 Agent가 MCP tool로 같은 작업을 수행하는 코드가 달라지면 validation·권한·감사로그가 서로 어긋날 수 있다. Agent-Native는 처음부터 모든 실행 surface가 하나의 domain action을 공유하도록 설계해 이런 중복을 줄이려는 접근이다.
산업·시장에 미치는 영향
Agent가 단순 chat assistant가 아니라 실제 앱의 주요 사용자 interface가 되면 백엔드의 설계단위도 화면 중심에서 action 중심으로 이동할 가능성이 있다. UI·API·Agent·automation이 같은 권한과 validation을 사용하면 보안정책과 감사로그를 한 곳에서 관리하기 쉬워진다. 반대로 action 하나가 여러 surface에 노출되기 때문에 권한설계가 잘못되면 Agent가 UI에서 제한된 작업을 우회할 위험도 있어, central action layer 자체가 중요한 보안 경계가 된다.
실무에서 바로 활용할 수 있는 시사점
신규 Agent 서비스를 설계한다면 기존 화면을 Agent가 browser automation으로 조작하게 하기보다 핵심 업무를 createInvoice, approvePost, updateCustomer처럼 명시적 action으로 분리하고 UI와 Agent가 같은 함수를 호출하도록 만드는 패턴을 검토할 가치가 있다. 각 action에 schema validation, RBAC, idempotency, audit log, human approval 조건을 붙이면 UI 자동화보다 안정적인 Agent 실행계층을 만들 수 있다.