AI 기반 브라우저 자동화 도구의 작동 원리 분석
발표자는 Browserless (Python)와 Playwright MCP (Node.js) 두 가지 주요 AI 기반 브라우저 자동화 라이브러리의 내부 구조를 심층 분석했습니다.
-
Browserless: GPT를 활용하여 다음 액션을 계획하고, CDP DevTools 프로토콜을 통해 브라우저를 제어합니다. AI에게는 메쉬가 씌워진 스크린샷과 함께 상호작용 가능한 요소들의 텍스트 정보를 제공하며, 이 요소들은
AccessibilityNode와 특정 클래스명(예: “search”)을 기반으로 추출됩니다. -
Playwright MCP: 생성형 AI (Claude, Pilot Chat 등)의 확장 기능으로 작동하며, AI의 지시를 받아 Playwright를 통해 브라우저를 조작합니다. “Model Context Protocol” 인스펙터를 통해 미리 정의된 메서드(예:
navigate,click)를 호출하고, 페이지 구조를 YAML 형태로 반환하며, 상호작용 가능한 요소에는 “ref”를 부여합니다. 이 역시AccessibilityNode를 기반으로 합니다.
접근성 트리(Accessibility Tree)의 중요성
두 라이브러리 모두 웹 페이지의 구조와 상호작용 가능한 요소를 파악하는 데 AccessibilityNode, 즉 접근성 트리를 핵심적으로 활용하고 있음을 확인했습니다. 접근성 트리는 웹 콘텐츠를 장애인이 접근 가능하도록 돕는 HTML 보완 구조로, Chrome 개발자 도구에서도 확인할 수 있습니다. 일반적인 DOM 트리보다 더 의미론적인 구조를 제공하여 AI가 웹 페이지의 의도를 이해하고 요소를 식별하는 데 훨씬 유리합니다.
AI가 파악하기 어려운 웹 페이지 안티패턴
접근성 트리를 올바르게 구축하지 않은 웹 페이지는 AI가 이해하기 어렵습니다. 발표자는 몇 가지 안티패턴을 제시했습니다.
-
독자 구현 아코디언/드롭다운: 라이브러리를 사용하지 않고 독자적으로 구현한 경우, 내부 콘텐츠나 선택지가 접근성 트리에 제대로 반영되지 않아 AI가 인지하지 못합니다.
-
호버 시 나타나는 툴팁: 호버 전에는 요소가 존재하지 않으므로 AI가 상호작용 가능한 요소로 인식하지 못하며, 호버가 필요하다는 단서도 없습니다.
-
아이콘 폰트: 아이콘 폰트는 일반 텍스트가 아니므로 접근성 트리에서 공백 문자로 인식되어 버튼 등의 의미를 AI가 파악할 수 없게 만듭니다.
Capybara 드라이버를 통한 성능 향상 시연
발표자는 Ruby on Rails 환경에서 Capybara 드라이버에 접근성 트리 스냅샷 기능을 도입하여 AI 기반 테스트의 성능을 개선하는 시연을 진행했습니다. 작년의 스크린샷 기반 방식은 AI가 요소의 정확한 위치를 파악하기 어려워 클릭 좌표를 추정해야 했지만, Playwright의 snapshot4AI와 유사한 방식을 사용하여 접근성 트리 스냅샷과 “ref” 힌트를 도입한 결과, 테스트의 정확도와 속도가 현저히 향상됨을 입증했습니다. 이는 접근성 트리가 AI 기반 자동화에 있어 필수적인 요소임을 다시 한번 강조하는 결과입니다.