Prune4Web: 웹 에이전트를 위한 DOM 트리 프루닝 프로그래밍

📝 Abstract

Web automation uses intelligent agents to perform high-level tasks by mimicking human interactions with webpages. Despite recent advances in LLM-based web agents, efficiently navigating complex, real-world webpages remains challenging due to massive DOM structures (10,000∼100,000 tokens). Current approaches either truncate DOMs-losing vital information-or use inefficient heuristics and separate ranking models, failing to balance precision and scalability. We introduce Prune4Web, a novel paradigm that transforms DOM processing from LLM-based filtering to programmatic pruning. Our key innovation is DOM Tree Pruning Programming, where an LLM generates executable Python scoring programs to dynamically filter DOM elements based on semantic clues from decomposed sub-tasks. This approach eliminates the need for LLMs to process full DOMs, instead delegating traversal and scoring to lightweight, interpretable programs. The result is a 25∼50 times reduction in candidate elements for grounding, enabling precise action localization without attention dilution. Additionally, we propose a data annotation method and a two-turn dialogue training strategy that jointly optimizes Planner, Programmatic Filter, and Grounder in a unified framework. Experiments demonstrate state-of-the-art performance. On our low-level task grounding task, our approach dramatically increases grounding accuracy from 46.8% to 88.28%, highlighting its effectiveness.

💡 Analysis

**

1. 연구 배경 및 문제 정의

• DOM 규모 문제: 현대 웹 페이지의 HTML/DOM은 10 k–100 k 토큰에 달해 대부분의 LLM 컨텍스트 한계를 초과한다. 토큰 절단은 중요한 UI 요소(버튼, 입력창 등)를 놓치게 하며, 어텐션 분산으로 추론 정확도가 저하된다.
• 기존 접근법의 한계
  • 휴리스틱 기반 필터링: 고정된 규칙(예: 접근성 트리 변환)으로 일반화가 어렵고, 복잡한 UI에서는 충분히 정밀하지 않다.
  • LLM 기반 랭킹: LLM이 전체 DOM을 직접 스코어링해야 하므로 계산 비용이 크게 늘어나며, 근본적인 토큰 과부하 문제를 해결하지 못한다.

2. 핵심 아이디어 – DOM Tree Pruning Programming (DTPP)

• **프로그래밍 사고(Programmatic Thinking)**를 LLM에 적용해 스코어링 프로그램을 생성하도록 함.
• 입력: Planner가 만든 저수준 서브태스크(예: “목적지 입력란 찾기”).
• 출력: 파라미터(키워드, 가중치, 정규식 등)만을 채워 넣은 Python 템플릿.
• 실행: LLM 외부에서 경량 파이썬 인터프리터가 전체 DOM을 순회, 각 요소에 점수를 부여하고 상위 N개(보통 20~40개)만 반환.
• 장점
  • 토큰 절감: LLM이 긴 DOM을 전혀 보지 않음 → 컨텍스트 한계 초과 문제 해결.
  • 해석 가능성: 생성된 프로그램은 인간이 직접 검증·수정 가능, 디버깅이 용이.
  • 속도: 파이썬 스코어링은 GPU 기반 LLM 추론보다 수십 배 빠름.

3. 시스템 아키텍처

4. 데이터 구축 및 학습 전략

• 자동 라벨링 파이프라인: GPT‑4o를 활용해 기존 MM2W 데이터에 저수준 서브태스크, 키워드·가중치, 프루닝된 DOM 트리 등을 자동 주석.
• 두 턴 대화식 학습:
  1. 첫 턴 – Planner + Filter가 연속적으로 동작, 서브태스크와 프로그램 파라미터를 동시에 생성.
  2. 두 번째 턴 – 프루닝 결과를 입력받아 Grounder가 최종 액션을 출력.
• 학습 단계
  • SFT (Supervised Fine‑Tuning): 전체 파이프라인을 지도학습으로 초기화.
  • RFT (Reinforcement Fine‑Tuning): Planner에만 GRPO 기반 강화학습 적용, 하위 단계 성공 여부를 보상으로 사용(포맷, 필터링, 그라운딩 보상).

5. 실험 및 결과

• Ablation:
  • 프루닝 없이 전체 DOM 사용 → 정확도 55 % 이하, 추론 시간 4배 증가.
  • Rule‑based 필터링만 사용 → 후보 수 감소는 되지만 정확도 62 %에 머무름.
  • Separate 모델 vs Unified 모델 → Unified(두 턴) 방식이 2.3 % 높은 전체 성공률을 기록.

