쿠키 브리지를 만들고 에이전트 설정을 완전히 변경하다
요약
작성자는 코딩 에이전트가 사용자의 기존 로그인 세션을 유지하며 웹사이트에서 작업할 수 있도록 하는 과정에서 여러 기술적 어려움을 겪었습니다. 이 문제를 해결하기 위해 'Browser Cookie Bridge'와 같은 쿠키 브리지를 개발하고, 최종적으로 Vercel Labs의 agent-browser를 활용하여 프로필 기반의 세션 재사용 규칙을 확립했습니다.
핵심 포인트
- 에이전트가 기존 로그인 세션을 사용하는 것이 핵심 목표입니다.
- 쿠키 브리지(Cookie Bridge)는 여러 브라우저 간 쿠키 전송 문제를 해결하는 데 사용되었습니다.
- 최종적으로 프로필 기반의 에이전트-브라우징 규칙을 설정하여 일관성을 확보했습니다.
저는 코딩 에이전트가 제가 이미 로그인한 웹사이트를 사용하기를 원했습니다. 그 작은 문제가 결국 제 전체 설정을 바꾸게 되었습니다.
Chrome, Brave, 그리고 쿠키 브리지
처음에는 Codex 데스크톱 앱과 내장 브라우저로 시작했습니다. Chrome 세션을 가져오는 것이 편리했습니다. 에이전트가 제가 이미 로그인한 사이트에서 작업할 수 있었기 때문입니다.
그런 다음 Brave로 전환했고, 필요한 가져오기 옵션이 빠져 있었습니다. 제 계정들은 그곳에서 로그인되어 있었지만, 에이전트는 다른 곳에서 작동하고 있었습니다.
그래서 저는 Browser Cookie Bridge라는 macOS 앱을 만들었습니다. 이 앱은 Brave 쿠키를 Codex로 옮기는 것에서 시작하여 더 많은 Chromium 브라우저를 지원하도록 확장되었습니다.
나중에 Grok Bot을 시도했을 때도 거기서 쿠키 브리지를 사용했습니다. 쿠키 번들을 그 브라우저에 내보내기 했습니다. 저는 계속해서 같은 것을 원했습니다. 즉, 에이전트가 제가 이미 가지고 있는 세션에서 시작하도록 하는 것이었습니다.
코드는 다음과 같습니다: https://github.com/apoorvdarshan/browser-cookie-bridge
cmux로 이동하기
Codex 데스크톱 앱의 RAM 사용량은 결국 저를 터미널 인터페이스 쪽으로 이끌었습니다. 저는 cmux를 사용하기 시작했는데, 여기에는 세션 가져오기가 내장된 내장 브라우저도 있었습니다.
이것이 도움이 되었지만, 여전히 자주 동기화해야 했습니다. 일부 Google 세션은 제대로 전달되지 않았고, 일부 passkey 흐름은 예상대로 작동하지 않았습니다.
저는 작업을 시작하고 나중에 브라우저에 다시 로그인하는 데 시간을 보내게 되었습니다. 쿠키 전송이 도움이 되었지만, passkey를 포함한 모든 것을 담을 수는 없었습니다.
제가 지금 사용하는 규칙
결국 저는 Vercel Labs의 agent-browser를 시도해보고 이 규칙을 AGENTS.md에 추가했습니다:
기본적으로 웹 브라우징에는 agent-browser MCP를 사용합니다 (헤드리스, 로그아웃 상태). 만약 특정 사이트에 제 로그인이 필요하다면,
--profile Default로 다시 시작하여 제 Chrome 로그인을 재사용하세요.
대부분의 브라우징은 제 계정 없이 시작됩니다. 작업에 로그인이 필요한 경우, 에이전트는 Chrome 프로필 흐름을 사용합니다. 이 플래그는 프로필의 임시 사본을 실행하므로, 세션 재사용이 제가 수동으로 준비해야 하는 또 다른 가져오기 대신 워크플로우의 일부가 됩니다.
필요할 때 여전히 새로운 로그인이나 passkey 승인을 처리합니다. 하지만 이제 동일한 브라우저 규칙으로 cmux에서 Claude Code, Codex 또는 OpenCode를 사용할 수 있습니다.
제가 10월 9일에 설정을 공유했습니다:
// Detect dark theme var iframe = document.getElementById('tweet-2108313693696188526-473'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2108313693696188526&theme=dark" }
Guillermo Rauch가 답글로 "이것이 방식입니다. 더 많은 것이 올 것입니다!"라고 했습니다. 브라우저 세션으로 애쓰는 모든 노력 끝에 반가운 놀라움이었습니다.
// Detect dark theme var iframe = document.getElementById('tweet-2108314389170516471-245'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2108314389170516471&theme=dark" }
일상 업무의 일부가 되다
이 글을 쓰기 전에 저장된 에이전트 스레드를 확인했습니다. 10월 8일부터 11일까지 감사 결과, 11개의 스레드에서 616건의 기록된 에이전트-브라우저 호출과 명령어 배치를 발견했습니다. 여기에는 재시도와 여러 작업을 포함하는 배치가 포함되므로, 이는 사용량 카운트이며 616개의 완료된 작업은 아닙니다.
해당 스레드들은 Omi 웹사이트 및 리더보드, 벨소리 편집기, 제 포트폴리오 및 이력서, 마케팅, 그리고 연구를 다루었습니다. 저는 제가 그것을 많이 사용하고 있다는 것을 알았습니다. 기록이 이를 명확하게 보여주었습니다.
제가 후속 조치한 내용은 다음과 같습니다:
// Detect dark theme var iframe = document.getElementById('tweet-2109099239699890312-532'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2109099239699890312&theme=dark" }
Browser Cookie Bridge는 여전히 인앱 브라우저 내에서 세션을 원할 때 도움이 됩니다. 일상 업무의 경우, 이제 필요할 때 호출할 수 있는 브라우저 도구를 가진 터미널 에이전트를 선호합니다.
@vercel, @v0 그리고 @rauchg에게 빌더를 위한 도구에 쏟아붓는 노력에 감사드립니다. agent-browser 덕분에 많은 시간을 절약했습니다. 그 시간으로 실제로 배포하는 데 더 많이 쓸 수 있게 되었습니다.
저는 앱을 만들고 싶었습니다. 브라우저 로그인이 제가 앱을 구축하는 방식에 이렇게 큰 영향을 미칠 것이라고는 예상하지 못했습니다.
직접 시도해 보세요: https://agent-browser.dev. Chrome 프로필 상세 정보: https://agent-browser.dev/sessions.
원래 게시된 곳: X.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기