React 기반 동영상 생성 오픈 소스 Remotion 리뷰

React 기반의 프로그램으로 동영상을 생성할 수 있는 오픈 소스인 remotion의 사용방법을 알아 봅니다.

2024-02-25

소개

Remotion은 React를 사용하여 동영상을 프로그래밍 방식으로 만들 수 있는 프레임워크 입니다.

Creating a new project | Remotion | Make videos programmatically in React

가이드

<Composition /> 컴포넌트를 사용하여 비디오 클립을 구성합니다.

fps는 30정도로 사용하고 초당 30개의 프래임으로 화면을 업데이트 함을 말합니다. fps가 30이면, 초당 30개의 화면 갱신을 한다는 의미 입니다. 이 프레임은 remotion에서 렌더링에 사용하는 시계와도 같습니다. 프레임 값을 기준으로 Animation과 컴포넌트의 생명 주기를 결정 합니다.

durationInFrames는 해당 비디오 클립을 얼마만큼 재생하는지 설정합니다.

Web 기술 기반으로 작성할 수 있다하더라도 문서를 렌더링하는 방식으로 컨텐트를 구성하기 위해서는 레이아웃에 대한 고민과 코딩이 필요합니다. 이러한 노력을 줄이고자 컨텐트 작성에 필요한 유틸리티 컴포넌트를 제공합니다.

AbsoluteFill은 web document flow를 따르지 않는 display: absolute 스타일을 적용한 <div> 엘리먼트를 말합니다. <Composition /> 컴포넌트에 명시한 width, height 값을 기준으로 화면을 꽉 채운 영역을 제공합니다. 일반 비디오 작성 프로그램의 layer와 같은 역할로 활용합니다.

<Sequence/> 컴포넌트는 from과 durationInFrames 값을 바탕으로 하위 컴포넌트의 생명주기를 제어합니다.

예제 분석: TTS

FelippeChemello/Remotion-TTS-Example

Remotion을 활용하는 흥미로운 예제 중 하나는 비디오 생성에 TTS를 사용하는 것 입니다. 편집에 용이한 텍스트를 사용함으로서 손쉽게 동영상에 음성 편집이 가능합니다.

예제에서는 Azure TTS 서비스에서 생성한 음성 파일을 AWS S3에 업로드한 후에 <Audio/> 컴포넌트를 사용하여 비디오 생성에 활용합니다. 따라서, 예제 실행을 위해서는 Azure Text to Speech 서비스를 등록하고 AWS S3 버킷을 생성해 주어야 합니다. 이후 예제의 루트 폴더에 있는 .env.example 파일에서 각 서비스 정보와 credential 정보를 설정합니다.

앞서 살펴 보았듯이 remotion으로 비디오를 생성하려면, durationInFrame 값을 미리 설정해 주어야 합니다. 미리 준비가 가능한 video, audio 컨텐트로 비디오를 생성하는 경우, 각 컨텐트의 duration을 알 수 있기 때문에 durationInFrame 값을 미리 계산할 수 있습니다. 따라서 TTS를 사용할 경우, 미리 오디오를 생성해서 durationInFrame 값을 결정해 주어야 합니다. 다만 이렇게 할 경우, 변경한 텍스트의 오디오를 동적으로 비디오와 합성하는 작업이 번거롭습니다. 사용자는 텍스트 입력에 따라 변경하는 오디오 클립의 duration을 동적으로 durationInFrame 값에 반영하여 비디오 컨텐트를 제작하고 싶어할 것 입니다. 이러한 문제를 해소하기 위해 remotion v.4 부터 동적으로 초기 파라미터를 변경할 수 있는 새로운 API를 지원합니다.

Variable duration and dimensions | Remotion | Make videos programmatically in React

calculateMetadata prop을 사용하여 durationInFrame, width, height와 같은 초기 파라미터를 동적으로 지정해 줄 수 있습니다. 다음은 예제에서 구현한 calculateMetadata 처리 과정을 보여주는 시퀀스 다이어그램 입니다.

TTS의 입력 문장(text)과 화자(Voice) 값을 조합하여 md5 키를 생성하여 TTS 컨텐트 구분자로 사용합니다.

  1. TTS 컨텐트 구분자를 기준으로 AWS S3 버킷에 음성 파일이 존재하는지 확인합니다.
  2. 존재하지 않는 경우 Azure의 TTS API를 사용하여 음성 바이너리를 응답으로 받습니다.
  3. 음성 바이너리를 AWS S3 버킷에 TTS 컨텐트 구분자를 이름으로 한 파일을 생성합니다.
  4. TTS 컨텐트 구분자로 파일이름을 가지는 S3 파일 URL을 확보합니다.
  5. getAudioDurationInSeconds 함수는 <audio> 엘리먼트를 생성하고 src 속성에 S3 파일 URL을 대입하여 로딩한 결과로 부터 duration을 알아냅니다.

마치며

간단하게 remotion을 소개하고 tts 기능을 활용한 예제를 분석해 보았습니다.

비디오 컨텐츠가 대세를 이루고 있는 요즘 Web 기술을 활용하여 programmable하게 비디오를 생성하는 remotion은 개발자의 상상력을 자극할만한 솔루션 입니다. 최근 Azure에서는 Speech service 중 하나로 Personal voice 기능을 preview로 공개했습니다.

참조: 개인적인 음성이란? - Azure AI services | Microsoft Learn

이 기능을 remotion과 접목할 경우 programable한 비디오 컨텐트에 개인의 음성을 텍스트로 손쉽게 편집할 수 있을 겁니다.

이 분야에서 다양한 변화와 발전을 기대해 봅니다.

Loading script...