Sentinel: Playwright 기반의 오픈소스 AI 브라우저 자동화 도구

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

Sentinel은 기존 Playwright 환경에 AI 기능을 더해 자연어만으로 브라우저 자동화를 구현할 수 있게 돕는 오픈소스 도구입니다. 웹사이트 디자인이 변경되어도 스스로 요소를 다시 찾아내는 자가 치유 로케이터 기능을 갖추고 있으며, Gemini Flash를 기본 모델로 사용하여 운영 비용을 타사 대비 40배 이상 낮췄습니다. 스마트 요소 필터링을 통해 액션당 토큰 사용량을 2-5k 수준으로 최적화하여 성능과 경제성을 동시에 확보했습니다. 개발자는 기존 Playwright 테스트 코드에 한 줄의 코드로 AI 기능을 확장하거나 독립적인 자율 에이전트 루프를 실행할 수 있습니다.

배경

Node.js 환경, Playwright 기본 지식, Gemini 또는 OpenAI API 키

대상 독자

Node.js 및 Playwright를 사용하는 QA 엔지니어 및 LLM 기반 웹 에이전트 개발자

의미 / 영향

이 도구는 LLM 기반 브라우저 자동화의 가장 큰 장벽이었던 비용과 속도 문제를 해결하여 AI 에이전트의 실무 도입을 가속화할 것입니다. 특히 오픈소스이면서도 기업용 모니터링(OpenTelemetry)과 병렬 처리를 지원하여 프로덕션 수준의 자동화 구축이 용이해졌습니다.

섹션별 상세

기존 브라우저 자동화 도구들은 CSS 선택자가 조금만 바뀌어도 스크립트가 깨지는 유지보수 문제를 안고 있었습니다. Sentinel은 자연어로 요소를 설명하면 AI가 이를 찾아내고, 성공한 선택자를 캐싱하여 재사용하는 자가 치유 로케이터 방식을 채택했습니다. 이를 통해 사이트 리뉴얼 시에도 코드 수정 없이 자동화 프로세스를 유지할 수 있어 유지보수 비용이 크게 절감됩니다.

typescript

import { Sentinel } from '@isoldex/sentinel';
const sentinel = new Sentinel({ apiKey: process.env.GEMINI_API_KEY });
await sentinel.init();
await sentinel.goto('https://amazon.de');
const result = await sentinel.run(
  'Search for laptop, find the cheapest one, extract name and price'
);
console.log(result.data); // { name: 'Acer Aspire 3', price: '€349' }
await sentinel.close();

Sentinel을 사용하여 자연어 명령으로 아마존에서 최저가 노트북 정보를 추출하는 기본 예시

근거

성공한 선택자를 캐싱하여 재사용함으로써 이후 실행 시 LLM 호출을 건너뜁니다. — Self-Healing Locators 및 Action fallback pipeline 설명

대규모 언어 모델을 브라우저 자동화에 사용할 때 발생하는 높은 API 비용과 지연 시간이 도입의 걸림돌이었습니다. Sentinel은 AOM Parser를 통해 상호작용 가능한 요소만 선별하여 전달함으로써 액션당 토큰 사용량을 Stagehand(29-51k) 대비 10분의 1 수준인 2-5k로 줄였습니다. 결과적으로 실행당 비용을 약 $0.003 수준으로 낮추어 프로덕션 환경에서의 실용성을 높였습니다.

typescript

const results = await Sentinel.parallel(
  [
    { url: 'https://amazon.de', goal: 'Find cheapest laptop' },
    { url: 'https://ebay.de', goal: 'Find cheapest laptop' },
    { url: 'https://otto.de', goal: 'Find cheapest laptop' },
  ],
  { apiKey: process.env.GEMINI_API_KEY, concurrency: 3 }
);

여러 사이트에서 동시에 데이터를 수집하기 위해 병렬 실행 기능을 사용하는 예시

근거

Sentinel은 Stagehand 대비 토큰 사용량을 10배 줄여 실행 비용을 약 40배 절감했습니다. — Sentinel vs Stagehand 비교 표 및 Features 섹션

복잡한 웹 환경인 Shadow DOM이나 iframe, Canvas 기반의 요소들은 일반적인 자동화 도구로 접근하기 까다로웠습니다. Sentinel은 AOM 분석, 로케이터 캐시, 비전 그라운딩으로 이어지는 3단계 폴백 파이프라인을 통해 어떤 환경에서도 클릭 대상을 정확히 찾아냅니다. 실제 E2E 테스트 결과 5개 사이트 모두에서 성공하며 타사 대비 높은 안정성을 입증했습니다.

근거

실제 E2E 테스트에서 Sentinel은 5/5의 성공률을 기록했습니다. — E2E success 지표 및 Comparison 섹션

개발자 경험을 극대화하기 위해 기존 Playwright 생태계와의 완벽한 호환성과 확장 기능을 제공합니다. sentinel.extend(page) 메서드를 통해 기존 페이지 객체에 AI 기능을 즉시 추가하거나, Sentinel.parallel()을 사용하여 여러 세션을 병렬로 제어할 수 있습니다. 또한 OpenTelemetry를 지원하여 Datadog이나 Jaeger 같은 도구에서 AI의 추론 과정과 비용을 실시간으로 모니터링할 수 있습니다.

용어 해설

AOM Parser: — 웹 페이지의 접근성 트리(Accessibility Object Model)를 분석하여 상호작용 가능한 요소를 추출하는 도구입니다. DOM 전체를 분석하는 대신 의미 있는 요소만 선별하여 LLM에 전달되는 토큰 수를 획기적으로 줄이는 역할을 합니다.
Self-healing Locators: — 웹사이트의 UI 구조나 CSS 선택자가 변경되어도 AI가 자동으로 새로운 경로를 찾아내어 자동화 스크립트가 깨지지 않게 유지하는 기술입니다. 성공한 선택자를 캐싱하고 변경 시에만 LLM을 호출하여 안정성을 높입니다.
MCP Server: — Model Context Protocol을 지원하여 Cursor나 Claude Desktop 같은 AI 도구들이 직접 브라우저 자동화 기능을 호출할 수 있게 해주는 인터페이스입니다. 개발자가 코드를 직접 작성하지 않고도 AI 어시스턴트에게 웹 작업을 지시할 수 있게 합니다.
Vision Grounding: — 텍스트 기반의 요소 탐색이 실패할 경우 스크린샷을 찍어 이미지 분석을 통해 클릭할 좌표를 계산하는 기술입니다. Canvas나 복잡한 Shadow DOM처럼 일반적인 DOM 분석이 어려운 환경에서 유용하게 사용됩니다.

언급된 리소스

문서Sentinel Documentation

GitHubSentinel GitHub Repository