#3-5. NPM 배포와 init() API 25.12.26 ~ 25.12.27

#세션 리플레이 내보내기

12월 26일, 세션 리플레이 기능을 한 단계 더 발전시켰다. 녹화한 CDP 이벤트를 JSON 파일로 내보내고, 나중에 다시 불러와서 오프라인으로 재생하는 기능이다(PR #23).

배민의 "기록방 URL"과는 접근이 좀 다르다. 배민은 서버에 기록을 저장하고 URL로 공유하는 방식인데, 나는 일단 파일로 내보내는 방식을 택했다. 서버를 운영할 여력이 없으니까. 대신 내보낸 JSON 파일을 다시 Inspector에 드래그앤드롭하면 오프라인에서 재생되게 만들었다.

내보내기 포맷에는 CDP 이벤트뿐만 아니라 쿠키, localStorage, sessionStorage, DOM 트리 데이터도 같이 담았다. 나중에 재생할 때 당시의 전체 상태를 복원할 수 있게 하려고.

리플레이 기능의 유닛 테스트도 같이 추가했다(PR #24). 타이밍/순서 검증 테스트를 넣어서, 나중에 setTimeout 기반 구현을 이벤트 리스너로 리팩토링할 때를 대비했다.

#Playground에 테스트 버튼

문서 사이트의 DevTools Playground에 테스트 버튼을 추가하고(PR #25), 리플레이 모드에서 클라이언트 연결이 간섭하지 않도록 격리했다. 문서 빌드 관련 이슈도 몇 개 잡았다(PR #26, #27).

#Tauri 데스크톱 앱

12월 26일의 큰 작업은 Tauri 데스크톱 앱이었다(PR #28). Inspector를 웹 브라우저에서만 쓰는 게 아니라, 독립적인 데스크톱 앱으로 만든 거다.

난 타우리 처돌이니까 이건 자연스러운 수순이었다. Tauri로 감싸면 프레임리스 윈도우에 커스텀 타이틀바를 넣을 수 있고, 시스템 트레이 아이콘도 가능하다. WebSocket 서버 URL을 Zustand + persist로 관리해서, 앱을 껐다 켜도 마지막 연결 정보가 유지되게 했다.

서버 URL을 설정할 수 있게 만든 것도 이 PR에서다. 기존에는 서버 주소가 하드코딩되어 있었는데, 이제 사용자가 원하는 서버로 연결할 수 있다.

#Sentry 스타일 init() API

12월 27일, 가장 중요한 변경이 있었다. 클라이언트 초기화를 Sentry 스타일의 init() API로 바꾼 거다(PR #31).

기존에는 클라이언트 스크립트를 <script> 태그로 삽입하면 자동으로 연결되는 방식이었다. 이건 간단하긴 한데, 서버 URL이나 옵션을 커스터마이징하기 어렵다.

// 기존 방식: script 태그 삽입하면 끝
<script src="https://server/client.js"></script>

// 새로운 방식: Sentry처럼 init()
import { init } from '@anthropic/chrome-remote-devtools-client';

init({
  serverUrl: 'wss://my-server.com',
  enableConsole: true,
  enableNetwork: true,
  enableRrweb: true,
});

이 변경과 함께 ESM(ES Modules) 마이그레이션도 진행했다. 기존 IIFE 포맷에서 ESM으로 바꾸면서, 트리 쉐이킹이 가능해지고 번들 사이즈가 줄어들었다.

#NPM 퍼블리시 워크플로우

init() API를 만들었으니 이제 npm에 배포해야 한다. GitHub Actions로 npm 퍼블리시 워크플로우를 만들었다(PR #34, #35, #36, #37, #38).

이게 생각보다 삽질이 많았다. 워크플로우 중복 실행 문제(PR #34), 버전 에러(PR #34), workspace 의존성 제거 스크립트(PR #35, #36), rrweb 번들링 문제(PR #35), trusted publishing provenance 설정(PR #38)... 하루 만에 PR을 5개나 올린 건 순전히 CI/CD 삽질 때문이었다.

12월 27일에 chrome-remote-devtools-client v0.1.0-rc.1과 chrome-remote-devtools-server v0.1.0-rc.1이 npm에 올라갔다.

#문서 개선과 코드 정리

같은 날 문서도 대대적으로 개선했다(PR #29, #39, #40). Quick Start 가이드를 PackageManagerTabs로 깔끔하게 정리하고, DevToolsPlayground의 리플레이 모드도 Inspector와 호환되게 업데이트했다.

코드 품질도 한 번 정리했다(PR #32, #33). 네트워크 응답 크기 표시 버그, 리플레이 타임아웃 에러, 코드 중복 같은 것들을 잡았다.

#일주일의 성과

12월 20일에 시작해서 12월 27일까지, 딱 일주일. 그 사이에 CDP 클라이언트, WebSocket 서버, DevTools 프론트엔드 연동, 세션 리플레이, PostMessage 트랜스포트, Tauri 데스크톱 앱, Sentry 스타일 init() API, ESM 마이그레이션, npm 배포까지 해치웠다.

미친 속도라고 생각할 수도 있는데, AI 없이는 절대 불가능했을 속도다. 내가 방향을 잡고, AI한테 구현을 시키고, 내가 검증하고, 다시 방향을 잡는 사이클이 빠르게 돌았기 때문에 가능했다.