Page Agent – 웹페이지 안에 삽입하는 자연어 GUI 에이전트

기존 웹 자동화와의 차이
주요 기능
기본 사용
적합한 사용 사례
운영 시 주의점
관련 문서
참고 자료

Page Agent는 웹페이지 안에 직접 삽입되는 GUI 에이전트 라이브러리다. 사용자는 자연어로 “로그인 버튼을 눌러라”, “이 폼을 채워라” 같은 명령을 내리고, Page Agent는 페이지 DOM을 텍스트 기반으로 해석해 인터페이스를 조작한다.

기존 웹 자동화와의 차이

일반적인 웹 자동화 에이전트는 브라우저 확장, Playwright 같은 헤드리스 브라우저, 스크린샷 기반 멀티모달 모델을 요구하는 경우가 많다. Page Agent의 설계는 반대다. 제품 페이지에 JavaScript를 넣고, 페이지 내부에서 DOM을 읽고 조작한다.

접근	장점	한계
헤드리스 브라우저 자동화	서버에서 외부 사이트까지 제어 가능	인프라·권한·탐지·세션 관리가 복잡
브라우저 확장	여러 탭과 외부 페이지 제어 가능	설치와 권한 승인 필요
스크린샷 기반 에이전트	시각적 UI 이해 가능	멀티모달 비용과 불안정성
Page Agent	앱 내부에 빠르게 삽입, 텍스트 DOM 기반	기본 초점은 자기 웹앱 안의 제어

주요 기능

쉬운 통합: 브라우저 확장, Python, 헤드리스 브라우저 없이 in-page JavaScript로 동작
텍스트 기반 DOM 조작: 스크린샷 대신 DOM 텍스트 표현으로 LLM 입력을 구성
Bring your own LLM: Qwen 등 OpenAI 호환 API를 지정할 수 있음
멀티페이지 확장: 선택적으로 Chrome 확장과 MCP 서버 베타를 사용해 외부 제어 범위 확장
제품 내 코파일럿: SaaS, ERP, CRM, 관리자 화면에서 자연어 작업 실행에 적합

기본 사용

빠른 평가는 CDN 스크립트를 삽입하는 방식으로 가능하지만, 공식 README는 이 데모 LLM API를 기술 평가용으로 제한한다. 실제 제품에는 NPM 패키지와 자체 모델 키를 쓰는 편이 맞다.

npm install page-agent

import { PageAgent } from "page-agent";

const agent = new PageAgent({
  model: "qwen3.5-plus",
  baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1",
  apiKey: "YOUR_API_KEY",
  language: "en-US",
});

await agent.execute("Click the login button");

적합한 사용 사례

SaaS 코파일럿: 사용자가 복잡한 관리자 화면을 자연어로 조작하게 할 때
스마트 폼 입력: ERP·CRM에서 여러 클릭과 입력을 한 문장으로 줄일 때
접근성 보조: 음성 명령, 스크린리더 보조, 저시력 사용자 지원
MCP 브라우저 제어: 에이전트 클라이언트가 사용자의 브라우저를 제어해야 할 때

운영 시 주의점

Page Agent는 “외부 웹을 대신 돌아다니는 범용 브라우저 에이전트”보다 “내 웹앱 안에 붙이는 자연어 조작 레이어”에 가깝다. 따라서 제품에 넣을 때는 명령 허용 범위, destructive action 승인, 입력값 검증, LLM API 키 노출 방지, 민감 DOM 필터링을 별도로 설계해야 한다.

참고 자료

alibaba/page-agent — GitHub 공식 저장소

Like?

AI Sparkup