6. 강점

1. 토큰 효율성: LLM이 DOM을 직접 보지 않음으로써 대형 모델도 100 k 토큰 DOM을 다룰 수 있다.
2. 해석 가능성 & 디버깅 용이성: 생성된 파이썬 프로그램은 인간이 직접 검토·수정 가능, 블랙박스 LLM 추론 대비 투명성 확보.
3. 통합 학습 프레임워크: Planner‑Filter‑Grounder를 하나의 모델에 두 턴 대화식으로 학습시켜 상호 의존성을 자연스럽게 최적화.
4. 범용성: 시각적 스크린샷과 텍스트 DOM을 동시에 활용하므로, 시각 정보가 중요한 복합 UI에서도 적용 가능.

7. 한계 및 개선점

8. 향후 연구 방향

1. 프로그래밍 템플릿 자동 진화 – 메타‑러닝을 통해 LLM이 상황에 맞는 새로운 스코어링 함수 구조를 스스로 설계하도록 학습.
2. 멀티턴 협업 에이전트 – 여러 에이전트가 서로 다른 서브태스크를 담당하고, 각자의 프루닝 프로그램을 공유·조합하는 협업 프레임워크.
3. 크로스‑도메인 적용 – 모바일 앱 UI, 데스크톱 애플리케이션, 혹은 VR/AR 인터페이스 등 DOM과 유사한 구조를 가진 환경에 DTPP 확장.
4. 보상 설계 강화 – 계층적 보상 외에 예측 불확실성(entropy) 기반 보상을 도입해 필터 단계에서의 위험성을 정량화.
5. 오프라인 최적화 – 프루닝 프로그램을 JIT 컴파일하거나 Cython/Numba로 가속화해 실시간 웹 자동화 시 latency 최소화.

**

📄 Content

웹 자동화는 인간과 유사한 상호작용을 웹 페이지에서 모방하는 지능형 에이전트를 통해 항공권 예약이나 온라인 쇼핑과 같은 고수준 작업을 완수할 수 있게 합니다. 이러한 에이전트는 고수준 작업을 해석하고 이를 저수준 하위 작업으로 분해한 뒤, 웹 요소와 원활하게 상호작용함으로써 목표를 달성합니다. 최근 대형 언어 모델(LLM)은 강력한 추론 및 의사결정 능력을 바탕으로 자율적인 웹 탐색에서 인상적인 성과를 보여주고 있습니다(Yao et al., 2022; Deng et al., 2023a). 현재 웹 에이전트 접근 방식은 크게 세 가지 범주로 나뉩니다: 1) 텍스트 기반 HTML/DOM 방식(Yao et al., 2022; Song et al., 2025), 2) 시각적 스크린샷 기반(Lin et al., 2024; Cheng et al., 2024), 3) 멀티모달 기반(He et al., 2024a; Zheng et al., 2024a).

그림 1: 기존 멀티모달 웹 에이전트와 우리 Prune4Web 패러다임의 비교. 기존 멀티모달 웹 에이전트 패러다임에 비해, 우리는 중복된 DOM 요소를 효율적으로 제거하는 프로그램식 프루닝 전략을 제안합니다. Prune4Web은 LLM의 토큰 제한을 완화하고 저수준 하위 작업에 대한 정답률을 46.80 %에서 88.28 %로 크게 향상시킵니다.

스크린샷은 페이지 상태를 직관적이고 인간과 유사하게 파악할 수 있게 해 주어 저수준 하위 작업을 추론하는 데 효과적입니다. 그러나 스크린샷은 특히 특수 아이콘과 같은 경우에 의미 정보가 제한적이며, 해상도 변화나 요소 겹침에 민감합니다. 반면 HTML/DOM은 정확하고 안정적인 의미·구조 정보를 제공하므로 최소한의 모호성으로 정확한 요소 선택이 가능합니다.

본 논문에서는 텍스트와 시각 멀티모달 정보의 상보적 장점을 활용하여 다단계 프레임워크를 설계합니다. 플래너 모델은 고수준 작업(예: “뉴욕행 항공권 예약”)과 스크린샷을 입력받아 이를 저수준 하위 작업(예: “목적지 입력란을 찾아 ‘NYC’를 입력”)으로 분해합니다. 하위 작업을 기반으로 액션 그라운더 모델은 DOM을 처리해 필요한 연산을 정확히 위치시키고 실행합니다(예: <input id="destination">에 “NYC” 입력).

