TL;DR

Page Agent는 웹페이지에 직접 로드되는 JavaScript 인페이지 에이전트로, 자연어 명령을 LLM에 전달해 텍스트 기반 액션 시퀀스로 변환하고 그 결과를 DOM 조작으로 실행하는 방식이다. 별도 백엔드나 헤드리스 브라우저 없이 클라이언트에서 즉시 통합할 수 있으며 자체 LLM 연결과 옵션의 Chrome extension 및 MCP Server로 다중 페이지 워크플로를 지원한다. 이 설계는 ERP·CRM 등의 반복적 UI 작업을 단순화하고 접근성을 개선하는 동시에 서버 측 리팩터링 없이도 제품에 AI 코파일럿을 신속히 추가할 수 있다는 장점을 제공하지만 데모용 LLM 사용 시 제약과 브라우저 권한 범위 내에서만 동작하는 한계가 존재한다.

주요 기능

• 웹 페이지 내에서 자연어 기반으로 UI 요소를 클릭하고 입력을 자동화한다. 에이전트는 텍스트 명령을 파싱해 적절한 셀렉터를 찾고 클릭·타이핑·스크롤 같은 DOM 조작을 연속적으로 수행한다. 별도 백엔드나 헤드리스 브라우저 없이 클라이언트 컨텍스트에서 동작하도록 설계되어 통합 비용이 낮다.
• 외부 LLM을 자유롭게 연결할 수 있어 데모 모델 대신 자체 모델을 사용한다. 사용자는 baseURL과 apiKey를 설정해 원하는 LLM 엔드포인트를 연결하며 이로써 지연시간·보안·비용을 제어할 수 있다. 기본 제공 데모는 평가용이며 실서비스에는 자체 모델 연결이 권장된다.
• 옵션으로 Chrome extension과 MCP Server를 통해 다중 페이지·다중 탭 워크플로를 처리한다. Chrome extension은 브라우저 권한을 활용해 탭 간 제어를 가능하게 하고 MCP Server는 외부 클라이언트로부터 에이전트를 제어하는 중앙 접점 역할을 한다. 이 조합은 단일 페이지 한계를 넘어서는 자동화 시나리오를 지원한다.

어떻게 동작하는가

Page Agent는 브라우저에서 직접 로드되는 JavaScript 코드로 동작하며 자연어 명령을 LLM에 전달해 텍스트 기반의 액션 시퀀스로 변환한다. 변환된 시퀀스는 DOM 셀렉터를 통해 클릭·입력·스크롤 등 브라우저 이벤트로 매핑되어 페이지 내에서 즉시 실행된다. 다중 페이지 흐름의 경우 Chrome extension과 MCP Server를 통해 탭 간 제어와 외부 제어를 연동하는 아키텍처를 사용한다.

해결 문제

반복적인 UI 조작과 복잡한 클릭 시퀀스를 자연어 한 문장으로 대체해 사용자 작업을 단순화하는 문제를 해결한다. 이로 인해 ERP·CRM 같은 다단계 폼 입력과 내부 관리 시스템에서 수작업 비용이 감소한다. 또한 백엔드 리팩터링 없이 클라이언트 측에 즉시 배포할 수 있어 통합 장벽을 낮춘다.

지금 주목받는 이유

프로젝트는 높은 GitHub 스타 수와 공개 데모, Hacker News 토론 링크로 인해 주목받고 있다. 데모를 통한 손쉬운 체험 경로와 npm 패키지, CDN 미러 제공이 사용 확산을 촉진했다. 또한 브라우저 내 자연어 제어라는 실용적 접근이 여러 실무 시나리오와 맞물리며 관심을 끌고 있다.

차별점

• 브라우저 확장이나 헤드리스 브라우저 없이도 페이지 내에서 직접 동작하는 점이 차별화 요소이다. 대부분의 자동화 솔루션은 외부 브라우저 드라이버나 서버 측 오케스트레이션을 필요로 하는 반면 Page Agent는 클라이언트 로드형 스크립트로 즉시 통합이 가능하다. 이 설계는 배포 복잡도를 줄이고 프런트엔드 중심 제품에 빠르게 도입할 수 있게 한다.
• 텍스트 기반 DOM 조작만 사용하므로 스크린샷·멀티모달 LLM이나 추가 권한을 요구하지 않는다. 이로 인해 브라우저 렌더링을 그대로 활용하면서도 접근성 향상과 낮은 권한 모델을 유지할 수 있다. 결과적으로 민감한 화면 캡처를 회피하고 텍스트로만 제어하는 환경에서 보안·프라이버시 부담을 줄인다.

사용 사례

• SaaS 제품에 AI 코파일럿을 빠르게 추가해 사용자 인터페이스 내에서 자연어로 작업을 수행하게 하는 용도로 활용할 수 있다. 클라이언트 측 스크립트로 통합되므로 기존 백엔드를 변경하지 않고도 기능을 배포할 수 있다. 특히 설정이 복잡한 내부 도구에 낮은 개발 비용으로 코파일럿 기능을 부여할 때 유용하다.
• 대량의 반복적 폼 입력과 메뉴 탐색이 필요한 ERP·CRM 시스템에서 스마트 자동 입력기로 사용해 클릭 수를 줄일 수 있다. 사용자는 업무 흐름을 한 문장으로 기술하면 에이전트가 필요한 클릭과 입력을 순차적으로 수행한다. 이 과정은 업무 효율과 사용성 개선 효과를 동시에 제공한다.
• 접근성 향상 목적으로 음성 명령이나 스크린리더 연동을 통해 웹 앱을 제어하는 도구로 활용할 수 있다. 텍스트 기반 명령 해석과 DOM 조작을 결합해 시각·운동 제약이 있는 사용자가 인터페이스를 더 쉽게 다룰 수 있도록 한다. 추가로 보이스 인터페이스를 연결하면 무장애 사용 사례를 확장할 수 있다.

시작하기

가장 빠른 시작 방법은 README에 제시된 데모 CDN 스크립트를 페이지에 삽입하는 것이다. 필요 시 ?autoInit=false를 붙여 자동 인스턴스화를 막고 new window.PageAgent(...)로 수동 생성해 설정을 전달하면 된다. 개발 환경에서는 npm install page-agent로 패키지를 설치한 뒤 import { PageAgent } from 'page-agent' 형태로 불러와 baseURL과 apiKey를 설정한 뒤 agent.execute(...)로 명령을 실행하면 된다.

요구사항

• 브라우저 환경에서 실행되는 JavaScript 로드가 가능해야 하며 TypeScript를 사용하는 프로젝트는 패키지를 그대로 임포트해 사용할 수 있다. 별도 백엔드나 헤드리스 브라우저는 필수 요소가 아니며 선택적 Chrome extension과 MCP Server는 다중 페이지 제어 시 요구된다. 외부 LLM을 연결하려면 유효한 LLM 엔드포인트와 API 키가 필요하다.