세 줄 요약

• 핵심 이슈: 복잡한 웹 구조로 인한 인공지능의 환각 현상을 억제하기 위해 시각 정보와 정제된 접근성 트리 데이터를 결합하고 계층적 실행 구조를 도입하는 전략이 요구됩니다.
• 중요성: 브라우징 에이전트의 신뢰성이 확보되면 반복 업무의 자동화를 넘어 복잡한 의사결정이 필요한 웹 작업까지 인공지능이 보조할 수 있어 업무 효율이 높아집니다.
• 독자의 행동: 에이전트 설계 시 원본 HTML 대신 접근성 트리를 활용하고, 요소별 고유 식별자 주입 및 플래너와 네비게이터를 분리한 계층적 구조를 적용하십시오.

예: 인공지능이 온라인 상점에서 물건을 결제하라는 명령을 받는다. 에이전트는 화면을 탐색하며 구매 버튼을 찾지만, 광고 배너와 겹친 부분 때문에 엉뚱한 위치를 선택한다. 결국 작업은 중단되고 오류 문구만 나타난다.

웹 브라우저 주소창에 목적지를 입력하고 정보를 취합하는 일은 그동안 인간이 주로 수행해 왔습니다. 이제 인공지능(AI)은 텍스트 생성을 넘어 사용자를 대신해 웹을 탐색하고 동작을 수행하는 '브라우징 에이전트'로 변화하고 있습니다. 하지만 이 과정에서 발생하는 정보 불일치와 환각 현상은 실무 적용의 제약 사항으로 작용합니다.

이러한 문제를 해결하기 위해 연구자들은 거대언어모델(LLM)의 추론 능력에만 의존하던 방식에서 벗어나, 웹 구조를 정제하고 상태를 관리하는 기술적 장치를 도입하기 시작했습니다.

현황

브라우징 에이전트 기술은 웹페이지의 모든 정보를 모델에 입력하던 방식에서 필요한 데이터만 선별하는 정제 단계로 변화하고 있습니다. 연구진은 복잡한 HTML 구조를 그대로 사용하는 대신, 웹 접근성을 위해 설계된 '접근성 트리(Accessibility Tree)'로 데이터를 단순화합니다. 이를 통해 모델이 처리해야 할 정보량을 줄이고 핵심 요소에 집중하도록 유도합니다.

2024년 1월 발표된 WebVoyager 연구에 따르면, 텍스트 정보와 스크린샷에 바운딩 박스(Bounding Box)를 결합한 시각적 피드백 루프를 활용했을 때 에이전트의 클릭 정확도가 향상되었습니다. 텍스트로만 요소를 파악하지 않고 실제 화면상 위치를 함께 인지하게 함으로써 클릭 위치를 오인하는 문제를 보완한 것입니다.

분석

브라우징 에이전트의 일관성을 확보하는 과정에서는 정확도와 비용 사이의 균형이 중요합니다. 모든 웹 요소를 상세히 분석하면 정확도는 높아지지만, 토큰 사용량이 늘어나고 처리 속도가 저하됩니다. 반면 데이터를 과도하게 축약하면 필요한 정보를 놓치는 환각 현상이 발생할 수 있습니다.

이를 해결하기 위한 전략은 역할을 분리하는 계층적 구조입니다. 고수준 계획을 세우는 '플래너(Planner)'와 실제 클릭 및 입력을 담당하는 '네비게이터(Navigator)'를 나누는 방식입니다. 플래너는 전체 작업 단계를 관리하며 체크포인트를 설정하고, 네비게이터는 정제된 DOM 데이터를 바탕으로 세부 동작을 수행합니다. 이러한 분리는 오류 발생 시 처음부터 다시 시작하지 않고 실패한 지점부터 복구할 수 있는 '체크포인팅(Checkpointing)' 기능을 가능하게 합니다.

