작성자 주: 설치부터 snapshot과 ref 조작, 결과 검증까지 5단계로 agent-browser의 「페이지 읽기 → 요소 클릭 → 페이지 다시 읽기」 루프를 익혀요. AI Agent가 실제 브라우저를 안정적으로 제어할 수 있습니다.
AI Agent가 웹페이지를 조작할 때 흔히 부딪히는 문제는 페이지를 볼 수 없고, 원하는 요소를 정확하게 클릭하기도 어렵다는 점이에요. 스크린샷과 좌표 클릭 방식은 토큰을 많이 소모하고 클릭 위치가 빗나가기 쉬워요. HTML 전체를 모델에 전달하면 컨텍스트가 금방 가득 차고요. 이 글에서는 agent-browser의 snapshot-ref 조작 루프를 소개하고, Agent가 「한 번에 명령 하나씩」 브라우저를 제어하는 방법을 살펴봐요.
이 글은 브라우저 자동화 프레임워크의 개념만 소개하는 글이 아니에요. 실제 사용 순서에 따라 agent-browser 설치부터 snapshot과 ref를 함께 사용하는 방법, 실패 시 재시도 전략, Agent 워크플로에 연결하는 방법까지 알아봐요.
핵심 가치: 이 글을 읽고 나면 agent-browser의 snapshot-ref 루프가 대규모 언어 모델에 적합한 이유를 이해하고, 자신만의 Agent에서 명령 5개로 첫 브라우저 작업을 수행할 수 있어요.
agent-browser snapshot-ref 루프 핵심 요약
agent-browser는 Vercel Labs가 Apache-2.0 라이선스로 공개한 브라우저 자동화 도구예요. Rust로 만든 네이티브 CLI로, AI Agent가 명령어를 하나씩 실행해 브라우저를 제어하도록 설계됐어요. Agent는 페이지를 연 뒤 접근성 트리(accessibility tree)를 간결한 텍스트로 읽고, 셸 명령어로 요소를 조작해요.
| 핵심 기능 | 설명 | Agent에 주는 이점 |
|---|---|---|
| 간결한 snapshot 텍스트 | 페이지를 접근성 트리 형태로 출력하며, 각 요소에 @e1 같은 ref가 붙음 |
스크린샷이나 원시 HTML보다 컨텍스트를 적게 사용 |
| ref를 통한 정확한 지정 | click @e1처럼 조작 명령에서 ref를 직접 참조 |
모델이 CSS 선택자를 직접 만들 필요가 없음 |
| 브라우저 상시 실행 | 백그라운드 데몬이 브라우저를 열어 둠 | 각 단계에서 짧은 셸 호출만 하면 됨 |
| 명시적인 오류 보고 | 요소가 가려지거나 숨겨져 있거나 비활성화된 경우, 클릭이 성공한 척하지 않고 실패함 | Agent가 실제 피드백을 바탕으로 다음 단계를 결정할 수 있음 |
| 내장 skills | CLI에 버전에 맞는 사용 설명이 포함됨 | Agent가 설치된 버전과 일치하는 지침을 읽을 수 있음 |
snapshot-ref 루프의 작동 방식
이 루프는 세 단계로 요약할 수 있어요. 먼저 snapshot으로 페이지를 읽고, 특정 ref를 조작한 다음, 페이지를 다시 읽어 결과를 확인하는 과정을 반복해요. 공식 example.com 스냅샷은 - link "Learn more" [ref=e1] 한 줄뿐이에요. 모델은 이 줄을 보고 페이지에 Learn more라는 링크가 있으며 @e1로 클릭할 수 있다는 걸 알아요.
이 설계는 ‘페이지 이해’와 ‘동작 실행’을 검증 가능한 두 단계로 나누므로 대규모 언어 모델의 도구 호출 방식에 잘 맞아요. 모델은 복잡한 DOM 구조를 이해할 필요 없이 텍스트에서 의미가 맞는 요소를 찾고 해당 ref를 참조하면 돼요. 매번 조작 후 스냅샷을 다시 찍기 때문에 Agent는 기억에 의존해 추측하는 대신 최신 페이지 상태를 바탕으로 판단할 수 있어요.
agent-browser의 내부 아키텍처
CLI 자체가 브라우저를 직접 관리하지는 않아요. 첫 번째 명령을 실행하면 백그라운드 데몬(daemon)이 시작되고, 데몬이 Chrome DevTools Protocol을 통해 브라우저를 제어해요. 이후 CLI 명령은 모두 이 데몬으로 전달돼요. 따라서 명령 사이에도 브라우저가 계속 열려 있어 로그인 상태와 페이지 위치가 유지돼요.
각 --session에는 독립적인 데몬과 브라우저가 있어 여러 작업을 서로 간섭 없이 병렬로 실행할 수 있어요. 기본적으로 헤드리스 브라우저는 한 시간 동안 명령을 받지 않으면 닫히고 데몬도 종료돼요. 세션 지속성(session persistence)을 설정했다면 종료 전에 상태를 저장해요.
이 루프의 ‘두뇌’는 대규모 언어 모델이에요. 매번 스냅샷 텍스트가 모델 컨텍스트에 들어가고 모델이 다음 명령을 결정하므로, 지시 이행 능력과 단가가 작업 성공률과 비용에 직접 영향을 줘요. APIYI는 이 글에서 다루는 Claude, DeepSeek, Kimi 등의 모델에 대한 API 호출을 제공해요. OpenAI와 Anthropic 두 인터페이스 형식과 호환되며, 연동 문서는 docs.apiyi.com에서 확인할 수 있어요.
agent-browser 빠른 시작: 5단계로 snapshot-ref 루프 실행하기
1단계: agent-browser와 브라우저 설치
가장 일반적인 방법은 npm으로 전역 설치한 다음 Chrome for Testing을 다운로드하는 거예요. npm 패키지는 실행 환경에 맞는 네이티브 바이너리를 자동으로 선택해요. 현재 macOS(ARM64, x64), Linux(ARM64, x64, glibc 및 musl), Windows(x64)를 지원해요.
| 설치 방법 | 명령어 | 적합한 환경 |
|---|---|---|
| npm 전역 설치 | npm install -g agent-browser 실행 후 agent-browser install 실행 |
대부분의 개발 환경, 최초 설치 시 브라우저 다운로드 필요 |
| Homebrew | brew install agent-browser 실행 후 agent-browser install 실행 |
macOS 사용자 |
| Linux 의존성 포함 설치 | agent-browser install --with-deps |
브라우저 시스템 라이브러리도 함께 설치해야 하는 서버와 컨테이너 |
| 설치 없이 실행 | npx agent-browser open example.com |
임시 사용, CI의 일회성 작업 |
| 유지보수 명령어 | agent-browser upgrade, agent-browser doctor |
버전 업그레이드, 환경 문제 진단 |
소스에서 빌드하려면 Node.js 24 이상, pnpm 11 이상, Rust 툴체인이 필요해요. pnpm install, pnpm build:source, pnpm link --global을 차례로 실행한 뒤 agent-browser install을 실행하면 돼요. 일반적인 사용에는 npm 설치만으로 충분해요.
2~5단계: 완전한 최소 루프
설치를 마쳤다면 아래 명령어로 snapshot-ref 루프를 한 번 완성할 수 있어요. 먼저 터미널에서 직접 실행하며 각 단계의 출력을 확인한 뒤, Agent에 자동 실행을 맡기는 것이 좋아요.
| 단계 | 명령어 | 역할 | 예상 결과 |
|---|---|---|---|
| 2. 페이지 열기 | agent-browser open example.com |
데몬을 시작하고 URL 열기 | 브라우저가 백그라운드에서 계속 실행됨 |
| 3. 스냅샷 읽기 | agent-browser snapshot -i |
상호작용할 수 있는 요소만 ref와 함께 나열 | link "Learn more" [ref=e1]과 비슷한 출력 |
| 4. ref 조작하기 | agent-browser click @e1 |
스냅샷의 요소를 클릭 | 페이지가 이동하거나 상태가 변경됨 |
| 5. 결과 확인하기 | agent-browser get url |
현재 URL을 읽어 동작이 적용됐는지 확인 | 이동 후 주소 반환 |
| 마무리 | agent-browser close |
브라우저 닫기 | 리소스 해제 |
3단계의 -i 옵션이 중요해요. 상호작용할 수 있는 요소만 출력하므로 스냅샷 텍스트가 훨씬 짧아져 토큰 예산이 제한된 상황에 적합해요. 5단계의 확인도 빠뜨리면 안 돼요. Agent는 ‘클릭했으니 성공’이라고 가정하는 대신 실제 피드백을 바탕으로 성공 여부를 판단해야 해요.
🚀 빠른 시작: 수동 루프가 정상적으로 작동하면 이 명령어들을 Agent에 맡길 수 있어요. 먼저 APIYI apiyi.com에서 테스트 크레딧을 확보하고, 같은 작업을 여러 모델에 시켜 스냅샷 텍스트에서 올바른 ref를 더 잘 고르는 모델이 무엇인지 살펴보세요. 인터페이스는 OpenAI와 Anthropic 형식을 지원하므로 기존 Agent 프레임워크에서는 대체로 키와 주소만 바꾸면 돼요. 자세한 내용은 docs.apiyi.com 문서를 확인하세요.
agent-browser ref의 유효 기간과 스냅샷 다시 찍기
ref는 ‘스냅샷을 찍은 순간’의 페이지를 가리켜요. 페이지가 이동하거나 DOM이 변경되면 기존 ref가 무효화되거나 엉뚱한 요소를 가리킬 수 있어요. 따라서 페이지가 이동하거나 눈에 띄게 변경될 때마다 먼저 snapshot을 다시 실행하고 새 ref를 사용해야 해요.
이 규칙은 Agent의 시스템 프롬프트에 직접 넣어두는 것이 좋아요. 안정적인 작업 순서는 ‘스냅샷 한 번 찍고 열 번 연속 조작’이 아니라 ‘스냅샷, 조작, 스냅샷’이에요. 스냅샷을 한 번 더 찍는 비용은 잘못된 요소를 클릭한 뒤 원인을 찾고 되돌리는 비용보다 훨씬 적어요.
agent-browser 클릭 실패 시 대처 방법
agent-browser는 클릭이 실패했는데 성공한 것처럼 처리하지 않아요. 대상 요소가 숨겨져 있거나 비활성화되어 있거나, 뷰포트 밖에 있거나, 다른 요소에 가려져 있다면(예: 쿠키 동의 팝업) click은 즉시 실패를 반환해요. 오류 메시지 자체가 다음 행동을 결정하는 근거가 되므로 Agent가 대응하기에 좋아요.
| 실패 원인 | 대표적인 상황 | 권장 대처 |
|---|---|---|
| 다른 요소에 가려짐 | 동의 팝업이나 오버레이가 버튼을 덮음 | 가리는 요소를 먼저 닫고, 스냅샷을 다시 찍은 후 재시도 |
| 뷰포트 밖에 있음 | 요소가 페이지 아래쪽에 있음 | scroll로 스크롤한 뒤 스냅샷을 다시 찍기 |
| 요소가 비활성화됨 | 양식을 다 채우지 않아 버튼을 클릭할 수 없음 | 먼저 fill로 필수 항목을 채우고 스냅샷으로 확인 |
| 요소가 숨겨짐 | 메뉴를 펼쳐야 요소가 나타남 | 먼저 메뉴를 펼치고 wait로 기다린 뒤 스냅샷 찍기 |
| ref가 만료됨 | 페이지가 이동하거나 새로고침됨 | snapshot을 다시 실행해 새 ref 가져오기 |
ref 외에도 agent-browser는 CSS 선택자, 텍스트, XPath, 시맨틱 로케이터를 지원해요. 예를 들어 agent-browser find role button click --name "Submit"은 역할과 이름으로 제출 버튼을 찾아 클릭해요. 페이지 구조가 안정적이고 요소의 의미가 명확할 때는 시맨틱 로케이터를 ref와 함께 활용할 수 있어요.
agent-browser 주요 명령어 분류
agent-browser는 다양한 명령어를 제공해요. 전체 목록은 agent-browser --help로, 개별 명령어의 도움말은 agent-browser <command> --help로 확인할 수 있어요. Agent에 어떤 기능을 허용할지 결정하기 쉽도록 자주 쓰는 명령어를 용도별로 정리했어요.
| 분류 | 대표 명령어 | 주요 용도 |
|---|---|---|
| 탐색 및 읽기 | open, back, reload, read, snapshot, get, is |
페이지 열기, 스냅샷 읽기, 상태 확인 |
| 상호작용 | click, fill, type, press, select, check, scroll, upload, find |
클릭, 양식 작성, 파일 업로드 |
| 대기 | wait |
요소가 나타나거나 페이지가 로드될 때까지 대기 |
| 수집 | screenshot, pdf, record, download, diff |
스크린샷, PDF 내보내기, 화면 녹화, 페이지 비교 |
| 페이지 및 네트워크 상태 | cookies, storage, network, eval |
쿠키 관리, 네트워크 요청 가로채기, 스크립트 실행 |
| 탭 및 팝업 | tab, frame, dialog |
여러 탭, iframe, 대화상자 관리 |
| 디버깅 및 성능 | console, errors, trace, vitals, a11y |
콘솔 오류 및 성능 지표 수집 |
| 세션 및 인증 | session, state, auth, confirm, deny |
세션 격리, 로그인 상태 관리, 민감한 작업 확인 |
| Agent 통합 | skills, mcp, flow, batch, plugin |
스킬 로드, MCP 서비스 시작 |
브라우저 엔진은 기본적으로 Chrome for Testing을 사용해요. --cdp 또는 --auto-connect로 실행 중인 Chrome에 연결하거나, --engine으로 Lightpanda 또는 Obscura 엔진으로 전환할 수도 있어요. iOS 시뮬레이터에서 Mobile Safari를 제어하거나 Browserbase, Browserless, Browser Use, Kernel, AgentCore 등의 클라우드 브라우저 서비스에 연결하는 것도 가능해요.
agent-browser를 AI Agent에 연동하기
내장 skills로 Agent에 사용법 알려주기
agent-browser는 사용 설명서를 CLI와 함께 배포해요. agent-browser skills get core를 실행하면 핵심 반복 과정, ref 사용법, 대기 전략, 자주 쓰는 워크플로가 출력돼요. --ref commands를 추가하면 전체 명령 목록처럼 특정 참조 문서만 볼 수 있고, --full을 추가하면 전체 명령 참조와 템플릿까지 함께 제공해요. agent-browser skills list로 electron, slack, dogfood 등의 전문 스킬도 확인할 수 있어요.
Agent 프레임워크에서는 npx skills add vercel-labs/agent-browser로 스킬을 설치할 수 있어요. 이 스킬은 Agent가 agent-browser skills get core를 불러오도록 안내하는 간단한 역할만 하므로, 지침이 항상 설치된 CLI 버전과 일치해요. 스킬을 설치하고 싶지 않다면 AGENTS.md에 “브라우저 자동화에 agent-browser를 사용하고, 처음 사용하기 전에 agent-browser skills get core를 실행해 안내에 따라 작업한다”라고 적어도 돼요.
MCP로 연동하기
클라이언트가 MCP를 지원한다면 agent-browser mcp를 실행해 stdio로 MCP 서버를 시작할 수 있어요. 그러면 Claude 같은 데스크톱 클라이언트나 자체 개발 Agent에서 셸 실행 계층을 직접 구현하지 않고도 브라우저 작업을 표준 도구로 호출할 수 있어요.
snapshot-ref 반복 작업을 구동할 모델 선택하기
브라우저 작업은 여러 차례에 걸쳐 진행되며 매번 스냅샷 텍스트가 포함되므로, 입력 토큰 비중이 출력보다 훨씬 높은 편이에요. 따라서 모델을 선택할 때는 지시 수행 능력뿐 아니라 입력 단가와 캐시 가격도 중요하게 살펴봐야 해요. 아래 표의 가격은 모두 APIYI 가격 페이지 docs.apiyi.com/models의 실제 데이터 기준이며, 단위와 과금 기준은 가격 페이지의 표기를 확인해 주세요.
| 모델 | 입력 가격 | 출력 가격 | 캐시 가격 | 적합한 역할 | 이용 가능 플랫폼 |
|---|---|---|---|---|---|
| claude-opus-5-5 | $4 | $20 | $0.2 | 복잡한 다단계 작업, 까다로운 페이지 | APIYI apiyi.com |
| claude-sonnet-5-5 | $2 | $10 | $0.1 | 일상적인 작업의 주력 모델 | APIYI apiyi.com |
| kimi-k3.1-pro | $2 | $10 | $0.2 | 중국어 웹페이지 작업 | APIYI apiyi.com |
| deepseek-v4.1-flash | $0.3 | $1.2 | $0.006 | 간단한 양식, 대량 점검 | APIYI apiyi.com |
실용적인 조합은 구조가 단순하고 단계가 고정된 대량 작업에는 deepseek-v4.1-flash를, 범용 주력 모델로는 claude-sonnet-5-5를 사용하는 거예요. 복잡한 상호작용이 필요하거나 자주 실패하는 페이지에서는 claude-opus-5-5로 전환하면 돼요. skills 텍스트와 시스템 프롬프트는 매번 반복되므로, 캐시 가격이 낮은 모델이 긴 반복 작업에서 비용 면에서 유리해요.
참고로 원신 ERNIE 시리즈는 APIYI 가격표에서 아직 확인할 수 없으며, APIYI에는 현재 해당 모델이 제공되지 않아요. 최대한 빨리 제공할 예정이에요. Agent가 ERNIE에 의존한다면 우선 위 표의 모델로 대체해 테스트해 보세요.
💡 선택 팁: 모든 웹사이트에서 가장 뛰어난 모델은 없어요. 실제 업무 페이지 3~5개를 골라 소규모로 테스트해 보세요. APIYI apiyi.com에서 통합 인터페이스로 모델을 바꿔 가며 성공률과 작업당 비용을 비교한 뒤 주력 모델을 정하는 것이 좋아요.
agent-browser 안전 사용 가이드
Agent가 실제 브라우저를 조작하려면 보안 경계를 미리 설계해야 해요. agent-browser 공식 문서의 보안 섹션에서는 인증 금고(auth vault), 도메인 허용 목록, 작업 정책, 콘텐츠 경계 등의 기능을 안내합니다. 명령어 중 auth는 로그인 자격 증명을 관리하고, confirm과 deny는 민감한 작업을 승인하거나 거부할 때 사용해요.
운영 환경에서는 최소한 다음 세 가지를 권장해요.
- 접근 가능한 도메인 제한: 도메인 허용 목록을 사용해 Agent가 업무 관련 사이트에만 접근하도록 제한하세요. 페이지에 유도되어 낯선 사이트로 이동하는 일을 막을 수 있어요.
- 자격 증명을 컨텍스트에서 분리: 계정과 비밀번호를 프롬프트에 적는 대신 auth vault에 보관하세요. 자격 증명이 모델 로그에 남는 것을 방지할 수 있어요.
- 민감한 작업은 사람의 확인 필요: 결제, 삭제, 주문 제출과 같은 작업에는 확인 절차를 설정해 사람이 최종 결정권을 갖도록 하세요.
웹페이지 자체에도 Agent를 겨냥한 악성 지시가 포함될 수 있으므로 콘텐츠 경계 기능도 활성화하는 것이 좋아요. 이 기능은 모델이 ‘페이지에 있는 텍스트’와 ‘사용자가 내린 지시’를 명확히 구분하도록 해 프롬프트 인젝션 위험을 줄여줘요.
자주 묻는 질문 FAQ
Q1: agent-browser의 snapshot-ref 루프란 무엇인가요?
agent-browser의 핵심 작동 방식이에요. 먼저 `snapshot`으로 페이지를 ref가 포함된 간결한 텍스트로 읽고, 특정 ref에 작업을 수행한 뒤, 다시 스냅샷을 찍어 결과를 확인해요. 페이지 이해와 작업 실행을 검증 가능한 작은 단계로 나누기 때문에 대규모 언어 모델이 단계적으로 추론하기에 적합해요.
Q2: agent-browser와 스크린샷 기반 브라우저 Agent의 차이는 무엇인가요?
스크린샷 방식은 시각적 이해에 더 범용적이지만 토큰 소비가 많고 좌표 클릭이 빗나가기 쉬워요. 반면 agent-browser는 접근성 트리의 텍스트와 ref로 요소를 찾기 때문에 컨텍스트가 더 간결하고 조작도 정확해요. 실패 시 명확한 오류도 반환하므로 안정적인 실행이 필요한 자동화 작업에 더 적합해요.
Q3: 페이지 이동 후 기존 ref를 계속 사용할 수 없는 이유는 무엇인가요?
ref는 스냅샷을 찍은 시점의 페이지만 나타내요. 페이지 이동이나 DOM 변경 후에는 요소가 사라지거나 교체될 수 있어 기존 ref가 무효화되거나 잘못된 요소를 가리킬 수 있어요. 페이지가 바뀔 때마다 다시 `snapshot`을 실행하고 새 ref를 사용해야 해요.
Q4: agent-browser는 어떤 용도에 적합한가요?
주로 다음과 같은 용도에 적합해요.
– **양식 자동 입력**: 회원가입, 신청, 관리자 페이지 입력 등 단계가 정해진 작업.
– **사이트 점검 및 회귀 테스트**: `errors`, `console`, `vitals`를 활용한 페이지 오류 및 성능 확인.
– **정보 수집**: 관리자 페이지에 로그인한 뒤 메뉴별로 데이터를 읽어오는 작업.
– **Electron 및 Slack 등 특화 작업**: `skills list`의 특화 스킬을 통한 기능 확장.
Q5: agent-browser를 구동할 모델은 어떻게 연동하나요?
다음 순서로 진행하면 돼요.
1. APIYI apiyi.com에 접속해 계정을 만들고 API 키를 발급받아요.
2. Agent 프레임워크에서 OpenAI 또는 Anthropic 호환 형식을 선택하고, docs.apiyi.com 문서에 따라 연동 파라미터를 입력해요.
3. 이 글의 5단계 루프를 테스트 작업으로 삼아 모델별 성능을 비교해요.
APIYI는 Claude, DeepSeek, Kimi 등 다양한 모델을 통합해 제공하며, 모델 이름만 바꾸면 다른 모델로 전환할 수 있어요.
Q6: snapshot-ref 루프를 실행하는 모델 비용은 어떻게 추정하나요?
브라우저 작업은 주로 입력 토큰을 사용하며, 매 라운드에 스냅샷 텍스트와 시스템 프롬프트가 포함돼요. 비용을 추정할 때는 입력 단가와 캐시 가격을 중점적으로 확인하고, `snapshot -i`로 스냅샷을 최대한 짧게 만드세요. 모델별 실제 단가는 오래된 제3자 가격 정보 대신 APIYI 가격 페이지 docs.apiyi.com/models에서 확인하세요.
Q7: agent-browser의 알려진 한계는 무엇인가요?
ref는 유효 기간이 짧아 Agent가 스냅샷을 자주 다시 찍어야 하므로 라운드 수가 늘어나요. 접근성 정보가 크게 부족한 페이지에서는 스냅샷이 불완전할 수 있어 CSS 선택자, XPath 또는 스크린샷을 보조적으로 사용해야 해요. 또한 헤드리스 브라우저는 한 시간 동안 유휴 상태면 자동 종료되므로, 장시간 작업에는 세션 지속성을 설정해야 해요.
agent-browser snapshot-ref 핵심 요점 Key Takeaways
- 핵심 정의: agent-browser는 Vercel Labs가 오픈 소스로 공개한 Rust CLI로, Agent가 명령을 하나씩 실행해 브라우저를 제어할 수 있게 해요.
- 핵심 루프: 스냅샷으로 페이지를 읽고, ref로 요소를 조작한 뒤, 다시 스냅샷으로 결과를 확인하는 과정을 반복해요.
- ref 사용 원칙: 페이지를 이동하거나 DOM이 변경된 후에는 반드시 스냅샷을 다시 찍고 ref를 사용해야 해요.
- 실패는 신호: 요소가 가려져 있거나 비활성화된 상태에서 클릭하면 오류가 발생해요. Agent는 먼저 원인을 해결한 뒤 다시 시도해야 해요.
- 연동 방법:
skills get core로 버전에 맞는 지침을 불러오거나,agent-browser mcp로 MCP 클라이언트에 연결할 수 있어요. - 보안 우선: 프로덕션 환경에서는 도메인 허용 목록, auth vault, 민감한 작업에 대한 확인 기능을 활성화하세요.
- 모델 선택: APIYI apiyi.com의 통합 인터페이스로 구동 모델을 비교할 수 있어요. 가격은 docs.apiyi.com/models를 참고하세요.
요약
agent-browser snapshot-ref 루프의 핵심 요점은 다음과 같아요.
- 스크린샷 대신 텍스트 사용: ref가 포함된 접근성 트리 스냅샷을 활용해 모델이 최소한의 컨텍스트로 페이지를 이해할 수 있어요.
- 단계마다 검증: 작업할 때마다 페이지나 URL을 확인해 Agent가 잘못된 상태에서 계속 실행하지 않도록 해요.
- 실패에 대응 가능: 요소 가림, 뷰포트, 비활성화, ref 만료 문제에 각각 대응할 수 있어요.
- 낮은 연동 비용: npm 설치, 내장 skills, MCP 서버의 세 가지 방식으로 기존 Agent에 빠르게 연결할 수 있어요.
먼저 터미널에서 open, snapshot, click, get, close 다섯 가지 명령을 직접 실행해 보세요. 그런 다음 루프 규칙을 Agent의 시스템 프롬프트에 작성하고, 실제 서비스 페이지에서 테스트해 구동 모델을 선택하면 돼요.
APIYI apiyi.com을 통해 다양한 모델로 agent-browser를 구동한 결과를 빠르게 비교해 보세요. 플랫폼은 OpenAI와 Anthropic 인터페이스 형식을 지원해요. 연동 방법은 docs.apiyi.com, 모델 가격은 docs.apiyi.com/models를 참고하세요.
📚 참고 자료
- GitHub – agent-browser: 공식 오픈소스 저장소
- 링크:
github.com/vercel-labs/agent-browser -
설명: 설치 방법, 빠른 시작, 명령어 그룹과 개발 안내를 제공합니다.
-
agent-browser 공식 문서: 전체 가이드 및 명령어 참고 자료
- 링크:
agent-browser.dev -
설명: 스냅샷, 선택자, 세션, CDP 모드와 보안 메커니즘을 다룹니다.
-
agent-browser 보안 문서: 인증 및 접근 제어
- 링크:
agent-browser.dev/security -
설명: auth vault, 도메인 허용 목록, 작업 정책과 콘텐츠 경계를 소개합니다.
-
APIYI 문서 센터: 모델 연동 안내
- 링크:
docs.apiyi.com -
설명: OpenAI 및 Anthropic 호환 형식으로 연동하는 방법을 안내합니다.
-
APIYI 모델 가격 페이지: 모델별 실제 요금
- 링크:
docs.apiyi.com/models - 설명: 이 글의 모든 모델 가격은 이 페이지를 기준으로 합니다.
작성자: APIYI 기술팀
기술 문의: APIYI apiyi.com 웹사이트 홈에서 문의하실 수 있습니다. 자세한 연동 자료는 docs.apiyi.com 문서 센터를 참고하세요.
