LangGraph 브라우저 워크플로의 토큰 비용 및 세션 유지 문제 해결 방법

실용적 조언

Playwright 사용 시 page.accessibility.snapshot()을 호출하여 LLM에 전달할 컨텍스트 크기를 줄이십시오.
토큰 비용을 제어하기 위해 전체 페이지 대신 특정 DOM 요소로 범위를 좁혀 접근성 트리를 추출하십시오.

섹션별 상세

LangGraph의 ToolNode가 실행을 마치면 브라우저 연결이 즉시 종료되는 무상태성 문제가 보고됐다. 이로 인해 멀티스텝 워크플로에서 이전 단계의 브라우저 컨텍스트를 유지하지 못하고 매번 브라우저가 새로 열리는 현상이 발생한다. 이는 복잡한 웹 탐색 에이전트를 구축할 때 연속성을 저해하는 핵심 장애물로 작용한다.

웹 페이지 분석을 위해 스크린샷을 사용하는 방식은 토큰 소모가 극심하여 실무 적용이 어렵다. 단일 페이지 스크린샷이 MCP 레이어를 통과할 때 약 114,000 토큰을 소모하는 반면, 접근성 트리를 사용하면 동일 페이지를 340 토큰으로 처리할 수 있다. 픽셀 대신 역할, 레이블, 계층 구조 정보만 전달함으로써 비용을 99% 이상 절감하면서도 에이전트의 탐색 능력을 유지한다.

javascript

await page.accessibility.snapshot()

Playwright에서 웹 페이지의 접근성 트리 스냅샷을 추출하는 메서드

효율적인 에이전트 작동을 위해 'Orient-Drill-Act' 패턴이 권장된다. 먼저 전체 접근성 트리로 페이지의 대략적인 구조를 파악(Orient)하고, 특정 루트 셀렉터로 범위를 좁혀 상세 정보를 확인(Drill)한 뒤, 최종적으로 상호작용(Act)을 수행하는 방식이다. 이 패턴을 LangGraph에 적용하면 긴 체인에서도 토큰 사용량을 예측 가능한 수준으로 관리할 수 있다.

용어 해설

모델 컨텍스트 프로토콜(MCP): — Anthropic에서 제안한 개방형 표준으로, AI 모델이 로컬 데이터나 도구와 안전하게 연결될 수 있도록 하는 통신 규약이다. 이 아티클에서는 브라우저 자동화 도구인 Playwright와 LLM 간의 데이터 교환을 위한 인터페이스 역할을 한다.
접근성 트리(Accessibility Tree): — 웹 페이지의 DOM 구조를 기반으로 스크린 리더와 같은 보조 기술이 이해할 수 있도록 변환된 계층 구조이다. 시각적 픽셀 데이터 대신 역할, 레이블, 상태 정보만 포함하여 LLM이 페이지 구조를 파악하는 데 매우 효율적이다.
무상태 연결(Stateless Connection): — 각 요청이 독립적으로 처리되어 이전 요청의 상태 정보가 유지되지 않는 연결 방식이다. LangGraph 워크플로에서 도구 실행이 끝날 때마다 브라우저 세션이 종료되어 연속적인 작업 수행이 어려워지는 원인이 된다.

언급된 도구

Playwright추천

브라우저 자동화 및 웹 페이지 데이터 추출

Rove추천링크

호스팅된 Playwright 세션 및 접근성 트리 기본 제공 서비스

langchain-mcp-adapters중립

LangChain과 MCP 도구 간의 연결 어댑터

언급된 리소스

DemoRove API