시각적 스토리텔링은 Kubernetes Control Plane이 워커 노드(worker nodes)를 어떻게 조정하는지, **검색 증강 생성 (RAG, Retrieval-Augmented Generation)**이 문서 임베딩을 벡터 데이터베이스에 어떻게 인덱싱하는지, 또는 Kafka Consumer Groups가 파티션 오프셋(partition offsets)을 어떻게 처리하는지를 설명하는 것과 같이 복잡한 기술적 주제를 전달하는 가장 효과적인 방법 중 하나입니다.

하지만 전통적으로 고품질의 화이트보드 애니메이션 비디오를 제작하려면 비디오 편집기나 VideoScribe와 같은 소프트웨어에서 수 시간 동안 수동으로 키프레임(keyframing) 작업을 수행해야 합니다.

이번 심층 분석에서는 자연어 프롬프트를 입력받아 실행 가능한 Revideo 모션 그래픽 코드와 함께 손그림 스타일의 Excalidraw 스타일 화이트보드 비디오를 자동으로 합성하는 풀스택 웹 애플리케이션인 **AI 화이트보드 비디오 생성기 (AI Whiteboard Video Generator)**의 아키텍처와 구현을 살펴보겠습니다.

시스템 아키텍처 및 데이터 흐름 (System Architecture & Data Flow)

애플리케이션은 다단계 파이프라인을 중심으로 구축되었습니다:

┌─────────────────────────────────────────────────────────────────────────┐
│                              1. 사용자 입력 (USER INPUT)                 │
│         프롬프트: "RAG (Retrieval Augmented Generation)의 작동 원리를 설명해줘" │
...

1. 시각적 정밀도를 위한 AI 프롬프트 구조화

AI가 생성하는 시각적 다이어그램의 가장 큰 과제 중 하나는 텍스트 겹침, 컨테이너 박스 잘림, 읽기 어려운 화살표 연결선 등을 방지하는 것입니다.

이를 해결하기 위해, LLM은 **엄격한 레이아웃 및 디자인 시스템 프롬프트 (strict layout & design system prompt)**에 의해 가이드됩니다:

export const WHITEBOARD_SYSTEM_PROMPT = `당신은 전문 교육용 일러스트레이터이자 화이트보드 애니메이터입니다.
당신의 작업은 설명 요청을 받아 구조화된 JSON 화이트보드 계획(Whiteboard Plan)을 생성하는 것입니다.

...

2. 실시간 HTML5 Rough.js 캔버스 렌더링

브라우저 내 즉각적인 재생을 위해, 애플리케이션은 HTML5 <canvas> 위에 스케치 스타일의 벡터 기본 도형을 렌더링하기 위해 roughjs를 활용합니다.

자동 크기 조절 다중 행 타이포그래피를 통한 텍스트 넘침 문제 해결

손으로 그린 다이어그램에서는 박스의 크기가 다양합니다. 텍ext 레이블이 컨테이너를 넘치거나 화살표 경계를 잘라내는 일이 없도록, 커스텀 다중 행 텍스트 스케일러 (multiline text scaler)가 경계 상자 (bounding box) 너비를 동적으로 계산하고 글꼴 크기를 그에 비례하여 축소합니다.

function drawMultilineText(
  ctx: CanvasRenderingContext2D,
  text: string,
...

3. Revideo 코드 생성 (@revideo/2d)

브라우저 미리보기를 넘어, 개발자들은 종종 YouTube Shorts, TikTok 또는 문서 사이트용 비디오 파일을 프로그래밍 방식으로 렌더링하기를 원합니다.

revideoGenerator.ts 모듈은 JSON 씬 그래프 (scene graph)를 실행 가능한 @revideo/2d 코드로 변환합니다.

유기적인 손그림 지터(Jitter) 및 스프링 오버슈트 이징 (Spring Overshoot Easing)

Revideo 애니메이션이 인위적으로 딱딱하거나 로봇처럼 느껴지지 않도록, 두 가지 수학적 물리 헬퍼 (physics helpers)를 도입했습니다.

1. 지터 분산 (jitter): 도형 좌표에 미세한 무작위 오프셋을 추가하여, 사람이 손으로 그린 듯한 부정확함을 모방합니다.
2. 스프링 오버슈트 이징 (springEase): 감쇠된 사인파 스프링 역학 (dampened sine-wave spring dynamics)을 사용하여, 요소가 자연스럽게 안착하기 전에 목표 크기를 약간 초과(overshoot)하도록 만듭니다.

/** 도형에 미세한 위치 분산을 추가하여, 손으로 그린 Excalidraw 기본 도형을 모방합니다 */
function jitter(val: number, amount = 2.5): number {
  return val + (Math.random() - 0.5) * amount * 2;
...

생성된 Revideo 씬 코드 예시

다음은 생성된 Revideo TypeScript 코드의 스니펫 (snippet)입니다:

import { makeScene2D, Rect, Line, Txt, Node, createRef, all, easeOutBack } from '@revideo/2d';

export default makeScene2D(function* (view) {
...

4. 오디오 트랙 관리 및 타임라인 동기화

오디오는 교육용 비디오에서 매우 중요합니다. 이 애플리케이션은 사용자가 다음과 같은 작업을 수행할 수 있는 오디오 패널 (Audio Panel) 기능을 제공합니다:

• 로컬 MP3/WAV/M4A 음성 녹음 또는 환경음을 드래그 앤 드롭합니다.
• 트랙별로 볼륨 레벨을 미세 조정합니다.
• 오디오 동기화 마커를 씬 타임라인 타임스탬프 (t = 0.0s, t = 6.0s 등)에 자동으로 바인딩합니다.

구조화된 Gemini 2.5 Flash 프롬프트, Rough.js 벡터 캔버스 드로잉(vector canvas drawing), 그리고 Revideo 모션 코드 생성(motion code generation)을 결합함으로써, **AI 화이트보드 비디오 생성기 (AI Whiteboard Video Generator)**는 정적인 다이어그램과 애니메이션 기반의 교육용 미디어 사이의 간극을 메워줍니다.

코드 및 기타 정보: https://www.dailybuild.xyz/project/207-ai-whiteboard