FE 고인물이 동영상을 만드는 법

remotion과 Clova Voice를 사용하여 동영상을 만드는 템플릿을 만들어 봅니다.

2024-09-29

소개

Youtube가 우리의 삷을 지배하다 싶이 하는 지금 자신의 생각과 지식을 동영상이라는 형식으로 전달하는 기술이 점점 중요해 지고 있습니다.

동영상을 만드는 과정을 생각해 보면 대략 다음과 같습니다.

  1. 동영상에 첨가할 사진, 영상, 텍스트를 준비 또는 제작
  2. 스토리에 따라 각 컨텐트를 배치하고 자신의 목소리로 설명하는 영상을 제작
  3. 편집

2번 단계는 사람이 관여하는 일인 만큼 익숙하지 않은 사람들에게는 노력과 시간이 필요한 작업 입니다.

또한 편집 과정에서 2번 단계에서의 결과물에 만족하지 못하거나 수정이 필요한 경우 지리한 녹화/편집 과정을 반복해야 합니다.

이러한 pain point를 극복하고자 Descript와 같은 서비스는 2번 과정의 녹화 결과물로 부터 텍스트를 추출해 내고 그 텍스트를 단지 수정하는 것 만으로 자신의 음성을 수정할 수 있도록 해 줍니다.

좀 아이러니하지만, 동영상 컨텐츠의 주 재료는 음성입니다.

정확히는 나레이션이죠. 이야기하는 과정에서 각 스토리에 몰입하거나 이해에 도움이되는 화면, 영상들을 적절하게 배치함으로서 시청자들은 지루함 없이 전달하고자 하는 메시지를 받아들이게 됩니다.

이점을 착안한다면 TTS 즉 text to speech 기술을 사용하여 나레이션을 구성하고 이미지, 동영상, 텍스트 같은 부재료들을 적절히 섞음으로서 동영상 제작의 노력과 시간을 줄일 수 있다는 결론에 이릅니다.

Remotion | Make videos programmatically

프로그래머는 항상 세상을 어떻게 소프트웨어로 집어 삼켜 먹어버릴까라는 관점을 가진 동물입니다.

Why Software Is Eating the World | Andreessen Horowitz

그 중 FE 프로그래머는 세상을 어떻게 web 기술과 js/ts로 집어 삼켜 먹어버릴까라는 고민을 합니다. 저 역시 예외가 아니고. Remotion을 만든 개발자 역시 같은 마음일 것입니다.

특별히 tts를 연동하는 샘플을 다음과 같이 찾아 볼 수 있습니다.

각 템플릿에서 확인해 볼 수 있는 것 처럼 개인의 육성을 녹음하거나 말하는 동영상을 녹화하여 합성하지 않고 TTS를 사용하여 나레이션을 전개하고 필요한 컨텐츠를 표시합니다.

Azure의 경우 자신의 목소리를 녹화하여 tts 음성으로 사용할 수 있는 기능도 제공하고 있습니다.

Azure tts 템플릿은 object storage로 AWS S3를 사용하고 있습니다. 비디오를 렌더링할 때 tts 오디오 파일을 받아오고 S3에 업로드한 뒤 audio tag를 사용하여 duration을 측정하는 기법을 사용하고 있습니다.

CLOVA Voice - AI Services - NAVER Cloud Platform 네이버 클라우드 플랫폼

Clova voice는 네이버 클라우드에서 제공하는 tts 서비스 입니다.

90,000원이라는 요금은 글로벌 클라우드 업체에 비교해서 그다지 매력적인 가격은 아닙니다.

하지만, 개인이아니고 업무용으로 사내에서 동영상 제작에 사용하는 것이라면 충분히 감당할 만한 비용이라 생각합니다.

물론 TTS의 퀄리티 측면에서도 좋고 이미 다양한 산업 분야 직/간접 적으로 노출된 솔루션이라 그런지 음성도 낮설지 않습니다.

저는 마침 NBP 무료 크레딧이 생겨서 remotion의 tts 템플릿을 수정하여 Clova voice와 NBP의 object storage를 이용한 동영상 제작 템플릿을 만들어 보았습니다.

remotion-template-ncloud

Azure tts 템플릿을 참고하여 Speech 서비스 대신 Clova voice를 S3대신 NBP object storage를 적용해 보았습니다.

기본 예제는 tts 문장하나만을 사용하여 동영상을 만들지만 발표 자료를 손쉽게 만들수 있는 프레임워크를 구성해 넣었습니다.

예를 들어 아래의 코드의 경우

export const intro: PresentationConfig[] = [
  {
    duration: {
      caption:
        '안녕하세요. NAVER Cloud Platform을 활용한 Remotion TTS 예제를 소개합니다.',
    },
    Component: () => (
      <AbsoluteFill
        className="bg-gray-100 items-center justify-center"
        css={{
          /* made at https://learnui.design/tools/gradient-generator.html */
          background: `radial-gradient(circle at 100% 0%, #a0d9f2, #8dded2, #9ddda7, #c0d57f, #e3c978, #fcbb9e, #ffb0d2, #f7b0ff)`,
        }}
      >
        <div className="text-6xl">Remotion with NAVER Cloud Platform</div>
      </AbsoluteFill>
    ),
  },
];

duration.caption 값으로 tts를 생성하고 해당 tts를 재생하는 동안 표시할 화면을 Component에 구성해 줍니다.

다음은 remotion-template-ncloud 템플릿으로 생성한 비디오 입니다.

마치며

간단하게 만들어본 remotion template를 공유해 보았습니다.

TTS를 활용하면 동영상을 제작하면 시간과 노력을 대폭 줄일 수 있습니다. 실수와 시행 착오가 불가피한 녹화와 편집 과정 대신에 스토리와 나라이션에 집중한 컨텐츠를 손쉽게 수정하며면서 만들 수 있습니다. 자신의 목소리로 TTS를 생성할 수 있는 서비스와 접목한다면 더욱 좋을 것 입니다.

가장 무시할 수 없는 것은 web 기반의 확장성입니다. FE 개발자라면 gsap, three.js 등을 활용하여 화려하고 재사용 가능한 컴포넌트 기반의 영상 제작을 통해 남들과 차별화한 컨텐츠를 궁극의 생산성으로 만들어 낼 수 있겠죠.

Loading script...