API가 없나요? 문제 없어요!
Source: Dev.to
왜 컴퓨터 사용 에이전트(CUAs)가 실패하는가
헬스케어용 AI 도구를 만들기 시작했을 때, 우리는 공개 API가 없거나 내부 API에 접근하려면 터무니없는 비용을 부과하는 레거시 시스템들의 미로와 통합해야 했습니다. 여러 고객이 우리 AI가 그들의 EHR, CRM, 내부 포털과 연동될 수만 있다면 비용을 지불하겠다고 했습니다. 절박함에 우리는 “브라우저 자동화를 해결한다”고 약속하는 기술, 컴퓨터 사용 에이전트(CUAs)에 눈을 돌렸습니다.
실제로 발견한 문제점
- 너무 느림 — 단 하나의 필드를 추출하기 위해 전체 페이지를 다시 로드합니다.
- 너무 비쌈 — 버튼 하나를 클릭하기 위해 토큰을 소모합니다.
- 끊임없이 깨짐 — 특히 날짜 선택기 📅🤦 를 마주할 때 (한 번은 추론 로그를 살펴보니 LLM이 잠시 자신의 존재에 대해 고민하는 듯했습니다).
CUAs는 범용성을 약속하지만, 현대 웹 앱은 이산적인 스크린샷을 찍고 각 클릭 전에 몇 초씩 사고하는 시스템을 위해 설계되지 않았습니다. 인간의 연속적인 인지, 주의, 반응 시간을 염두에 두고 만들어졌기 때문이죠. CUAs가 무엇을 할지 결정할 때쯤이면 DOM은 이미 변했으며, 요소는 다시 렌더링되고, 클릭하려던 버튼은 사라져 버립니다.
돌파구
모든 현대 웹 앱은 백엔드 서비스와 통신해야 하며, 그 통신은 본질적으로 구조화되어 있습니다. 브라우저는 이미 인증, 데이터 가져오기, 폼 제출, 페이지네이션, 워크플로우 트리거 등을 어떻게 하는지 알고 있습니다. 브라우저가 알면 우리도 알 수 있습니다.
전체 브라우저 상태를 관찰함으로써 프론트엔드와 백엔드 사이의 숨겨진 계약을 해독할 수 있습니다:
- HTML 구조와 DOM 변형
- JavaScript 번들 및 실행 로직
- 쿠키와 인증 토큰
- 로컬 및 세션 스토리지
- 모든 네트워크 트래픽: XHR, fetch, GraphQL, REST, 스트리밍
- JS 프로세스 자체에서 발생하는 런타임 신호
이 모든 것을 볼 수 있게 되면, 앱의 통신 구조가 드러나고 픽셀을 스크래핑하거나 가짜 사용자를 구동하지 않아도 이를 재현할 수 있습니다.
Vectorly 작동 방식
Vectorly는 “브라우저 안의 인간”이 되려 하지 않습니다. 대신 브라우저를 계측하고 관찰한 내용을 재사용 가능한 자동화 레시피로 변환합니다.
- Capture – 사이트를 자연스럽게 탐색합니다—클릭하고, 검색하고, 스크롤하고, 탐색하듯이. 상호작용하는 동안 Vectorly는 브라우저가 보는 모든 것을 캡처합니다: 네트워크 트래픽, 쿠키, 스토리지, HTML, 그리고 JS.
- Describe – 작업이 끝나면, 필요한 내용을 간단히 설명합니다:
- 추출하고 싶은 데이터 (예: “이 계정의 모든 예정 예약”)
- 복제하고 싶은 API 동작 (예: “이 파라미터로 항공편 검색”)
- Analyze – 우리의 AI 에이전트가 캡처된 자산을 검토하고 앱 내부 API와 흐름의 근본 구조를 추론합니다.
- Generate – Vectorly의 AI 에이전트가 루틴을 생성합니다: 구조화된 자동화 레시피로 구성됩니다:
- 구체적인 브라우저 단계(네비게이트, 클릭, 입력, 대기, 스크롤…)
- 올바른 파라미터, 헤더, 쿠키, 인증 정보를 포함한 직접적인 내부 API 호출
이 루틴은 다음 형태로 제공됩니다:
- 코드에서 호출할 수 있는 REST API 엔드포인트
- LLM 에이전트가 1급 기능으로 사용할 수 있는 MCP 툴
한 번 정의하면 어디서든 재사용 가능합니다. 가짜 사용자를 구동하거나 픽셀을 스크래핑하지 않아도 웹 앱의 실제 동작을 얻을 수 있습니다.
주요 링크
- Developer Console:
- Website:
- Docs:
- Discord Community:
오픈소스
- Web Hacker (Reverse Engineering Framework):
영상 & 출시
- Demo Video:
- YouTube Channel:
Vectorly를 사용해 보신다면, 다음에 어떤 워크플로우, 웹사이트, 혹은 통합을 열고 싶은지 알려 주세요!