Page-Agent 실측: 알리바바 오픈소스 순수 프론트엔드 GUI Agent, 한 줄의 코드로 웹사이트를 AI 네이티브 앱으로
SaaS 제품에 “AI 코파일럿”을 추가하는 것이 얼마나 어려울까요? 전통적인 접근 방식은 기본적으로 두 가지 경로를 제공합니다: 백엔드를 다시 작성하여 Agent 오케스트레이션 시스템을 구축하거나, 브라우저 확장 프로그램이나 헤드리스 브라우저를 설치하여 페이지를 외부에서 제어하거나. 두 경로 모두 가볍지 않습니다.
알리바바의 오픈소스 Page-Agent(GitHub 18.7K Star, MIT 라이선스)는 세 번째 경로를 제공합니다: 웹페이지 안에 사는 순수 페이지 내 JavaScript GUI Agent로, 자연어로 인터페이스를 조작합니다.
브라우저 확장도, Python도, 헤드리스 브라우저도 필요 없습니다——<script> 태그 하나만 있으면, 페이지가 자연어 명령을 이해할 수 있게 됩니다.
Page-Agent란 무엇인가
Page-Agent는 알리바바의 순수 프론트엔드 GUI Agent로, TypeScript로 작성되었으며 브라우저의 JavaScript 런타임 내에서 실행됩니다. 페이지의 DOM을 텍스트로 읽어 인터페이스 구조를 이해하고, LLM을 사용하여 수행할 작업(클릭, 입력, 스크롤 등)을 결정하며, 최종적으로 실제 DOM 작업으로 변환합니다.
핵심 포지셔닝은 매우 명확합니다: 클라이언트 측 웹 향상(Client-side Web Enhancement), 서버 측 자동화 도구가 아닙니다. 타겟 사용자는 제품 개발자입니다——SaaS 제품, ERP/CRM 시스템, 관리 대시보드에 몇 줄의 코드로 AI 운영 기능을 추가할 수 있게 해줍니다.
전통적인 브라우저 자동화와의 본질적 차이
시장의 대부분의 웹 자동화 솔루션은 “외부 제어” 경로를 따릅니다——브라우저 프로세스를 시작하고 CDP 프로토콜을 통해 페이지를 조작합니다. Page-Agent는 정반대 방향으로 갑니다: 페이지 자체의 JS 런타임 내에서, 비즈니스 코드와 같은 프로세스에서 실행됩니다.
| 차원 | Page-Agent | Playwright / Browser Use | Selenium |
|---|---|---|---|
| 실행 위치 | 페이지 내 JS, 같은 프로세스 | 브라우저를 제어하는 외부 프로세스 | 외부 프로세스 + WebDriver |
| 의존성 | <script> 태그 하나 | Python + 브라우저 바이너리 | Java/Python + 드라이버 |
| 사용자 설치 | 설치 제로, 웹페이지에 내장 | 확장 프로그램 또는 Agent 클라이언트 필요 | 드라이버 설정 필요 |
| 인식 방식 | 텍스트 DOM (스크린샷 없음) | 스크린샷 + 멀티모달 LLM / DOM | WebDriver를 통한 DOM |
| 모델 요구사항 | 텍스트 모델만 | 멀티모달 또는 텍스트 | LLM 불필요 |
| 최적 용도 | 제품 내 AI 코파일럿 | 크로스사이트 자동화 / RPA | E2E 테스트 |
| 포지셔닝 | 클라이언트 측 웹 향상 | 서버 측 자동화 | 테스트 프레임워크 |
핵심 기술 아키텍처: DOM 탈수(DOM Dehydration)
Page-Agent의 가장 영리한 설계 결정은 스크린샷을 찍지 않는 것입니다. 대부분의 GUI Agent는 “스크린샷 + 멀티모달 LLM이 이미지를 보고 조작”에 의존하지만, 이 접근 방식은 순수 페이지 내 JS 환경에서는 작동하지 않습니다.
Page-Agent는 **DOM 탈수(DOM Dehydration)**라는 기술을 사용합니다:
- DOM 스캔: 페이지의 Document Object Model을 순회하며 모든 상호작용 요소 식별
- 요소 인덱싱: 각 상호작용 요소에 인덱스 번호를 할당하고 역할과 레이블을 부여
- FlatDomTree 생성: 라이브 DOM을 컴팩트한 텍스트 트리 구조로 변환
- LLM 의사결정: 텍스트 LLM이 이 컴팩트한 표현을 읽고 작업 지시를 출력
- 작업 실행: Agent가 지시를 실제 DOM 작업으로 변환
한 줄 코드 통합
가장 빠른 경험 (무료 테스트 LLM)
<script
src="https://cdn.jsdelivr.net/npm/page-agent@1.12.2/dist/iife/page-agent.demo.js"
crossorigin="anonymous"
></script>NPM 설치 (프로덕션 권장)
npm install page-agentimport { 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: 'ko-KR',
})
await agent.execute('로그인 버튼을 클릭하세요')주요 GUI Agent 솔루션과의 포괄적 비교
| 차원 | Page-Agent | Browser Use | UI-TARS | Playwright MCP |
|---|---|---|---|---|
| 개발자 | 알리바바 | 커뮤니티 OSS | ByteDance | Microsoft |
| 실행 위치 | 페이지 내 JS | 외부 Python 프로세스 | 외부 프로세스 | 외부 Node 프로세스 |
| 인식 방식 | 텍스트 DOM | DOM + 옵션 스크린샷 | 스크린샷 + 멀티모달 | CDP를 통한 DOM |
| 모델 요구사항 | 텍스트 모델 | 텍스트 또는 멀티모달 | 특수화 비전 모델 | 텍스트 모델 |
| 크로스 페이지 | Chrome 확장 필요 | 네이티브 지원 | 네이티브 지원 | 네이티브 지원 |
| 통합 난이도 | ⭐ 매우 낮음 | ⭐⭐⭐ 보통 | ⭐⭐⭐⭐ 높음 | ⭐⭐⭐ 보통 |
| 핵심 시나리오 | 제품 내 코파일럿 | 일반 자동화 | 시각적으로 복잡한 작업 | Agent 브라우저 제어 |
결론
장점
✅ 설치 제로 통합: <script> 태그 하나, 사용자가 인지하지 못함
✅ 가볍고 효율적: 순수 텍스트 DOM, 멀티모달 모델 불필요, 비용 절감
✅ 모델 비종속: OpenAI 호환 API라면 어떤 것이든 지원, 로컬 모델도
✅ 보안 제어: 작업 허용 목록, 데이터 마스킹, 지식 주입
✅ 오픈소스 무료: MIT 라이선스, 상업적 사용 가능
단점
❌ 단일 페이지 제한: 크로스 페이지에는 Chrome 확장 필요 ❌ 시각 정보 손실: Canvas/WebGL 등 시각 집약적 페이지에 부적합 ❌ LLM 의존: 각 작업에 네트워크 지연 및 API 비용 발생 ❌ API 키 보안: 프론트엔드 노출 위험, 백엔드 프록시 필요
누가 사용해야 하고, 누가 사용하지 말아야 하는가
사용해야 하는 사람:
- SaaS 개발자: 제품에 AI 코파일럿 추가
- 기업 IT: 내부 시스템 최적화 (ERP/CRM/OA)
- 접근성 개발자: 장애가 있는 사용자에게 웹페이지를 더 친절하게
사용하지 말아야 하는 사람:
- 테스트 엔지니어: Playwright가 더 적합
- 크롤러 개발자: Puppeteer/Cheerio가 더 적합
- 크로스사이트 자동화: Browser Use가 더 적합
이 블로그 게시물이 도움이 되셨기를 바랍니다!
