Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Managed Deep Agents가 브라우저 기능을 통합하여 API로 처리할 수 없는 웹상의 복잡한 작업(클릭, 양식 작성 등)을 수행합니다. 이를 통해 에이전트는 실제 사용자처럼 작동하며, 세션 지속성을 위한 'thread' 및 'user' 스코프를 제공받습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 LangChain Blog의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기에이전트는 우리가 일하는 곳에서 작동할 만큼 충분히 발전했으며, 그 작업의 상당 부분은 브라우저에서 이루어집니다. 여행 예약, 구독 취소 또는 청구서 작성 등 모든 것이 에이전트가 방문할 계획이 아니었던 페이지를 포함하여 사람들의 클릭을 위해 만들어진 사이트에서 발생합니다. 종종 에이전트가 호출할 수 있는 API가 없습니다.
curl로 페이지를 가져오는 것은 아무것도 아닙니다. 왜냐하면 이는 JavaScript가 페이지를 렌더링하기 전에 HTML만 반환하며 어떤 것도 클릭할 수 없기 때문입니다.
Instinct나 Meta의 Muse와 같은 개인 에이전트는 이미 이런 방식으로 작동합니다. 브라우저 에이전트 트래픽도 빠르게 증가하고 있으며, DataDome에 따르면 9월 한 달 동안 에이전트 기반 브라우저 요청이 무려 4.7배 급증했습니다.
Managed Deep Agents를 사용하면 어떠한 인프라를 실행할 필요 없이 LangSmith에서 에이전트를 구축하고 배포할 수 있습니다. 사용자는 에이전트의 지침과 도구를 작성하고, LangSmith가 하네스(harness)와 런타임(runtime)을 실행합니다. 오늘 저희는 이 에이전트들에게 브라우저를 제공하여 웹상에서 작동하는 자신만의 에이전트를 구축할 수 있도록 합니다. Managed Deep Agents는 브라우저도 실행하며, 이를 위해 조정된 도구를 에이전트에 제공합니다.
본 게시물에서는 브라우저가 도움이 되는 경우와 활성화하는 방법(에이전트가 필요로 할 때 사람에게 브라우저를 넘기는 것 포함)을 다룹니다. 그런 다음 내부적으로 어떻게 작동하는지 설명합니다. 오픈 소스 Deep Agents로 구축된 에이전트도 브라우저를 사용할 수 있습니다. 다음 주에는 브라우저 도구를 테스트하고 조정한 방법에 대해 심층적으로 다룰 예정입니다.
브라우저와 이를 구동하는 도구가 있으면, 에이전트는 페이지에 렌더링되는 내용을 읽고 인간(사용자)과 동일하게 클릭할 수 있습니다.
지금까지 두 가지 일반적인 사용 사례가 나타났습니다:
API가 처리할 수 없는 작업, 예를 들어 항공편 예약이나 식당 예약을 하는 경우입니다. 만약 해당 사이트에 API가 존재하는 경우, 에이전트는 그 API를 사용해야 합니다.**End-to-end 테스트(E2E testing)**와 같이 병합 전에 프론트엔드 변경 사항을 확인하는 것이 이에 해당합니다. 풀 리퀘스트(pull request)가 회원가입 양식을 변경하면, 코딩 에이전트는 앱을 샌드박스에서 시작하고 브라우저로 양식을 열어 클릭하며 변경된 내용이 제대로 작동하는지 확인할 수 있습니다. 저희는 이를 코딩 에이전트인 Open SWE에서 사용합니다.
브라우저를 추가하려면, 프로젝트 루트 디렉터리에서 browser.py로부터 browser를 내보내야 합니다:
# browser.py
from managed_deepagents import define_browser
browser = define_browser(
...
scope는 브라우저 세션이 공유되는 방식을 제어합니다.
scope="thread" (기본값)은 각 스레드에 자체 브라우저를 제공합니다. 모든 대화는 새로운 브라우저 창으로 시작하며, 다른 스레드에서 남겨진 쿠키나 로그인 정보가 남아있지 않습니다.scope="user"는 로그인한 사용자 전체의 스레드에 걸쳐 하나의 브라우저를 공유합니다 (Identity 참조). 각 스레드는 자체 창을 가지므로, 동시에 실행되는 두 개의 대화가 서로 클릭하는 것을 방해하지 않지만, 쿠키 및 기타 브라우저 상태는 공유합니다. 만약 한 스레드에서 특정 사이트에 로그인하면, 나중에 실행되는 다른 스레드가 처음부터 시작하는 대신 해당 세션을 이어받을 수 있습니다.
브라우저는 활동이 없을 경우 idle_ttl_seconds (기본값 10분) 후에 중지되므로, 아무도 사용하지 않는 브라우저에 대해 비용을 지불할 필요가 없습니다.
여전히 사람이 필요한 단계들이 있으며, 로그인 과정이 가장 흔한 경우입니다. 에이전트에게 비밀번호를 제공하고 싶지 않은데, 이는 모델의 메시지, 추적 기록(traces), 그리고 모델 제공업체 측에 남게 될 수 있기 때문입니다.
에이전트가 로그인 페이지에 도달하면, "계속하려면 Acme Travel에 로그인해 주세요."와 같은 이유를 담아 browser_handoff를 호출합니다. 에이전트를 채팅하고 디버깅하는 UI인 LangSmith Studio에서는 동일한 브라우저가 포함된 대화형 카드를 받게 됩니다. 사용자가 직접 로그인한 후 Hand back을 클릭하면, 에이전트는 이미 로그인된 상태에서 중단했던 지점부터 작업을 재개합니다. 핸드오프 기능은 모든 관리형 브라우저에 기본으로 제공되며 Slack과 같은 Managed Deep Agents 채널에서도 자동으로 작동하므로 별도로 설정할 필요가 없습니다.
LangSmith Studio showing the agent needs you in the browser card, with an embedded browser and a Hand back button.
이것은 scope="user"에서 가장 중요하게 작용합니다. 사용자 범위(user scope)를 사용하면 로그인 정보가 나중에 진행되는 스레드에도 유지되므로, 에이전트가 한 번만 로그인을 요청하며 이는 사용자의 브라우저가 사용자를 기억하는 방식과 같습니다.
A deep agent hands the browser to a person to sign in. On the left, the agent calls browser_run, hits Acme Travel's sign-in page, and calls browser_handoff. On the right, a second cursor labeled You types an email and a masked password, clicks Sign in, then Hand back, which resumes the agent. The agent calls browser_snapshot and browser_run, which opens the Lisbon trip.
에이전트가 웹을 사용하려면 두 가지가 필요합니다. 바로 브라우저와 이를 구동할 도구 세트입니다. Managed Deep Agents는 이 두 가지를 모두 관리합니다.
브라우저(The browser). Managed Deep Agents는 에이전트와 분리된 자체 LangSmith 샌드박스에서 브라우저를 실행합니다. 이는 원격 브라우저(remote browser)이므로 사용자의 장치에서는 아무것도 실행되지 않습니다. 대부분의 원격 브라우저와 달리, 이 브라우저는 에이전트의 샌드박스와 사설 링크를 가지고 있으며, 이것이 엔드투엔드 테스트(end-to-end testing)가 작동하게 만드는 핵심 요소입니다 (더 아래 참조).
도구들(The tools). Managed Deep Agents는 다음 브라우저 도구들을 에이전트에 추가합니다:
browser_snapshot: 페이지의 접근성 트리(accessibility tree)를 읽고 상호작용 요소를 ID로 레이블링합니다.browser_run: click 및 fill과 같은 일련의 동작 배치(batch of actions)로 작동하거나, Playwright 스타일의 page 객체를 사용하는 JavaScript로 작동하며, Stagehand가 이를 자체 명령으로 변환합니다.browser_screenshot: 렌더링된 페이지를 캡처합니다.browser_handoff: 브라우저를 사람에게 전달하고, 사람이 작업을 완료하면 다시 돌려줍니다 (위 참조).browser_run은 대부분의 작업을 수행합니다. 코드를 받기 때문에 에이전트는 전체 단계(페이지 열기, 필드 채우기, 클릭, 결과 확인)를 단일 호출로 작성할 수 있으며 필요한 것만 반환합니다. 이는 긴 브라우저 작업 속도를 유지하고 페이지의 대부분을 에이전트의 컨텍스트에서 분리하는 역할을 합니다.
도구들은 브라우저 에이전트 구축을 위한 Browserbase의 오픈 소스 SDK인 Stagehand를 기반으로 만들어졌습니다. 저희는 이 도구들을 에이전트 개발 라이프사이클에 맞춰 테스트하고 조정했습니다. 여기에는 브라우저 벤치마크 실행, LangSmith에서 트레이스 읽기, 그리고 evals를 사용한 각 변경 사항 검증 과정이 포함됩니다. 실시간 웹사이트의 일상적인 작업을 다루는 벤치마크인 WebVoyager의 100개 작업에 대해 이 도구들은 총 $1.98로 90%의 작업을 통과했습니다. 이는 저희가 테스트한 7가지 도구 세트 중 가장 높은 통과율이었습니다. 그 다음으로 근접했던 Browserbase의 MCP 서버는 비용은 9배 높았지만 89%를 통과했습니다.
A deep agent books a table. On the left, the agent calls snapshot, which labels the page's interactive elements e3, e5, e7, and e9, then one run call with four actions. On the right, a cursor fills in party size, picks 7:00 PM, types the name Sydney, and clicks Reserve, and the page confirms the booking.
이 설정은 약간 다른 방식으로 두 가지 사용 사례 모두를 지원합니다.
예약하기와 같은 작업을 위해서는 에이전트가 브라우저만 필요합니다. 이 브라우저 도구들은 페이지를 구동하는 브라우저 샌드박스에 명령을 전송합니다.
A deep agent uses its browser tools, snapshot, run, and screenshot, to send commands to the Stagehand extension in a browser sandbox. Stagehand drives the browser over CDP, here on a restaurant reservation page.
엔드투엔드 테스트에는 한 가지 요소가 더 필요합니다. 테스트 대상 앱은 에이전트 자체의 샌드박스 내에서 실행되므로, 브라우저가 이 앱에 도달해야 합니다. 이를 가능하게 하는 연결은 두 가지입니다:
에이전트가 브라우저를 제어합니다: 위에서 설명했듯이 브라우저 도구를 통해 에이전트가 브라우저를 제어합니다.
브라우저가 앱에 도달합니다: localhost 브리지를 통해 브라우저가 앱에 도달합니다. 브라우저가 localhost:5173을 열면, 요청은 비공개 링크(private link)를 통해 에이전트 샌드박스의 포트 5173으로 전송됩니다. 이 경우 앱은 공개 URL이 필요하지 않습니다. 여기서 localhost는 에이전트의 샌드박스를 의미합니다.
에이전트는 execute를 사용하여 앱을 시작하고, 브라우저에서 열어 가입 양식과 같은 실제 흐름을 클릭하며, 어떤 내용이 렌더링되는지 확인합니다.
테스트가 성공적으로 완료되면, 각 browser_run 호출은 일반적인 Playwright 스크립트의 일부이기 때문에 에이전트에게 단계를 테스트 파일로 저장하도록 요청할 수 있습니다. 나중에 실행할 때는 페이지 내용이 변경될 때까지 모델 호출 없이 해당 파일을 재생합니다.
A deep agent uses execute to start an app in its agent sandbox, where it listens on port 5173, and uses its browser tools to drive the browser in a separate browser sandbox through Stagehand. The browser opens localhost:5173/signup, and a localhost bridge routes that request over a private link to port 5173 in the agent sandbox.
브라우저는 항공권 예약부터 코딩 에이전트가 방금 만든 앱 테스트에 이르기까지 웹의 거대한 부분을 에이전트에게 열어줍니다. Managed Deep Agents를 사용하면 에이전트에게 브라우저를 제공하는 것이 몇 줄의 코드만 필요하며, 그 뒤에 있는 도구들은 빠르고 컨텍스트 효율적이도록 조정되어 있습니다.
define_browser를 사용하여 관리형 에이전트(managed agent)에 브라우저를 추가할 수 있습니다. 자체적으로 제공하는 (Browserbase에서 호스팅되는 것과 같은) 브라우저를 오픈 소스 딥 에이전트(deep agent)에 부여하려면, 브라우저 사용 가이드(browser use guide)를 참조하십시오.
Stagehand와 이 게시물에 도움을 준 Browserbase의 Sean McGuire, Miguel Gonzalez, 그리고 Kyle Jeong에게 감사드립니다.