웹 위에서 움직이는 에이전트: 자동화 웹 에이전트의 구조와 동향

‍

1. 모바일을 넘어 웹으로

앞선 글에서는 모바일 환경에서 작동하는 자동화 에이전트, 즉 모바일 에이전트에 대해 다루었습니다. 이러한 시스템은 사용자의 개입 없이도 스마트폰 앱 내에서 화면을 인식하고, 목표를 달성하기 위한 행동을 계획하고 수행할 수 있는 구조로 이루어져 있습니다.

이번 글에서는 자동화 웹 에이전트(autonomous web agents)에 대해 이야기하고자 합니다. 두 에이전트 모두 LLM 기반이며, 감각-계획-행동이라는 구조를 공유하지만, 근본적으로 작동하는 환경과 입력 데이터 구조에서 중요한 차이가 존재합니다. 특히 웹 에이전트는 "브라우저"라는 인터페이스를 중심으로 동작하며, 웹 페이지의 DOM 구조, 텍스트 컨텐츠, 클릭 가능한 요소들을 실시간으로 파악하고 상호작용해야 한다는 점에서 모바일 에이전트와는 또 다른 기술적 도전 과제를 안고 있습니다.

2. 자동화 웹 에이전트란 무엇인가요?

자동화 웹 에이전트는 브라우저 환경에서 사용자의 조작 없이도 복잡한 웹 기반 작업을 자동으로 수행하는 인공지능 시스템입니다. 예를 들어, 온라인 쇼핑몰에서 상품을 검색하고 주문하거나, 이메일을 열고 첨부파일을 다운로드하고, 웹 서비스를 탐색하면서 필요한 정보를 추출하는 작업 등을 수행할 수 있습니다.

기술적으로는 LLM 기반의 텍스트 이해 능력, DOM 트리 분석 능력, 브라우저 API 조작 능력을 모두 포함해야 하며, 일부 모델은 강화학습이나 시뮬레이션 환경에서 학습된 웹 상호작용 전략을 사용하기도 합니다. 최근에는 이러한 웹 에이전트를 위한 표준 벤치마크(예: WebArena, MiniWoB++)와 시뮬레이터(AndroidEnv와 유사한 브라우저 환경)가 활발히 개발되고 있습니다.

3. 공통 구조: 모바일 에이전트와의 유사점

모바일 에이전트와 웹 에이전트는 기술 구조에서 유사한 패턴을 따릅니다. 대부분의 시스템은 다음과 같은 구성요소를 중심으로 작동합니다:

• 지각(Perception): 모바일에서는 화면 캡처 이미지로부터 UI를 인식했다면, 웹에서는 DOM 트리, HTML 구조, 스타일 속성 등을 통해 시각적 구성을 파악합니다.
• 계획(Planning): LLM을 기반으로 프롬프트 기반 계획 수립 또는 행동 시퀀스 예측을 수행합니다.
• 행동(Action): 실제 클릭, 입력, 마우스 이동 등의 상호작용을 웹 드라이버를 통해 실행합니다. 이는 모바일의 터치/스와이프 동작과 기능적으로 유사합니다.
• 기억(Memory): 브라우저 세션 간의 상태 유지, 이전 페이지 내 동작 기억 등이 포함됩니다.

결국 두 시스템 모두 ‘환경 → 이해 → 계획 → 실행 → 결과 관찰 → 반복’이라는 에이전트 루프(agent loop)를 갖고 있다는 점에서 공통적인 기반을 가집니다.

4. 결정적인 차이: 입력 정보의 구조와 복잡성

모바일과 웹 에이전트의 가장 중요한 차이점은 바로 입력 정보의 표현 구조입니다.

모바일 에이전트는 대부분 이미지 기반 입력을 받습니다. 앱의 UI는 시각적으로 렌더링된 화면이기 때문에 에이전트는 이를 캡처한 이미지로부터 필요한 정보를 추출해야 합니다. 이에 따라 비전 모델 또는 OCR 기반 UI 파싱 기술이 필수적으로 요구됩니다.

