Post

XPath의 저주를 끊어내다: Skyvern, 시각 지능(VLM)으로 무장한 브라우저 자동화의 신기원

Posted
Breaking the Curse of XPath: Skyvern, a New Era of Browser Automation Armed with Visual Intelligence (VLM)
Breaking the Curse of XPath: Skyvern, a New Era of Browser Automation Armed with Visual Intelligence (VLM)
By
18 min read
XPath의 저주를 끊어내다: Skyvern, 시각 지능(VLM)으로 무장한 브라우저 자동화의 신기원

The Hook: 끝없는 셀렉터 유지보수의 굴레

솔직히 고백하자면, 처음 이 기술을 봤을 때 꽤 회의적이었습니다. 현업에서 Selenium이나 Playwright를 10년 가까이 굴려본 사람이라면 누구나 공감할 겁니다. 새벽 3시에 슬랙 알림이 요란하게 울립니다. “스크래핑 파이프라인 에러 났는데요?” 원인은 뻔하죠. 타겟 웹사이트가 UI를 개편하면서 div[2] > ul > li:nth-child(4) > button 같은 끔찍한 XPath나 CSS 셀렉터가 모조리 깨져버린 겁니다. 우리는 ‘자동화’를 한다고 굳게 믿었지만, 실상은 ‘셀렉터 유지보수’라는 이름의 끝없는 쳇바퀴를 돌고 있었을 뿐이죠. 기획팀은 “이거 버튼 하나 위치 바뀐 건데 왜 갑자기 전체가 안 돌아가요?”라고 묻고, 개발자는 “눈에는 똑같아 보여도 DOM 트리가 싹 바뀌었다고요!”라며 한숨을 쉬는 이 지긋지긋한 패턴. 과연 언제까지 이래야 할까요?

TL;DR: The Core

Skyvern은 인간처럼 눈으로 보고 판단하는 브라우저 자동화 프레임워크입니다.

기존의 취약한 HTML/DOM 셀렉터 기반 자동화를 완전히 버리고, 비전 언어 모델(Vision LLM)과 자율 에이전트 스웜(Swarm of Agents) 아키텍처를 결합했습니다. 타겟 웹사이트의 UI 레이아웃이 완전히 뒤바뀌어도 코드를 단 한 줄도 수정할 필요 없이 목표를 완수하는, 진정한 의미의 차세대 자동화 패러다임입니다. 2026년 현재 기준, 단순한 DOM 파싱을 넘어 완벽한 시각적 지능을 획득한 이 녀석의 진짜 가치와 한계를 파헤쳐 보겠습니다.

Deep Dive: Under the Hood (핵심 아키텍처 심층 분석)

단순히 프롬프트를 Playwright 코드로 변환해주는 또 다른 래퍼(Wrapper) 도구라고 생각했다면 큰 오산입니다. Skyvern의 내부는 BabyAGI나 AutoGPT에서 영감을 받은 태스크 기반 자율 에이전트 군집(Swarm of Agents)으로 구성되어 있습니다.

기존 방식의 비극: 결정론적 DOM 파싱 기존 자동화는 브라우저의 ‘DOM 트리’라는 눈에 보이지 않는 뼈대에 전적으로 의존합니다. 하지만 렌더링된 화면(유저가 보는 화면)과 DOM(개발자가 짠 코드)은 종종 일치하지 않습니다. 버튼 하나를 감싸는 래퍼 div가 추가되거나 React의 난독화된 클래스명이 바뀌는 순간 스크립트는 뻗어버립니다.

Skyvern 2.0의 해결책: 시각적 매핑(Visual Mapping)과 Planner-Actor-Validator 루프 Skyvern은 컴퓨터 비전(Computer Vision)을 사용해 렌더링된 화면 자체를 사람처럼 ‘봅니다’. 최근 2.0 업데이트를 통해 WebVoyager 벤치마크 85.85%라는 SOTA(State-of-the-Art) 성능을 달성했는데, 그 비결은 다음과 같은 3단계 루프에 있습니다.

  1. Planner (계획 수립): LLM이 사용자의 자연어 목표(“아이폰 16과 케이스를 장바구니에 담아”)를 분석하여 하위 태스크를 수립합니다.
  2. Actor (행동 실행): 화면을 캡처한 뒤, 상호작용 가능한 요소에 바운딩 박스를 칩니다. VLM이 “검색창은 12번 박스”라고 판단하면 Playwright가 해당 좌표(x, y)를 클릭하고 텍스트를 입력합니다.
  3. Validator (검증): 동작 후 화면이 예상대로 바뀌었는지(예: 장바구니 아이콘 옆 숫자가 1 증가했는지)를 시각적으로 재확인하고, 실패했다면 스스로 재시도 로직을 태웁니다.
