내 호스트에서 직접 운영하는 영상 편집 Utility - Video Editor

개인 호스트와 가상 머신(VM)에 직접 설치하고, 자체 도메인을 연결하여 운영할 수 있는 셀프 호스팅(Self-hosted) 웹 기반 영상 편집 프로젝트, Video Editor v0.1.0을 공개합니다.

Video Editor는 개인 서버, 홈서버 또는 Linux 기반 가상 머신(VM)에 설치하여 자신만의 영상 편집 환경을 구축할 수 있도록 개발한 오픈소스 웹 애플리케이션입니다.

특정 온라인 영상 편집 서비스에 의존하지 않고 사용자가 직접 서버를 관리하며 운영할 수 있다는 점이 이 프로젝트의 가장 중요한 특징입니다.

설치한 서버에 자체 도메인을 연결하고 HTTPS 환경을 구성하면, 브라우저를 통해 접근할 수 있는 독립적인 웹 영상 편집 서비스로 운영할 수도 있습니다.

영상 편집 인터페이스는 HTML5와 Vanilla JavaScript를 기반으로 구성했으며, 실제 영상 처리에는 FFmpeg WebAssembly를 활용합니다.

사용자는 별도의 데스크톱 영상 편집 프로그램을 설치하지 않고 웹 브라우저에서 영상 파일을 선택하여 구간 편집, 화면 조정, 오디오 처리, 프레임 캡처 등의 작업을 수행할 수 있습니다.

이번 v0.1.0은 Video Editor의 첫 번째 공개 릴리스로, 웹 데모와 함께 직접 설치할 수 있는 프로젝트 소스코드를 GitHub에 공개했습니다.

1. Self-hosted — 내 서버에서 직접 운영하는 영상 편집 환경

Video Editor의 핵심 목적은 사용자가 직접 소유하거나 관리하는 서버에 영상 편집 웹 애플리케이션을 설치하고 운영할 수 있도록 하는 것입니다.

일반적인 온라인 영상 편집 서비스는 서비스 제공자가 운영하는 서버에 접속하여 사용하는 방식이지만, Video Editor는 프로젝트 소스코드를 내려받아 자신의 서버에 배포할 수 있습니다.

개인적인 용도의 웹 도구로 사용할 수도 있으며, 자체 도메인을 연결하여 외부에서 접근할 수 있는 웹 서비스로 구성할 수도 있습니다.

지원하는 운영 방식

• 개인 호스트: 직접 관리하는 Linux 서버에 설치하여 운영
• 홈서버: 가정이나 개인 네트워크에 구축한 서버에서 실행
• 가상 머신(VM): 가상화 환경에 구성한 Linux VM에 설치
• 자체 도메인: DNS와 리버스 프록시를 설정하여 별도의 서비스 주소로 제공
• HTTPS 서비스: Nginx 등의 리버스 프록시와 TLS 인증서를 이용하여 암호화된 연결 구성

예를 들어 개인 서버에 Video Editor를 설치한 뒤, 자신이 보유한 도메인의 하위 도메인을 연결하여 독립적인 웹 영상 편집 서비스로 제공할 수 있습니다.

도메인 연결과 HTTPS 인증서 설정은 Video Editor에 내장된 자동 도메인 관리 기능이 아니라, 서버 운영자가 자신의 인프라 환경에 맞게 구성하는 방식입니다.

이러한 운영 구조는 개인 프로젝트, 자체 웹 도구 구축, 웹 기반 영상 편집 기술 학습 및 오픈소스 개발 환경 등에 활용할 수 있습니다.

2. 브라우저 기반 영상 편집

Video Editor는 서버에 설치하여 운영하는 애플리케이션이지만, 사용자가 실제로 영상을 편집하는 공간은 웹 브라우저입니다.

브라우저에서 편집할 영상 파일을 선택하면 파일 정보와 미리보기를 확인할 수 있으며, Timeline을 통해 원하는 장면으로 이동하고 편집 구간을 지정할 수 있습니다.

Timeline에는 영상의 썸네일이 표시되며, Playhead를 이동하거나 확대·축소 및 스크롤 기능을 이용하여 편집할 구간을 탐색할 수 있습니다.

