Electron과 FFmpeg 기반의 로컬 AI 비디오 워크스테이션 3주 만에 구축

I Built a Local Video Processing Workstation with AI — Here's the Complete Journey

mayu8882026년 6월 26일5분intermediate

AI 요약

Context

클라우드 기반 비디오 툴의 개인정보 보호 문제와 파일 크기 제한 및 비용 발생이라는 제약 사항 존재. 완전한 로컬 환경에서 동작하는 고성능 비디오 처리 시스템 설계 필요성 대두.

Electron의 Main Process에서 Node.js child_process.spawn을 통한 FFmpeg CLI 래핑 구조 설계
React Renderer에서 IPC bridge를 통해 명령을 전달하고 stderr를 파싱하여 실시간 진행률을 추적하는 이벤트 기반 아키텍처 채택
FFmpeg delogo 필터의 경계 제약을 극복하기 위해 crop, gblur, colorchannelmixer를 조합한 커스텀 필터 그래프 설계
FFmpeg 렌더링 부하를 방지하기 위해 HTML5 Video 요소와 Canvas API를 활용한 실시간 프리뷰 시뮬레이션 구현
Letterbox 스케일링을 고려한 화면 좌표-비디오 픽셀 좌표 간 변환 로직 적용
asar 압축 시 바이너리 실행 불가 문제를 해결하기 위해 unpackDir 설정을 통한 FFmpeg 외부 리소스 관리

실천 포인트

1. Electron 앱 내 외부 바이너리 포함 시 asar unpackDir 설정 확인

2. 무거운 프로세스 실행 전 Canvas 기반의 가벼운 프리뷰 레이어 구축 검토

3. 좌표 변환 로직 설계 시 뷰포트 스케일링과 실제 리소스 해상도 간 매핑 수식 검증

4. 플랫폼별 바이너리 네이밍 및 경로 차이를 고려한 CI/CD 파이프라인 자동화

태그