LLM 기반 자율 웹 자동화: Browser-use와 Playwright AI로 복잡한 웹 워크플로우 자동화하기

기존의 Selenium, Playwright, Puppeteer를 이용한 웹 자동화 스크립트는 DOM 요소의 ID나 CSS 클래스가 변경되면 즉시 깨지는 한계를 지니고 있었습니다. 동적 섀도우 DOM(Shadow DOM), 캔버스 렌더링, 복잡한 SPA(Single Page Application) 및 2차 인증(2FA) 흐름에서는 기존 CSS 셀렉터 기반 자동화 방식의 유지보수 비용이 급격히 증가합니다.

2026년 오픈소스 AI 자동화의 핵심 프레임워크로 급부상한 Browser-use는 Multimodal Vision LLM(GPT-4o, Claude 3.5 Sonnet, DeepSeek-R1)과 Playwright 브라우저 인스턴스를 결합하여, 인간처럼 웹페이지를 시각적으로 인식하고 능동적으로 조작하는 자율 웹 에이전트(Autonomous Web Agent) 파이프라인을 제공합니다.

이 글에서는 Browser-use의 작동 원리와 Playwright AI 통합 패턴, 세션 재사용, 캡차(CAPTCHA) 및 인증 우회 보안 전략, 그리고 실전 워크플로우 예제 코드를 다룹니다.

핵심 요약

• 시각적 DOM 트레이싱: Browser-use는 웹페이지의 렌더링 스냅샷에 고유 번호 박스(Bounding Box)를 오버레이하여 LLM에게 전달함으로써, CSS 셀렉터 없이 100% 인텐트 기반 클릭·입력을 수행합니다.
• Playwright CDP 연동: 기존 Chrome 사용자 프로필 및 쿠키 세션을 Playwright CDP(Chrome DevTools Protocol)로 연결하여 로그인 유지 및 2FA 우회를 구현합니다.
• Self-Correction 루프: 에이전트가 예기치 않은 팝업이나 오류 페이지를 만났을 때 스스로 원인을 분석하고 이전 상태로 되돌아가 재시도하는 복원성을 갖추고 있습니다.
• 비용 최적화: Vision 모델 프롬프트 토큰 소모를 줄이기 위해 DOM 요소를 텍스트 기반 인터랙티브 인덱스로 1차 필터링하는 하이브리드 컨텍스트 기법이 필수적입니다.

1. Browser-use 아키텍처와 시각적 요소 인식 원리

Browser-use는 Playwright를 통해 브라우저 DOM과 스크린샷을 실시간으로 캡처합니다. 이후 자체 알고리즘을 통해 클릭 가능한 인터랙티브 요소(버튼, 링크, 입력 폼) 에 인덱스 번호를 표시한 이미지 스냅샷을 생성합니다.

[웹 브라우저 (Playwright)] 
       │
       ▼ (Screen Capture + Indexed DOM)
[Browser-use Agent Controller] 
       │
       ▼ (Prompt + Annotated Screenshot)
[Multimodal Vision LLM (Claude 3.5 / GPT-4o)]
       │
       ▼ (Action: Click[12], Type[5, "search_query"])
[Playwright Executer] ──> [웹 조작 수행]

LLM은 “로그인 버튼의 ID를 찾아서 클릭하라”는 단순 CSS 셀렉터 파싱 대신, “화면 중앙의 ‘로그인’ 텍스트가 있는 번호 12번 요소를 클릭하라” 는 고차원 시각적 지시어(Visual Grounding)를 통해 작동합니다.

2. Browser-use + Playwright 파이썬 실전 코드

기본 자율 탐색 및 데이터 수집 스크립트

import asyncio
from langchain_anthropic import ChatAnthropic
from browser_use import Agent, Browser, BrowserConfig

async def run_market_research():
    # Chrome 브라우저 설정 (Headless 여부 및 뷰포트 지정)
    browser = Browser(
        config=BrowserConfig(
            headless=False,
            chrome_instance_path="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
        )
    )

    # LLM 모델 지정 (Claude 3.5 Sonnet 권장)
    llm = ChatAnthropic(
        model_name="claude-3-5-sonnet-20241022",
        temperature=0.0
    )

    # 자율 에이전트 생성
    agent = Agent(
        task="""
        1. https://news.ycombinator.com 에 접속해라.
        2. 'AI agent' 관련 최신 뉴스 기사 3개의 제목과 URL, 점수를 수집해라.
        3. 각 기사의 댓글 페이지로 들어가 가장 추천이 많은 댓글 1개씩 요약해라.
        4. 결과를 JSON 형식으로 정리해서 보고해라.
        """,
        llm=llm,
        browser=browser,
    )

    result = await agent.run(max_steps=15)
    print("=== 자율 자동화 수집 결과 ===")
    print(result)

    await browser.close()

if __name__ == "__main__":
    asyncio.run(run_market_research())

기존 로그인 세션(CDP) 재사용 및 2FA 대처

로그인이 필요한 SaaS 서비스 자동화 시 매번 로그인 절차를 밟는 대신, 개발자의 기존 Chrome 데스크톱 세션 디렉터리를 Playwright CDP로 수직 연결할 수 있습니다.

import asyncio
from browser_use import Agent, Browser, BrowserConfig

async def run_authenticated_workflow():
    # 기존 Chrome 세션 디렉터리를 연결하여 2FA/로그인 상태 유지
    browser = Browser(
        config=BrowserConfig(
            chrome_instance_path="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
            user_data_dir="~/Library/Application Support/Google/Chrome/Profile 1",
            extra_chromium_args=["--remote-debugging-port=9222"]
        )
    )

    agent = Agent(
        task="""
        1. AWS Console(https://console.aws.amazon.com)의 EC2 대시보드로 이동해라.
        2. 'running' 상태인 인스턴스들의 ID와 IP 주소 목록을 추출해라.
        """,
        llm=ChatAnthropic(model="claude-3-5-sonnet-20241022"),
        browser=browser
    )

    await agent.run()

if __name__ == "__main__":
    asyncio.run(run_authenticated_workflow())

3. 기존 Playwright 스크립트 vs Browser-use AI 자동화 비교

4. 실무 배포 시 고려사항 & 토큰 비용 최적화

1. Vision 토큰 비용 최소화: 모든 스텝마다 HD 스크린샷을 넘기면 토큰 소비가 극대화됩니다. use_vision=True 옵션을 정밀 클릭이 필요한 스텝에만 핀포인트로 활성화하세요.
2. 최대 스텝 수 제한 (max_steps): 에이전트가 무한 루프에 빠지는 것을 방지하기 위해 태스크별 상한선(예: 15~20 스텝)을 설정해야 합니다.
3. 인간 개입 루프 (Human-in-the-loop): 결제 진행이나 중요 데이터 삭제 같은 파괴적 동작 이전에는 Agent가 실행 허가를 요청하도록 시스템 프롬프트 가드레일을 구축해야 합니다.

결론

Browser-use와 Playwright AI의 결합은 깨지기 쉬운 정적 웹 자동화 스크립트의 시대를 끝내고, 변화하는 웹 환경에 능동적으로 적응하는 차세대 AI RPA 인프라를 가능케 합니다.