Projects

qa-recorder

웹 앱 버그 재현을 위한 원클릭 QA 녹화 라이브러리

DOM 변화, 네트워크 요청, 콘솔 로그를 동시에 캡처해 단일 HTML 리포트로 묶어주는 클라이언트 사이드 라이브러리입니다. 백그라운드에서 항상 마지막 20분을 메모리에 유지하기 때문에, 버그가 발생한 직후에 플로팅 버튼만 눌러도 전체 컨텍스트를 그대로 보존할 수 있습니다.

Key Features

  • rrweb 기반 DOM 세션 리플레이로 화면 상태 그대로 재생
  • HAR 1.2 포맷 네트워크 캡처 (fetch · XHR 인터셉트, 최대 100개)
  • error · warn · onerror · unhandledrejection 자동 수집
  • Authorization · Cookie 등 민감 헤더 자동 마스킹
  • 엔드포인트 미설정 시 ZIP 다운로드, 설정 시 서버로 자동 전송

Tech Stack

TypeScriptrrwebHAR 1.2Shadow DOMTurboVitestpnpm
View on GitHub

video-encoder

업로드 없이 브라우저에서만 동작하는 비디오 압축기

WebCodecs API로 GPU 가속 인코딩을 시도하고, 미지원 브라우저에서는 FFmpeg.wasm으로 자동 폴백하는 하이브리드 엔진 구조의 비디오 압축 앱입니다. 영상 파일이 외부로 업로드되지 않기 때문에 민감한 미디어를 안전하게 처리할 수 있습니다.

Key Features

  • WebCodecs · FFmpeg.wasm 하이브리드 엔진 자동 폴백
  • H.264 인코딩 · CRF 18~40 품질 슬라이더
  • 원본 / 1080p / 720p / 480p 해상도 선택
  • 오디오 트랙 제거 옵션 지원
  • 실시간 진행률 표시 · 영상은 브라우저 밖으로 나가지 않음

Tech Stack

TypeScriptWebCodecs APIFFmpeg.wasmmp4box.jsmp4-muxerVite
View on GitHub

envault

env와 JSON 설정을 단일 스키마로 검증하는 타입 안전 설정 도구

환경변수와 JSON 설정을 하나의 스키마로 정의하고, 문자열을 적절한 타입으로 자동 변환해주는 라이브러리입니다. 민감한 값은 출력 시 자동으로 마스킹되며, 검증·생성·비교·감사를 위한 CLI를 내장하고 있어 운영 단계까지 폭넓게 사용할 수 있습니다.

Key Features

  • 단일 스키마로 env · JSON 설정 동시 검증
  • 문자열 → 숫자 · 불리언 자동 타입 변환
  • 민감 값 마스킹 출력 (sk-****xxxx)
  • CLI로 검증 · 생성 · 비교 · 감사 지원
  • 완전한 TypeScript 타입 추론 (zero-config)

Tech Stack

TypeScriptCommander.jstsupVitest
View on GitHub