page-agent: 자연어로 웹 화면을 조작하는 인페이지 GUI 에이전트 (feat. Alibaba)

읽을거리&정보공유
, , , , , ,
1

page-agent: 자연어로 웹 화면을 조작하는 인페이지 GUI 에이전트
page-agent: 자연어로 웹 화면을 조작하는 인페이지 GUI 에이전트1536×1024 240 KB

page-agent 소개

웹 서비스에 AI 코파일럿을 붙이려면 보통 백엔드를 새로 짜거나, 별도의 브라우저 확장·헤드리스 브라우저를 띄우는 무거운 작업이 필요합니다. page-agent는 이 과정을 자바스크립트 한 줄로 줄이는 것을 목표로 하는 인페이지(in-page) GUI 에이전트입니다. 별도의 브라우저 확장이나 파이썬 런타임, 헤드리스 브라우저 없이, 웹 페이지 안에서 실행되는 자바스크립트만으로 사용자의 자연어 명령을 해석하고 화면의 버튼과 입력 필드를 직접 조작합니다.

page-agent를 다른 브라우저 자동화 도구와 구분 짓는 지점은 스크린샷 기반 멀티모달 인식을 쓰지 않는다는 점입니다. 페이지의 DOM을 텍스트로 분석해 클릭·입력할 요소를 찾기 때문에 별도의 화면 캡처 권한이나 이미지 인식 모델이 필요 없습니다. 또한 특정 LLM 제공사에 종속되지 않고 사용자가 원하는 LLM을 직접 연결해 쓸 수 있도록 설계되어 있어, SaaS 코파일럿부터 반복적인 폼 입력 자동화, 접근성 보조까지 다양한 용도로 활용할 수 있습니다.

이 프로젝트는 Alibaba가 공개한 오픈소스로, README는 웹 자동화 에이전트 browser-use의 DOM 처리 구성 요소와 프롬프트 설계를 참고해 만들었다고 명시하고 있습니다. 2026년 7월 기준 GitHub에서 22,000개 이상의 스타를 받았으며, 최신 릴리스는 v1.10.0입니다.

page-agent의 동작 원리

page-agent의 전체 동작 흐름
page-agent의 전체 동작 흐름1536×1024 211 KB

page-agent가 명령 하나를 처리하는 과정은 크게 네 단계로 나뉩니다. 먼저 사용자가 채팅창 형태의 입력창에 "로그인 버튼을 클릭해줘"처럼 하고 싶은 작업을 자연어로 적습니다. 이 문장은 사용자가 연결해 둔 LLM(예: Qwen, OpenAI 호환 모델 등)으로 전달되어 의도가 파악되고, 실행해야 할 동작으로 변환됩니다.

다음으로 page-agent는 현재 페이지의 DOM 트리를 텍스트 형태로 분석해 명령과 일치하는 버튼·입력 필드·링크 등의 요소를 찾습니다. 스크린샷을 찍어 이미지 모델에 넘기는 방식이 아니라 DOM 구조 자체를 읽기 때문에, 화면에 보이지 않는 요소나 스크롤이 필요한 영역도 비교적 안정적으로 인식할 수 있습니다. 마지막으로 찾아낸 요소에 클릭이나 값 입력 같은 실제 동작을 수행하며, 이 모든 과정이 별도의 백엔드 서버나 확장 프로그램 없이 페이지에 로드된 자바스크립트 안에서 끝납니다.

여러 탭에 걸친 작업이 필요하면 Chrome 확장 프로그램을 추가로 설치해 페이지 간 이동까지 처리할 수 있고, 베타 단계의 MCP 서버를 통해 외부 에이전트 클라이언트가 브라우저를 원격으로 제어하도록 열어 둘 수도 있습니다.

page-agent의 주요 기능

page-agent README는 다음과 같은 활용 사례를 제시합니다.

  • SaaS AI 코파일럿: 몇 줄의 코드만으로 제품에 AI 코파일럿을 붙일 수 있어, 별도의 백엔드 재작성이 필요 없습니다.
  • 스마트 폼 채우기: ERP·CRM·관리자 시스템처럼 클릭이 20번씩 필요한 반복 작업을, 문장 하나로 줄여줍니다.
  • 접근성 보조: 음성 명령이나 스크린 리더 사용자도 자연어만으로 웹 앱을 조작할 수 있게 합니다.
  • 멀티 페이지 에이전트: Chrome 확장 프로그램을 통해 여러 브라우저 탭에 걸친 작업으로 에이전트의 범위를 넓힐 수 있습니다.
  • MCP 연동: MCP를 지원하는 외부 에이전트 클라이언트가 브라우저를 직접 제어하도록 허용합니다.

page-agent 설치 및 사용법

가장 빠르게 사용해보는 방법은 CDN 스크립트 한 줄을 페이지에 추가하는 것입니다. 다만 이 방식은 page-agent가 제공하는 무료 테스트용 LLM API를 사용하므로, README는 기술 평가 목적으로만 사용할 것을 명시하고 있습니다.

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.11.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>

실제 서비스에 통합할 때는 npm으로 설치한 뒤, 원하는 LLM을 직접 연결해 사용합니다.

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')

더 상세한 프로그래매틱 사용법은 공식 문서에서 확인할 수 있습니다.

page-agent의 라이선스

page-agent는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

:house: page-agent 공식 데모·홈페이지

:books: page-agent 문서 사이트

:github: page-agent 프로젝트 GitHub 저장소

:chrome: page-agent Chrome Extension 다운로드

더 읽어보기



이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: