Page-Agent: 스크립트 한 줄로 웹사이트를 AI 에이전트가 조작하게 만드는 법
알리바바가 공개한 인페이지 GUI 에이전트 Page-Agent의 DOM Dehydration 아키텍처와 Playwright·Browser-Use 대비 차별점을 정리한다.
2026-08-12 · 최초 발행 2026-03-13
브라우저 자동화 도구는 오랫동안 하나의 전제를 공유해왔다. 외부 프로세스가 브라우저를 원격으로 조종한다는 것이다. 알리바바가 오픈소스로 공개한 Page-Agent는 이 전제를 뒤집는다. <script> 태그 한 줄을 페이지에 심으면, 헤드리스 브라우저도 별도 서버도 없이 순수 클라이언트 JavaScript만으로 웹사이트가 자연어 명령을 받아들이는 AI 네이티브 앱이 된다. 2026년 3월 기준 GitHub 스타 5,800개를 넘기며 개발자 커뮤니티의 관심을 빠르게 흡수하고 있다.
Inside-out이라는 역발상
Page-Agent는 "웹 페이지 안에서 살아 숨쉬는 AI 에이전트"라는 콘셉트로 알리바바의 gaomeng1900이 주도해 2025년 9월 23일 처음 공개한 MIT 라이선스 TypeScript 프로젝트다.
Selenium, Playwright, Puppeteer 같은 기존 도구는 외부 프로세스에서 브라우저를 제어하는 "outside-in" 구조다. Page-Agent는 반대로 페이지 내부에 라이브러리로 직접 적재되어, 라이브 DOM을 텍스트로 파싱한 뒤 구조화된 정보를 LLM에 넘기고 그 응답으로 DOM을 조작한다. 스크린샷도, OCR도, Vision LLM도 필요 없다는 점이 이 접근의 결정적 차이다. DOM 텍스트 파싱만으로 페이지 구조를 이해하기 때문에 처리 속도가 빠르고 멀티모달 API 비용도 들지 않는다.
DOM Dehydration이 하는 일
Page-Agent의 아키텍처는 5개 계층으로 쌓인 피라미드 구조를 따른다.
이 구조의 핵심은 Layer 2의 DOM Dehydration이다. 페이지를 스크린샷으로 캡처하는 대신, HTML 구조를 최소한의 텍스트 형식으로 압축해 LLM에 전달한다. LLM은 이 텍스트 맵만으로 어떤 요소를 클릭·입력해야 할지 계획을 세우고 실제 DOM 조작 명령을 돌려준다. 이렇게 스크린샷 처리 단계를 없애면 응답 속도가 빨라지고, Vision API 비용이 사라지며, 동적으로 바뀌는 DOM에도 실시간으로 대응할 수 있고, 텍스트 기반이라 정확도도 높아진다.
인프라 없이 붙는 기능들
Page-Agent를 실제로 쓸 때 눈에 띄는 특징은 대부분 "무언가를 안 해도 된다"는 방향으로 모여 있다. 헤드리스 브라우저 서버도, Python 런타임도, 별도 백엔드 API 서버도 필요 없이 스크립트 태그 하나로 에이전트 기능이 켜진다(Zero Infrastructure). OpenAI GPT 시리즈, Anthropic Claude, Google Gemini, DeepSeek, Qwen, Grok은 물론 오프라인 Ollama까지 지원해 사용자가 직접 API Key와 Base URL을 지정하는 방식(BYOLLM)이라 데이터가 써드파티 서버를 거치지 않고 사용자의 LLM으로 바로 전달된다. 이미 로그인된 브라우저 세션을 그대로 활용하는 세션 상속 덕분에 별도 OAuth 처리나 비밀번호 공유 없이 기업 내부 툴 자동화에 붙일 수 있고, WebGL 애니메이션으로 에이전트가 지금 어떤 단계를 처리 중인지 보여주는 Human-in-the-Loop UI 패널이 기본 제공되어 사용자가 중간에 개입하거나 취소할 수 있다. 단일 탭을 넘어 멀티탭 작업이 필요하면 "Page Agent Ext"라는 Chrome 확장 프로그램도 있는데, 이미 1,000명 이상이 사용 중이며 Base URL·모델명·API Key만 설정하면 임의의 웹 페이지에서 자연어 명령을 바로 실행할 수 있다.
Page-Agent를 붙이는 방법
가장 단순한 통합은 HTML에 스크립트 태그를 넣는 것이다.
<script
src="https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.js"
data-model="gpt-5.1"
data-base-url="https://api.openai.com/v1"
data-api-key="YOUR_API_KEY"
></script>모델명, Base URL, API Key만 바꾸면 어떤 LLM과도 연결된다.
React, Vue, Angular 같은 모던 프레임워크에 직접 붙이고 싶다면 npm 패키지를 쓴다.
import { PageAgent } from "page-agent";
const agent = new PageAgent({
model: "gpt-5.1",
baseURL: "https://api.openai.com/v1",
apiKey: process.env.OPENAI_API_KEY,
});
await agent.execute("지난 금요일 출장 경비 보고서를 작성하고 제출해줘");
await agent.execute("연락처 폼에 Acme Corp 정보를 입력해줘");
await agent.execute("이 페이지의 주요 내용을 400자로 요약해줘");당장 체험해보고 싶다면 브라우저 개발자 콘솔에 몇 줄만 붙여넣으면 된다.
const script = document.createElement("script");
script.src =
"https://registry.npmmirror.com/page-agent/1.5.6/files/dist/iife/page-agent.demo.js";
script.crossOrigin = "true";
document.head.appendChild(script);코드 수정 없이 아무 웹사이트에서나 써보고 싶다면 Chrome 웹 스토어의 "Page Agent Ext"를 설치하고 확장 설정에서 LLM API Key와 모델을 지정하면 된다.
어디에 쓰이는가
| 활용 유형 | 설명 | 예시 명령 |
|---|---|---|
| SaaS AI 코파일럿 | 기존 SaaS 제품에 AI 어시스턴트 추가 | "이번 달 매출 데이터를 CSV로 내보내줘" |
| 스마트 폼 자동화 | 복잡한 폼을 자연어로 자동 입력 | "고객 정보를 폼에 입력하고 제출해줘" |
| 웹 데이터 추출 | 특정 섹션 요약 및 데이터 수집 | "Quick-Start 섹션을 찾아서 요약해줘" |
| 내부 툴 자동화 | 백오피스·인트라넷 반복 작업 자동화 | "이번 주 승인 대기 목록을 모두 처리해줘" |
| 접근성 향상 | 복잡한 UI를 자연어로 단순화 | "설정 메뉴에서 알림을 끄는 방법을 찾아줘" |
| E2E 테스트 | 자연어로 테스트 시나리오 작성 | "로그인 후 상품 검색 플로우를 테스트해줘" |
Playwright·Browser-Use와 무엇이 다른가
| 항목 | Page-Agent | Playwright | Browser-Use | Stagehand |
|---|---|---|---|---|
| 실행 위치 | 페이지 내부 JS | 외부 프로세스 | 외부 프로세스 | 외부 프로세스 |
| 인프라 필요 | 없음 | 헤드리스 브라우저 | 헤드리스 브라우저 | 헤드리스 브라우저 |
| Vision LLM 필요 | 불필요 | 불필요 | 필요 | 선택적 |
| 세션 상속 | 자동 | 별도 세션 | 별도 세션 | 별도 세션 |
| 오프라인 LLM | Ollama 지원 | 해당 없음 | 제한적 | 제한적 |
| 라이선스 | MIT | Apache 2.0 | MIT | MIT |
가장 큰 차이는 방향성이다. Playwright는 QA 엔지니어가 외부에서 페이지를 조작하는 도구지만, Page-Agent는 페이지 자신이 AI 능력을 갖추는 쪽이다. "웹앱이 자동화되는" 것과 "웹앱이 직접 자동화하는" 것의 차이라고 보면 된다.
짧은 역사와 확산 속도
2025년 9월 최초 공개 이후 2026년 3월 기준 v1.5.6까지 20회 릴리즈를 거쳤다.
| 버전 | 출시일 | 주요 변경사항 |
|---|---|---|
| v1.5.6 | 2026-03-11 | 최신 안정 버전 |
| v1.5.4 | 2026-03-09 | includeAttributes 와일드카드 지원, contenteditable 버그 수정 |
| v1.5.3 | 2026-03-09 | GPT-5.4 reasoning_effort 오류 수정, 에러 경계 UI 개선 |
| v1.5.2 | 2026-03-05 | Zod v3/v4 듀얼 지원, PageAgentConfig 타입 구조 개편 |
| v1.0.0 | 2025-09-23 | 최초 공개 |
Hacker News "Show HN" 게시 이후 수일 만에 3,200개의 스타를 모았고 이후로도 꾸준히 늘어 현재 5,800개를 넘겼다. 일본 GIGAZINE, DEV.to, Medium, 중국어권 기술 커뮤니티 등에서 반복적으로 다뤄지고 있다.
도입 전에 확인할 것들
가장 먼저 볼 것은 보안이다. API Key를 클라이언트 코드에 직접 넣는 구조라, 공개 웹사이트에 그대로 적용하면 Key가 노출될 위험이 있다. 내부 툴이나 개발 환경에서 쓰거나, 서버사이드에서 Key를 프록시하는 방식을 권장하는 이유다. 공식 데모 버전은 중국 서버를 경유하는 것으로 알려져 있는데, 자체 API Key와 Base URL을 직접 지정하면 이 문제는 피할 수 있다. 동적으로 렌더링되는 복잡한 SPA에서는 DOM 파싱이 불완전할 수 있고, Shadow DOM이나 iframe 내부 요소는 접근이 제한될 수 있다. 그리고 에이전트의 정확도는 결국 사용하는 LLM의 성능에 달려 있어, 복잡한 작업일수록 더 강력한 모델이 필요하다.
이런 한계에도 불구하고 Page-Agent가 보여주는 방향은 분명하다. 스크립트 한 줄로 어떤 웹 애플리케이션이든 자연어로 조작 가능한 상태로 바꾸고, 추가 인프라 없이 현재 로그인 세션을 그대로 쓸 수 있다는 점에서 기업 내부 툴 자동화와 SaaS AI 코파일럿 구현에 실질적인 선택지가 된다.