하지만 현대 웹 페이지의 DOM은 보통 10 000~100 000 토큰에 달해 대부분의 LLM이 감당할 수 있는 컨텍스트 용량을 크게 초과합니다. 이로 인해 토큰이 잘리거나 어텐션이 희석되어 중요한 정보가 손실되고 처리 지연이 발생합니다(Gou et al., 2024a; Deng et al., 2023a). 기존 HTML 프루닝 방법은 지나치게 단순한 휴리스틱 필터링에 의존하거나(He et al., 2024a; Pan et al., 2024) 별도의 언어 모델을 이용해 요소 순위를 매겨야 하는 한계가 있습니다(Deng et al., 2023a). 어느 쪽도 근본적인 문제를 해결하지 못합니다. 핵심 과제는 전체 DOM 구조에서 작업과 관련된 요소를 효율적이고 정확하게 탐색하는 것입니다.

이를 위해 우리는 Prune4Web 파이프라인을 제안합니다. 핵심 아이디어는 **DOM 트리 프루닝 프로그래밍(DTPP)**이라는 새로운 패러다임입니다. 플래너가 출력한 저수준 하위 작업(예: “목적지 입력란 찾기”)에는 관련 DOM 요소에 대한 풍부한 의미 단서가 내포되어 있습니다. 우리는 LLM이 방대한 DOM을 직접 탐색하도록 하는 대신, 하위 작업만을 이용해 위치 지정 프로그램을 생성하도록 전환합니다. 이렇게 하면 긴 DOM을 LLM에 입력할 필요가 없어집니다(Jiang et al., 2024a; Zhang et al., 2023b).

구체적으로는 프로그램식 요소 필터 모델을 구현합니다. 이 필터는 상위 플래너가 제공한 특정 저수준 하위 작업을 받아, LLM에게 간결하고 작업 특화된 파이썬 스코어링 프로그램을 생성하도록 프롬프트합니다. 우리는 휴리스틱 기반 스코어링 템플릿을 설계해 LLM이 핵심 파라미터만 생성하도록 제한함으로써 제어성과 유연성을 높였습니다. 생성된 프로그램은 LLM 외부에서 독립적으로 실행되며, 전체 DOM 트리를 효율적으로 순회하면서 모든 요소에 점수를 매기고 순위를 매깁니다. 이 과정은 후보 요소 수를 25~50배 정도 감소시켜 어텐션 희석 없이 정확한 액션 로컬라이징을 가능하게 합니다. 이후 다운스트림 LLM 기반 액션 그라운더가 정제된 후보 리스트에서 최종 요소를 선택해 그라운딩 작업을 완수합니다.

데이터 구축 및 학습 전략
Prune4Web 모델을 학습시키기 위해 우리는 최소한의 인간 개입으로 원시 데이터에서 구조화된 중간 출력을 자동으로 생성하는 파이프라인을 구축했습니다. 여기에는 플래너용 저수준 하위 작업과 프로그램식 요소 필터용 핵심 파라미터가 포함됩니다. 최적화를 위해 두 차례 대화식 훈련 전략을 고안했으며, 이를 통해 플래너·필터·그라운더를 하나의 통합 모델로 공동 학습시켰습니다. 먼저 주석 데이터를 이용해 지도 미세조정(SFT) 으로 기본 모델을 학습하고(Zheng et al., 2024b), 이어 강화 미세조정(RFT) 을 적용해 플래너의 장기 계획 능력을 강화하면서 프로그램식 프루닝 과정을 최적화했습니다.

광범위한 벤치마크 실험(Deng et al., 2023a; Pan et al., 2024) 결과, Prune4Web은 제안된 저수준 하위 작업 그라운딩 벤치마크에서 정답률을 46.8 %에서 88.28 %로 크게 끌어올렸으며, 이는 우리의 핵심 이점을 명확히 입증합니다.

주요 기여

1. 멀티모달 웹 에이전트 프레임워크를 설계해 시각 입력의 직관적 추론과 HTML/DOM의 의미적 정밀성을 자연스럽게 결합했습니다.
2. 프로그래밍 기반 요소 필터를 도입해 작업 특화 파이썬 스코어링 프로그램을 자동 생성, DOM 규모 병목 현상을 효율적으로 해소했습니다.
3. 데이터 주석 방법과 두 차례 대화식 훈련 전략을 제시해 플래너·필터·그라운더를 공동 최적화했으며, SFT와 RFT를 결합해 계획 및 프루닝 성능을 동시에 향상시켰습니다.

