핵심 요약
기존 AI 에이전트는 웹페이지에서 정보를 찾아 답변을 주지만, 그 정보가 페이지 어디에 있는지 사용자가 직접 확인하기 어렵다는 한계가 있다. PageGuide는 답변의 근거를 HTML 요소에 직접 시각적으로 연결하여 사용자가 AI의 답변을 즉시 검증하고 복잡한 작업을 단계별로 수행할 수 있도록 돕는다.
왜 중요한가
기존 AI 에이전트는 웹페이지에서 정보를 찾아 답변을 주지만, 그 정보가 페이지 어디에 있는지 사용자가 직접 확인하기 어렵다는 한계가 있다. PageGuide는 답변의 근거를 HTML 요소에 직접 시각적으로 연결하여 사용자가 AI의 답변을 즉시 검증하고 복잡한 작업을 단계별로 수행할 수 있도록 돕는다.
관련 Figure

기존 에이전트(A)는 답변 검증 불가, 요소 강조 실패 등의 문제를 보이지만, PageGuide(B)는 답변 내 클릭 가능한 참조를 통해 실제 페이지의 텍스트를 하이라이트하여 즉각적인 검증을 가능케 함을 보여준다.
기존 웹 에이전트의 한계와 PageGuide의 시각적 근거 제시 비교
핵심 기여
Find-Guide-Hide 통합 프레임워크
정보 검색(Find), 단계별 작업 안내(Guide), 불필요한 콘텐츠 숨기기(Hide)라는 세 가지 핵심 사용자 니즈를 HTML DOM 접지(Grounding)를 통해 하나의 시스템으로 통합했다.
HTML DOM 기반의 시각적 접지 메커니즘
LLM의 출력을 단순 텍스트가 아닌 실제 HTML 요소와 연결하여 인라인 인용, 펄싱 비콘(Pulsing Beacon), 시각적 오버레이 형태로 사용자에게 제공한다.
사용자 통제권 중심의 혼합 주도형 인터페이스
완전 자동화 대신 사용자가 각 단계를 검토하고 승인하는 구조를 채택하여 AI 에이전트의 불투명한 의사결정으로 인한 위험을 방지한다.
핵심 아이디어 이해하기
기존의 웹 에이전트는 Transformer 기반의 추론을 통해 답변을 생성하지만, 그 결과물은 브라우저 사이드바의 텍스트로만 존재하여 실제 웹페이지의 HTML 구조와 분리되어 있다. 이는 사용자가 AI의 답변을 믿고 따르기 위해 페이지를 다시 수동으로 훑어야 하는 '검증의 병목' 현상을 야기한다.
PageGuide는 이 문제를 해결하기 위해 웹페이지의 모든 가시적 요소를 고유한 정수 인덱스로 변환하는 Set-of-Marks(SoM) 기법을 활용한다. LLM이 답변을 생성할 때 단순히 텍스트만 내뱉는 것이 아니라, 답변의 근거가 되는 HTML 요소의 인덱스를 함께 출력하도록 유도하여 텍스트 임베딩과 실제 DOM 요소를 논리적으로 결합한다.
결과적으로 AI의 지식은 페이지 위에 떠 있는 추상적인 정보가 아니라, 특정 버튼이나 문단이라는 물리적 위치에 고정된다. 사용자는 AI가 가리키는 곳을 즉시 눈으로 확인하며 상호작용할 수 있어, AI에 대한 신뢰도를 높이고 복잡한 멀티스텝 작업에서의 오류를 획기적으로 줄인다.
방법론
시스템은 Router, Handler, Final State 생성이라는 3단계 파이프라인으로 구성된다. 먼저 Router는 사용자의 자연어 쿼리를 입력받아 Find, Guide, Hide 중 적절한 모드로 분류한다. 이때 페이지 제목과 콘텐츠 타입을 포함한 컴팩트한 페이지 컨텍스트 C를 입력으로 사용하여 분류 정확도를 높인다.
분류된 쿼리는 각 핸들러로 전달되며, 핸들러는 HTML DOM을 LLM이 이해할 수 있는 구조화된 요소 인덱스 D로 변환하여 읽는다. D = {(id, text, tag, bbox)} 형태의 리스트를 입력으로 받아 LLM은 특정 요소의 ID를 참조하는 답변을 생성한다. [HTML 요소 리스트 입력 → LLM 추론 → 요소 ID가 포함된 JSON/텍스트 출력 → 해당 ID의 좌표값(bbox)을 기반으로 시각적 레이어 생성]
Find 모드는 단일 패스로 작동하여 인라인 인용을 렌더링하고, Guide 모드는 사용자의 피드백 루프를 포함하는 반복적(Iterative) 방식으로 설계되었다. 각 단계마다 사용자가 'Next'를 클릭하면 새로운 페이지 상태를 다시 읽어 다음 행동을 제안하는 구조다.
관련 Figure