반면 웹 에이전트는 구조화된 입력을 받을 수 있다는 점에서 더 명시적인 환경을 제공합니다. 웹 페이지는 DOM(Document Object Model)으로 구성되어 있기 때문에, 에이전트는 HTML 구조, 요소의 텍스트/속성/위치 등의 메타데이터를 그대로 활용할 수 있습니다. 따라서 시각적 해석보다는 구조화된 정보 기반 reasoning이 강조되며, 강화학습이나 정책 학습 시에도 명시적인 state-action pair를 구성하기가 더 용이합니다.

또한 웹 환경은 표준화된 API (예: Selenium, Puppeteer 등)를 통해 에이전트가 브라우저를 조작할 수 있기 때문에, 액션 실행 단계에서의 정확성 확보가 상대적으로 쉬운 편입니다. 대신, 브라우저 상태의 비결정성(non-determinism), 로딩 시간 차이, 네트워크 지연 등의 문제가 웹 에이전트에게는 주요 도전 과제가 됩니다.

5. 입력 구조의 차이가 만드는 학습 전략의 차이

입력 데이터의 형식 차이는 곧 학습 방식의 차이로 이어집니다. 모바일 에이전트는 이미지-텍스트-행동 간의 멀티모달 매핑을 학습해야 하므로 Transformer, 비전-언어 모델(VLM), OCR 연계 전략 등이 자주 사용됩니다. 반면 웹 에이전트는 상태(state)가 구조화된 형태로 주어지므로, 강화학습(RL), 행동 클로닝(BC), Policy학습 등 강화학습 계열 기법이 활발히 적용됩니다.

또한 프롬프트 기반 에이전트의 경우, 모바일에서는 시각 정보를 해석하는 추론 단계가 더 복잡한 반면, 웹에서는 자연어 지시를 구조화된 DOM 요소와 매핑하는 과정이 핵심이 됩니다. 이로 인해 프롬프트 설계의 방향도 달라지며, 대표적으로 HTML 요소와 함께 전달되는 멀티턴 프롬프트 구조나 태스크 정의 XML이 활용되기도 합니다.

6. 정리: 모바일 에이전트와 웹 에이전트, 같은 구조 다른 조건

모바일 에이전트와 자율 웹 에이전트는 모두 LLM 기반의 지능형 시스템으로서, 지각-계획-행동-기억이라는 구조를 공유하고 있습니다. 그러나 이들이 상호작용하는 환경의 차이로 인해 요구되는 기술적 구성은 상당히 다릅니다.

모바일 에이전트는 이미지 기반의 시각 정보를 해석해야 하므로 멀티모달 처리 능력이 핵심이며, 화면 렌더링 결과로부터 의미 있는 UI 요소를 추출하는 데 집중됩니다. 반면, 웹 에이전트는 구조화된 DOM 정보를 직접 활용할 수 있기 때문에 시각 해석보다는 의미 기반 reasoning과 DOM-지시문 매핑이 주요 과제가 됩니다.

입력 정보의 형태가 다르다는 점은 곧 에이전트의 설계 방향과 학습 방식에도 영향을 줍니다. 멀티모달 모델과 VLM이 중심이 되는 모바일 환경과 달리, 웹 에이전트는 정책 기반 학습이나 HTML-aware 프롬프트 설계와 같은 구조적 접근이 더욱 효과적으로 작용합니다.

결과적으로 두 에이전트는 동일한 기술적 뼈대를 공유하면서도 서로 다른 조건 하에 작동하며, 이를 통해 LLM 기반 자율 에이전트가 다양한 현실 세계 인터페이스에 어떻게 적응해가는지를 비교할 수 있습니다. 이러한 비교는 향후 범용 에이전트 설계에 있어 중요한 통찰을 제공할 수 있습니다.

‍