OpenCut-app/OpenCut 딥다이브
— 브라우저에서 도는 오픈소스 CapCut 대안 영상 편집기

1프로젝트 한줄 요약

요즘 숏폼·유튜브 영상을 편집할 때 많이 쓰는 게 CapCut(캡컷)입니다. 쉽고 강력하지만, 영상을 회사 서버에 올려야 하고 기본 기능마저 점점 유료로 잠기고 있죠. OpenCut은 정확히 그 불만에서 출발한 프로젝트입니다 — "편집기는 쉬워야 하고, 무료여야 하고, 내 영상은 내 기기에 있어야 한다."

핵심은 모든 처리가 브라우저 안에서 일어난다는 점입니다. 보통의 온라인 편집기는 영상을 서버로 업로드해 거기서 렌더링하지만, OpenCut은 자르기·합치기·자막·내보내기까지 전부 사용자 컴퓨터에서 처리합니다. 그래서 업로드 대기 시간도, 프라이버시 걱정도 없습니다. 이걸 가능하게 하는 게 최신 브라우저의 미디어 처리 능력(WebCodecs)과 Rust를 브라우저에서 돌리는 기술(WASM)입니다 — 뒤에서 차근차근 풀어드릴게요.

2왜 주목받는가

OpenCut이 트렌딩 상위에 오른 이유는 한 가지가 아닙니다. 가장 직접적인 동력은 CapCut의 유료화입니다. 무료로 쓰던 기본 기능들이 하나둘 구독 뒤로 잠기자, "그럼 오픈소스로 만들자"는 흐름이 생겼고 OpenCut이 그 깃발이 됐습니다. README가 내세우는 세 단어가 정확히 이 지점을 찌릅니다 — 프라이버시 · 무료 · 단순함.

두 번째는 프라이버시입니다. 영상은 종종 개인적이거나 미공개 콘텐츠인데, 그걸 모르는 회사 서버에 올리는 게 불편한 사람이 많습니다. OpenCut은 영상이 기기를 떠나지 않는다는 점 하나로 이 불안을 해소합니다. 세 번째는 화제성 — 짧은 기간에 ⭐50k를 넘기며 "오픈소스 CapCut"의 대명사가 됐고, Vercel·fal.ai 같은 곳의 후원도 받았습니다.

그리고 지금 가장 뜨거운 네 번째 이유는 과감한 재작성 선언입니다. 단순히 기능을 더하는 게 아니라, 편집기의 심장을 TypeScript에서 Rust로 옮기고, 그 Rust 코어 하나로 웹·데스크탑·모바일을 모두 굴리겠다는 계획입니다. 플러그인 우선 구조, AI 에이전트용 MCP 서버, 자동화를 위한 헤드리스 모드까지 로드맵에 담겨 있어, "오픈소스 편집기가 어디까지 갈 수 있나"를 보여주는 사례로 관심을 끕니다.

3기술 스택 전체 지도

이 프로젝트를 이해하는 열쇠는 "무거운 미디어 연산을 어디서 처리하느냐"입니다. 영상 편집은 디코딩·합성·인코딩이 전부 연산 폭탄이라, 자바스크립트만으로는 버겁습니다. 그래서 OpenCut은 브라우저 미디어 API + Rust→WASM 코어를 끌어와 무거운 일을 떠넘깁니다. 아래 표에서 각 라이브러리가 "편집기의 어느 근육"인지 짚어 보세요.

① 클래식판 (opencut-classic · 실제로 동작하는 편집기)

② 재작성판 (현재 main · 짓고 있는 차세대 골격)

4아키텍처 심화 분석

전체 그림 — 브라우저 안의 편집 파이프라인

핵심은 모든 단계가 브라우저 한 탭 안에서 돈다는 것입니다. 영상은 서버로 가지 않고, 브라우저의 로컬 저장소(OPFS)에 들어간 뒤, 상태 스토어(zustand)가 "어떤 클립이 몇 초에 놓였는지"를 들고, 프리뷰는 그 상태를 그려내고, 내보내기는 그 상태대로 새 영상을 인코딩합니다.

흐름 한 줄기 추적 — "클립을 타임라인에 끌어다 놓고 내보내기"

초보자가 가장 궁금해하는 "내가 마우스로 한 동작이 코드에서 어떻게 흐르나"를 해피패스(정상 경로)만 따라가 봅니다. 클래식 편집기 기준의 개념 흐름입니다.

