Rendervid 컴포넌트 - 레이어 타입, React 컴포넌트 & 비주얼 에디터

Rendervid는 비디오 제작을 모듈화되고 확장 가능하며 개발자 친화적으로 만드는 컴포넌트 기반 아키텍처를 기반으로 구축되었습니다. Rendervid 템플릿 의 모든 요소는 레이어이며, 각 레이어는 렌더링 방식을 결정하는 특정 타입을 가지고 있습니다. 8가지 내장 레이어 타입, 증가하는 사전 구축된 React 컴포넌트 라이브러리, 비주얼 템플릿 에디터 및 독립형 플레이어를 통해 Rendervid는 프로그래밍 방식으로 전문 비디오 콘텐츠를 제작하는 데 필요한 모든 것을 제공합니다.

이 페이지는 전체 컴포넌트 생태계를 다룹니다: 텍스트 및 셰이프와 같은 기본 레이어 타입부터 오디오 및 비디오 재생, 무한한 창의적 가능성을 여는 완전한 커스텀 React 컴포넌트까지. 간단한 타이틀 카드를 만들든 복잡한 데이터 기반 애니메이션을 만들든, 이러한 컴포넌트를 이해하는 것이 기초입니다.

내장 레이어 타입

Rendervid 템플릿의 모든 레이어는 type 필드가 있는 JSON 객체로 정의됩니다. 타입은 사용 가능한 속성과 렌더링 동작을 결정합니다. 다음은 8가지 내장 레이어 타입 각각에 대한 자세한 참조입니다.

텍스트 레이어

text 레이어는 Rendervid에서 가장 기능이 풍부한 기본 요소입니다. 타이포그래피, 정렬, 색상, 효과 및 애니메이션을 완전히 제어하여 스타일이 적용된 텍스트를 렌더링합니다.

타이포그래피 속성:

Rendervid는 100개 이상의 Google 폰트를 내장하고 있습니다. 외부 스타일시트를 로드할 필요 없이 fontFamily 속성을 지정하여 사용할 수 있습니다.

정렬 속성:

스타일링 및 효과:

• 기본 색상 지정을 위한 color 및 backgroundColor
• 그림자 효과를 위한 textShadow
• 외곽선 텍스트를 위한 textStroke
• 밑줄, 취소선을 위한 textDecoration
• 대문자, 소문자, 첫 글자 대문자를 위한 textTransform
• 자동 말줄임 잘림을 사용하는 maxLines
• 문자별 텍스트 표시를 위한 내장 타자기 효과