사용자 쿼리가 Router를 거쳐 Find, Guide, Hide 핸들러 중 하나로 배정되고, 각 핸들러가 DOM을 읽어 최종 상태(하이라이트, 안내, 숨김)를 생성하는 전체 시스템 아키텍처를 도식화했다.
PageGuide의 3단계 상호작용 파이프라인 구조
주요 결과
94명의 사용자를 대상으로 한 실험 결과, PageGuide는 모든 지표에서 기존 브라우징 도구보다 우수한 성능을 보였다. 특히 Hide 모드에서는 정확도가 26%p 향상되었으며 작업 완료 시간은 70% 감소하는 압도적인 효율성을 입증했다.
Guide 모드에서는 작업 성공률이 기존 23%에서 53%로 30%p 상승했다. 이는 복잡한 절차적 작업에서 시각적 가이드가 사용자의 이탈을 막고 정확한 경로로 안내하는 데 결정적인 역할을 함을 보여준다. Find 모드 역시 수동 검색(Ctrl+F) 사용 빈도를 80% 줄이면서도 정보 탐색 시간을 19% 단축시켰다.
기술 상세
PageGuide는 Manifest v3 표준을 따르는 크롬 확장 프로그램으로 구현되었다. 핵심은 LLM이 HTML DOM을 직접 참조할 수 있도록 하는 'Grounding' 기술이다. 이를 위해 가시적인 모든 노드에 고유 인덱스를 부여하고, LLM이 답변 내에 [N:"text"] 형태의 태그를 삽입하도록 프롬프팅한다.
아키텍처 측면에서 Gemini-3-Flash 모델을 기본 백본으로 사용하며, OpenRouter API를 통해 다양한 모델로의 교체가 용이하도록 설계되었다. 특히 Guide 모드에서는 상태 변화를 감지하기 위해 각 액션 수행 후 DOM을 재스캔하는 피드백 루프를 구현하여 에러 복구(Error Recovery) 능력을 갖췄다.
기존의 완전 자율형 에이전트(Autonomous Agent)들이 겪는 '불투명한 의사결정' 문제를 해결하기 위해, 모든 제안된 액션에 대해 1문장 분량의 이유(Justification)를 생성하여 사용자에게 검토받는 Mixed-Initiative 인터페이스를 기술적 차별점으로 내세운다.
한계점
현재 시스템은 단일 모드 디스패치에 국한되어 있어 '설정 페이지를 찾아서 비밀번호를 변경해줘'와 같은 복합 쿼리(Find + Guide)를 한 번에 처리하지 못한다. 또한 여러 페이지에 걸친 정보의 하이라이트 지속성이 부족하며, 콘텐츠 숨기기 설정이 세션 간에 저장되지 않는 메모리 한계가 존재한다.
실무 활용
웹 브라우저 확장 프로그램 형태로 구현되어 즉시 실무에 적용 가능한 수준의 완성도를 갖추고 있으며, 복잡한 웹 서비스의 온보딩이나 고객 지원 도구로 활용도가 높다.
- 복잡한 SaaS 설정 페이지에서 특정 기능을 찾는 단계별 튜토리얼 자동 생성
- 긴 위키피디아나 뉴스 기사에서 팩트 체크를 위한 근거 문장 즉시 하이라이트
- 소셜 미디어 피드에서 특정 정치적 키워드나 광고 요소를 지능적으로 숨기기
- 웹 기반 관리자 페이지에서 반복적인 다단계 운영 업무 가이드
코드 공개 여부: 공개
코드 저장소 보기키워드
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.