복잡한 전문 영상 편집 프로그램의 모든 기능을 구현하기보다는, 일상적인 영상 편집에 필요한 기본 작업을 웹 환경에서 수행할 수 있도록 구성했습니다.

주요 영상 편집 기능

Trim — 원하는 영상 구간 추출

영상의 시작 시간과 종료 시간을 지정하여 필요한 부분만 남길 수 있습니다.

Remove Segments — 불필요한 구간 제거

영상 중간에 포함된 불필요한 구간을 지정하여 결과물에서 제외할 수 있습니다.

Crop — 화면 영역 자르기

영상 화면에서 원하는 영역을 선택하여 출력할 수 있습니다.

Scale — 출력 해상도 변경

영상의 가로·세로 해상도를 조정할 수 있습니다.

Output Settings — 출력 형식 설정

지원하는 출력 컨테이너와 비트레이트를 설정할 수 있습니다.

3. Timeline 기반의 직관적인 편집

Video Editor는 Canvas API를 활용한 Timeline 인터페이스를 제공합니다.

영상 파일을 선택하면 Timeline에 썸네일이 표시되며, 사용자는 영상의 전체 흐름을 시각적으로 확인하면서 편집할 수 있습니다.

Timeline 주요 기능

• Thumbnail Timeline: 영상 장면을 썸네일로 표시
• Playhead: 현재 재생 위치 표시
• Seek: 원하는 재생 위치로 이동
• Zoom: Timeline 확대 및 축소
• Scroll: 긴 영상의 Timeline 탐색
• Loop Playback: 지정한 구간의 반복 재생

Timeline을 활용하면 영상의 특정 장면을 찾거나 편집 구간을 지정하는 작업을 보다 편리하게 수행할 수 있습니다.

4. 오디오 처리 및 프레임 캡처

Video Editor는 영상 편집뿐 아니라 기본적인 오디오 처리와 이미지 추출 기능도 제공합니다.

오디오 처리

Keep Audio

원본 영상에 포함된 오디오를 유지합니다.

Mute Audio

출력 영상에서 오디오를 제거합니다.

Extract Audio

영상에 포함된 오디오를 지원하는 오디오 파일 형식으로 추출합니다.

오디오 추출 시 지원되는 형식은 FFmpeg WASM 빌드 및 처리 설정에 따라 달라질 수 있습니다.

Frame Capture

영상의 특정 장면을 PNG 이미지로 저장할 수 있습니다.

영상 속 원하는 순간을 이미지로 추출하여 썸네일이나 참고 자료 등으로 활용할 수 있습니다.

5. 편집 편의 기능

영상 편집 과정에서 반복적인 작업을 줄이고 편집 상태를 관리할 수 있도록 다양한 편의 기능을 제공합니다.

• Undo / Redo: 이전 편집 작업 취소 및 다시 실행
• Keyboard Shortcuts: 지원하는 기능을 키보드로 실행
• Loop Playback: 영상 반복 재생
• Recipe Validation: 편집 설정의 유효성 검증
• Processing Progress: 영상 처리 진행 상태 확인
• Cancel Processing: 지원되는 처리 작업 취소
• Output Preview: 생성된 결과물 미리보기
• Download: 처리된 파일 다운로드
• Presets: 편집 설정 프리셋 활용

또한 사용자 환경에 맞게 한국어와 영어 인터페이스를 선택할 수 있으며, Light 및 Dark 테마를 지원합니다.

기본 편집 화면 외에 간소화된 편집 인터페이스도 제공합니다.

6. FFmpeg WebAssembly — 브라우저 내부에서 영상 처리

Video Editor의 영상 처리에는 FFmpeg WebAssembly(FFmpeg WASM) 기술을 사용합니다.

FFmpeg는 영상과 오디오의 변환 및 처리에 널리 사용되는 오픈소스 멀티미디어 도구이며, WebAssembly를 활용하면 브라우저 환경에서도 관련 처리 기능을 실행할 수 있습니다.

Video Editor는 이러한 기술을 이용하여 사용자가 선택한 원본 영상 파일을 브라우저 내부에서 처리하도록 구성했습니다.

브라우저와 서버의 역할 분리

브라우저에서 수행하는 작업

• 원본 영상 파일 선택 및 읽기
• 영상 미리보기
• Timeline 탐색 및 편집
• FFmpeg WASM을 이용한 영상 처리
• 처리 결과 확인 및 다운로드

