웹 서비스에 AI 기능을 추가하려고 할 때 많은 개발자와 기획자가 비슷한 고민을 합니다.
AI Copilot을 넣고 싶지만 백엔드 수정이 부담스럽고, 브라우저 확장이나 자동화 도구는 배포와 보안 이슈가 걸립니다.
이 글에서는 이러한 고민을 가장 단순한 방식으로 해결하려는 시도인 page-agent를 중심으로, 기술 개념부터 동작 방식, 주요 특징, 활용 시나리오까지 상세히 정리합니다.
page-agent 개요
page-agent는 웹페이지 내부에서 직접 실행되는 in-page AI 에이전트입니다.
별도의 SDK 설치나 서버 연동 없이, 다음 한 줄의 코드만 추가하면 웹페이지가 AI 네이티브 인터페이스로 확장됩니다.
<script src="page-agent.js"></script>
이 구조의 핵심은 **“웹 자동화를 외부에서 제어하지 않고, 웹페이지 안에서 수행한다”**는 점입니다.
즉, 웹사이트 자체가 AI 실행 환경이 됩니다.
기술적 배경: 기존 웹 자동화 방식의 한계
기존 AI 기반 웹 자동화는 다음과 같은 방식에 의존해 왔습니다.
- 브라우저 확장 프로그램
- Python 기반 자동화 스크립트
- 헤드리스 브라우저
- 스크린샷 + OCR + 멀티모달 모델
이 방식들은 강력하지만 다음과 같은 문제를 동반합니다.
- 사용자가 별도 설치를 해야 함
- 브라우저 권한 요청으로 보안 검토가 까다로움
- 화면 기반 인식으로 정확도와 속도에 한계
- 서비스 내부 로직과 분리되어 유지보수가 어려움
page-agent는 이러한 구조적 한계를 해결하기 위해 DOM 중심, in-page 실행 모델을 선택했습니다.
핵심 구조: In-page 실행 모델이란?
page-agent의 모든 로직은 웹페이지 내부 JavaScript 컨텍스트에서 실행됩니다.
이 방식이 의미하는 것
- 외부에서 화면을 “조작”하지 않음
- 웹페이지가 스스로 자신의 DOM을 제어
- 별도의 권한 요청이 필요 없음
결과적으로 보안 부담이 줄어들고,
기존 서비스 코드에 최소한의 변경만으로 AI 기능을 추가할 수 있습니다.
자연어 기반 DOM 제어 방식
page-agent는 스크린샷이나 이미지 인식을 사용하지 않습니다.
대신 텍스트 기반 DOM 구조를 직접 이해하고 조작합니다.
예를 들어 사용자가 다음과 같이 입력하면,
“이 폼을 작성하고 다음 단계로 이동해줘”
AI는 다음 과정을 내부적으로 수행합니다.
- DOM 트리 분석
- 입력 필드, 버튼, 링크 식별
- 명령 의도에 맞는 요소 선택
- 클릭, 입력, 전환 수행
이 방식의 장점은 명확합니다.
- 화면 해상도, 테마, UI 변경에 강함
- 처리 속도가 빠름
- OCR 오류 없음
- 멀티모달 모델이 필요 없음
지원하는 AI 모델과 실행 환경
page-agent는 특정 LLM에 종속되지 않습니다.
다음과 같은 다양한 모델과 연동이 가능합니다.
- OpenAI
- Claude
- DeepSeek
- Qwen
또한 Ollama를 활용한 로컬 실행을 지원하여,
인터넷 연결 없이도 완전 오프라인 환경에서 AI 에이전트를 운용할 수 있습니다.
이는 보안 요구사항이 높은 기업 환경이나 내부 업무 시스템에서 특히 중요한 포인트입니다.
Human-in-the-loop 인터페이스
page-agent는 완전 자동화를 지향하지만,
동시에 사람이 중간에 개입할 수 있는 구조를 제공합니다.
- AI가 제안 → 사람이 확인
- 자동 실행 전 승인
- 결과 수정 후 재실행
이 구조는 다음과 같은 상황에서 효과적입니다.
- 실수 비용이 큰 업무 자동화
- 고객 데이터가 포함된 작업
- 복잡한 관리자 화면 조작
즉시 사용 가능한 테스트 방식
page-agent는 진입 장벽이 매우 낮습니다.
북마클릿 기반 테스트
- 어떤 웹페이지든 바로 AI 에이전트 실행 가능
- 개발 환경 없이 빠른 검증 가능
Chrome 확장 활용
- 멀티 페이지를 넘나드는 작업 지원
- 브라우저 레벨 제어 가능
- 외부 시스템 연동까지 확장 가능
주요 활용 사례 상세 정리
1. SaaS 제품 내 AI Copilot
기존 SaaS 제품에 AI Copilot을 추가하려면 보통 서버 수정이 필요합니다.
page-agent를 활용하면 프론트엔드만으로 Copilot을 구현할 수 있습니다.
- 사용자 행동 가이드
- 설정 자동화
- 반복 작업 보조
2. 스마트 폼 및 관리자 도구 자동화
ERP, CRM, 내부 관리자 페이지는
입력 필드와 클릭 단계가 많아 생산성을 떨어뜨립니다.
page-agent는 이를 다음과 같이 바꿉니다.
- “이번 달 매출 리포트 생성해줘”
- “고객 정보 등록하고 승인 요청까지 진행해줘”
다단계 UI 흐름을 한 문장 명령으로 축약할 수 있습니다.
3. 웹 접근성 개선
page-agent는 접근성 강화에도 활용할 수 있습니다.
- 음성 명령 기반 웹 조작
- 스크린리더와 결합 가능
- 키보드 접근이 어려운 사용자 지원
이는 단순 편의 기능을 넘어,
웹 접근성 요구사항을 충족하는 실질적인 대안이 될 수 있습니다.
page-agent는 “AI를 웹에 붙인다”는 기존 관점을 바꿉니다.
- 복잡한 인프라 없이
- 외부 자동화 도구 없이
- 코드 한 줄로 AI 경험 제공
특히 SaaS, 내부 업무 시스템, 접근성 강화 영역에서
빠르게 실험하고 바로 적용할 수 있는 현실적인 대안입니다.
앞으로 웹 서비스의 경쟁력은
기능의 개수보다 얼마나 자연스럽게 사용자를 도와주는가에 달려 있습니다.
page-agent는 그 출발점을 매우 낮은 비용으로 제공하는 도구라고 볼 수 있습니다.
https://alibaba.github.io/page-agent/
PageAgent.js - AI-powered GUI Agent
The GUI Agent living in your website.
alibaba.github.io
'인공지능' 카테고리의 다른 글
| 잇따른 장애 이후, Amazon이 AI 지원 코드 변경에 ‘시니어 승인’을 의무화한 이유 (0) | 2026.03.11 |
|---|---|
| 에이전트가 스스로 모델을 튜닝하다: nanochat 자동 리서치(autoresearch)가 만든 11% 성능 향상 (0) | 2026.03.11 |
| 에이전트 시대, 문학적 프로그래밍을 다시 바라봐야 하는 이유 (0) | 2026.03.11 |
| Gemini Embedding 2: 네이티브 멀티모달 임베딩의 새로운 기준 (0) | 2026.03.11 |
| CLI-Anything으로 모든 소프트웨어를 에이전트 네이티브로 만드는 방법 (0) | 2026.03.10 |
