# Clip-JS — Next.js, Remotion, FFmpeg 기반 온라인 영상 편집 오픈소스

> Clean Markdown view of GeekNews topic #21848. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=21848](https://news.hada.io/topic?id=21848)
- GeekNews Markdown: [https://news.hada.io/topic/21848.md](https://news.hada.io/topic/21848.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-07-07T09:46:01+09:00
- Updated: 2025-07-07T09:46:01+09:00
- Original source: [github.com/mohyware](https://github.com/mohyware/clip-js)
- Points: 16
- Comments: 0

## Summary

오픈소스 온라인 영상 편집기 **Clip-JS**는 **Next.js, Remotion, FFmpeg(WASM)** 등 최신 웹 기술을 기반으로 하며, **브라우저에서 실시간 미리보기와 1080p 영상 렌더링**을 제공합니다. 드래그 기반의 **인터랙티브 타임라인**과 레이어별로 세밀한 미디어·텍스트 편집, 위치·투명도 등 **고급 속성 제어**가 특징이며, 효율적인 **키보드 단축키**와 **셀프 호스팅도 지원**합니다.

## Topic Body

- Next.js, Remotion(실시간 미리보기), FFmpeg(웹어셈블리 포트) 기반의 온라인 영상 편집기  
- 브라우저 환경에서 **실시간 편집 미리보기와 고품질 1080p 렌더링**을 지원  
  - FFmpeg(WASM)으로 최대 1080p까지 다양한 옵션 렌더링 가능   
- 인터랙티브 타임라인 에디터에서 직접 드래그해 미디어를 정밀하게 배열, 잘라내기·복제·분할 등 레이어별 조작 지원  
- 영상·오디오·이미지·텍스트 등 다양한 미디어/레이어/텍스트 편집  
- 고급 컨트롤: 위치, 투명도, z-index, 볼륨 등 개별 요소 속성 조정  
- 직관적인 키보드 단축키 지원 : space(재생), m(음소거), s(분할), d(복제), del(삭제)   
- 로컬 개발·셀프호스팅 가능   
- **기술 스택**   
  - **프론트엔드**: Next.js, React  
  - **미리보기**: Remotion  
  - **렌더링**: FFmpeg (WebAssembly)  
  - **기타**: react-moveable 등 타임라인·레이어 조작

## Comments



_No public comments on this page._