서버에서 수행하는 작업

• 편집 설정(Recipe) 검증
• FFmpeg 처리 계획(Plan) 생성
• 프리셋 조회 및 관리
• 웹 애플리케이션과 API 제공

현재 구현에는 원본 영상 파일을 서버로 업로드하여 변환하는 전용 API가 없습니다.

즉, 서버는 영상 편집 애플리케이션을 제공하고 편집 계획을 관리하며, 실제 영상 인코딩과 변환은 사용자의 브라우저에서 수행하는 구조입니다.

다만 이러한 설명은 현재 애플리케이션의 구현을 기준으로 합니다. 실제 데이터 처리 환경은 배포된 서버, 리버스 프록시, 브라우저 확장 프로그램 및 외부 서비스 구성에 따라 달라질 수 있습니다.

7. 기술 스택

Video Editor는 Python 기반 백엔드와 웹 표준 기술을 이용한 프런트엔드로 구성되어 있습니다.

기술 스택 한 줄 요약

Python, FastAPI, Uvicorn, Vanilla JavaScript, HTML5, CSS3, FFmpeg WebAssembly, SQLite, REST API, Canvas API, Web Workers

백엔드

FastAPI는 편집 설정 검증, 처리 계획 생성 및 프리셋 관리 기능을 제공합니다.

Uvicorn을 통해 애플리케이션을 실행하며, 서버 환경에 따라 리버스 프록시와 연동하여 운영할 수 있습니다.

프런트엔드

HTML5, CSS3, Vanilla JavaScript를 기반으로 영상 편집 인터페이스를 구성했습니다.

Canvas API를 활용하여 Timeline과 썸네일을 표시하며, 브라우저의 미디어 기능과 WebAssembly를 이용해 영상 편집 작업을 수행합니다.

데이터베이스

SQLite는 애플리케이션의 프리셋 데이터를 관리하는 용도로 사용합니다.

원본 영상 파일을 저장하는 서버 측 미디어 라이브러리 용도로 사용하는 구조는 아닙니다.

8. Video Editor 사용 방법

Video Editor는 공개된 웹 데모에서 직접 사용하거나 개인 서버에 설치하여 이용할 수 있습니다.

웹 데모

https://vedit.glitter.kr/t/app

Step 1. 영상 파일 선택

웹 브라우저에서 Video Editor를 실행하고 편집할 영상 파일을 선택합니다.

선택한 파일의 메타데이터와 미리보기를 확인할 수 있습니다.

Step 2. Timeline 확인

영상의 썸네일이 표시된 Timeline을 이용하여 원하는 장면을 찾습니다.

Playhead 이동, Seek, Zoom 및 Scroll 기능을 활용할 수 있습니다.

Step 3. 편집 옵션 설정

필요한 편집 작업을 선택합니다.

• Trim으로 원하는 영상 구간 추출
• Remove Segments로 불필요한 구간 제거
• Crop으로 화면 영역 조정
• Scale로 출력 해상도 변경
• 오디오 유지, 음소거 또는 추출
• 출력 형식 및 비트레이트 설정

프레임 캡처가 필요한 경우 해당 기능을 이용하여 원하는 장면을 PNG 이미지로 저장할 수 있습니다.

Step 4. 편집 설정 검증

Validate 기능을 실행하여 편집 설정의 유효성을 확인합니다.

이 단계에서는 입력값과 처리 계획의 제약 조건을 검사합니다.

검증에 성공하더라도 모든 브라우저와 코덱 환경에서 실제 인코딩 성공이 보장되는 것은 아닙니다.

Step 5. 영상 처리 실행

Run 기능을 실행하면 FFmpeg WASM을 이용하여 브라우저 내부에서 영상 처리 작업이 진행됩니다.

처리 중에는 진행 상태를 확인할 수 있으며, 지원되는 상황에서는 작업을 취소할 수 있습니다.

Step 6. 결과 확인 및 다운로드

처리가 완료되면 결과물을 확인하고 파일로 다운로드할 수 있습니다.

다만 생성된 파일의 코덱이나 컨테이너에 따라 브라우저에서 직접 미리보기가 지원되지 않을 수 있습니다.

9. 개인 서버 및 VM 설치