멀티모달 기반 웹 에이전트

정밀한 웹 상호작용을 위해 HTML 소스를 직접 처리하는 연구가 최근 LLM 기반 에이전트에서 중요한 흐름으로 떠오르고 있습니다(Lai et al., 2024; Song et al., 2025). 연구자들은 DOM이 제공하는 풍부한 의미·구조 정보를 활용해 멀티모달 융합 기법(Zheng et al., 2024a; Furuta et al., 2023)이나 보다 강력한 엔드‑투‑엔드 모델(Lin et al., 2024; Cheng et al., 2024; Hong et al., 2024; Xu et al., 2025)을 개발해 정확한 요소 로컬라이징과 조작을 시도했습니다. 그러나 이러한 정밀성 추구는 정보 과부하 문제와 직면합니다(Gou et al., 2024a; Deng et al., 2023a; Xue et al., 2025). 현대 웹 페이지의 HTML은 대량의 무관한 정보를 포함하고 있어 이를 그대로 LLM에 투입하면 연산 비용이 낭비되고 긴 컨텍스트로 인해 어텐션이 분산됩니다(Gur et al., 2023). 따라서 HTML의 정밀성과 효율적인 정보 처리를 동시에 만족시키는 방법은 아직 해결되지 않은 핵심 과제입니다.

DOM 트리 프루닝 전략

DOM 트리 프루닝은 정보 과부하를 완화하기 위한 핵심 기술입니다. 기존 방법은 크게 두 갈래로 나뉩니다.

• 규칙 기반 필터링: 고정된 휴리스틱(예: 접근성 트리 변환)만을 사용해 DOM을 단순화합니다(He et al., 2024a; Zhou et al., 2023).
• LLM 기반 순위 매김: 대량의 후보 요소에 대해 LLM을 프롬프트해 점수를 매기고 선택합니다(Deng et al., 2023a; Lù et al., 2024; Kerboua et al., 2025).

규칙 기반은 경직되어 일반화가 어렵고, LLM 기반은 긴 컨텍스트 처리 부담을 줄이지 못합니다. 이에 반해 우리는 **DOM 트리 프루닝 프로그래밍(DTPP)**이라는 새로운 패러다임을 도입했습니다. DTPP는 LLM이 가벼운 로케이터 프로그램을 생성하도록 함으로써 두 가지 제한을 동시에 극복합니다(Qiao et al., 2024; Jiang et al., 2024b).

프로그램식 사고(Programmatic Thinking) for Agents

우리 방법은 프로그램식 사고에 기반합니다. 이는 LLM에게 중간 코드나 계획을 생성하도록 프롬프트해 복잡 문제 해결 능력을 강화하는 패러다임으로, 일반 추론·계획 영역에서 효과가 입증되었습니다(Jiang et al., 2024a; Zhang et al., 2023b; Wei et al., 2022; Gupta & Kembhavi, 2023; Zhou et al., 2025b; Qin et al., 2024). 에이전트 분야에서는 주로 고수준 행동 시퀀스를 생성해 웹(Liu et al., 2023), 모바일 디바이스(Wen et al., 2024; Zhang et al., 2023a), 일반 컴퓨터 작업(Zhang et al., 2024; Tan et al., 2024; Wu et al., 2024; Xie et al., 2025)을 제어합니다. 본 연구는 이러한 패러다임을 DOM 필터링이라는 저수준 문제에 적용해, 실행 가능한 스코어링 함수를 생성함으로써 모델 입력을 능동적으로 재구성합니다.

에이전트를 위한 강화 미세조정(Reinforcement Fine‑Tuning)

복잡한 정책을 정적 데이터셋만으로 학습하기 어려운 상황에서 강화 미세조정(RFT) 은 순차적 의사결정 환경에서 LLM 에이전트를 최적화하는 데 널리 활용됩니다(Lu et al., 2025; Qi et al., 2024; Bai et al., 2025a; Guo et al., 2025). 보상 메커니즘을 통해 결과에 따라 학습이 진행되므로 복합 전략을 습득할

이 글은 AI가 자동 번역 및 요약한 내용입니다.