remotion-lecture-video-creator

Remotion 강의 비디오 제작기 🎬

remotion-lecture-video-creator는 실라버스, 교수 학습 모듈, 또는 서면 교육 자료를 Remotion 프레임워크(React + 웹 표준)를 사용하여 프로그래매틱 교육 비디오(Programmatic Educational Video)로 변환합니다.

무거운 독점 소프트웨어로 수동으로 비디오를 편집하는 대신, 교육자는 코드를 통해 직접 고품질 강의 비디오를 생성하고 수정할 수 있습니다(Video as Code). 이는 프레임 단위로 부드럽게 애니메이션 처리되고, 버전 관리되며, 일괄 렌더링(batch rendering)이 가능합니다.

---

🌟 Remotion 교육 비디오 주요 기능

1. Video as Code (React & TypeScript):

   • 각 강의 장면(Scene)은 독립적인 React 컴포넌트입니다.
   • 공식 Remotion 훅(useCurrentFrame, useVideoConfig, interpolate, spring)을 사용하여 물리 기반의 끊김 없는 애니메이션을 구현합니다.

2. 두 가지 표준 비디오 비율 형식:

   • 가로 16:9 (1920x1080 @ 30fps): LMS 강의 비디오, YouTube, 프로젝터, 스마트 TV의 표준 형식입니다.
   • 세로 9:16 (1080x1920 @ 30fps): TikTok, Instagram Reels, YouTube Shorts용 마이크로 러닝 / 빠른 교육 형식입니다.

3. 4막 교육 구조 (Standard 4-Act Lesson Arc):

   • Act 1: Hook & Curiosity Spark (프레임 0–900 / 0–30초): 세션 제목, 교수자 신원, CPMK/학습 목표, 실제 문제에 대한 질문을 제시합니다.
   • Act 2: Core Concept Breakdown (프레임 900–2700 / 30–90초): 애니메이션 개념 카드, 단계별 블록 다이어그램, 고대비 운동 타이포그래피를 제공합니다.
   • Act 3: Case Study & Live Visual Demo (프레임 2700–4500 / 90–150초): 구문 강조된 코드 예제, 단계별 시뮬레이션 또는 수학 수식 애니메이션을 보여줍니다.
   • Act 4: Reflection & Challenge Call-to-Action (프레임 4500–5400 / 150–180초): 3가지 핵심 요점 요약, 타이머가 있는 대화형 퀴즈, LMS 과제 지침을 제공합니다.

4. 풍부한 내장 교육 시각 구성 요소:

   • Kinetic Typography: 제목과 요점이 스프링 물리(spring physics) 보간을 사용하여 나타납니다.
   • Progress Time Bar: 비디오 하단에 애니메이션 시간 진행 막대가 있어 시각적으로 콘텐츠 지속 시간을 알려줍니다.
   • Animated Concept Cards: 부드러운 그림자와 강조 색상 악센트(accent highlight)가 있는 현대적인 스타일의 정의 카드입니다.
   • Audio & Voiceover Synchronization: <Audio /> 컴포넌트를 사용하며, 내레이션 오디오 길이에 맞춰 프레임 지속 시간을 자동으로 조정합니다.

5. 즉시 미리보기 및 고속 MP4 렌더링:

   • 대화형 미리보기 모드: npx remotion preview 명령어로 브라우저에서 Remotion Studio를 엽니다. 교수자는 타임라인을 프레임 단위로 스크롤하고 애니메이션을 실시간으로 테스트할 수 있습니다.
   • Headless CLI 렌더링: npx remotion render 명령어를 사용하여 전체 비디오를 풀HD .mp4 파일로 렌더링합니다.

---

📁 Remotion 교육 비디오 프로젝트 파일 구조

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Remotion 진입점
    ├── Root.tsx                  # Composition 등록 (16:9 & 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Act 1: Hook & 학습 성과 (CPMK)
    │   ├── 02_ConceptScene.tsx   # Act 2: 핵심 개념 & 다이어그램
    │   ├── 03_DemoScene.tsx      # Act 3: 시뮬레이션 / 사례 연구
    │   └── 04_OutroScene.tsx     # Act 4: 요약 & 마무리 퀴즈
    └── components/
        ├── ProgressBar.tsx       # 화면상 시간 지속 시간 표시기
        ├── ConceptCard.tsx       # 운동적 정의 카드
        └── LessonTitle.tsx       # 계층적 애니메이션 제목

---

📐 기본 Remotion 교육 비디오 컴포넌트 템플릿

1. src/Root.tsx

import React from 'react';
import { Composition } from 'remotion';
import { LectureComposition } from './LectureComposition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* 16:9 가로 풀HD 비디오 - 3분 지속 시간 (30fps에서 5400프레임) */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "소프트웨어 공학",
          sessionTitle: "세션 03: 캡슐화 및 모듈성 원리",
          instructorName: "렌세텍 교수진",
        }}
      />
    </>
  );
};

2. src/scenes/01_IntroScene.tsx

import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';

export const IntroScene: React.FC<{ courseTitle: string; sessionTitle: string }> = ({
  courseTitle,
  sessionTitle,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 스프링 물리학을 사용한 제목 진입 애니메이션
  const titleProgress = spring({
    frame,
    fps,
    config: { damping: 12 },
  });

  const titleScale = interpolate(titleProgress, [0, 1], [0.85, 1]);
  const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0f172a', // Slate 900
        justifyContent: 'center',
        alignItems: 'center',
        color: '#ffffff',
        fontFamily: 'Segoe UI, system-ui, sans-serif',
        padding: 80,
      }}
    >
      <div
        style={{
          transform: `scale(${titleScale})`,
          opacity: titleOpacity,
          textAlign: 'center',
        }}
      >
        <span
          style={{
            backgroundColor: '#2563eb',
            color: '#ffffff',
            padding: '8px 20px',
            borderRadius: 99,
            fontSize: 24,
            fontWeight: 700,
            letterSpacing: 2,
            textTransform: 'uppercase',
          }}
        >
          {courseTitle}
        </span>
        <h1
          style={{
            fontSize: 68,
            fontWeight: 900,
            marginTop: 32,
            marginBottom: 16,
            lineHeight: 1.2,
          }}
        >
          {sessionTitle}
        </h1>
        <p style={{ fontSize: 28, color: '#94a3b8' }}>
          결과 기반 교육 • CPMK-2 학습 성과
        </p>
      </div>
    </AbsoluteFill>
  );
};

---

🚀 미리보기 및 렌더링 명령어

1. Remotion Studio 실행 (브라우저에서 미리보기):

   npx remotion preview
   

2. 비디오를 MP4 파일로 렌더링:

   npx remotion render src/index.ts LectureVideo-16x9 out/video-kuliah-sesi-03.mp4