AI-Powered Browser Automation Agent

"웹을 모두에게 평등하게"
자연어 한 마디로
복잡한 웹 서비스를 안내받는 세상

Surfy는 자연어 명령으로 브라우저를 자동 제어하는 Hierarchical AI Agent입니다.
Chrome Extension으로 동작하며, Plan Anchor로 정확한 계획을 보장합니다.

GitHub에서 보기 자세히 알아보기
How it works

어떻게 작동하나요?

자연어 명령 하나로 시작되는 7단계 파이프라인

01

명령 입력

Side Panel에서 자연어로 원하는 목표를 입력합니다

Surfy - 명령 입력
02

Research & Scout

웹 검색으로 사전 정보를 수집하고 목표 사이트를 탐색합니다

Surfy - Research 단계
03

Plan Approval

Planner가 수립한 계획을 확인하고 승인 / 수정합니다

Surfy - Plan Approval
04

Actor & Evaluator

Actor가 태스크를 실행하고, Evaluator가 결과를 검증합니다

Surfy - 실행 및 검증
05

완료 확인

Evaluator의 최종 검증 후 작업 완료를 사용자에게 알립니다

Surfy - 최종 결과
Use Case

Surfy가 바꾸는 경험

Before

기존 웹 서비스 이용

  • 복잡한 메뉴 구조
  • 어디를 클릭할지 모름
  • 수많은 입력 필드
→ 이탈
VS
After - Surfy

Surfy와 함께하면

  • Plan Agent가 사전에 계획
  • Actor Agent가 선택 이유를 설명
  • 실패 시 자동 재시도 & 사용자 피드백 반영
→ 목표 달성
Agent Components

Agent 구성 요소

Surfy는 계층적 에이전트 구조로 동작합니다.
각 컴포넌트는 자기 역할만 수행하며,
다른 컴포넌트의 책임을 침범하지 않습니다.

Researcher

웹 검색으로 사전 정보 수집

Scout

목표 사이트 미리 탐색

Planner

다음 1~2개 태스크만 생성 (Rolling Wave)
Plan Anchor로 첫 계획
품질 보장

Actor

단일 태스크를 ReAct 루프로 실행
매 스텝 DOM + Screenshot 분석

Evaluator

구조화된 성공 기준 체크
애매하면 LLM 호출하여
판정

Architecture

아키텍처 구조

Hexagonal Architecture + Hierarchical Agent

Surfy 아키텍처 다이어그램
Sequence Diagram

동작 시나리오

사용자의 요청부터 완료까지의 전체 흐름을 시퀀스 다이어그램으로 확인하세요

사용자가 자연어로 명령하면, Research → Scout → Planner → 사용자 승인 → Actor → Evaluator 순서로 진행되어 목표를 달성합니다.

성공 시나리오 시퀀스 다이어그램

실패 시 최대 3회 자동 재시도하며, 재시도 소진 시 Human Gateway를 통해 사용자에게 도움을 요청한 뒤 피드백을 반영하여 재실행합니다.

실패 시나리오 시퀀스 다이어그램

Technical Decisions

논문 리서치와 반복 실험을 통해 도출된 설계 결정들

14편 이상의 논문 리서치

Research

웹 에이전트와 Plan Agent 관련 논문을 수집하고,
프로젝트에 적용 가능한 논문으로 필터링하여 핵심 기술을 도출했습니다.

HIGH WebAnchor Anchoring Agent Planning
HIGH WebDART Dynamic Decomposition & Re-planning
HIGH HiPlan Hierarchical Planning
HIGH ReAcTree Hierarchical Agent Trees
HIGH Plan-and-Act Long-Horizon Tasks
MID Hierarchical Prompting Web Navigation
도출된 핵심 기술: Multi-plan sampling & scoring, Rolling Wave 계획법, Plan Anchor 기반 안정화

Planner + Actor(ReAct) 구조 결정

Architecture

Planner가 추상적 태스크를 생성하고, Actor가 ReAct 루프로 직접 행동을 결정하는 구조입니다.

Planner

  • Plan Anchor로 첫 계획 품질 보장
  • Rolling Wave: 다음 1~2개 태스크만 생성
  • 상황 변화 시 기존 계획을 수정(Replanning)
  • 각 태스크에 담당자(Agent/Human) 지정

Actor (ReAct Loop)

  • 단일 태스크를 받아 ReAct 루프로 직접 행동 결정
  • 매 스텝 DOM + Screenshot 분석
  • 별도 Micro Planner 없이 Actor가 즉시 행동 선택
  • 예외 발생 시 Planner에 재계획 요청

CDP 기반 사용자 브라우저 직접 제어

Experiment

사용자의 실제 Chrome을 CDP(Chrome DevTools Protocol)로 제어하기로 결정했습니다. 코레일 예매 테스트에서 자동화 도구들이 개발자 도구 탐지에 실패한 경험이 근거가 되었습니다.

✗
Selenium-stealth 개발자 도구 탐지 당함
✗
Playwright / Stealth 개발자 도구 탐지 당함
✓
CDP (사용자 Chrome) 탐지 우회 — 실제 브라우저이므로 차단 없음

Strict Validator (Evaluator) 도입

Architecture

Actor의 행동 결과를 객관적으로 평가하는 독립된 검증 노드를 설계했습니다.
다음 행동을 절대 스스로 계획하지 않고, 성공 여부(True/False)와 사유만 판단합니다.

핵심 원칙: 화면 상태(DOM/스크린샷)와 Planner가 설정한 '기대 결과'를 대조 → 검증 통과 시 다음 태스크, 실패 시 재시도, 반복 실패 시 Human Gateway를 통해 사용자 개입 요청

Scout 단계 Gemini Flash 최적화

Optimization

Scout 단계에 Gemini Flash를 도입하여 사이트 탐색 속도를 대폭 개선했습니다. (PR #43)

Scout 단계 소요 시간
기존
56초
Gemini
10초
82% 단축 — Gemini Flash 도입으로 Scout 단계만 5.6배 빨라짐
Demo

시연 영상

Surfy가 실제로 동작하는 모습을 확인하세요.

영상 준비 중

UN SDGs

지속 가능한 개발 목표

UN SDG 4 - Quality Education

Quality Education

디지털 리터러시 격차 해소

UN SDG 10 - Reduced Inequalities

Reduced Inequalities

디지털 접근성 격차 완화

Team

개발자들

👨‍💻

김현수

👨‍💻

김성윤

👨‍💻

김한성

👩‍💻

백서영