하지만 여전히 한계는 존재합니다. DOM 정제 프로세스가 환각 발생률을 구체적으로 얼마나 낮추는지에 대한 범용적 수치는 명확히 검증되지 않았습니다. 또한 실시간으로 변화하는 동적 웹사이트나 보안 인증 절차(CAPTCHA 등) 앞에서는 기술적 장치들이 원활히 작동하지 않을 가능성이 있습니다. 따라서 에이전트의 일관성은 기술적 최적화와 더불어 예외 상황을 정의하고 관리하는 방식에 달려 있습니다.

실전 적용

개발자와 비즈니스 의사 결정권자는 브라우징 에이전트를 실무에 도입할 때 다음 사항을 고려해야 합니다. LLM에 웹 페이지 전체를 입력하는 방식은 효율이 낮으며 실패 확률도 존재합니다.

우선순위로 고려할 점은 'DOM 다운샘플링'입니다. 웹페이지의 계층 구조는 유지하되 상호작용이 불가능한 노드를 제거하여 입력 토큰 수를 최적화해야 합니다. 이는 모델의 추론 일관성을 높이는 방법입니다. 또한 구조화된 메모리 관리 방식을 도입해 에이전트가 수행한 작업 이력을 체계적으로 기록해야 합니다.

오늘 바로 할 일 체크리스트:

1. 웹 자동화 설계 시 원본 HTML 대신 접근성 트리(Accessibility Tree)를 기본 입력값으로 설정하여 데이터 노이즈를 줄인다.
2. 각 웹 요소에 고유 식별자 속성(예: mmid)을 주입하여 모델이 요소를 선택할 때 발생할 수 있는 모호성을 방지한다.
3. 작업 단계마다 실행 결과를 검증하는 시각적 피드백 루프를 구현하여 실행 오류를 즉각 탐지하도록 설정한다.

FAQ

Q: HTML을 그대로 쓰지 않고 접근성 트리를 사용하는 이유는 무엇인가요? A: 일반적인 HTML에는 시각적 장식을 위한 태그와 스크립트가 포함되어 있어 모델에게 노이즈로 작용할 수 있습니다. 반면 접근성 트리는 버튼, 입력창 등 실제 상호작용에 필요한 핵심 구조만 담고 있어 토큰 효율과 정확도를 높이는 데 도움이 됩니다.

Q: 시각적 피드백 루프는 구체적으로 어떻게 작동하나요? A: 에이전트가 특정 동작을 수행한 직후 화면 스크린샷을 찍어 예상 결과와 일치하는지 모델이 다시 판단하게 하는 과정입니다. 클릭 전후의 시각적 변화를 대조하여 작업 성공 여부를 검증합니다.

Q: 체크포인팅 기법을 도입하면 비용이 더 들지 않나요? A: 상태 저장을 위한 추가 비용이 발생할 수 있으나, 작업 실패 시 처음부터 모든 단계를 다시 실행하며 발생하는 토큰 낭비를 방지할 수 있습니다. 따라서 복잡한 작업일수록 전체적인 비용 절감에 유리합니다.

결론

웹 브라우징 에이전트의 핵심은 모델이 웹을 바라보는 인터페이스를 얼마나 정교하게 구성하느냐에 있습니다. DOM 증류, 고유 식별자 주입, 계층적 구조 설계는 LLM의 불확실성을 통제 가능한 수준으로 낮추는 실질적인 방안입니다.

앞으로 브라우징 에이전트는 시각 정보와 구조적 데이터를 결합해 웹을 이해하는 방향으로 나아갈 것입니다. 이러한 기술적 장치들을 체계적으로 도입함으로써 인공지능을 통한 업무 자동화의 효율을 높일 수 있습니다.

참고 자료

• 🏛️ WebVoyager: Building an End-to-End Web Agent with Large Multimodal Models
• 🏛️ Agent-E: From Autonomous Web Navigation to Foundational Design Principles in Agentic Systems