OpenScreen 딥다이브
— Screen Studio의 무료 오픈소스 대안, Electron + React 화면 녹화 앱

1프로젝트 한줄 요약

OpenScreen은 Screen Studio($29/월)의 무료 오픈소스 대안으로, Electron + React + PixiJS로 만든 데스크톱 화면 녹화 & 영상 편집 앱입니다. 워터마크 없이 자동 줌, 모션 블러, 크롭, 어노테이션 등 후편집 기능을 포함하며, macOS·Windows·Linux 크로스플랫폼을 지원합니다.

2왜 주목받는가

OpenScreen은 유료 대안의 무료화라는 단순하지만 강력한 메시지로 주목받았습니다. Screen Studio·Loom 같은 유료 녹화 도구의 핵심 기능을 MIT 라이선스로 제공하고, 웹 개발자가 익숙한 Electron + React + Vite 스택을 써서 진입 장벽을 낮췄습니다.

경쟁 제품 대비 위치

3기술 스택 전체 지도

프론트엔드 (렌더러 프로세스)

데스크톱 (메인 프로세스)

영상 처리

개발 도구

4아키텍처 심화 분석

핵심 설계 패턴 1 — 멀티 윈도우 아키텍처

Electron의 BrowserWindow를 4개로 분리해 각 화면의 역할을 명확히 구분합니다.

// windows.ts에서 HUD 오버레이 위치 계산
const primaryDisplay = screen.getPrimaryDisplay();
const { width, height } = primaryDisplay.workAreaSize;
x = Math.round((width - 600) / 2);   // 화면 중앙
y = height - 160 - 20;                // 화면 하단 20px 위
// frame: false, transparent: true, alwaysOnTop: true

핵심 설계 패턴 2 — 보안 중심 IPC 통신

// preload.ts — 렌더러에 노출하는 API만 명시적으로 선언
contextBridge.exposeInMainWorld('electronAPI', {
  storeRecordedVideo: (buffer) => ipcRenderer.invoke('store-video', buffer),
  getSources: () => ipcRenderer.invoke('get-sources'),
  // ... 약 30개 API
});

원칙: 렌더러 프로세스는 절대 Node.js API에 직접 접근 불가. 웹 페이지가 악성 코드를 실행해도 파일 시스템이나 OS 기능에 접근할 수 없습니다.

핵심 설계 패턴 3 — 코덱 우선순위 폴백 전략

핵심 설계 패턴 4 — 적응형 비트레이트 계산

function computeBitrate(width: number, height: number, fps: number): number {
  const pixels = width * height;
  let bitrate;
  if (pixels >= 3840 * 2160) bitrate = 45_000_000;      // 4K
  else if (pixels >= 2560 * 1440) bitrate = 28_000_000;  // QHD
  else bitrate = 18_000_000;                              // 1080p
  return fps >= 60 ? bitrate * 1.7 : bitrate;
}

핵심 설계 패턴 5 — 스마트 Undo/Redo (3-상태 히스토리)

{ past: EditorState[], present: EditorState, future: EditorState[] }
// pushState()  — 버튼 클릭 같은 이산 액션 → 체크포인트 생성
// updateState() — 슬라이더 드래그 같은 연속 액션 → present만 업데이트
// commitState() — 드래그 끝 → dirty 플래그 리셋
// 최대 80단계 히스토리로 메모리 제한

핵심 설계 패턴 6 — Web Audio API 오디오 믹싱

const audioContext = new AudioContext();
const destination = audioContext.createMediaStreamDestination();

const systemSource = audioContext.createMediaStreamSource(systemStream);
const micSource = audioContext.createMediaStreamSource(micStream);
const micGain = audioContext.createGain();
micGain.gain.value = 1.4;  // 마이크 볼륨 40% 부스트

systemSource.connect(destination);
micSource.connect(micGain).connect(destination);
// destination.stream을 MediaRecorder에 전달

5디렉토리 구조 해부