{
  "type": "text",
  "text": "Rendervid에 오신 것을 환영합니다",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

타자기 효과와 같은 고급 텍스트 애니메이션의 경우, 텍스트 레이어를 키프레임 애니메이션과 결합하거나 전용 TypewriterEffect 컴포넌트 를 사용하세요.

이미지 레이어

image 레이어는 유연한 크기 조정 및 자르기 옵션으로 래스터 및 벡터 이미지를 표시합니다.

주요 속성:

지원 형식: PNG, JPEG, WebP, SVG, GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

fit 속성은 CSS object-fit처럼 작동합니다:

• cover – 레이어를 채우도록 이미지를 확대하고 초과분을 자릅니다
• contain – 레이어 내에 완전히 맞도록 확대하며, 레터박스가 생길 수 있습니다
• fill – 레이어 치수와 정확히 일치하도록 이미지를 늘립니다
• none – 이미지를 원래 해상도로 렌더링합니다

비디오 레이어

video 레이어는 완전한 재생 제어로 비디오 클립을 컴포지션에 삽입합니다.

주요 속성:

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

startTime을 사용하여 인트로를 건너뛰거나 소스 영상의 특정 지점으로 이동하세요. 슬로우 모션(0.5) 또는 타임랩스(2.0) 효과를 위해 playbackRate와 결합하세요.

셰이프 레이어

shape 레이어는 채우기, 스트로크, 그라디언트 및 둥근 모서리로 벡터 셰이프를 그립니다.

셰이프 타입:

스타일링 속성:

• fill – 단색 또는 그라디언트
• stroke – 테두리 색상
• strokeWidth – 테두리 두께
• borderRadius – 직사각형의 둥근 모서리
• 그라디언트: linear 및 radial 그라디언트 채우기

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

커스텀 셰이프의 경우, 표준 SVG 경로 데이터와 함께 path 타입을 사용하세요:

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

오디오 레이어

audio 레이어는 볼륨 제어, 페이딩 및 완전한 효과 체인으로 컴포지션에 오디오 트랙을 추가합니다.

주요 속성:

오디오 효과 체인:

Rendervid는 내장 효과 처리 파이프라인을 포함합니다. 사용 가능한 효과:

• EQ – 톤 조정을 위한 이퀄라이제이션
• Compressor – 다이나믹 레인지 압축
• Reverb – 공간 잔향
• Delay – 에코/딜레이 효과
• Gain – 볼륨 부스트 또는 감쇠
• High-pass filter – 저주파 제거
• Low-pass filter – 고주파 제거
• Panning – 스테레오 포지셔닝(좌/우)

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

효과는 순서대로 처리되어 정교한 오디오 처리 체인을 구축할 수 있습니다. 스테레오 포지셔닝을 위해 -1(완전 왼쪽)에서 1(완전 오른쪽)까지의 pan 값을 사용하세요.

그룹 레이어

group 레이어는 자식 레이어를 보유하는 컨테이너입니다. 그룹에 적용된 변환은 모든 자식에 영향을 미쳐 복잡한 다층 컴포지션을 단일 단위로 쉽게 이동, 확대/축소, 회전 또는 애니메이션할 수 있습니다.

주요 속성:

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "카드 제목",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "지원 설명 텍스트가 여기에 표시됩니다.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

그룹은 복잡한 템플릿을 구성하는 데 매우 유용합니다. 재사용 가능한 카드 레이아웃, 하단 자막, 오버레이 및 기타 복합 요소를 만드는 데 사용하세요. 자식 좌표는 그룹의 위치에 상대적입니다.

로티 레이어

lottie 레이어는 After Effects, Figma 또는 기타 애니메이션 도구에서 내보낸 Lottie 애니메이션을 렌더링합니다.

주요 속성:

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

로티 레이어는 프레임별 코드를 작성하지 않고도 세련된 모션 그래픽, 아이콘, 로딩 표시기 및 브랜드 애니메이션을 추가하는 데 이상적입니다. startFrame 및 endFrame 속성을 사용하면 애니메이션을 잘라 특정 세그먼트만 재생할 수 있습니다.

커스텀 레이어

custom 레이어는 Rendervid에서 가장 강력한 레이어 타입입니다. 프레임별로 렌더링되는 임의의 React 컴포넌트를 작성할 수 있어 시각적 출력을 완전히 제어할 수 있습니다.

커스텀 컴포넌트에는 세 가지 배포 타입이 있습니다:

인라인 배포

JSON 템플릿에 JavaScript 코드를 직접 삽입합니다. 작고 독립적인 컴포넌트에 가장 적합합니다.

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

URL 배포

CDN과 같은 외부 URL에서 컴포넌트를 로드합니다. 템플릿 간에 공유되는 재사용 가능한 컴포넌트에 가장 적합합니다.

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

참조 배포

이름으로 사전 등록된 컴포넌트를 사용합니다. @rendervid/components 패키지 또는 커스텀 레지스트리의 컴포넌트에 가장 적합합니다.

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

모든 커스텀 컴포넌트는 표준 props 세트를 받습니다:

커스텀 컴포넌트는 props에 대한 스키마 유효성 검사도 지원하여 템플릿이 각 컴포넌트에 올바른 데이터 타입과 필수 필드를 전달하도록 보장합니다.

사전 구축된 React 컴포넌트

@rendervid/components 패키지는 템플릿에서 즉시 사용할 수 있는 프로덕션 준비 컴포넌트 세트를 제공합니다.

AnimatedLineChart

부드러운 그라디언트 채우기, 구성 가능한 데이터 포인트, 축 레이블 및 애니메이션 그리기 효과로 애니메이션 라인 차트를 렌더링합니다. 보고서, 대시보드 및 프레젠테이션과 같은 데이터 기반 비디오 콘텐츠에 이상적입니다.

주요 props: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

레이어드 그라디언트와 유동적인 움직임을 사용하여 매혹적인 오로라(북극광) 효과를 만듭니다. 분위기 있는 배경, 인트로 시퀀스 및 앰비언트 비주얼에 완벽합니다.

주요 props: colors, speed, intensity, blur

WaveBackground

구성 가능한 색상, 진폭 및 주파수로 유동적인 파도 애니메이션을 생성합니다. 스타일리시한 배경, 음악 비주얼라이저 또는 바다 테마 콘텐츠에 사용하세요.

주요 props: waveCount, colors, amplitude, frequency, speed

SceneTransition

장면 간 이동을 위한 17가지 전문 전환 타입을 제공합니다. 와이프, 페이드, 줌, 슬라이드 등을 포함합니다. 각 전환은 프레임 정확하고 구성 가능합니다.

주요 props: transitionType, duration, direction, easing

TypewriterEffect

깜박이는 커서로 문자별 텍스트 표시를 렌더링합니다. 구성 가능한 타이핑 속도, 커서 스타일 및 단어 간 지연을 지원합니다. 코드 데모, 채팅 시뮬레이션 및 극적인 텍스트 표시에 적합합니다.

주요 props: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

커스텀 컴포넌트 개발

나만의 커스텀 컴포넌트를 구축하는 것이 Rendervid가 진정으로 빛나는 곳입니다. JavaScript와 CSS로 만들 수 있는 모든 시각적 효과는 Rendervid 컴포넌트가 될 수 있습니다.

컴포넌트 구조

Rendervid 커스텀 컴포넌트는 props를 받아 React 요소를 반환하는 표준 JavaScript 함수입니다. 일반적인 React 컴포넌트와의 주요 차이점은 렌더링이 이벤트 기반이 아닌 프레임 기반이라는 것입니다.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // 애니메이션 진행률 계산(0에서 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // 진행률을 사용하여 애니메이션 구동
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "안녕하세요, Rendervid!");
}

