PageAgent: 한 줄의 코드로 웹사이트를 AI 네이티브 앱으로 만드는 GUI 에이전트
by NyangPolice
PageAgent란?
Alibaba에서 개발한 PageAgent는 Javascript 기반의 In-Page GUI Agent이다. 웹사이트에 일종의 AI copilot을 추가해서 자연어 명령으로 웹페이지 제어를 가능하게 만든다.
기본 브라우저 자동화 도구와의 차이
Playwright, Selenium같은 브라우저 자동화 도구들은 브라우저 외부에서 다른 서버나 python 스크립트를 통해 브라우저를 제어한다. 반면 PageAgent는 웹페이지 내부에 삽입되므로 순수 javascript만을 이용해 동작한다.
사용 예시
가장 간단한 사용방법은 HTML 안에 <script src="<URL-to-page-agent>" crossorigin="true"></script>를 추가하는 것이다. 그러면 웹페이지에 PageAgent가 로드되고, window.pageAgent 객체를 통해 제어할 수 있다. URL에 대해서는 여기 참조.
PageAgent를 삽입했다면 다음과 같이 뜰 것이다.
예시 웹사이트는 해외 회원가입 사이트에서 국적을 선택하는 상황을 모사한 것이다. 대한민국을 찾아줘같은 자연어 명령어를 내리면 대한민국을 잘 선택하는 것을 볼 수 있다. 뿐만 아니라 Daehanminkook같은 요상한 이름으로 되어있어도 잘 찾아냈었다.
동영상에서는 북마크를 이용해 PageAgent를 삽입한 경우이다. 북마크 방식은 여기서 Try on Other Sites에서 하라는대로 하면 된다.
특징
- 아주 쉬운 통합
- 텍스트 기반 DOM 처리 : 스크린샷이나 OCR같은거 안쓰고 직접 HTML DOM을 파싱하므로 HTML 요소 별 적절한 액션을 생성, LLM 토큰을 아낄 수 있음 (모델 API를 직접 고른다면)
- BYOLLM (Bring Your Own LLM) : API 포맷 호환되는 어떤 LLM 모델이라도 사용 가능함. GPU 메모리가 빵빵하다면 로컬에 모델 설치해서 사용 가능하며 이 경우 후술할 보안 걱정도 해결할 수 있음
- Human-in-the-Loop UI : Agent가 중요한 액션 수행 전 유저에게 무엇을 할 건지 보여주고, 최종 결정은 사람이 할 수 있음
- 멀티페이지 지원 : 크롬 확장프로그램 설치하면 여러 탭에 걸쳐서 복잡한 워크플로우도 수행 가능
비판
- 보안 우려 : 아무래도 현재 무료 테스트 LLM이 중국 본토 서버에 있다는 점, 그리고 사용자 세션에 접근이 가능해 보안 토큰에 접근 가능하다는 점이 여러 커뮤니티에서 우려 사항으로 떠오르고 있음. 물론 이건 다른 npm 패키지나 브라우저 확장프로그램이 갖는 공통적인 문제이지만 아무래도 회사 국적이 국적이니만큼 더 우려가 되는 것은 어쩔 수 없는 듯 하다.
- 복잡한 DOM에서 성능 저하 : 개발자가 직접 말하기를 “HTML 디하이드레이션 스크립트가 시간이 갈수록 무거워지고 있으며, 전체 작업 성공률에 가장 큰 영향을 미치는 핵심 요소” 라고 함.
결론
정식 출시가 올해 1월 22일인 아주 따끈따끈한 프로젝트이니만큼 발전 가능성이 크고 글을 쓰고 있는 시점 직전에 베타버전 MCP도 나오고 있을 만큼 개발이 활발하게 이루어지고 있다. 아마 “와 신기하다”의 일발성 감탄이 아니라 아주 유용한 개발 tool이 될 것으로 기대된다.
tags: page-agent - alibaba - gui-agent - ai-copilot - 웹자동화Tools 카테고리의 글 목록
-
PageAgent: 한 줄의 코드로 웹사이트를 AI 네이티브 앱으로 만드는 GUI 에이전트
-
-
-