6학습 포인트 (기술별)

Electron — 데스크톱 앱 개발의 정석

멀티 윈도우 관리 패턴, contextIsolation + contextBridge를 사용한 보안 IPC 통신, 시스템 트레이 통합, OS별 분기 처리, electron-builder로 크로스플랫폼 패키징(DMG, EXE, AppImage)을 배웁니다.

MediaRecorder API — 브라우저 내장 녹화

navigator.mediaDevices.getDisplayMedia()로 화면 캡처, getUserMedia()로 마이크/웹캠 캡처, 코덱 지원 여부 확인(MediaRecorder.isTypeSupported()), ondataavailable 이벤트로 청크 수집 → Blob 조립, WebM duration 메타데이터 버그와 해결법(fix-webm-duration)을 배웁니다.

Web Audio API — 실시간 오디오 처리

AudioContext → createMediaStreamSource() → GainNode → MediaStreamDestination 파이프라인, 두 개 이상의 오디오 소스를 하나로 믹싱하는 오디오 그래프 설계, AnalyserNode로 실시간 오디오 레벨 시각화를 배웁니다.

PixiJS — WebGL 2D 렌더링

Canvas 대신 WebGL로 타임라인 렌더링(성능 핵심), pixi-filters(드롭 섀도 등) 적용법, 타임라인 UI에서 WebGL이 왜 Canvas보다 나은지 이해합니다.

React 패턴 — 상태 관리와 커스텀 훅

Context API 활용(I18n, Shortcuts) — 전역 상태를 Redux 없이 관리, 커스텀 훅으로 로직 분리, 3-상태 Undo/Redo 패턴(past/present/future + dirty 추적), Radix UI 프리미티브를 래핑한 커스텀 UI 컴포넌트 시스템을 배웁니다.

7하드웨어 / 시스템 요구사항

운영체제

하드웨어 권장

8직접 해볼 수 있는 실습 과제

// 힌트: 이 API들을 조합
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' });

9관련 기술 심화 학습 로드맵

1주차: Electron 기초

Electron 공식 튜토리얼 완주, main/renderer/preload 프로세스 모델 이해, contextBridge + IPC 패턴으로 간단한 앱 만들기, electron-builder로 패키징 테스트.

2주차: Vite + Electron 통합

vite-plugin-electron 세팅부터 HMR 동작까지 직접 구성, 청크 분할(manualChunks) 설정 실험, 환경변수로 개발/프로덕션 분기 처리.

3주차: MediaRecorder + Web Audio API

getDisplayMedia/getUserMedia 옵션 파라미터 마스터, 코덱 호환성 매트릭스 학습(AV1, H264, VP9), AudioContext 오디오 그래프 설계, AnalyserNode로 FFT 기반 시각화 구현.

4주차: PixiJS와 2D 그래픽

PixiJS 기초(Stage, Container, Sprite, Graphics), WebGL vs Canvas 성능 차이 벤치마킹, pixi-filters로 시각 효과 적용, 드래그 가능한 타임라인 UI 프로토타입.

5주차: React 고급 패턴

커스텀 훅 설계 원칙(관심사 분리, 합성 가능성), Context API vs Zustand/Jotai 선택 기준, Radix UI 프리미티브 래핑 패턴, 3-상태 히스토리 패턴 범용 구현.

6주차: 프로덕션 최적화

Terser 설정으로 번들 최소화, Electron 앱 성능 프로파일링, Playwright E2E 테스트 작성, electron-builder로 자동 업데이트 구현(electron-updater).

10핵심 키워드 사전

11참고 링크

• GitHub — siddharthvaddem/openscreen
• Electron 공식 문서
• Electron 보안 가이드
• MediaRecorder API (MDN)
• Web Audio API (MDN)
• PixiJS 공식
• vite-plugin-electron
• Radix UI
• Biome (Rust 린터)
• GSAP 애니메이션
• electron-builder 문서
• Screen Studio (유료 경쟁제품)