Claude Code 구독을 코딩 외 용도로 활용하기 위한 브라우저 확장 프로그램 'BrowserBud' 개발

실용적 조언

Claude Code 구독자 중 토큰이 남는 경우 BrowserBud를 설치하여 유튜브 요약이나 웹페이지 분석에 활용해볼 것
Windows 사용자의 경우 제공된 Docker 설정을 사용하여 로컬 서버 환경을 구축할 것
분석된 내용을 로컬 파일로 자동 저장하도록 스크립트를 수정하여 지식 베이스 구축에 활용 가능

섹션별 상세

BrowserBud는 로컬 서버와 브라우저 확장 프로그램이 웹소켓으로 통신하는 아키텍처를 채택했다. 로컬 서버에서 Claude Code를 실행하고 ttyd 라이브러리를 통해 터미널 화면을 브라우저 사이드바에 실시간으로 렌더링하는 방식으로 작동한다. 이를 통해 터미널에 익숙하지 않은 환경에서도 Claude Code의 강력한 추론 능력을 웹 브라우징과 결합할 수 있다.

웹페이지 컨텍스트 통합을 위해 백엔드 서버가 사용자의 브라우징 정보를 실시간으로 수신하는 구조를 갖췄다. 사용자가 특정 페이지를 보고 있을 때 Claude Code가 해당 페이지의 내용을 즉시 파악하여 관련 질문에 답변할 수 있도록 설계됐다. 이는 단순한 챗봇을 넘어 현재 작업 중인 웹 환경을 이해하는 보조 도구로서의 기능을 수행한다.

유튜브 영상 분석을 위한 전용 스킬을 구현하여 자막 추출 및 대화 기능을 제공한다. 사용자가 요약을 요청하면 확장 프로그램이 클라이언트 측에서 트랜스크립트를 추출하고 이를 로컬 파일로 저장한 뒤, Claude Code가 해당 파일을 읽어 분석 결과를 도출하는 일련의 워크플로우를 따른다. 모든 처리 과정이 로컬 시스템을 거치므로 분석 데이터를 파일 형태로 영구 저장하기 용이하다.

현재 구독 플랜의 기술적 제약으로 인해 에이전트 SDK를 사용하지 못하는 한계를 우회적인 방식으로 해결했다. 헤드리스 에이전트 방식 대신 툴 콜(Tool Call)과 웹소켓 메시징을 조합하여 기능을 구현했으나, 이로 인해 응답 속도가 다소 느려지는 현상이 발생한다. 또한 확장 프로그램 실행 시 입력창에 커서 포커스가 자동으로 잡히지 않는 등의 UI 편의성 개선 과제가 남아있다.

용어 해설

ttyd: — 터미널 도구를 웹 브라우저에서 실행하고 공유할 수 있게 해주는 오픈소스 명령줄 도구이다. C 언어로 작성되어 가볍고 빠르며, 웹소켓을 통해 브라우저에 실시간 터미널 인터페이스를 렌더링하는 기능을 제공한다. 이 프로젝트에서는 Claude Code의 터미널 환경을 브라우저 사이드바에 표시하기 위한 핵심 엔진으로 사용됐다.
웹소켓(WebSocket): — 클라이언트와 서버 간에 지속적인 연결을 유지하며 양방향으로 데이터를 주고받는 통신 프로토콜이다. HTTP와 달리 연결을 끊지 않고 실시간 데이터를 전송할 수 있어 대화형 AI 인터페이스 구현에 필수적이다. BrowserBud에서는 브라우저 확장 프로그램과 로컬 백엔드 서버 간의 실시간 명령 및 데이터 전달을 위해 활용됐다.
도구 호출(Tool Calling): — LLM이 사용자의 요청을 해결하기 위해 외부 API나 함수를 실행해야 한다고 판단하고 이를 요청하는 메커니즘이다. 모델이 직접 코드를 실행하거나 데이터를 검색하는 대신, 정의된 도구의 명세를 보고 적절한 인자를 생성하여 시스템에 전달한다. 본문에서는 유튜브 자막 추출이나 페이지 크롤링 스킬을 실행하는 핵심 논리로 작동한다.

언급된 도구

BrowserBud추천링크

Claude Code를 브라우저 사이드바에서 사용하게 해주는 확장 프로그램

ttyd중립링크

터미널을 브라우저 창에 렌더링하는 도구

언급된 리소스

GitHubBrowserBud GitHub 저장소

GitHubttyd GitHub 저장소