TimeCat은 웹 페이지에서 발생하는 다양한 사용자 상호작용과 콘텐츠 변경을 효율적으로 기록하고 재생할 수 있게 돕는 도구입니다. 이 가이드에서는 TimeCat을 활용하여 웹 녹화 기능을 빠르게 시작하는 방법을 안내합니다.

초기 설정: TimeCat 준비하기

TimeCat을 사용하기 위한 첫 단계는 프로젝트를 로컬 개발 환경에 설정하는 것입니다. 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 TimeCat 저장소를 복제합니다.

git clone https://gitcode.com/gh_mirrors/ti/TimeCat

저장소 복제 완료 후, 해당 디렉터리로 이동하여 필요한 의존성 패키지를 설치합니다.

cd TimeCat
npm install

첫 녹화 시작하기

TimeCat의 핵심 기능인 웹 페이지 활동 기록은 비교적 간단한 과정으로 진행됩니다. 이제 실제 녹화 기능을 어떻게 구현하는지 살펴보겠습니다.

TimeCat 라이브러리 가져오기

웹 프로젝트 내에서 TimeCat의 녹화 기능을 사용하려면 Recorder 모듈을 가져와야 합니다. 다음 import 문을 통해 핵심 Recorder 클래스를 불러올 수 있습니다.

import { Recorder } from '@timecat/recorder'

이 Recorder 클래스는 TimeCat의 녹화 작업을 관리하는 주요 인터페이스입니다. 해당 클래스는 packages/recorder/src/recorder.ts 파일에서 찾을 수 있습니다.

기록기 인스턴스 초기화

녹화 작업을 시작하기 위해 Recorder 클래스의 인스턴스를 생성합니다. 초기화 시, 필요에 따라 오디오나 비디오 녹화 활성화 여부를 지정할 수 있습니다.

const pageLogger = new Recorder({
  audio: false, // 오디오 기록 여부
  video: false  // 비디오 기록 여부
});

녹화 시작

record() 메서드를 호출하면 즉시 웹 페이지의 활동 기록이 시작됩니다.

pageLogger.record();

이후부터 DOM 변경, 마우스 이벤트, 스크롤 이동 등 페이지에서 발생하는 모든 상호작용이 TimeCat에 의해 포착됩니다.

녹화 과정 제어하기

TimeCat은 녹화 진행 상황을 유연하게 제어할 수 있는 메서드를 제공합니다.

녹화 일시 중지

일시적으로 기록을 중단해야 할 경우, 다음 pause() 메서드를 호출합니다.

await pageLogger.pause();

녹화 다시 시작

일시 정지된 녹화를 다시 시작하려면 record() 메서드를 다시 호출하면 됩니다.

pageLogger.record();

녹화 종료

녹화 세션이 완료되면 destroy() 메서드를 사용하여 기록 과정을 최종적으로 종료합니다.

await pageLogger.destroy();

녹화 데이터 처리

기록된 데이터는 TimeCat 내부적으로 IndexedDB에 저장됩니다. onData 콜백 함수를 통해 실시간으로 기록 데이터를 받아 처리할 수 있습니다.

pageLogger.onData((recordedSegment, proceed) => {
  // 수집된 녹화 데이터 조각 처리
  console.log('새로운 녹화 데이터 조각:', recordedSegment);
  // 다음 데이터 처리를 위해 proceed() 호출
  proceed();
});

저장된 데이터 지우기

이전에 저장된 모든 녹화 데이터를 삭제하려면 clearDB() 메서드를 사용합니다.

await pageLogger.clearDB();

TimeCat 녹화 작동 원리

TimeCat은 웹 페이지의 변화를 추적하기 위해 다양한 이벤트를 감청하는 방식으로 동작합니다. 특히, DOM 구조 변경, 마우스 움직임, 스크롤 이벤트 등 여러 종류의 웹 활동을 포착하기 위해 내부적으로 'Watcher'라는 구성 요소를 활용합니다. 이러한 워처 구현은 프로젝트의 packages/recorder/src/watchers/ 디렉터리에서 확인할 수 있습니다.