비교 항목기존 자동화 (Selenium / Playwright)Skyvern (Vision + LLM)
요소 탐색 기준렌더링되지 않은 DOM 구조 (XPath, CSS, ID)렌더링된 화면의 컴퓨터 비전, 자연어 컨텍스트
레이아웃 변경 시100% 확률로 스크립트 중단 및 에러 발생시각적 특징과 목적을 유지한다면 정상 동작
복잡한 조건/예외 처리수많은 try-catch와 if/else 하드코딩 필수LLM의 실시간 상황 추론으로 유연한 대처 가능
비정형 데이터 추출복잡한 정규식 및 DOM 노드 순회 분석추출할 JSON 스키마만 정의하면 AI가 알아서 매핑

실제 동작을 보여주는 코드 스니펫 (Playwright와 AI의 하이브리드 교향곡) 가장 감탄했던 부분은 기존 Playwright의 강력한 제어력과 AI의 유연함을 혼합해서 쓸 수 있는 하이브리드 어프로치(Hybrid Approach)를 지원한다는 점입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

from skyvern import Skyvern
from pydantic import BaseModel

# 1. 추출할 데이터의 스키마를 정의합니다 (ORM 모델을 선언하듯 우아하게!)
class InvoiceData(BaseModel):
    vendor_name: str
    total_amount: float
    due_date: str
    is_paid: bool

async def automate_procurement():
    # 2. Skyvern 클라이언트 초기화 (내부적으로 Playwright와 Vision LLM 구동)
    client = Skyvern(api_key="your_api_key")
    
    # 3. 확실한 정적 경로(URL)는 Playwright의 결정론적 방식을 그대로 사용 (속도 최적화)
    await client.goto("https://vendor-portal.com/login")
    
    # 4. AI 기반 인터랙션: 셀렉터 없이 자연어로 지시 (AI-Augmented)
    await client.execute(
        prompt="로그인 폼을 찾아서 아이디 'admin', 비밀번호 'supersecret'을 입력하고 로그인해. "
               "만약 갑자기 프로모션 팝업이 뜨면 '나중에 하기'를 눌러서 닫아줘."
    )
    
    # 5. AI 기반 데이터 추출: DOM 구조를 몰라도 Pydantic 스키마에 맞춰 뽑아냅니다.
    invoice = await client.extract(
        prompt="최근 청구서 목록에서 첫 번째 청구서의 상세 정보를 추출해줘.",
        schema=InvoiceData
    )
    
    print(f"추출된 데이터: {invoice.model_dump_json()}")

이 코드를 처음 짰을 때의 소름이 아직도 생생하네요. “팝업이 뜨면 닫아줘” 같은 예외 처리를 waitForSelector 범벅으로 구현하지 않아도 된다는 건 축복입니다.

Pragmatic Use Cases (실무 적용 시나리오)

‘그래서 이걸 내 프로젝트에 어떻게 쓰는데?’ 뻔한 예제는 집어치우고, 진짜 현업에서 마주하는 핏빛 시나리오를 짚어봅시다.

시나리오 1: 제어 불가능한 서드파티 B2B 벤더 포털 파이프라인 B2B 비즈니스에서 가장 고통스러운 건 파트너사의 웹사이트에서 데이터를 긁어오거나 발주를 넣는 작업입니다. 이들은 정식 API를 제공하지도 않으면서 사전 예고 없이 UI를 뒤엎습니다. 어제까지 잘 돌던 송장(Invoice) 다운로드 봇이 오늘 아침에 죽어있기 일쑤죠. Skyvern을 도입하면 벤더사가 로그인 버튼을 빨간색으로 바꾸든, 햄버거 메뉴 안으로 숨기든 상관없이 “로그인해”라는 컨텍스트를 유지하여 파이프라인의 생명력을 좀비처럼 연장시킵니다.

시나리오 2: 동적이고 불규칙한 경쟁사 데이터 스크래핑 및 정규화 경쟁사 쇼핑몰 100곳의 상품 정보를 수집한다고 가정해 보죠. 사이트마다 옵션 표기법, 레이아웃, 심지어 모바일/PC 뷰가 다릅니다. 기존에는 사이트별로 100개의 스크래퍼(Scraper) 코드를 작성하고 유지보수해야 했습니다. 하지만 Skyvern은 Pydantic 스키마만 던져주면, 눈에 보이는 비정형 텍스트와 표를 LLM이 스스로 판단해 규격화된 정형 JSON으로 뱉어냅니다. 1개의 워크플로우로 수십 개의 사이트를 커버하는 경이로운 확장성을 보여주죠.

시나리오 3: 2FA 및 캡챠(CAPTCHA) 우회를 동반한 다단계 인증 클라우드 서비스나 금융권 포털은 로그인 시 이메일 OTP(2FA)나 캡챠를 강제합니다. Skyvern 클라우드 환경은 2026년 현재 고도화된 안티 봇(Anti-bot) 회피 기능과 캡챠 솔버, 프록시 네트워크를 내장하고 있습니다. 로그인 중 2FA 창이 뜨면, 에이전트가 상황을 인식하고 지정된 메일함이나 1Password 연동을 통해 인증 코드를 가져와 입력하는 복잡한 분기 처리를 돌파합니다.

