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

섹션별 상세

기존 브라우저 자동화 도구들은 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을 사용하여 자연어 명령으로 아마존에서 최저가 노트북 정보를 추출하는 기본 예시

대규모 언어 모델을 브라우저 자동화에 사용할 때 발생하는 높은 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 }
);

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

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

개발자 경험을 극대화하기 위해 기존 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 분석이 어려운 환경에서 유용하게 사용됩니다.

기술

Playwright
Gemini Flash
TypeScript
OpenTelemetry
MCP

활용 사례

자가 치유형 E2E 테스트 구축
자연어 기반 웹 데이터 추출
복잡한 웹 폼 자동 입력
AI 어시스턴트용 브라우징 도구

언급된 리소스

문서Sentinel Documentation

GitHubSentinel GitHub Repository