cd ..

Page-Agent: 웹페이지 안에 사는 GUI 에이전트

# AI Agent # Browser # TypeScript # LLM Providers
정석

Page-Agent

브라우저 자동화 하면 무엇이 떠오르는가. Selenium? Playwright? Puppeteer? 모두 강력한 도구지만, 한 가지 공통점이 있다. 외부에서 브라우저를 제어한다는 점이다.

Page-Agent는 다른 접근법을 취한다. 에이전트를 웹페이지 안에 넣는다. 브라우저 확장도, Python 런타임도, 헤드리스 브라우저도 필요 없다. 그냥 JavaScript 코드를 페이지에 주입하면 끝이다.

1. 왜 Page-Agent인가

기존 방식의 문제

AI 에이전트가 웹을 제어할 때:

  1. 외부 의존성 - Python, Node.js, 브라우저 드라이버, 확장 프로그램…
  2. 스크린샷 기반 - OCR이나 멀티모달 LLM 필요, 토큰 비용 폭증
  3. 무거운 인프라 - 헤드리스 브라우저, 컨테이너, 서버 필요
  4. 복잡한 설정 - CDP, WebDriver, 권한, 보안 설정…

Page-Agent의 접근

npm install page-agent

그게 전부다. 브라우저 확장? 없다. Python? 필요 없다. 헤드리스 브라우저? 선택사항이다.

Page-Agent UI

핵심 철학:

웹페이지 안에서 JavaScript로 DOM을 직접 조작한다. 스크린샷? 불필요하다. OCR? 필요 없다. 그냥 일반 LLM으로 충분하다.

2. 핵심 특징

2.1 브라우저 확장 불필요

Page-Agent는 순수 JavaScript로 동작한다.

import { PageAgent } from 'page-agent';

const agent = new PageAgent({
  model: 'gpt-4',  // 또는 qwen, claude 등
});

await agent.run('로그인 버튼을 클릭해줘');

페이지에 스크립트만 주입하면 된다. 크롬 확장, 파이어폭스 애드온, 어떤 것도 설치할 필요 없다.

2.2 스크린샷 없이 텍스트 기반 DOM 조작

여기가 혁신적이다. Page-Agent는 DOM을 텍스트로 표현한다.

[버튼] 로그인
[입력] 이메일 주소
[입력] 비밀번호
[링크] 비밀번호 찾기
[버튼] 회원가입

스크린샷을 찍어서 OCR로 읽고, 멀티모달 LLM으로 분석하고… 이런 복잡한 과정이 필요 없다. DOM 자체가 이미 구조화된 텍스트다.

토큰 효율성:

방식토큰 소모
스크린샷 + 멀티모달10,000+
HTML 그대로5,000-15,000
Page-Agent DOM 텍스트500-1,000

2.3 OCR/멀티모달 LLM 불필요

일반 텍스트 LLM으로 충분하다. GPT-4, Claude, Qwen, 어떤 모델이든 작동한다.

이유:

2.4 BYOLLM (Bring Your Own LLM)

Page-Agent는 특정 LLM에 종속되지 않는다.

const agent = new PageAgent({
  model: 'qwen-plus',  // 알리바바 Qwen
  apiKey: process.env.QWEN_API_KEY,
});
const agent = new PageAgent({
  model: 'claude-3-opus',  // Anthropic
  apiKey: process.env.ANTHROPIC_API_KEY,
});
const agent = new PageAgent({
  model: 'gpt-4-turbo',  // OpenAI
  apiKey: process.env.OPENAI_API_KEY,
});

OpenAI SDK 호환 API를 지원하는 모든 LLM과 작동한다.

2.5 Human-in-the-Loop UI

Page-Agent는 실시간 UI를 제공한다. 에이전트가 무엇을 하고 있는지, 어떤 행동을 계획하고 있는지 시각적으로 확인할 수 있다.

Human-in-the-Loop UI

기능:

2.6 선택적 Chrome 확장으로 멀티 페이지 작업 지원

기본적으로 Page-Agent는 단일 페이지에서 동작한다. 하지만 선택적 Chrome 확장을 설치하면 여러 탭/페이지 작업이 가능하다.

확장 없이: 현재 페이지만 제어 확장 있이: 여러 탭, 새 창, 탭 전환 모두 가능

3. 기술 아키텍처

작동 원리

1. 사용자 입력: "로그인해줘"
2. DOM 스캔: 페이지의 모든 인터랙티브 요소 수집
3. 텍스트 변환: DOM을 LLM 친화적 텍스트로 변환
4. LLM 추론: 어떤 요소를 조작할지 결정
5. 액션 실행: 클릭, 입력, 스크롤 등 수행
6. 결과 확인: DOM 변화 감지 및 다음 행동 결정

기반 기술

4. 실제 활용 사례

4.1 SaaS AI Copilot

SaaS 제품에 Page-Agent를 내장하여 사용자가 자연어로 앱을 제어할 수 있다.

“이번 달 매출 리포트 만들어줘” “가장 최근 주문 5개 보여줘” “설정에서 알림 끄고 싶어”