Honest Review & Trade-offs (진짜 장단점과 한계)

자, 여기까지 들으면 완벽한 은탄환 같겠지만, 시니어 개발자의 렌즈로 보면 반드시 짚고 넘어가야 할 치명적인 트레이드오프들이 존재합니다. 무턱대고 전사 도입을 외쳤다가는 피를 볼 수 있습니다.

첫째, 처참한 속도와 뼈아픈 레이턴시(Latency). GitHub 이슈 #4439에서도 뜨겁게 논의되었듯, 5~6개 필드로 구성된 단순한 입사 지원 폼을 채우는 데 무려 4~5분이 걸리기도 합니다. 결정론적인 Playwright 스크립트가 1초 컷으로 끝낼 작업을 말이죠. 매 액션마다 화면을 캡처하고, 거대한 Vision 모델로 DOM 트리를 파싱해 넘기고, LLM이 추론하는 과정을 반복하기 때문입니다. 선착순 티켓팅이나 초당 수백 건을 처리해야 하는 고빈도 시스템에는 절대 부적합합니다.

둘째, 비용의 압박과 크레딧 모델의 진실. 과거엔 Step당 과금이었지만 2026년에 들어서며 월정액 크레딧 모델(Pro 기준 $149/월, 약 15만 크레딧)로 개편되었습니다. 하지만 내부적으로 OpenAI의 GPT-4o나 Claude 3.5 Sonnet 같은 멀티모달 LLM을 무겁게 호출하기 때문에, 복잡한 태스크를 하나 완수할 때마다 생각보다 많은 비용과 크레딧이 소진됩니다. 하루 수십만 건의 대규모 처리가 필요하다면 클라우드 비용이 알바생 인건비를 넘어설 수도 있습니다.

셋째, ‘블랙박스’ 디버깅의 지옥. 코드로 짠 셀렉터는 ElementNotFoundException을 뱉으며 정확히 몇 번째 줄에서 왜 죽었는지 Call Stack을 명확히 보여줍니다. 하지만 AI가 실수하면? “어? 이 녀석이 왜 갑자기 ‘결제’가 아니라 ‘취소’ 버튼을 눌렀지?” 그 이유를 명확히 추적하기가 불가능에 가깝습니다. Validator 루프가 생겼다 해도 LLM 특유의 환각(Hallucination) 현상이 크리티컬 파이프라인에 개입하는 건 꽤 꺼림칙한 일입니다.

Closing Thoughts: 우리는 무엇을 준비해야 하는가?

그럼에도 불구하고 Skyvern이 보여준 패러다임의 전환은 압도적입니다. 우리는 지금까지 ‘어떻게(How)’를 컴퓨터에게 일일이 떠먹여야 했습니다. “//*[@id='submit'] 노드를 찾아서 click 해.” 하지만 이제는 ‘무엇을(What)’ 할지만 지시하는 선언적(Declarative) 자동화의 시대로 넘어가고 있습니다. “로그인하고 첫 번째 주문 취소해.”

현업 실무자로서 우리가 취해야 할 스탠스는 명확합니다. 통제 가능한 사내 내부 시스템(1st Party)의 CI/CD E2E 테스트라면, 여전히 빠르고 저렴하고 예측 가능한 기존의 Playwright를 쓰세요. 하지만 우리가 절대 통제할 수 없는 외부 벤더 시스템(3rd Party)과 연동해야 하고, 잦은 UI 변경으로 유지보수 공수가 기하급수적으로 폭발하고 있는 지점이라면 Skyvern 도입을 당장 진지하게 검토해야 합니다.

브라우저의 DOM 구조가 더 이상 데이터 수집의 장벽이 되지 않는 세상. 앞으로 오픈소스 VLM 생태계가 더 가벼워지고 빨라진다면, Skyvern이 제시한 아키텍처는 모든 소프트웨어 개발자의 필수 무기가 될 것입니다. XPath의 저주는 이제 끝났습니다. 눈을 뜨고 세상을 읽는 브라우저 에이전트의 시대에 오신 것을 환영합니다.

References

  • https://github.com/Skyvern-AI/skyvern
  • https://mintlify.com/docs/skyvern
  • https://www.skyvern.com/blog/skyvern-vs-scripts-ai-browser-automation-comparison
  • https://www.skyvern.com/blog/ai-automation-complete-guide-february-2026
  • https://www.skyvern.com/blog/launch-week-day-5-simpler-pricing-model
  • https://tallyfy.com/ai-agents/skyvern
  • https://github.com/Skyvern-AI/skyvern/issues/4439
  • https://www.skyvern.com/blog/skyvern-browser-agent-2-0-how-we-reached-state-of-the-art-in-evals
Tech
This post is licensed under CC BY 4.0 by the author.