Video Editor는 GitHub에서 소스코드를 내려받아 개인 Linux 서버나 가상 머신(VM)에 직접 설치할 수 있습니다.

기본 요구 환경

• Python 3.11 이상
• Python 가상 환경을 생성할 수 있는 실행 환경
• 프로젝트에 정의된 Python 의존성
• SQLite를 지원하는 Python 환경
• JavaScript, WebAssembly, Web Workers 및 HTML5 미디어 API를 지원하는 브라우저

소스코드 가져오기

git clone https://github.com/glitter-node/video-editor.git
cd video-editor

Python 가상 환경 생성

python3 -m venv venv

의존성 설치

venv/bin/python -m pip install -r requirements.txt

환경 설정

필요한 경우 제공되는 환경 설정 예시 파일을 복사하여 사용할 수 있습니다.

cp .env.example .env

운영 환경에 따라 애플리케이션 실행 주소, 포트, 데이터베이스 위치, 허용 호스트 및 CORS 설정 등을 검토해야 합니다.

개발 서버 실행

./tools/dev-server.sh

기본 개발 환경에서 다음 주소로 편집 화면에 접근할 수 있습니다.

http://127.0.0.1:8011/t/app

위 실행 방법은 개발 환경 예시입니다.

실제 외부 공개 서비스를 운영하려면 별도의 프로세스 관리자와 HTTPS 리버스 프록시 등을 사용하는 것이 좋습니다.

프로젝트에는 systemd 서비스 구성 예시도 포함되어 있습니다.

10. 자체 도메인을 연결한 웹 서비스 운영

개인 서버 또는 VM에 설치한 Video Editor는 자체 도메인을 연결하여 운영할 수 있습니다.

예를 들어 다음과 같은 형태의 서비스 구성이 가능합니다.

User Browser
     |
     | HTTPS
     v
Custom Domain
     |
     v
Nginx Reverse Proxy
     |
     v
FastAPI / Uvicorn
     |
     +-- Recipe Validation
     +-- FFmpeg Plan API
     +-- Preset Management
     +-- Web Application

실제 영상 편집과 FFmpeg WASM 처리 작업은 사용자의 브라우저에서 실행됩니다.

자체 도메인 운영 시 고려 사항

DNS 설정

도메인이 Video Editor를 제공하는 서버를 가리키도록 DNS 레코드를 구성합니다.

HTTPS 설정

TLS 인증서를 적용하여 브라우저와 서버 간 통신을 암호화합니다.

리버스 프록시

Nginx 등의 리버스 프록시를 통해 FastAPI 애플리케이션으로 요청을 전달합니다.

접근 및 보안 정책

외부에 공개하는 경우 허용 호스트, CORS, 방화벽, 파일 접근 권한 및 서버 보안 설정을 검토해야 합니다.

FFmpeg WASM 리소스

브라우저가 영상 처리에 필요한 WebAssembly 및 관련 리소스를 정상적으로 불러올 수 있어야 합니다.

Video Editor는 자체 도메인 운영을 위한 웹 애플리케이션이지만, DNS 관리나 TLS 인증서 발급을 자동으로 수행하는 통합 호스팅 관리 시스템은 아닙니다.

이러한 인프라 구성은 서버 운영자가 직접 관리합니다.

11. 브라우저 및 영상 처리 관련 제한 사항

Video Editor는 브라우저 내부에서 영상 처리를 수행하기 때문에 일반적인 서버 측 영상 변환 프로그램과 다른 제약이 있습니다.

브라우저 호환성

JavaScript, WebAssembly, Web Workers 및 HTML5 미디어 기능을 지원하는 브라우저가 필요합니다.

모든 브라우저와 운영체제 조합에서의 호환성이 검증된 것은 아닙니다.

메모리 사용량

대용량 파일이나 고해상도 영상은 브라우저와 사용 기기의 메모리 제한으로 처리가 어려울 수 있습니다.

영상 처리 속도

처리 속도는 원본 영상의 길이, 해상도, 코덱, 편집 옵션 및 기기 성능에 따라 달라집니다.

출력 파일 호환성

FFmpeg WASM을 통해 파일 생성에 성공하더라도 해당 코덱이나 컨테이너를 브라우저에서 재생하지 못할 수 있습니다.

편집 상태 복원