// ① 미디어 패널에서 클립을 타임라인으로 드래그
//    @hello-pangea/dnd 가 "어디에 놓였나(트랙·시각)"를 알려줌
onDrop(clip, trackId, startTime)

// ② 상태 스토어에 "이 클립이 여기 놓였다"를 기록 (진실의 원천)
timelineStore.addClip({ id, trackId, start, duration })

// ③ 스토어가 바뀌면 → 구독 중인 UI들이 자동으로 다시 그림
//    타임라인 막대, 프리뷰 화면, 속성 패널이 동시에 갱신
preview.render(timelineStore.state, currentTime)

// ④ '내보내기'를 누르면 스토어 상태를 처음부터 끝까지 재생하며
//    각 프레임을 합성 → mediabunny 가 새 영상으로 인코딩
for (t of timeline) { frame = compose(state, t); encoder.add(frame) }
const mp4 = await encoder.finalize()   // 로컬 다운로드

풀어 쓰면 이렇습니다. ① 드래그앤드롭 라이브러리가 "클립이 어느 트랙 몇 초에 놓였는지"를 좌표로 알려줍니다. ② 그 사실을 zustand 스토어에 적습니다 — 여기서 중요한 설계가 "화면이 아니라 상태가 진실"이라는 원칙입니다. ③ 스토어가 바뀌면 그걸 구독하던 타임라인·프리뷰·속성 패널이 알아서 다시 그립니다(리액트의 반응형 렌더링). ④ 내보내기는 그 상태를 시간 순서대로 재생하며 프레임을 합성하고, mediabunny가 새 영상으로 묶습니다. 화면을 "녹화"하는 게 아니라 상태를 다시 계산해 깨끗하게 렌더한다는 점이 핵심입니다.

재작성판이 그리는 새 그림 — "한 Rust 코어, 모든 화면"

새 main의 야심은 편집기의 두뇌(컴포지터·효과·마스크)를 Rust로 한 번만 짜서 모든 플랫폼이 공유하는 것입니다. 웹에서는 그 Rust를 WASM으로, 데스크탑에서는 GPUI(네이티브 GPU UI)로, 모바일에서도 같은 코어로 돌립니다. TypeScript에 흩어져 있던 로직을 Rust 코어로 모으는 중이라 README가 "비즈니스 로직을 여기로 이전 중"이라고 적은 겁니다.

5디렉토리 구조 해부

현재 main — 재작성 골격 (실측)

지금 main은 Turborepo 모노레포이고, 안에 apps/web(TanStack Start 스캐폴드) 하나가 들어 있습니다. rust/·apps/desktop·docs/는 README가 예고한 계획이지, 아직 코드 트리에는 거의 없습니다(Cargo.toml·docker-compose.yml도 아직 없음).

클래식 편집기 — 서브시스템 지도 (라이브러리로 추론)

클래식의 실제 폴더명을 일일이 옮기기보다, 어떤 라이브러리가 어떤 기능을 맡는지로 구조를 잡는 게 초보자에겐 더 쓸모 있습니다(라이브러리 구성은 package.json으로 실측).

6학습 포인트 (기술별)

7시스템 요구사항

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

# 💡 하는 일: 클래식 소스 받아 로컬 개발 서버 띄우기
git clone https://github.com/opencut-app/opencut-classic
cd opencut-classic
bun install
bun dev:web               # http://localhost:3000 에서 편집기 열림

# 💡 하는 일: 재작성판 main 클론 → Vite 개발 서버
git clone https://github.com/OpenCut-app/OpenCut
cd OpenCut
bun install
bun dev:web               # Vite + TanStack Start 개발 서버 구동

# Rust 툴체인 + wasm-pack 설치 후
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack
wasm-pack build --target web   # .wasm + JS 바인딩 생성

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

10핵심 키워드 사전

11참고 링크

• 저장소(재작성판): github.com/OpenCut-app/OpenCut · 클래식(아카이브): opencut-classic
• 웹앱: opencut.app(클래식 호스팅) · new.opencut.app(재작성 미리보기)
• 미디어 처리: WebCodecs API (MDN) · mediabunny
• 스택: TanStack Start · Turborepo · Bun · Cloudflare Workers
• 코어 기술: wasm-pack · WebGPU · GPUI (Zed) · zustand