Browser Use에 녹화 기능 추가: AI가 브라우저 작업하며 튜토리얼 영상까지 제작

browser-use의 브라우저 제어 도구인 browser-harness에 풀리퀘스트 PR #532가 병합되며, 에이전트의 브라우저 작업 과정을 세련된 튜토리얼 영상으로 자동 제작해 주는 기능이 추가되었다. 에이전트가 웹사이트를 탐색하고 폼을 채우는 동안 작업을 기록하고, Screen Studio 스타일의 숏폼 튜토리얼로 편집까지 끝내준다.

무엇을 할 수 있나

기존에는 브라우저 에이전트의 실행 과정을 확인하려면 터미널 로그를 뒤지거나 정적인 스크린샷을 넘겨봐야 했다. 이번 업데이트는 기록과 편집을 분리해 에이전트가 완전 자동으로 영상을 뽑아낼 수 있도록 설계했다.

에이전트가 브라우저 작업을 수행하면 액션별 스크린샷과 events.jsonl 로그가 남는다. 작업이 끝난 뒤 내장된 make-video 스킬을 호출하면 에이전트가 이 기록들을 모아 하나의 완성된 영상으로 엮어낸다.

결과물은 단순한 녹화 화면이 아니다. 사실적인 크롬 브라우저 프레임, 부드러운 카메라 줌, 마우스 커서 궤적, 하단 단계별 자막 뱃지가 자동으로 입혀진다. 실행 중 에러가 발생하면 붉은색 비네트와 가벼운 흔들림 효과를 적용해 어느 지점에서 문제가 생겼는지 직관적으로 보여준다.

보안 처리도 탄탄하다. URL에 포함된 OAuth 토큰이나 API 키 같은 민감 정보는 로그 저장 단계에서 자동 제거되며, 화면 속 민감 정보 영역을 지정해 블러 처리하면 줌 인 상태에서도 마스킹이 유지된다.

어떻게 만들었고 어떻게 쓰나

가장 눈에 띄는 설계는 외부 인코딩 도구인 ffmpeg을 전혀 쓰지 않는다는 점이다.

개발진은 자체 HTML 컴포지터(video-template.html)를 브라우저 내 캔버스 위에 띄워 프레임, 그림자, 커서, 자막을 실시간으로 렌더링하도록 했다. 최종 영상은 브라우저 자체 API인 MediaRecorder를 사용해 WebM 포맷으로 추출한다. 복잡한 외부 종속성 없이 가볍게 작동하는 구조다.

녹화는 기본적으로 꺼져 있지만, 사용자 프롬프트에 기록이나 데모 제작을 요청하면 start_recording()이 호출되며 기록을 시작한다. 모든 세션을 기록하고 싶다면 환경 변수 BH_RECORD=1을 설정하면 된다. 작업이 180초 동안 멈추면 세션이 자동 분리되어 다른 작업과 영상이 섞이지 않는다.

영상 출력을 원할 때는 make-video 스킬이나 CLI의 video 명령어를 실행하면 된다. 해당 기능은 browser-use/browser-harness 메인 브랜치에 정식 반영되어 있어 저장소를 풀받아 바로 로컬에서 실행할 수 있다.

왜 중요한가

사내 업무 매뉴얼을 자주 만들거나 웹 기반 AI 에이전트를 개발하는 사람이라면 바로 도입해 볼 만하다. 별도의 화면 캡처 프로그램과 편집 툴을 오가며 30분 이상 공들이던 작업 가이드 제작을 에이전트 작업의 부산물로 손쉽게 얻을 수 있다.

무거운 비디오 렌더링 서버나 서드파티 클라우드를 거치지 않고 순수 브라우저 스택만으로 높은 완성도의 결과물을 뽑아낸 점이 인상적이다. 데이터 유출 걱정 없이 에이전트의 작업을 사람이 가장 이해하기 쉬운 형태로 시각화해 준다.