비디오 광고는 클립, 자막 타이밍, 텍스트 레이어, 스타일, 애니메이션, 화면 비율 및 행동 유도를 결합한 것입니다. 창작자는 이러한 선택을 즉시 확인해야 하며, 최종 출력물도 일치해야 합니다.
그래서 우리는 Remotion을 사용합니다. React 기반의 구성은 편집 가능한 미리보기를 가능하게 하고, 렌더링된 비디오에 동일한 시각적 규칙을 제공합니다. 우리는 창작물을 한 번 정의하고 두 경험을 일치시킵니다.
도전 과제: 미리보기와 출력물이 종종 일치하지 않음
창작 도구는 일반적으로 좌절감을 주는 문제에 직면합니다: 편집기 미리보기는 올바르게 보이지만, 출력된 파일은 그렇지 않습니다. 텍스트 위치가 이동하거나, 글꼴이 다르게 감싸지거나, 자막이 잘못된 시점에 나타나거나, 클립 시퀀스가 출력 후 다르게 재생될 수 있습니다.
사용자가 세그먼트를 혼합하고, 자막 스타일을 선택하고, 후크/본문/CTA 텍스트를 추가하고, 출력 화면 비율을 변경할 때 문제가 커집니다. 각 표면이 이러한 설정을 독립적으로 해석하면 작은 차이가 누적됩니다.
Adstacker는 즉각적인 미리보기와 확장 가능한 렌더링이 필요합니다. 구성은 편집에 유연하고, 제작에서 예측 가능해야 합니다.
미리보기와 렌더링을 위한 하나의 공유 구성
우리의 중심 구성 요소는 공유된 Remotion VideoTemplate입니다. 이는 다음을 수용합니다:
- 하나의 비디오 또는 비디오 세그먼트 시퀀스
- 총 지속 시간과 프레임 속도
- 선택한 화면 비율에 대한 목표 캔버스 크기
- 타이밍된 텍스트, CTA, 자막 레이어
- 각 레이어의 스타일링 및 애니메이션 설정
Remotion의 Series는 세그먼트를 하나의 타임라인으로 연결합니다. Sequence는 특정 프레임에 텍스트와 자막 레이어를 배치합니다. 따라서 변형은 데이터이며, 일회성 편집 파일이 아닙니다.
아키텍처
프론트엔드와 렌더링 경로는 템플릿, 글꼴, 자막 스타일 맵, 레이어 유형을 공유합니다. 스타일은 브라우저와 완성된 광고에서 동일한 의미를 가집니다.
Remotion Player를 사용한 실시간 미리보기
Remotion Player는 대화형 미리보기 캔버스를 제공합니다. 창작자가 후크, 본문, CTA, 자막 스타일 또는 화면 비율을 변경하면, 우리는 새 파일을 생성하는 대신 업데이트된 props를 템플릿에 전달합니다.
미리보기는 실제 구성을 사용하며, 정적 근사치가 아닙니다. 이는 순차적인 클립, 타이밍된 자막, 애니메이션된 텍스트, 선택된 캔버스 크기를 함께 보여주며, 익숙한 재생 컨트롤을 제공합니다.
텍스트 편집의 경우, 미리보기는 활성 구성 레이어를 일시적으로 숨기고 캔버스 상의 편집기가 상호작용을 처리합니다. 저장된 위치는 별도의 시각적 모델을 생성하지 않고 해당 Remotion 레이어로 다시 흐릅니다.
프레임에 맞춰 타이밍된 동적 레이어
Remotion은 프레임 기반 타임라인을 제공하여, 모든 레이어는 시작 프레임과 지속 시간을 가지며, 불명확한 시각적 추측이 아닙니다.
타이밍된 자막 단어는 짧은 덩어리로 그룹화되어 구성에 도달하기 전에 프레임으로 변환됩니다. 각 후크, 본문 또는 CTA는 마찬가지로 정의된 시간 창, 스타일, 애니메이션 및 위치를 가집니다. 템플릿은 현재 프레임에 대한 레이어만 렌더링합니다.
이로 인해 새로운 변형은 데이터 변경이 됩니다: Adstacker는 동일한 구성 요소에 다른 레이어 사양을 제공합니다 - 이는 우리의 비디오 기술 엔지니어링 팀이 클라이언트 미디어 파이프라인 전반에 걸쳐 적용하는 구성 가능하고 템플릿 기반 접근 방식입니다.
신뢰할 수 있는 렌더링 출력을 위한 설계
브라우저 미리보기와 렌더링 작업자는 비디오를 정확히 동일한 방식으로 디코딩하지 않습니다. 우리의 템플릿은 렌더링 모드에 있는지 확인합니다: 브라우저에서는 Remotion의 Video 구성 요소를 사용하여 Player가 소스 오디오를 재생할 수 있도록 하고, 렌더링 시에는 OffthreadVideo를 사용하여 서버 측 프레임 추출에 더 적합합니다.
우리는 또한 두 컨텍스트 간에 글꼴과 스타일 맵을 공유합니다. 이는 자막 감싸기, 텍스트 크기 조정 및 애니메이션 동작을 일관되게 유지합니다. 화면 비율 캔버스와 클램프된 오버레이는 레이어가 가장자리 너머로 사라지는 것을 방지합니다.
실제 사례: 모든 광고를 다시 빌드하지 않고 승리하는 후크 테스트
하나의 제품 시연과 두 개의 행동 유도를 가진 브랜드가 세 개의 시작 후크와 두 개의 자막 스타일을 테스트한다고 상상해보세요. 창작자는 시퀀스, 자막 및 애니메이션 텍스트를 포함한 조합을 최종 비율로 미리볼 수 있습니다.
팀이 후크 복사본을 변경하거나 CTA를 이동하면 레이어 데이터가 업데이트됩니다. 별도의 미리보기 디자인을 재생성할 필요가 없으며, 렌더링 파이프라인은 동일한 템플릿 규칙을 사용하여 출력을 생성합니다.
마케터는 비디오를 세련되게 만드는 세부 사항을 제어하면서 더 많은 아이디어를 테스트할 수 있습니다.
자신감을 가지고 빌드, 미리보기 및 렌더링
Remotion은 Adstacker가 비디오 광고를 동적이고 재사용 가능한 구성으로 취급하도록 도와줍니다. 동일한 템플릿이 브라우저 탐색과 예측 가능한 출력을 지원하며, 프레임 인식 레이어는 자막, 텍스트 및 클립을 동기화 상태로 유지합니다.
Adstacker에서 다음 후크, 자막 및 CTA 세트를 생성하고, 빌드하면서 조합을 미리보고, 테스트할 준비가 된 변형을 내보내세요.
우리는 이 동일한 미리보기-출력 일치 원칙을 다른 AI 비디오 플랫폼 빌드에 적용했으며, 여기에는 Ssemble’s 단편 편집 도구와 VideoCap의 AI 구동 생성 파이프라인이 포함되어 있으며, 이는 우리의 클라우드 인프라 서비스를 통해 관리되는 렌더링 인프라에 확장됩니다.
기술 스택: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
우리 팀의 다른 글 읽기
1. Export Service vs. Video Editor Pipeline
