AI 브라우저 에이전트의 3대 화면 인지 기술: Raw DOM 파싱부터 Vision 좌표와 Browser-Use 번호 인덱싱까지
복잡한 웹페이지에서 AI는 어떻게 버튼과 입력창을 정확하게 찾아낼까요? 암호화된 클래스명의 비밀부터 화면 요소에 번호표를 붙여 환각을 0%로 줄이는 번호 인덱싱(Browser-Use)과 시각 좌표(Vision) 기술을 비교 분석합니다.
아키텍처 구조도
1. 대형 웹사이트의 암호 클래스명과 3가지 인지 방식
💡 생활 비유: 복잡한 지번 주소 vs 1호선 지하철역 번호 스티커
웹페이지에서 버튼을 찾는 방식은 길 찾기와 똑같습니다.
네이버나 깃허브 같은 대형 사이트의 클래스명이 `_2qX9_a`처럼 암호처럼 보이는 이유는 세 가지입니다: 1. CSS 모듈 충돌 방지: 서로 다른 컴포넌트의 스타일이 겹치지 않도록 빌드 시 고유 해시를 자동 부여합니다. 2. 파일 용량 압축 (Minification): `.header-navigation-submit-button`을 `._2q`로 줄여 네트워크 전송량을 줄입니다. 3. 매크로 방어: 배포 때마다 해시값이 무작위로 바뀌므로 고정된 CSS 셀렉터 기반 크롤러를 무력화합니다.
2. 4단계 화면 인지 전략 의사결정 트리 (Decision Tree)
작업하려는 웹페이지의 특성과 요구 정확도에 따라 최적의 화면 인지 기술을 선택하는 표준 의사결정 트리입니다.
4단계 분기형 화면 인지 의사결정 트리 (UI Recognition Decision Tree)
본문 추출 vs 인터랙션 분기
글자만 읽어오는 작업은 복잡한 조작 없이 광고와 태그를 제거한 Clean Markdown 추출을 적용합니다.
DOM 파싱 불가 캔버스 영역 분기
게임 화면, 인터랙티브 차트, 구글 맵 등 HTML 태그가 없는 영역은 스크린샷 Vision 좌표 클릭을 채택합니다.
클래스 난독화 대응 (인덱싱 전환)
React, Vue 기반 SPA 사이트의 해시 클래스는 번호표(data-agent-index)를 붙여 LLM 오판을 원천 차단합니다.
고속 배치 vs 유연한 에이전트 선택
정형화된 고속 스크래핑은 고정 셀렉터를 쓰고, 사람처럼 탐색하는 자율 에이전트는 인덱싱 도구를 연계합니다.
3. 실습 코드: 번호 인덱싱 주입 및 MCP 도구 조작
브라우저 내부에서 실행 가능한 요소들을 스캔하고 번호표를 붙여 조작하는 실제 자바스크립트 및 MCP 호출 예제입니다.
// 화면에 보이는 클릭 가능 요소에 번호표(data-agent-index) 부여
const elements = document.querySelectorAll('button, a[href], input, select');
let index = 0;
elements.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.width > 0 && rect.height > 0) {
el.setAttribute('data-agent-index', index);
console.log(`[${index}] ${el.tagName} : ${el.innerText || el.placeholder}`);
index++;
}
});// 1. 현재 화면의 인터랙티브 요소 번호표 스캔
[MCP Tool Call] browser_get_interactive_elements()
[Result] {
"total": 3,
"elements": [
{ "index": 0, "tag": "input", "text": "검색어를 입력하세요" },
{ "index": 1, "tag": "button", "text": "검색" },
{ "index": 2, "tag": "a", "text": "회원가입" }
]
}
// 2. 검색창(0번)에 단어 입력 후 엔터
[MCP Tool Call] browser_type_index({ index: 0, text: "OpenCode 에이전트", press_enter: true })
// 3. 검색 결과 페이지의 1번째 링크 클릭
[MCP Tool Call] browser_click_index({ index: 3 })✕❌ Raw DOM 전체 주입 시 발생하는 치명적 문제
- ✕수십만 자의 HTML이 프롬프트에 들어가며 1회 호출당 토큰 비용 수십 배 폭증
- ✕동적 해시 클래스(_3x9Af) 변경 시 이전 대화의 셀렉터 지침이 완전히 무용지물화
- ✕숨겨진(Hidden/Display:none) 가짜 버튼을 클릭하여 작업이 멈추는 버그 발생
✓✅ 번호 인덱싱(Browser-Use 스타일)의 압도적 강점
- ✓실제 화면에 렌더링된 가시적(Visible) 요소만 30~60개로 압축하여 토큰 95% 절약
- ✓클래스명이 암호화되어 있어도 번호([0], [1])로 지정하므로 성공률 99.9% 달성
- ✓OpenCode와 MCP 서버 내부에서 가볍게 동작하여 외부 클라우드 결제 불필요
이정마 에디터
AI System Architect
대형 웹사이트의 해시화된 CSS 클래스를 LLM에게 그대로 읽히면 토큰 낭비와 클릭 실패가 발생합니다. 요소 번호 인덱싱은 브라우저 에이전트의 속도와 정확도를 비약적으로 끌어올리는 핵심 아키텍처입니다.