별도의 자동화 스크립트나 API 연동 없이, 그냥 Page-Agent가 DOM을 조작한다.

4.2 스마트 폼 필링

ERP, CRM, 관리자 페이지 등 복잡한 폼을 자동으로 채운다.

agent.run(`
  고객 정보 폼을 채워줘:
  - 이름: 홍길동
  - 이메일: hong@example.com
  - 회사: (주)테스트
  - 연락처: 010-1234-5678
`);

4.3 접근성 (음성 명령)

시각 장애인이나 모터 이슈가 있는 사용자를 위한 음성 기반 웹 탐색.

음성: “로그인해줘” Page-Agent: 로그인 버튼 클릭 음성: “아이디는 user123, 비밀번호는 pass456” Page-Agent: 폼 채우기 및 제출

4.4 테스트 자동화

E2E 테스트를 자연어로 작성.

agent.run(`
  1. 상품 페이지로 이동
  2. 첫 번째 상품 클릭
  3. 장바구니에 담기
  4. 장바구니 페이지로 이동
  5. 상품이 1개인지 확인
`);

4.5 데이터 수집

복잡한 페이지네이션, 무한 스크롤, 동적 콘텐츠도 처리.

agent.run(`
  모든 상품 이름과 가격을 수집해줘.
  스크롤하면서 더 불러오기도 처리해.
`);

5. 빠른 시작

설치

npm install page-agent

기본 사용법

import { PageAgent } from 'page-agent';

// 에이전트 생성
const agent = new PageAgent({
  model: 'gpt-4',
  apiKey: process.env.OPENAI_API_KEY,
});

// 자연어로 웹페이지 제어
await agent.run('검색창에 "알리바바"를 입력하고 검색해줘');

브라우저에서 직접 사용

<script type="module">
  import { PageAgent } from 'https://cdn.example.com/page-agent.js';

  const agent = new PageAgent({
    model: 'qwen-plus',
    apiKey: 'YOUR_API_KEY',
  });

  // UI 표시
  agent.showUI();

  // 명령 실행
  await agent.run('회원가입 폼을 채워줘');
</script>

Human-in-the-Loop 모드

const agent = new PageAgent({
  model: 'gpt-4',
  apiKey: process.env.OPENAI_API_KEY,
  humanInTheLoop: true,  // 모든 행동에 승인 요청
});

agent.on('action', (action) => {
  console.log('계획된 행동:', action);
  // 사용자에게 승인 요청 UI 표시
});

agent.on('approval', (approved) => {
  if (approved) {
    agent.proceed();
  } else {
    agent.cancel();
  }
});

6. 다른 도구와의 비교

기능Page-AgentPlaywrightSeleniumPuppeteer
브라우저 확장불필요필요필요필요
스크린샷불필요선택선택선택
OCR/멀티모달불필요미지원미지원미지원
자연어 제어기본미지원미지원미지원
멀티 페이지선택적 확장완전 지원완전 지원완전 지원
설치 복잡도매우 낮음중간높음중간
토큰 효율성매우 높음N/AN/AN/A

7. 언제 사용해야 하나

추천 상황

비추천 상황

8. 제한사항

현재 제한

  1. 단일 페이지 기본 - 멀티 탭은 Chrome 확장 필요
  2. 동일 출처 정책 - CORS 제한 적용
  3. 동적 iframe - 일부 제약 존재
  4. Canvas/WebGL - 텍스트 기반이라 시각적 요소 제한

해결 방안

9. 알리바바의 전략

Page-Agent는 알리바바가 오픈소스로 공개했다. 왜?

  1. Qwen 생태계 확장 - Qwen 모델을 쓰면 더 잘 작동한다
  2. 클라우드 서비스 연동 - 알리바바 클라우드 서비스와 통합
  3. 개발자 커뮤니티 - 생태계 확대를 통한 경쟁력 강화

MIT 라이선스로 완전히 오픈소스다. 상업적 사용도 자유롭다.

마치며: 브라우저 자동화의 민주화

Page-Agent는 **“브라우저 자동화를 누구나”**라는 비전을 가진다.

핵심 가치

  1. 단순함 - npm install page-agent, 끝
  2. 접근성 - 브라우저 확장, Python, 헤드리스 브라우저 불필요
  3. 효율성 - 스크린샷 없이, 일반 LLM으로 충분
  4. 유연성 - BYOLLM, 어떤 모델이든 사용 가능
  5. 투명성 - Human-in-the-Loop UI로 모든 행동 확인

빠른 시작

npm install page-agent
import { PageAgent } from 'page-agent';

const agent = new PageAgent({ model: 'gpt-4' });
await agent.run('이 페이지에서 할 수 있는 것들을 알려줘');

브라우저 자동화가 이렇게 간단해질 수 있다. Page-Agent가 증명한다.

🔗 관련 정보

# AI Agent # Browser # TypeScript # LLM Providers
Compartir
이전
AgentHub: AI 에이전트를 위한 협업 플랫폼
다음
1Code: 코딩 에이전트를 위한 오케스트레이션 레이어