사용 가능한 Props

모든 커스텀 컴포넌트는 다음 표준 props를 받습니다:

• frame – 0부터 시작하는 현재 프레임 번호입니다. 이것이 주요 애니메이션 드라이버입니다.
• fps – 초당 프레임 수(일반적으로 30 또는 60). 프레임을 초로 변환하는 데 사용합니다.
• sceneDuration – 현재 장면의 지속 시간(초)입니다. 전체 프레임 수를 얻으려면 fps와 곱합니다.
• layerSize – 템플릿에 정의된 레이어 치수와 일치하는 픽셀 단위 width 및 height가 있는 객체입니다.
• props – 템플릿 JSON에 정의된 모든 커스텀 속성을 포함하는 객체입니다.

React.createElement() 패턴

Rendervid 컴포넌트는 렌더링 환경에서 실행되므로 JSX 대신 React.createElement()를 사용합니다. 패턴은 간단합니다:

// JSX 동등: <div className="container"><span>안녕하세요</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "안녕하세요")
);

Props 스키마 유효성 검사

컴포넌트의 props에 대한 스키마를 정의하여 템플릿 로드 시 데이터를 검증할 수 있습니다:

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

예제: 파티클 시스템

물리학을 사용하여 150개 이상의 파티클을 시뮬레이션하는 파티클 시스템 컴포넌트:

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

예제: 애니메이션 카운터

시작 값과 종료 값 사이를 보간하는 숫자 카운팅 애니메이션:

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

커스텀 컴포넌트가 더 넓은 템플릿 구조에 어떻게 맞는지에 대한 자세한 내용은 템플릿 시스템 문서 를 참조하세요.

템플릿 에디터

@rendervid/editor 패키지는 개발자가 아닌 사람과 개발자 모두 JSON을 직접 작성하지 않고 Rendervid 템플릿을 구축할 수 있도록 하는 완전한 기능의 비주얼 템플릿 에디터를 제공합니다.

타임라인 기반 편집

에디터는 각 레이어가 드래그, 크기 조정 및 위치 변경이 가능한 블록으로 표시되는 다중 트랙 타임라인을 제공합니다. 시작 시간, 지속 시간 및 레이어 순서를 시각적으로 조정하세요. 프레임 수준 정밀도를 위해 확대하거나 상위 수준 개요를 위해 축소하세요.

레이어 관리 패널

전용 패널은 드래그 앤 드롭 재정렬, 가시성 토글, 잠금 컨트롤 및 그룹화를 통해 컴포지션의 모든 레이어를 나열합니다. 8가지 내장 타입과 등록된 커스텀 컴포넌트를 모두 포함하는 컴포넌트 팔레트에서 새 레이어를 추가하세요.

속성 패널

레이어를 선택하여 구조화된 양식에서 속성을 보고 편집하세요. 속성 패널은 레이어 타입에 맞게 조정되어 관련 필드만 표시합니다. 색상 선택기, 슬라이더, 드롭다운 및 텍스트 입력을 통해 모든 세부 사항을 쉽게 조정할 수 있습니다. 변경 사항은 미리보기에 즉시 반영됩니다.

