키프레임 시스템 및 투명 비디오 내보내기를 지원하는 웹 기반 애니메이션 편집기

우리는 React와 Pixi.js를 사용하여 하드웨어 가속 렌더링을 지원하는 웹 기반 애니메이션 편집기를 구축했습니다. 이 편집기는 30개 이상의 easing 기능을 갖춘 키프레임 엔진과, 전체 VP9 alpha channel을 지원하는 WebM 비디오 내보내기를 위한 FFmpeg 기반 백엔드를 사용합니다.

아키텍처

• 프런트엔드: TypeScript를 사용하는 React, WebGL 가속 캔버스 렌더링을 위한 Pixi.js
• 상태 관리: 중앙 집중식 장면 상태 관리를 위한 Zustand
• 애니메이션 엔진: easing 라이브러리를 갖춘 사용자 정의 키프레임 보간 엔진
• 백엔드: 실시간 프레임 스트리밍을 위한 WebSocket 지원 Express.js
• 비디오 인코딩: alpha channel을 사용한 VP9 WebM 인코딩을 위한 FFmpeg (fluent-ffmpeg 경유)
• 모노레포: 프런트엔드와 백엔드 간에 TypeScript 유형을 공유하는 pnpm workspace

애니메이션 엔진

키프레임 시스템

핵심 애니메이션 엔진은 여러 속성에 걸쳐 키프레임 기반 애니메이션을 지원합니다:

• 위치 — 이동 경로를 위한 X/Y 좌표
• 회전 — 각도 기반 회전 애니메이션
• 색상 — 부드러운 전환을 위한 Hex 색상 보간
• 알파 — 페이드 효과를 위한 불투명도 애니메이션
• 크기 — 너비, 높이, 반지름 스케일링

각 키프레임은 시간(밀리초 단위), 애니메이션 속성의 하위 집합, 그리고 선택된 easing 함수를 저장합니다. 엔진은 어떤 시점에서든 주변 키프레임 사이를 보간하여 적절한 easing 커브를 적용합니다.

이징(Easing) 라이브러리 (30개 이상의 함수)

모든 표준 애니메이션 커브를 포함하는 포괄적인 easing 라이브러리:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (용수철 같은 오버슈트), Back (예상), Bounce
• 각각 ease-in, ease-out, ease-in-out 변형으로 사용 가능

보간

주어진 모든 타임스탬프에 대해 엔진은 다음을 수행합니다:

1. 주변 키프레임(이전 및 이후)을 찾습니다
2. 그 사이의 정규화된 진행률(0에서 1)을 계산합니다
3. 선택된 easing 함수를 진행률 값에 적용합니다
4. 속성 값을 보간합니다 (숫자는 linear, hex 값은 color lerp)
5. 렌더링을 위한 애니메이션 속성의 전체 세트를 반환합니다

캔버스 및 렌더링

객체 유형

• 직사각형 — 너비, 높이, 색상, 알파, 회전 설정 가능
• 원 — 반지름, 색상, 알파, 회전 설정 가능
• 텍스트 — 글꼴 모음, 글꼴 크기, 내용, 색상, 알파 설정 가능

하드웨어 가속 렌더링

• 부드러운 60fps 미리보기 재생을 위한 Pixi.js WebGL 렌더링
• 설정 가능한 캔버스 해상도 (기본 1920x1080, 30fps)
• 조절 가능한 배경 알파를 사용한 투명 배경 지원
• 시각적 강조 표시가 있는 대화형 객체 선택
• 재생, 일시 정지 및 타임라인 스크러빙을 통한 실시간 애니메이션 재생

편집기 인터페이스

툴바

장면에 직사각형, 원, 텍스트를 추가하는 객체 생성 버튼으로, 기본 속성을 즉시 사용자 정의할 수 있습니다.

속성 패널

선택된 객체 속성은 실시간으로 편집 가능합니다: 위치, 크기, 색상, 알파, 회전 및 유형별 속성(텍스트 내용, 글꼴 설정).

타임라인

다음과 같은 시각적 타임라인:

• 객체별 시간 위치에 있는 키프레임 마커
• 스크러빙이 가능한 현재 시간 재생 헤드
• 키프레임별 easing 함수 선택
• 현재 재생 헤드 위치에서 키프레임 추가/제거 컨트롤

비디오 내보내기 파이프라인

프레임 캡처

1. 애니메이션 지속 시간과 FPS가 총 프레임 수를 결정합니다
2. 각 프레임은 전체 해상도로 개별적으로 렌더링됩니다
3. 캔버스 내용은 프레임당 PNG blob으로 캡처됩니다
4. 인코딩 백엔드에 업로드하기 위해 프레임이 수집됩니다

인코딩 백엔드

Express.js 백엔드는 작업 기반 시스템을 통해 비디오 인코딩을 처리합니다:

1. 작업 생성 — 클라이언트가 새로운 내보내기 작업(UUID 기반)을 요청합니다
2. 프레임 업로드 — 프레임은 배치(일괄)로 업로드되거나 WebSocket을 통해 스트리밍됩니다
3. FFmpeg 인코딩 — 프레임은 VP9 코덱을 사용하여 WebM 비디오로 조립됩니다
4. 알파 채널 — 전체 투명도 지원을 위해 yuva420p 픽셀 형식을 사용합니다
5. 진행 상황 추적 — 인코딩 중 실시간 진행 상황 업데이트
6. 다운로드 — 투명도 확인과 함께 완료된 비디오를 다운로드할 수 있습니다

WebSocket 대안

실시간 내보내기를 위해, 프레임은 HTTP 배치 업로드 대신 WebSocket을 통해 직접 스트리밍될 수 있으며, 캡처, 업로드 및 인코딩 단계 전반에 걸쳐 실시간 진행 상황 업데이트가 제공됩니다.

주요 기능

1. 키프레임 애니메이션 — 속성별 키프레임을 사용한 타임라인 기반 애니메이션
2. 30개 이상의 이징(Easing) 함수 — 전문적인 애니메이션 커브를 위한 완벽한 easing 라이브러리
3. 투명 비디오 내보내기 — 전체 alpha channel을 지원하는 VP9 WebM
4. 하드웨어 가속 캔버스 — 부드러운 실시간 미리보기를 위한 Pixi.js WebGL 렌더링
5. 다양한 객체 유형 — 독립적인 애니메이션을 가진 직사각형, 원, 텍스트
6. 실시간 미리보기 — 애니메이션을 즉시 재생, 일시 정지 및 스크러빙
7. 배치 및 스트리밍 내보내기 — HTTP 배치 업로드 또는 WebSocket 실시간 프레임 스트리밍
8. 설정 가능한 출력 — 내보내기를 위한 해상도, FPS, bitrate 설정
9. 타입 세이프 모노레포 — 프런트엔드와 백엔드 간에 공유되는 TypeScript 유형
10. 사용자 정의 배경 — 이미지/비디오 지원과 함께 조절 가능한 배경색 및 알파