Rendervid 컴포넌트 - 레이어 타입, React 컴포넌트 & 비주얼 에디터
모든 Rendervid 컴포넌트 살펴보기: 8가지 내장 레이어 타입(텍스트, 이미지, 비디오, 셰이프, 오디오, 그룹, 로티, 커스텀), 사전 구축된 React 컴포넌트, 비주얼 템플릿 에디터 및 비디오 플레이어. 완전한 React 지원으로 커스텀 컴포넌트를 만드세요....
13 분 읽기
Rendervid
Components
+3
Rendervid는 선언적 JSON 기반 템플릿 시스템을 중심으로 구축된 프로그래매틱 비디오 렌더링 엔진입니다. 타임라인에서 수동으로 비디오를 편집하는 대신, 비디오의 모든 측면(장면, 레이어, 애니메이션, 전환 및 출력 설정)을 단일 JSON 문서에 정의합니다. 이러한 접근 방식은 템플릿을 무상태, 버전 제어 가능, 기계 생성 가능하게 만들어 AI 기반 비디오 제작, 배치 렌더링 파이프라인 및 완전 자동화된 콘텐츠 워크플로우의 문을 엽니다.
이 가이드는 Rendervid 템플릿 시스템을 처음부터 끝까지 다룹니다: 루트 레벨 구성, 출력 설정, 변수 및 입력 시스템, 장면 및 컴포지션, 8가지 레이어 타입, 40개 이상의 애니메이션 프리셋, 30개 이상의 이징 함수, 17가지 장면 전환, 시각 효과, 폰트 구성 및 출력 형식.
템플릿 구조 개요
모든 Rendervid 템플릿은 잘 정의된 루트 레벨 필드 세트를 가진 JSON 객체입니다. 다음은 완전한 템플릿의 골격입니다:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
루트 레벨 필드
| 필드 | 타입 | 필수 | 설명 |
|---|---|---|---|
name | string | 예 | 사람이 읽을 수 있는 템플릿 식별자 |
output | object | 예 | 비디오 또는 이미지 출력 구성(크기, fps, 지속 시간, 형식) |
inputs | array | 아니오 | 템플릿 변수에 대한 동적 입력 정의 |
composition | object | 예 | 모든 시각적 콘텐츠를 정의하는 scenes 배열 포함 |
fonts | object | 아니오 | Google Fonts 및 커스텀 폰트 선언 |
customComponents | object | 아니오 | 등록된 커스텀 레이어 컴포넌트 |
defaults | object | 아니오 | 재정의되지 않는 한 모든 레이어에 적용되는 기본값 |
name 필드는 조직적 목적을 위한 것이며 렌더링에 영향을 주지 않습니다. output 및 composition 필드는 모든 템플릿이 가져야 하는 두 가지 기둥입니다. 나머지는 선택 사항이지만 강력한 기능을 제공합니다.
출력 구성
output 객체는 최종 렌더링된 파일을 제어합니다: 형식, 크기, 프레임 레이트, 지속 시간 및 배경색.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
출력 필드
| 필드 | 타입 | 기본값 | 설명 |
|---|---|---|---|
type | string | "video" | 출력 타입: "video" 또는 "image" |
width | number | 1920 | 픽셀 단위 너비(8K의 경우 최대 7680) |
height | number | 1080 | 픽셀 단위 높이(8K의 경우 최대 4320) |
fps | number | 30 | 초당 프레임 수(1-120) |
duration | number | – | 초 단위 총 지속 시간 |
backgroundColor | string | "#000000" | hex, RGB 또는 명명된 색상으로 표현된 배경색 |
일반 프리셋
다음은 인기 있는 형식에 대한 출력 구성입니다:
1080p Full HD (YouTube, 일반 목적):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 세로):
{
"type": "video",
"width": 1080,
"height": 1920,
"fps": 30,
"duration": 30,
"backgroundColor": "#FFFFFF"
}
4K UHD:
{
"type": "video",
"width": 3840,
"height": 2160,
"fps": 60,
"duration": 120,
"backgroundColor": "#000000"
}
Open Graph / 소셜 공유 이미지:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
이미지 출력의 경우 fps 및 duration은 무시되며 렌더러는 단일 프레임을 캡처합니다.
템플릿 변수 및 입력
입력 및 변수 시스템은 Rendervid 템플릿을 재사용 가능하게 만드는 요소입니다. 텍스트, 색상 또는 URL을 템플릿에 하드코딩하는 대신, 입력을 정의하고 템플릿의 어디에서나 {{variableName}} 구문을 사용하여 참조합니다.
입력 정의
입력은 최상위 inputs 배열에 선언됩니다. 각 입력 객체는 단일 변수를 설명합니다:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "제목",
"description": "인트로 장면에 표시되는 메인 타이틀 텍스트",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "브랜드 색상",
"description": "배경 및 액센트에 사용되는 주요 브랜드 색상",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "자막 표시",
"description": "자막 가시성 토글",
"required": false,
"default": true
}
]
}
입력 필드 참조
| 필드 | 타입 | 필수 | 설명 |
|---|---|---|---|
key | string | 예 | {{key}} 참조에 사용되는 고유 식별자 |
type | string | 예 | 데이터 타입: string, number, boolean, color, url, array |
label | string | 아니오 | UI 렌더링을 위한 사람이 읽을 수 있는 레이블 |
description | string | 아니오 | 이 입력이 제어하는 내용에 대한 설명 |
required | boolean | 아니오 | 렌더링 시점에 입력이 제공되어야 하는지 여부 |
default | any | 아니오 | 입력이 제공되지 않은 경우 폴백 값 |
입력 타입
string– 자유 형식 텍스트. 제목, 설명, 캡션 또는 모든 텍스트 콘텐츠에 사용합니다.number– 숫자 값. 지속 시간, 크기, 위치, 불투명도 레벨 또는 개수에 사용합니다.boolean– True/false 토글. 조건부 가시성, 기능 플래그 또는 on/off 스위치에 사용합니다.color– hex(#FF5733), RGB(rgb(255,87,51)) 또는 명명된 형식의 색상 값. 배경, 텍스트 색상 및 액센트에 사용합니다.url– 유효한 URL 문자열. 이미지 소스, 비디오 소스, 링크 및 폰트 URL에 사용합니다.array– 값 목록. 이미지 갤러리, 텍스트 목록, 슬라이드 콘텐츠 또는 모든 반복 데이터에 사용합니다.
템플릿에서 변수 사용
입력이 정의되면 이중 중괄호를 사용하여 템플릿의 어디에서나 참조할 수 있습니다:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
변수는 렌더링 시점에 해결됩니다. Rendervid API 또는 CLI를 호출할 때 실제 값을 전달합니다:
{
"title": "Summer Sale 2026",
"brandColor": "#E63946",
"titleSize": 72
}
전체 입력 예제
다음은 여러 입력 타입이 함께 작동하는 완전한 템플릿입니다:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "제품명",
"description": "홍보되는 제품의 이름",
"required": true,
"default": "Product"
},
{
"key": "price",
"type": "number",
"label": "가격",
"description": "비디오에 표시되는 제품 가격",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "제품 이미지 URL",
"description": "제품 이미지의 URL",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "액센트 색상",
"description": "CTA 버튼 및 하이라이트에 사용되는 색상",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "세일 배지 표시",
"description": "세일 배지 오버레이를 표시할지 여부",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "제품 기능",
"description": "기능 글머리 기호 목록",
"required": false,
"default": ["Feature 1", "Feature 2", "Feature 3"]
}
],
"composition": {
"scenes": [
{
"name": "hero",
"duration": 15,
"layers": [
{
"type": "image",
"src": "{{productImage}}",
"position": { "x": 540, "y": 400 },
"size": { "width": 600, "height": 600 }
},
{
"type": "text",
"text": "{{productName}}",
"style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
"position": { "x": 540, "y": 80 }
},
{
"type": "text",
"text": "${{price}}",
"style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
"position": { "x": 540, "y": 900 }
}
]
}
]
}
}
이 단일 템플릿은 렌더링 시점에 입력 값을 변경하기만 하면 수천 개의 고유한 제품 비디오를 생성할 수 있습니다. 템플릿 수정이 필요하지 않습니다.
장면 및 컴포지션
composition 객체는 비디오 콘텐츠가 있는 곳입니다. scenes 배열을 포함하며, 각 장면은 자체 지속 시간, 레이어 및 전환을 가진 비디오의 별개 세그먼트를 나타냅니다.
{
"composition": {
"scenes": [
{
"name": "intro",
"duration": 5,
"transition": {
"type": "fade",
"duration": 1
},
"layers": [ ... ]
},
{
"name": "main-content",
"duration": 20,
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "left"
},
"layers": [ ... ]
},
{
"name": "outro",
"duration": 5,
"layers": [ ... ]
}
]
}
}
장면 필드
| 필드 | 타입 | 필수 | 설명 |
|---|---|---|---|
name | string | 아니오 | 장면 식별자(가독성 및 디버깅용) |
duration | number | 예 | 초 단위 장면 길이 |
transition | object | 아니오 | 이전 장면에서 이 장면으로 진입할 때의 전환 효과 |
layers | array | 예 | 아래에서 위로 렌더링되는 레이어 객체의 정렬된 배열 |
장면은 순서대로 재생됩니다. 총 비디오 지속 시간은 모든 장면 지속 시간의 합계입니다(전환 겹침을 뺀). 장면 내의 레이어는 배열 순서대로 렌더링됩니다. 첫 번째 레이어는 시각적 스택의 맨 아래에 있고 마지막 레이어는 맨 위에 있습니다.
전환이 지정되지 않으면 장면은 기본적으로 하드 cut을 사용합니다.
레이어 시스템
Rendervid는 8가지 고유한 레이어 타입을 지원합니다. 각 레이어 타입은 특정 목적을 제공하며 공유 기본 구성 외에 자체 속성 세트를 허용합니다.
공유 레이어 속성
타입에 관계없이 모든 레이어는 다음 기본 속성을 지원합니다:
{
"position": { "x": 100, "y": 100 },
"size": { "width": 500, "height": 200 },
"rotation": 0,
"scale": { "x": 1, "y": 1 },
"anchor": { "x": 0.5, "y": 0.5 },
"opacity": 1,
"blendMode": "normal",
"from": 0,
"duration": -1,
"filters": [],
"style": {},
"className": ""
}
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
position | object | {x: 0, y: 0} | 픽셀 단위 X/Y 좌표 |
size | object | – | 픽셀 단위 너비 및 높이 |
rotation | number | 0 | 도 단위 회전 각도 |
scale | object | {x: 1, y: 1} | X 및 Y 축의 스케일 배수 |
anchor | object | {x: 0.5, y: 0.5} | 변환을 위한 앵커 포인트(0-1 범위, 0.5 = 중앙) |
opacity | number | 1 | 레이어 불투명도(0 = 투명, 1 = 불투명) |
blendMode | string | "normal" | 합성을 위한 CSS 블렌드 모드 |
from | number | 0 | 초 단위 시작 시간(장면 시작 기준) |
duration | number | -1 | 초 단위 레이어 지속 시간(-1 = 전체 장면 지속 시간) |
filters | array | [] | 시각 필터 객체 배열 |
style | object | {} | 추가 CSS 유사 스타일 속성 |
className | string | "" | 커스텀 스타일링을 위한 CSS 클래스 이름 |
8가지 레이어 타입
text– 폰트, 크기, 색상, 정렬, 줄 높이, 자간, 텍스트 그림자 등을 완전히 제어하여 스타일이 지정된 텍스트를 렌더링합니다. 동적 콘텐츠를 위한{{variable}}구문을 지원합니다.image– URL 또는 로컬 경로에서 정적 이미지를 표시합니다. 자르기, 객체 맞춤 모드, 테두리 반경 및 이미지 필터를 지원합니다.video– 장면 내에 비디오 클립을 삽입합니다. 트리밍(시작/종료), 볼륨 제어, 재생 속도, 루핑 및 음소거를 지원합니다.shape– 기하학적 기본 요소를 렌더링합니다: 직사각형, 원, 타원, 선 및 다각형. 채우기, 획, 테두리 반경, 그라디언트 및 그림자를 지원합니다.audio– 장면에 오디오 트랙을 추가합니다. 볼륨, 페이드 인/아웃, 트리밍 및 루핑을 지원합니다. 오디오 레이어는 시각적 표현이 없습니다.group– 자식 레이어를 보유하는 컨테이너 레이어입니다. 그룹을 사용하면 여러 레이어에 변환, 애니메이션 및 효과를 한 번에 적용할 수 있습니다.lottie– Lottie/Bodymovin JSON 애니메이션을 렌더링합니다. 재생 속도, 루핑 및 특정 프레임 범위 재생을 위한 세그먼트 제어를 지원합니다.custom–customComponents필드에 정의된 등록된 커스텀 컴포넌트를 로드합니다. 재사용 가능한 매개변수화된 레이어 템플릿에 사용합니다.
사용 가능한 모든 속성 및 코드 예제를 포함한 각 레이어 타입의 자세한 구성은 Rendervid 컴포넌트 참조 를 참조하십시오.
애니메이션 시스템
Rendervid는 입장, 퇴장, 강조 및 키프레임의 4가지 카테고리로 구성된 40개 이상의 내장 애니메이션 프리셋을 포함합니다. 애니메이션은 모든 레이어에 첨부되며 해당 레이어가 나타나거나 사라지거나 수명 동안 작동하는 방식을 제어합니다.
애니메이션 구성
{
"type": "text",
"text": "애니메이션 제목",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
애니메이션 필드
| 필드 | 타입 | 기본값 | 설명 |
|---|---|---|---|
type | string | – | 애니메이션 카테고리: entrance, exit, emphasis, keyframe |
effect | string | – | 프리셋 이름(예: fadeInUp, pulse, bounceOut) |
duration | number | 30 | 프레임 단위 지속 시간 |
delay | number | 0 | 애니메이션 시작 전 지연, 프레임 단위 |
easing | string | "ease" | 이징 함수 이름 |
loop | number | 0 | 루프 횟수(0 = 루프 없음, -1 = 무한) |
alternate | boolean | false | 교대 루프에서 방향 반전 |
입장 애니메이션 (20개 프리셋)
입장 애니메이션은 레이어가 화면에 나타나는 방식을 제어합니다. 레이어의 시작 시간에 도달하면 한 번 실행됩니다.
| 프리셋 | 설명 |
|---|---|
fadeIn | 0에서 1로 간단한 불투명도 페이드 |
fadeInUp | 위쪽으로 슬라이딩하면서 페이드 인 |
fadeInDown | 아래쪽으로 슬라이딩하면서 페이드 인 |
fadeInLeft | 왼쪽에서 슬라이딩하면서 페이드 인 |
fadeInRight | 오른쪽에서 슬라이딩하면서 페이드 인 |
slideInUp | 프레임 아래에서 슬라이드 인 |
slideInDown | 프레임 위에서 슬라이드 인 |
slideInLeft | 왼쪽 가장자리에서 슬라이드 인 |
slideInRight | 오른쪽 가장자리에서 슬라이드 인 |
scaleIn | 0에서 전체 크기로 스케일 업 |
zoomIn | 약간의 오버슈트와 함께 더 작은 스케일에서 줌 인 |
rotateIn | 오프셋 각도에서 위치로 회전 |
bounceIn | 탄성 오버슈트와 함께 위치로 바운스 |
flipInX | X축에서 3D 플립(수평 플립) |
flipInY | Y축에서 3D 플립(수직 플립) |
typewriter | 한 번에 하나씩 문자 표시(텍스트 레이어) |
revealLeft | 왼쪽에서 슬라이딩하는 마스크 표시 |
revealRight | 오른쪽에서 슬라이딩하는 마스크 표시 |
revealUp | 위쪽으로 슬라이딩하는 마스크 표시 |
revealDown | 아래쪽으로 슬라이딩하는 마스크 표시 |
퇴장 애니메이션 (9개 프리셋)
퇴장 애니메이션은 레이어가 사라지는 방식을 제어합니다. 레이어의 지속 시간이 끝날 때 실행됩니다.
| 프리셋 | 설명 |
|---|---|
fadeOut | 1에서 0으로 간단한 불투명도 페이드 |
slideOutUp | 프레임 상단을 통해 슬라이드 아웃 |
slideOutDown | 프레임 하단을 통해 슬라이드 아웃 |
scaleOut | 전체 크기에서 0으로 스케일 다운 |
zoomOut | 더 작은 스케일로 줌 아웃하고 페이드 |
rotateOut | 오프셋 각도로 위치에서 회전 아웃 |
bounceOut | 사라지기 전에 탄성 오버슈트와 함께 바깥쪽으로 바운스 |
flipOutX | X축에서 3D 플립 아웃 |
flipOutY | Y축에서 3D 플립 아웃 |
강조 애니메이션 (10개 프리셋)
강조 애니메이션은 레이어가 보이는 동안 주의를 끕니다. 루핑과 잘 작동합니다.
| 프리셋 | 설명 |
|---|---|
pulse | 리드미컬한 스케일 펄스(커지고 작아짐) |
shake | 빠른 수평 흔들림 |
bounce | 수직 바운싱 모션 |
swing | 진자 같은 스윙 회전 |
wobble | 회전과 이동을 결합한 오프 축 워블 |
flash | 빠른 불투명도 플래시 |
rubberBand | 탄성 스트레치 및 스냅 효과 |
heartbeat | 이중 펄스 심장 박동 리듬 |
float | 부드러운 위아래 떠다니는 모션 |
spin | 연속 360도 회전 |
키프레임 애니메이션
완전한 창의적 제어를 위해 키프레임 애니메이션을 사용하면 커스텀 프레임별 속성 변경을 정의할 수 있습니다:
{
"type": "keyframe",
"keyframes": [
{ "frame": 0, "opacity": 0, "x": -100 },
{ "frame": 15, "opacity": 1, "x": 0 },
{ "frame": 30, "opacity": 1, "x": 0 },
{ "frame": 45, "opacity": 0, "x": 100 }
],
"easing": "easeInOutCubic"
}
키프레임 애니메이션은 모든 숫자 속성을 애니메이션할 수 있습니다: opacity, x, y, rotation, scaleX, scaleY 등. 각 키프레임은 프레임 번호와 해당 프레임의 속성 값을 지정합니다. 렌더러는 지정된 이징 함수를 사용하여 키프레임 간을 보간합니다.
애니메이션 결합
단일 레이어는 여러 애니메이션을 가질 수 있습니다. 예를 들어, 입장 애니메이션 다음에 강조 루프, 그 다음 퇴장 애니메이션:
{
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"easing": "easeOutCubic"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 30,
"delay": 20,
"loop": -1
},
{
"type": "exit",
"effect": "fadeOut",
"duration": 15,
"easing": "easeInCubic"
}
]
}
이징 함수
이징 함수는 애니메이션 중 변경 속도를 제어하여 모션이 선형, 부드러움, 바운스 또는 탄성으로 느껴지는지 결정합니다. Rendervid는 30개 이상의 내장 이징 함수를 포함합니다.
기본 이징
| 함수 | 설명 |
|---|---|
linear | 시작부터 끝까지 일정한 속도, 가속 없음 |
ease | 부드러운 가속 및 감속을 가진 기본 CSS 유사 이징 |
easeIn | 느리게 시작하여 끝으로 가속 |
easeOut | 빠르게 시작하여 끝으로 감속 |
easeInOut | 전반부에서 가속, 후반부에서 감속 |
2차 이징
| 함수 | 설명 |
|---|---|
easeInQuad | 2차 가속(t^2) |
easeOutQuad | 2차 감속 |
easeInOutQuad | 2차 가속 후 감속 |
3차 이징
| 함수 | 설명 |
|---|---|
easeInCubic | 3차 가속(t^3) – 2차보다 더 뚜렷함 |
easeOutCubic | 3차 감속 – 부드럽고 자연스러운 느낌의 정지 |
easeInOutCubic | 3차 이즈 인 및 아웃 – 가장 일반적으로 사용되는 이징 |
4차 이징
| 함수 | 설명 |
|---|---|
easeInQuart | 4차 가속(t^4) |
easeOutQuart | 4차 감속 |
easeInOutQuart | 4차 이즈 인 및 아웃 |
5차 이징
| 함수 | 설명 |
|---|---|
easeInQuint | 5차 가속(t^5) – 매우 날카로운 시작 |
easeOutQuint | 5차 감속 – 매우 날카로운 정지 |
easeInOutQuint | 5차 이즈 인 및 아웃 |
정현파 이징
| 함수 | 설명 |
|---|---|
easeInSine | 사인 기반 가속 – 가장 부드러운 이징 곡선 |
easeOutSine | 사인 기반 감속 |
easeInOutSine | 사인 기반 이즈 인 및 아웃 |
지수 이징
| 함수 | 설명 |
|---|---|
easeInExpo | 지수 가속 – 거의 평평한 후 급격함 |
easeOutExpo | 지수 감속 – 급격한 후 거의 평평함 |
easeInOutExpo | 지수 이즈 인 및 아웃 |
원형 이징
| 함수 | 설명 |
|---|---|
easeInCirc | 원형 가속 곡선 |
easeOutCirc | 원형 감속 곡선 |
easeInOutCirc | 원형 이즈 인 및 아웃 |
백 이징
| 함수 | 설명 |
|---|---|
easeInBack | 앞으로 가속하기 전에 약간 뒤로 당김(예상) |
easeOutBack | 목표를 오버슈트한 후 다시 정착(오버슈트) |
easeInOutBack | 진입 시 예상, 퇴장 시 오버슈트 |
탄성 이징
| 함수 | 설명 |
|---|---|
easeInElastic | 가속 시 탄성 워블 – 스프링 같은 와인드업 |
easeOutElastic | 감속 시 탄성 워블 – 스프링 같은 스냅 |
easeInOutElastic | 양쪽 끝에서 탄성 |
바운스 이징
| 함수 | 설명 |
|---|---|
easeInBounce | 진입 시 바운싱 효과 – 역으로 떨어진 공처럼 |
easeOutBounce | 퇴장 시 바운싱 효과 – 땅에 부딪힌 공처럼 |
easeInOutBounce | 양쪽 끝에서 바운싱 |
올바른 이징 선택
- UI 요소 및 텍스트: 자연스러운 느낌의 입장을 위한
easeOutCubic또는easeOutQuart - 주의를 끄는 모션: 재미있는 오버슈트를 위한
easeOutElastic또는easeOutBack - 부드러운 루핑: 부드럽고 연속적인 모션을 위한
easeInOutSine - 극적인 공개: 빌드를 위한
easeInExpo, 스냅 정지를 위한easeOutExpo - 물리 시뮬레이션: 중력 같은 효과를 위한
easeOutBounce
장면 전환
전환은 한 장면이 다음 장면으로 어떻게 흐르는지 제어합니다. Rendervid는 간단한 컷에서 영화적 3D 효과까지 17가지 전환 타입을 제공합니다.
전환 구성
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
transition 객체는 들어오는 장면(전환되는 장면)에 배치됩니다. direction 속성은 slide, wipe, push와 같은 방향성 전환에만 적용됩니다.
모든 17가지 전환 타입
| 전환 | 설명 |
|---|---|
cut | 시각적 효과 없이 즉시 전환(기본값) |
fade | 장면 간 크로스페이드 – 나가는 장면이 페이드 아웃되면서 들어오는 장면이 페이드 인 |
zoom | 들어오는 장면이 나타나는 동안 나가는 장면으로 줌 인 |
slide | 들어오는 장면이 구성 가능한 방향(왼쪽, 오른쪽, 위, 아래)에서 나가는 장면 위로 슬라이드 |
wipe | 하드 에지 와이프가 주어진 방향으로 프레임을 가로질러 이동하면서 들어오는 장면을 드러냄 |
push | 들어오는 장면이 지정된 방향으로 나가는 장면을 화면 밖으로 밀어냄 |
rotate | 나가는 장면이 회전하면서 들어오는 장면이 회전하여 들어옴 |
flip | 3D 플립 전환 – 프레임이 카드처럼 뒤집혀 다음 장면을 드러냄 |
blur | 나가는 장면이 블러 아웃되면서 들어오는 장면이 선명하게 포커스 |
circle | 원형 마스크가 중앙(또는 지정된 지점)에서 확장되어 다음 장면을 드러냄 |
glitch | 색수차 및 변위를 가진 디지털 글리치 왜곡 효과 |
dissolve | 개별 픽셀이 장면 간에 무작위로 전환되는 픽셀 레벨 디졸브 |
cube | 3D 큐브 회전 – 장면이 회전하는 큐브의 인접한 면에 있음 |
swirl | 나가는 장면을 들어오는 장면으로 소용돌이치게 하는 나선형 왜곡 |
diagonal-wipe | 한 모서리에서 반대쪽으로 이동하는 대각선 하드 에지 와이프 |
iris | 카메라 조리개처럼 열리거나 닫히는 원형 아이리스 |
crosszoom | 두 장면이 동시에 줌 – 나가는 장면은 줌 인, 들어오는 장면은 줌 아웃 |
전환 예제
긴 크로스페이드가 있는 영화적 페이드:
{
"transition": {
"type": "fade",
"duration": 2
}
}
오른쪽에서 슬라이드(순차 콘텐츠에 일반적):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D 큐브 회전(역동적이고 현대적인 느낌):
{
"transition": {
"type": "cube",
"duration": 1
}
}
글리치 효과(에너지 넘치고 기술적 느낌):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
시각 효과
Rendervid 레이어는 필터, 블렌드 모드, 그림자 및 변환을 통해 다양한 시각 효과를 지원합니다.
필터
필터는 모든 레이어의 filters 배열을 통해 적용됩니다. 각 필터는 type 및 value가 있는 객체입니다:
{
"filters": [
{ "type": "blur", "value": 5 },
{ "type": "brightness", "value": 1.2 },
{ "type": "contrast", "value": 1.1 },
{ "type": "grayscale", "value": 0.5 },
{ "type": "saturate", "value": 1.5 }
]
}
| 필터 | 값 범위 | 설명 |
|---|---|---|
blur | 0+ (픽셀) | 가우시안 블러 – 값이 높을수록 더 많은 블러 생성 |
brightness | 0+ (배수) | 0 = 검정, 1 = 보통, 2 = 두 배 밝기 |
contrast | 0+ (배수) | 0 = 회색, 1 = 보통, 2 = 두 배 대비 |
grayscale | 0-1 | 0 = 풀 컬러, 1 = 완전히 탈색 |
hue-rotate | 0-360 (도) | 색상환 주위로 색상 회전 |
invert | 0-1 | 0 = 보통, 1 = 완전히 반전된 색상 |
saturate | 0+ (배수) | 0 = 탈색, 1 = 보통, 2 = 두 배 채도 |
sepia | 0-1 | 0 = 보통, 1 = 풀 세피아 톤 |
블렌드 모드
blendMode 속성은 레이어가 아래 레이어와 어떻게 합성되는지 제어합니다:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
지원되는 블렌드 모드: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
그림자
텍스트 및 도형 레이어는 style 속성을 통해 그림자 효과를 지원합니다:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
효과 결합
필터, 블렌드 모드, 불투명도 및 그림자는 모두 단일 레이어에서 결합하여 정교한 시각적 처리를 할 수 있습니다:
{
"type": "image",
"src": "{{backgroundImage}}",
"opacity": 0.7,
"blendMode": "overlay",
"filters": [
{ "type": "blur", "value": 3 },
{ "type": "brightness", "value": 0.8 }
],
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.3)",
"offsetX": 0,
"offsetY": 10,
"blur": 20
}
}
}
폰트 구성
Rendervid는 Google Fonts(100개 이상의 패밀리 내장) 및 외부 URL에서 로드된 커스텀 폰트를 모두 지원합니다.
Google Fonts
fonts.google 배열에서 Google Fonts를 선언합니다:
{
"fonts": {
"google": [
{ "family": "Roboto", "weights": [400, 700] },
{ "family": "Open Sans", "weights": [300, 400, 600, 700] },
{ "family": "Montserrat", "weights": [400, 500, 700, 900] },
{ "family": "Playfair Display", "weights": [400, 700] }
]
}
}
각 폰트 객체는 다음을 요구합니다:
| 필드 | 타입 | 설명 |
|---|---|---|
family | string | Google Font 패밀리 이름(정확한 일치 필요) |
weights | array | 로드할 숫자 두께 배열(100-900) |
일반적인 폰트 두께: 100(Thin), 200(Extra Light), 300(Light), 400(Regular), 500(Medium), 600(Semi Bold), 700(Bold), 800(Extra Bold), 900(Black).
커스텀 폰트
fonts.custom 배열을 사용하여 외부 URL에서 폰트를 로드합니다:
{
"fonts": {
"custom": [
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font.woff2",
"weight": 400,
"style": "normal"
},
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font-bold.woff2",
"weight": 700,
"style": "normal"
}
]
}
}
지원되는 폰트 형식: WOFF2(가장 작은 파일 크기를 위해 권장), WOFF, TTF, OTF.
레이어에서 폰트 사용
텍스트 레이어 스타일에서 패밀리 이름으로 선언된 폰트를 참조합니다:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid는 다양한 환경에서 일관된 렌더링을 보장하기 위해 플랫폼별 폰트 폴백 체인을 포함합니다. 지정된 폰트를 사용할 수 없는 경우 렌더러는 동일한 분류(serif, sans-serif, monospace)와 일치하는 시스템 폰트로 폴백합니다.
출력 형식
Rendervid는 비디오 및 이미지 렌더링을 위한 광범위한 출력 형식 및 코덱을 지원합니다.
비디오 형식
| 형식 | 코덱 | 파일 확장자 | 최적 용도 |
|---|---|---|---|
| MP4 | H.264 | .mp4 | 최대 호환성 – 웹, 모바일, 소셜 미디어 |
| WebM | VP8 / VP9 | .webm | 더 작은 파일 크기로 웹 임베딩 |
| MOV | ProRes | .mov | 전문 편집 워크플로우, 무손실 품질 |
| GIF | – | .gif | 짧은 애니메이션, 소셜 공유, 이메일 |
| MP4 | H.265 / HEVC | .mp4 | 최신 장치, 동일한 품질에서 H.264보다 50% 작은 파일 |
| WebM | AV1 | .webm | 차세대 코덱, 최고의 압축 효율 |
이미지 형식
| 형식 | 파일 확장자 | 최적 용도 |
|---|---|---|
| PNG | .png | 무손실 품질, 투명도 지원 |
| JPEG | .jpg | 사진, 더 작은 파일 크기 |
| WebP | .webp | 현대 웹, 품질과 크기의 최상의 균형 |
품질 프리셋
| 프리셋 | 설명 |
|---|---|
draft | 품질이 낮은 빠른 렌더링 – 미리보기에 이상적 |
standard | 균형 잡힌 품질 및 파일 크기 – 대부분의 사용 사례에 적합 |
high | 더 높은 비트레이트 및 품질 – 최종 결과물용 |
lossless | 압축 아티팩트가 없는 최대 품질 |
해상도 지원
Rendervid는 작은 썸네일부터 8K까지의 해상도를 지원합니다:
| 해상도 | 크기 | 일반 용도 |
|---|---|---|
| SD | 640 x 480 | 썸네일, 미리보기 |
| HD | 1280 x 720 | 웹 비디오, 이메일 |
| Full HD | 1920 x 1080 | YouTube, 프레젠테이션 |
| 2K | 2560 x 1440 | 고품질 디스플레이 |
| 4K UHD | 3840 x 2160 | 전문가용, 방송 |
| 8K | 7680 x 4320 | 최대 해상도, 미래 대비 |
1 fps(슬라이드쇼)에서 120 fps(슬로우 모션, 게임 콘텐츠)까지의 프레임 레이트가 지원됩니다. 일반적인 선택은 24 fps(영화적), 30 fps(웹/소셜), 60 fps(부드러운 모션)입니다.
완전한 예제
다음은 템플릿 시스템의 주요 기능이 함께 작동하는 것을 보여주는 전체 Rendervid 템플릿입니다: 동적 입력, 전환이 있는 여러 장면, 레이어 컴포지션, 이징이 있는 애니메이션, 폰트 및 시각 효과.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "제품명",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "태그라인",
"required": true,
"default": "미래가 여기 있습니다."
},
{
"key": "heroImage",
"type": "url",
"label": "히어로 이미지",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "주요 색상",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "행동 유도",
"default": "자세히 알아보기"
}
],
"fonts": {
"google": [
{ "family": "Inter", "weights": [400, 600, 800] },
{ "family": "JetBrains Mono", "weights": [400] }
]
},
"composition": {
"scenes": [
{
"name": "intro",
"duration": 6,
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.1
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 400 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 96,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 15,
"easing": "easeOutCubic"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 960, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 36,
"color": "{{primaryColor}}",
"textAlign": "center",
"letterSpacing": 4
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 25,
"delay": 40,
"easing": "easeOutSine"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 600 },
"size": { "width": 80, "height": 3 },
"style": {
"fill": "{{primaryColor}}"
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 20,
"delay": 60,
"easing": "easeOutQuart"
}
]
}
]
},
{
"name": "product-showcase",
"duration": 8,
"transition": {
"type": "slide",
"duration": 0.8,
"direction": "left"
},
"layers": [
{
"type": "image",
"src": "{{heroImage}}",
"position": { "x": 1200, "y": 540 },
"size": { "width": 800, "height": 800 },
"anchor": { "x": 0.5, "y": 0.5 },
"filters": [
{ "type": "brightness", "value": 1.1 },
{ "type": "contrast", "value": 1.05 }
],
"animations": [
{
"type": "entrance",
"effect": "zoomIn",
"duration": 40,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "float",
"duration": 120,
"delay": 40,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "소개합니다",
"position": { "x": 400, "y": 350 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "JetBrains Mono",
"fontSize": 18,
"color": "{{primaryColor}}",
"textTransform": "uppercase",
"letterSpacing": 6
},
"animations": [
{
"type": "entrance",
"effect": "typewriter",
"duration": 30,
"delay": 10,
"easing": "linear"
}
]
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 400, "y": 430 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 72,
"color": "#FFFFFF"
},
"animations": [
{
"type": "entrance",
"effect": "revealLeft",
"duration": 25,
"delay": 20,
"easing": "easeOutQuart"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 400, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 24,
"color": "#CCCCCC",
"lineHeight": 1.6
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"delay": 40,
"easing": "easeOutCubic"
}
]
}
]
},
{
"name": "cta",
"duration": 6,
"transition": {
"type": "fade",
"duration": 1.2
},
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.15
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 380 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 80,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "bounceIn",
"duration": 35,
"easing": "easeOutElastic"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 550 },
"size": { "width": 280, "height": 60 },
"style": {
"fill": "{{primaryColor}}",
"borderRadius": 30
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 25,
"delay": 30,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 60,
"delay": 60,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "{{ctaText}}",
"position": { "x": 960, "y": 550 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 600,
"fontSize": 22,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 20,
"delay": 40,
"easing": "easeOutSine"
}
]
}
]
}
]
}
}
이 템플릿은 3개의 장면으로 구성된 20초 제품 출시 비디오를 생성합니다: 시차 텍스트 애니메이션이 있는 타이포그래피 인트로, 떠다니는 이미지와 타자기 효과가 있는 제품 쇼케이스, 펄스 버튼이 있는 클로징 행동 유도 장면. 모든 텍스트, 색상 및 이미지는 템플릿 변수에 의해 구동되어 완전히 재사용 가능합니다.
다음 단계
- 레이어 컴포넌트 참조 – 전체 속성 문서 및 예제가 포함된 8가지 레이어 타입 각각에 대한 심층 분석
- AI 통합 – LLM 기반 템플릿 생성 및 콘텐츠 인식 렌더링을 포함하여 AI를 사용하여 Rendervid 템플릿을 생성하고 조작하는 방법 배우기
- 배포 가이드 – 프로덕션용 Rendervid 설정: 서버 측 렌더링, 클라우드 배포, 배치 처리 및 API 통합
