TideSurf: 스크린샷 없이 웹을 탐색하는 AI 에이전트, 토큰 93% 절감의 비밀
안녕하세요, Tom입니다.
요즘 AI 에이전트들이 웹을 직접 돌아다니며 작업을 수행하는 모습, 자주 보셨죠? 앤스로픽의 Computer Use나 여러 오픈소스 에이전트들이 등장하면서 웹 브라우징은 AI의 필수 능력이 되었어요. 하지만 이런 에이전트들을 실제로 운영해보면 가장 먼저 부딪히는 벽이 있어요. 바로 어마어마한 토큰 비용과 느린 속도예요.
대부분의 웹 에이전트는 두 가지 방식을 사용해요. 브라우저 화면을 스크린샷으로 찍어서 비전 모델에 보내거나, 웹페이지의 전체 HTML 코드를 텍스트로 전달하는 방식이죠. 스크린샷 방식은 비전 모델 비용이 비싸고, HTML 방식은 불필요한 코드가 너무 많아서 토큰을 순식간에 잡아먹어요. 이런 문제를 아주 영리하게 해결한 오픈소스 프로젝트를 발견해서 소개해드리려고 해요. 이름은 TideSurf예요.
웹 에이전트의 고질적인 문제, 토큰 낭비
우리가 매일 보는 웹페이지의 뒷면은 생각보다 훨씬 복잡해요. 단순한 블로그 글 하나를 보더라도 수많은 CSS 클래스, 레이아웃을 위한 div 태그, 분석용 스크립트들이 얽혀 있죠. 특히 현대적인 웹사이트들은 리액트(React)나 넥스트(Next.js) 같은 프레임워크를 쓰면서 스타일링을 위해 수십 개의 중첩된 div 태그를 생성하곤 해요. 이런 정보들은 사람의 눈에는 보이지 않지만, AI에게 HTML을 그대로 넘겨주면 모두 '읽어야 할 데이터'가 돼요. 결국 AI는 실제 본문 내용보다 "어떻게 보여지는지"에 대한 부가적인 정보를 읽는 데 더 많은 토큰을 쓰게 되는 셈이죠. 이런 비효율을 해결하지 못하면 에이전트의 대중화는 요원할 수밖에 없어요.
보통 일반적인 웹페이지 하나를 텍스트로 직렬화하면 5만에서 10만 토큰 정도가 나와요. 에이전트가 페이지를 한 번 이동할 때마다 이만큼의 비용이 나간다고 생각하면 정말 아찔하죠. 게다가 AI는 이 복잡한 코드 속에서 정작 클릭해야 할 버튼이 어디 있는지 찾는 데 한참을 헤매기도 해요.
개발자의 비하인드 스토리
이 프로젝트가 흥미로운 점은 처음부터 거창한 오픈소스를 목표로 시작된 게 아니라는 거예요. 개발자가 본인의 프로젝트를 디버깅하기 위해 내부적으로 쓰던 도구였다고 해요. 웹 에이전트를 개발하다 보니 매번 수만 개의 토큰이 나가는 게 너무 아까웠고, 이를 해결하기 위해 직접 DOM을 깎아내기 시작한 거죠. 직접 써보니 성능이 너무 좋아서 다른 개발자들도 쓸 수 있게 정리해서 공개한 것이 지금의 TideSurf가 되었어요. 현장의 필요에 의해 만들어진 도구라 그런지 군더더기 없이 깔끔한 느낌이 들어요.
TideSurf의 핵심 아이디어: 필요한 것만 남기기
TideSurf를 만든 개발자는 아주 중요한 통찰을 얻었어요. "AI 에이전트가 웹을 탐색할 때 정말로 필요한 건 버튼, 링크, 입력창, 그리고 텍스트뿐이다."라는 점이죠. 화려한 디자인을 위한 스타일 시트나 복잡한 레이아웃 구조는 에이전트에게 오히려 방해만 될 뿐이에요.
🎯 핵심 원리
TideSurf는 CDP(Chrome DevTools Protocol)를 사용해서 크롬 브라우저에 직접 연결해요.
그다음 브라우저의 DOM 트리에서 에이전트가 상호작용할 수 있는 핵심 요소들만 골라내요.
나머지 불필요한 태그들은 과감하게 삭제하고, 남은 요소들에 B1, L1, I1 같은 아주 짧은 ID를 부여해요.
이렇게 압축된 정보를 받은 AI는 훨씬 명확하게 페이지 구조를 이해할 수 있어요. "B1 버튼을 클릭해줘"라고 말하면 TideSurf가 실제 브라우저에서 해당 요소를 찾아 클릭 이벤트를 발생시키는 방식이죠.
놀라운 벤치마크 결과
TideSurf가 보여주는 압축률은 정말 놀라운 수준이에요. 주요 사이트들을 대상으로 테스트한 결과를 보면 입이 떡 벌어져요.
- GitHub: 84,357 토큰 → 2,593 토큰 (32배 압축)
- Wikipedia: 123,615 토큰 → 12,097 토큰 (10배 압축)
- MDN: 24,923 토큰 → 1,793 토큰 (14배 압축)
- Hacker News: 8,736 토큰 → 1,038 토큰 (8.4배 압축)
평균적으로 약 93%의 토큰을 절감할 수 있다고 해요. 비용이 10분의 1 이하로 줄어드는 셈이죠. 더 놀라운 건 이 모든 파싱 과정이 단 30ms 내외로 끝난다는 점이에요. 속도와 비용, 두 마리 토끼를 모두 잡았다고 볼 수 있어요.
기술 스택과 사용법
TideSurf는 현대적인 개발 환경에 맞춰 설계되었어요.
TypeScript로 작성되었고, Bun의 네이티브 기능을 지원하지만 Node.js 18 버전 이상에서도 잘 돌아가요.
특히 Bun을 사용하면 네이티브 수준의 빠른 실행 속도를 경험할 수 있어서 에이전트의 반응 속도를 극대화할 수 있어요.
내부적으로는 chrome-remote-interface를 써서 브라우저를 제어하고, 백엔드는 ElysiaJS를 사용해서 가볍고 빨라요.
ElysiaJS는 최근 자바스크립트 생태계에서 가장 주목받는 초고속 웹 프레임워크 중 하나인데, 이를 선택한 것만 봐도 성능에 얼마나 진심인지 알 수 있죠.
에이전트와 대화할 때는 이런 식의 명령이 가능해요.
click("B1"): 특정 버튼 클릭type("I1", "검색어"): 입력창에 텍스트 입력scroll("down"): 페이지 스크롤
최근 유행하는 MCP(Model Context Protocol)도 지원해서, 클로드(Claude) 같은 모델과 연결해서 쓰기도 아주 좋아요.
Tom의 생각: 왜 DOM 압축이 정답일까?
저는 개인적으로 스크린샷 기반의 비전 방식보다 이런 DOM 압축 방식이 웹 에이전트의 미래라고 생각해요. 물론 비전 모델이 발전하면서 사람처럼 화면을 보고 판단하는 능력이 좋아지겠지만, 비용 효율성 측면에서는 게임이 안 되거든요. 비전 모델은 이미지 한 장을 처리하는 데 수백 원에서 수천 원이 들기도 하지만, 텍스트 기반의 압축 DOM은 거의 비용이 들지 않아요.
에이전트가 웹에서 정보를 수집하거나 반복적인 작업을 수행할 때, 굳이 고해상도 이미지를 처리할 필요는 없어요. 텍스트 기반의 정제된 데이터를 사용하는 게 훨씬 정확하고 빠르죠. 특히 대규모로 웹을 크롤링하거나 수백 개의 페이지를 동시에 탐색해야 하는 에이전트라면 TideSurf 같은 도구는 선택이 아닌 필수라고 봐요. TideSurf는 개발자가 본인의 디버깅 도구로 쓰려고 만들었다가 너무 유용해서 오픈소스로 공개했다고 하는데, 이런 실용적인 접근 방식이 정말 마음에 들어요.
⚠️ 주의할 점 다만 모든 웹사이트가 표준적인 DOM 구조를 따르는 건 아니에요. Canvas로 그려진 차트나 복잡한 iframe 구조에서는 정보를 제대로 추출하지 못할 수도 있어요. 이런 경우에는 비전 모델을 보조적으로 섞어서 쓰는 하이브리드 방식이 대안이 될 수 있겠네요.
시작하기
TideSurf는 현재 GitHub에서 TideSurf/core라는 이름으로 관리되고 있어요.
npm에서는 @tidesurf/core로 설치해서 바로 프로젝트에 적용해볼 수 있죠.
더 자세한 문서가 궁금하시다면 공식 사이트인 tidesurf.org를 방문해보세요.
웹 에이전트를 만들고 싶지만 토큰 비용 때문에 망설였던 분들에게는 최고의 선물이 될 것 같아요. 저도 조만간 이 라이브러리를 활용해서 뉴스 수집 자동화 도구를 업그레이드해볼 계획이에요.
궁금한 점이 있다면 댓글로 남겨주세요!