페이지 새로고침 이후 저장하지 않은 편집 상태의 자동 복원은 보장되지 않습니다.

API 입력 제한

현재 편집 설정 모델에는 다음과 같은 검증 한도가 정의되어 있습니다.

• 영상 길이: 최대 24시간
• 해상도: 가로 또는 세로 최대 16,384픽셀
• 제거 구간: 최대 200개

이는 API 입력값에 대한 검증 제한이며, 해당 크기와 길이의 영상이 모든 브라우저에서 정상 처리된다는 의미는 아닙니다.

처음 사용하는 경우 비교적 짧고 용량이 작은 영상으로 편집 및 출력 기능을 확인하는 것을 권장합니다.

12. 오픈소스 공개 및 라이선스

Video Editor는 MIT License로 공개된 오픈소스 프로젝트입니다.

GitHub에서 프로젝트 소스코드를 확인하고, 직접 설치하거나 수정 및 확장할 수 있습니다.

다만 FFmpeg와 FFmpeg WebAssembly 등 프로젝트에 포함되거나 연동되는 외부 구성 요소에는 각각의 라이선스가 적용될 수 있으므로, 재배포 및 서비스 운영 시 해당 라이선스도 확인해야 합니다.

Video Editor v0.1.0은 첫 번째 공개 릴리스이며, 기본적인 영상 편집 기능과 Self-hosted 운영을 위한 애플리케이션 구조를 제공합니다.

프로젝트 저장소에는 설치 방법, 환경 설정, API 개요, 테스트 및 배포 관련 자료가 포함되어 있습니다.

13. 프로젝트 링크 및 다운로드

웹 데모

Video Editor를 브라우저에서 직접 사용해 볼 수 있습니다.

https://vedit.glitter.kr/t/app

GitHub 저장소

프로젝트 소스코드와 README, 설치 및 운영 관련 정보를 확인할 수 있습니다.

https://github.com/glitter-node/video-editor

v0.1.0 릴리스

첫 번째 공개 버전의 주요 기능과 변경 사항을 확인할 수 있습니다.

https://github.com/glitter-node/video-editor/releases/tag/v0.1.0

v0.1.0 다운로드

TAR.GZ 형식

video-editor-v0.1.0.tar.gz

ZIP 형식

video-editor-v0.1.0.zip

압축 파일은 프로젝트 배포용 소스 아카이브입니다. 별도의 설치 과정 없이 실행되는 데스크톱 프로그램 설치 파일은 아닙니다.

14. 마치며

Video Editor는 개인 호스트나 가상 머신(VM)에서 직접 운영할 수 있는 웹 기반 영상 편집 환경을 구축하기 위해 시작한 오픈소스 프로젝트입니다.

사용자가 직접 관리하는 서버에 설치하여 독립적으로 운영할 수 있으며, 자체 도메인과 HTTPS를 연결하면 웹을 통해 접근할 수 있는 영상 편집 서비스로 활용할 수도 있습니다.

영상 편집 기능은 브라우저에서 제공하고, FFmpeg WebAssembly를 이용하여 실제 영상 처리 작업을 수행하도록 구성했습니다.

Timeline 기반의 구간 편집, 화면 조정, 오디오 처리, 프레임 캡처, 결과물 다운로드 등 기본적인 영상 편집 기능을 하나의 웹 애플리케이션에 담았습니다.

첫 공개 버전인 v0.1.0은 프로젝트의 시작 단계입니다. 브라우저 호환성, 대용량 영상 처리, 편집 기능 및 사용자 경험 등 앞으로 개선하고 확장할 부분도 있습니다.

Video Editor가 개인 서버를 활용하는 사용자와 웹 기반 영상 편집 기술에 관심 있는 개발자들에게 유용한 오픈소스 프로젝트가 되기를 바랍니다.

직접 설치하여 운영하거나, 웹 데모를 사용해 보고, GitHub를 통해 프로젝트를 살펴보실 수 있습니다.

Video Editor v0.1.0

Self-hosted, Open-source, Browser-based Video Editing Platform

Project: Glitter.kr
License: MIT License
Live Demo: https://vedit.glitter.kr/t/app
GitHub: https://github.com/glitter-node/video-editor
Release: https://github.com/glitter-node/video-editor/releases/tag/v0.1.0