실행 취소/다시 실행 히스토리

모든 변경 사항은 완전한 실행 취소 및 다시 실행 지원과 함께 히스토리 스택에 기록됩니다. 항상 이전 상태로 되돌릴 수 있다는 것을 알고 편집 히스토리를 자신 있게 탐색하세요.

실시간 미리보기

에디터는 변경할 때 템플릿을 실시간으로 렌더링하는 내장 플레이어 컴포넌트 를 포함합니다. 내보내거나 렌더링할 필요 없이 편집 중 언제든지 전체 컴포지션을 미리 봅니다.

플레이어 컴포넌트

@rendervid/player 패키지는 브라우저에서 Rendervid 템플릿을 미리 보기 위한 독립형 React 컴포넌트를 제공합니다.

React 통합

모든 React 애플리케이션에 플레이어를 설치하고 삽입하세요:

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("재생 완료")}
    />
  );
}

키보드 단축키

플레이어는 효율적인 미리보기를 위한 내장 키보드 컨트롤을 지원합니다:

속도 제어

재생 속도를 0.25x(1/4 속도)에서 4x(4배 속도)까지 조정하세요. 슬로우 모션 재생은 프레임별로 애니메이션을 검토하는 데 유용하며, 빨리 감기는 더 긴 컴포지션을 스캔하는 데 도움이 됩니다.

콜백 및 이벤트

플레이어는 프로그래밍 방식 제어를 위한 콜백을 노출합니다:

이러한 콜백을 사용하여 플레이어를 외부 UI 요소, 분석 또는 인터랙티브 경험과 동기화하세요.

컴포넌트 갤러리

이러한 예제 커스텀 컴포넌트는 Rendervid의 커스텀 레이어 타입으로 가능한 범위를 보여줍니다. 각각은 위에서 설명한 동일한 React.createElement() 패턴을 사용하여 구축되었습니다.

파티클 폭발

150개 이상의 파티클, 구성 가능한 중력, 색상 및 폭발 반경을 갖춘 물리 기반 파티클 시스템입니다. 파티클은 중심점에서 생성되어 현실적인 움직임으로 바깥쪽으로 호를 그립니다.

웨이브 시각화

주파수 데이터에 반응하는 오디오 반응형 웨이브 패턴입니다. 구성 가능한 진폭, 주파수 및 색상을 가진 여러 웨이브 레이어가 역동적이고 유기적인 비주얼을 만듭니다.

네온 텍스트 효과

깜박임, 펄스 및 색상 순환을 포함한 애니메이션 네온 라이트 효과가 있는 빛나는 텍스트입니다. 사용자 정의 가능한 글로우 반경, 색상 및 애니메이션 속도를 제공합니다.

홀로그래픽 인터페이스

스캔 라인, 데이터 판독, 그리드 오버레이 및 애니메이션 UI 요소가 있는 공상 과학에서 영감을 받은 홀로그래픽 UI입니다. 기술 테마 비디오 및 미래 지향적 인트로에 이상적입니다.

3D 큐브 회전

텍스처 면과 부드러운 회전을 갖춘 하드웨어 가속 CSS 3D 큐브입니다. WebGL 없이 성능이 뛰어난 3D 렌더링을 위해 CSS perspective 및 transform3d를 사용합니다.

데이터 시각화 대시보드

애니메이션 막대 차트, 라인 그래프 및 통계 카운터를 제공하는 다중 차트 대시보드 컴포넌트입니다. 보고서, 프레젠테이션 및 데이터 스토리텔링을 위한 데이터 기반 및 구성 가능합니다.

추가 커스텀 컴포넌트 예제는 다음과 같습니다:

• 애니메이션 카운터 – 이징 함수가 있는 숫자 카운팅 애니메이션
• 프로그레스 링 – 구성 가능한 호와 색상을 가진 원형 진행률 표시기
• 타자기 – 커서와 가변 속도를 가진 텍스트 타이핑 애니메이션

다음 단계

• 장면과 컴포지션을 구성하기 위한 Rendervid 템플릿 시스템 에 대해 알아보세요
• 자연어로 템플릿을 생성하는 AI 통합 을 살펴보세요
• 최종 비디오를 렌더링하고 내보내기 위한 배포 가이드 를 참조하세요
• 상위 수준 소개는 Rendervid 개요 로 돌아가세요