AI 에이전트를 위한 Playwright ARIA 스냅샷

AI 에이전트를 위한 웹 자동화의 ARIA 의미적 스냅샷

초기 AI 에이전트는 원시 HTML에 의존했지만, 텍스트 기반 작업에는 효과적이었으나 복잡한 UI에서는 실패했다. 반복적인 필터링은 도움이 되었지만, 상호작용 요소에는 다른 접근이 필요했다. 데스크톱 자동화에서 스크린샷은 약 86% 정확도로 활용되며 (GPT-5.2 기준), 하지만 토큰 소모가 크고 변화 추적에 어려움을 겪는다 — 특히 날짜 선택기와 같은 요소에서는 더욱 그렇다.

Playwright와 같은 엔드투엔드(E2E) 테스팅 도구는 W3C 표준인 ARIA(웹 접근성 인터페이스 확장)로 전환했다. 이는 처음에는 화면 독자용으로 설계된 기술이며, WAI-ARIA 1.0(2014년)이다. ARIA는 HTML에 다음과 같은 정보를 추가한다:

• 역할(role): 요소 유형 (버튼, 텍스트박스 등)
• 이름(name): 인간이 읽을 수 있는 라벨
• 상태(state): 동적 조건 ([체크됨], [비활성])

유럽연합과 미국의 정부 웹사이트 접근성 규정 강화가 촉진했으며, 구글은 2021년부터 크롬 개발자 도구의 접근성 트리 기능을 개선했다.

일반 ARIA의 한계: AI를 위한 문제점

ARIA는 사람을 위한 설계다. 화면 독자는 작은 컨텍스트 창을 사용하며, 순차적 탐색에 집중한다. 주요 문제점은 다음과 같다:

• 파이어폭스/웹킷에서 브라우저 간 일관성이 낮다.
• 증분 업데이트 기능이 제한적이다.
• 크롬 API(예: Puppeteer)에 과도하게 의존한다.

Playwright는 자체 파서를 개발했다. 브라우저 내부에 JS를 삽입해 DOM에서 ARIA 스냅샷을 생성하면서 특수 케이스도 처리한다. 출력 형식은 YAML이며, CSS 및 불필요한 div 계층 구조는 제거된다.

Playwright의 ARIA 스냅샷 구조

스냅샷은 의미적 트리를 표현한다:

- navigation [ref=e1]:
  - link "Home" [ref=e2]:
    - /url: /
  - link "Settings" [ref=e3] [active]:
    - /url: /settings
- main [ref=e4]:
  - heading "Account Settings" [level=1]
  - group "Profile":
    - textbox "Display name" [ref=e5]: John Doe
    - textbox "Email" [ref=e6]: [email protected]
      - /placeholder: [email protected]
  - group "Preferences":
    - checkbox "Email notifications" [ref=e7] [checked]
    - checkbox "Dark mode" [ref=e8]
  - button "Save Changes" [ref=e9] [cursor=pointer]

역할(role)은 상호작용 방식을 결정한다: 버튼 = 클릭, 텍스트박스 = 입력.

이름(name)은 우선순위에 따라 해결된다: aria-labelledby > aria-label > label > content > title > placeholder. 이름이 없는 요소는 시각적으로 보이지 않는다:

<button><svg class="icon-save"/></button>  <!-- 보이지 않음 -->
<button aria-label="Save"><svg class="icon-save"/></button>  <!-- 보임 -->

상태(state)는 [체크됨], [확장됨] 등을 포착한다.

각 노드에는 작업을 위한 ref가 있다:

{
  "name": "browser_click",
  "arguments": { "element": "Save Changes button", "ref": "e9" }
}

최적화를 위한 증분 업데이트

복잡한 페이지의 전체 스냅샷은 수천 개의 요소를 포함할 수 있어 토큰 비용이 크다. Playwright는 델타(deltas)를 전송하여 대체한다:

- <changed> main [ref=e4]:
  - ref=e5 [unchanged]
  - textbox "Email" [ref=e6]: [email protected]
  - ref=e7 [unchanged]
  - checkbox "Dark mode" [ref=e8] [checked]
  - ref=e9 [unchanged]

[unchanged]는 모델 컨텍스트를 참조하므로 데이터량을 94% 감소시킨다 (100개 이상 요소 기준, 5KB → 300B). 이로써 모든 것을 다시 설명하지 않고도 다단계 워크플로우를 가능하게 한다.

의미적 파서 구축의 도전 과제

Playwright는 다음을 처리한다:

• 템플릿/슬롯: 최종 렌더링된 보기
• aria-owns: 가상 DOM 관계
• ::before/::after: 생성된 콘텐츠
• 보이기 여부: display:none, aria-hidden, 0크기 요소 필터링

남은 문제: 모달이 항상 필드를 숨기지 않는 경우가 있다.

ARIA의 사각지대:

• 시각적 요소: 색상, 아이콘
• 공간 배치: 경계 박스 (실험적)
• 캔버스/WebGL: ARIA 없이는 보이지 않음
• 암묵적 의미: CSS만으로 스타일링된 요소

폼과 네비게이션에는 충분하지만, 시각 작업은 후속 대안이 필요하다.

에이전트 도구 비교

| 에이전트/도구 | 접근 방식 |

|------------|----------|

| Claude (MCP) | Playwright ARIA + 델타 |

| Cursor | Claude와 유사 |

| GitHub Copilot | Playwright ARIA (2026년 이후) |

| ChatGPT 브라우징 | DOM 분석 |

| Anthropic Computer Use | 스크린샷 |

| Stagehand | HTML |

| LaVague | 스크린샷 + HTML |

추세: Playwright ARIA로의 이동이 가속화되고 있다.

핵심 요약

• ARIA 스냅샷은 LLM의 관찰을 표준화해 델타 업데이트로 토큰 사용량을 94% 줄였다.
• ref 식별자는 XPath/CSS 없이도 작업을 단순화한다.
• 파서는 템플릿, aria-owns, ::before를 고려해 정확한 트리를 구성한다.
• 한계: 시각적 또는 위치 정보 없음; 스크린샷 대체책은 필수적이다.
• AI 경제학이 의미 있는 HTML의 더 빠른 채택을 이끌고 있다.

— Editorial Team