apple-dracula (미니멀리스트 설명 애니메이션 - 드라큘라 다크 스타일)

Skill: 미니멀리스트 설명 애니메이션 — 드라큘라 다크 (MinutePhysics / 통찰 유발 스타일)

미니멀리스트 손그림 개념 설명 영상의 시각적 스타일과 템포를 따르는 스토리보드, 타이밍 시트, 비주얼 스크립트 및 제작 프롬프트를 생성합니다.

---

1. 시각적 정체성 및 미적 규칙

• 캔버스: 드라큘라 나이트 배경(#282A36), 그라데이션 없음, 그림자 없음.
• 선화: 손그림 잉크 스타일(미묘한 유기적 거칠기를 가진 분필/모노라인), 일관된 선 두께(3px–4px), 드라큘라 전경색(#F8F8F2). 모바일 안전 최소값: 1080p에서 다이어그램 선은 3px 미만으로 사용 금지; 지면선은 4px 사용.
• 모바일 안전 텍스트 최소값 (단일 16:9 YouTube 마스터): 1080p에서 화면 텍스트는 36px 미만으로 사용 금지. 보조 레이블 36–44px, 주요 레이블 48–56px, 제목 72–80px. 레이블이 36px에 맞지 않으면 잘라내거나 해당 내용을 축소하는 대신 내레이션으로 옮기세요.
• 팔레트 (드라큘라):
  • 기본: 드라큘라 배경(#282A36) + 전경(#F8F8F2).
  • 표면: 드라큘라 현재 라인(#44475A) — 강조/활성 카드용; 표준 패널에는 #313342, 움푹 들어간 공간/화면에는 #1E1F29 사용.
  • 기능적 강조색 A: 드라큘라 레드(#FF5555) — 손실, 해고, 부정적 균형, 마찰.
  • 기능적 강조색 B: 드라큘라 그린(#50FA7B) — 이득, 고용, 대체, 균형.
  • 보조 강조색 (드물게 사용): 핑크(#FF79C6), 보라(#BD93F9), 시안(#8BE9FD), 오렌지(#FFB86C), 옐로우(#F1FA8C).
  • 중립 채움: 드라큘라 현재 라인(#44475A) — 미묘한 객체 채움(책상, 건물).
  • 진한 채움: 드라큘라 주석(#6272A4) — 더 큰 채워진 모양에만 사용, 본문 텍스트에는 절대 사용 금지.
• 타이포그래피:
  • 폰트 스타일: 깔끔한 손글씨 산세리프 또는 캐주얼 레터링 (예: Caveat, Patrick Hand).
  • 단어 밀도: 콜아웃당 최대 1–5단어. 전체 내레이션을 화면에 옮기지 마세요.
  • 배치: 관련 시각적 앵커 바로 위, 아래 또는 옆에 배치.
  • 저대비 텍스트 금지: 보조 레이블, 눈썹 텍스트, 자막은 어두운 배경에서도 읽을 수 있어야 함: 드라큘라 전경(#F8F8F2) 또는 라벤더 그레이(#B8B9C5). 텍스트에 드라큘라 주석(#6272A4)이나 탁한 회색을 절대 사용하지 마세요. 프로젝터에서 보이지 않습니다.
  • 좌측 상단 장면 제목 금지: 콘텐츠 장면 상단에 내레이션을 제목+부제목으로 반복하지 마세요. 내레이션이 문장을 전달하고, 다이어그램은 짧은 기능적 레이블만 전달합니다. 이는 "좌측 상단 읽고, 중앙 보기"라는 눈의 핑퐁을 방지합니다.
  • 챕터 카드는 유일한 예외: 챕터 번호 + 단일 모티프는 전체 화면 전환으로 사용 가능합니다. 드물게 사용하고 절대 문단을 추가하지 마세요.

---

2. 캐릭터 및 은유 디자인

• 캐릭터: 간단한 막대기 또는 콩 모양 인물. 최소한의 얼굴 (점 눈, 중립/미묘한 입 곡선). 간단한 소품(모자, 책상, 전화)으로 구분.
• 개념적 은유:
  • 작업/일: 원형 클러스터, 점선 윤곽선이 나타났다 사라짐.
  • 거시경제: 저울, 2D 선 그래프, 점 그리드/배열 (예: 1,000개의 점).
  • 기관: 기본 기하학적 건물 선화, 접근/공석을 나타내는 출입구.

---

3. 타이밍, 동기화 및 템포 규칙

• 음성-동기 트리거: 시각적 요소가 발음되는 정확한 음절에 그려지거나 나타남.
• 순차적 분산: 복잡한 개념을 개별 시각적 구성 요소로 나누어 하나씩 소개 (예: 작업 1 $\rightarrow$ 작업 2 $\rightarrow$ ATM 암이 작업 1을 가져감).
• "숨 쉴 공간" 규칙 (중요):
  • 자산이 나타난 직후에 전환하지 마세요.
  • 해당 요점에 대한 내레이션이 끝난 후 완성된 프레임을 1.5초에서 3.0초 이상 필요에 따라 유지하세요. 사용자가 모든 것을 처리할 시간을 확보해야 합니다.
  • 시청자는 콜아웃을 읽고, 관계를 파악하며, 통찰을 흡수할 시간이 필요합니다. 그 후에야 움직임이 재개됩니다.
• 최소 처리 유지 시간 (엄격 규칙):
  • 장면의 최종 시각적 공개는 컷 전에 최소 2.0초의 화면 시간이 있어야 합니다. 내레이션으로 인해 불가능하다면, 문맥상 적절할 때 공개를 더 앞으로 옮기거나, 다음 자연스러운 멈춤까지 장면을 연장하세요.
  • 다이어그램을 완성하는 단어와 동시에 컷하지 마세요.
  • 최종 내레이션 라인이 단순한 연결고리 ("숫자를 한번 볼게요", "어댑터가 그걸 고칩니다")라면, 해당 내용을 0.1–0.8초 동안 화면에 남겨두지 말고 다음 장면으로 옮기세요.
  • 밀도 높은 장면(다중 부분 다이어그램, 수학, 아키텍처)은 최종 상태를 2.5–3.5초 유지해야 합니다. 컷을 서두르기보다 마지막 비트를 단순화하세요.
• 전환 = 드라큘라 배경을 통한 짧은 페이드 (엄격 규칙):
  • 30fps에서 4–6 프레임 동안 #282A36을 통해 페이드 아웃/인 (0.13–0.2초)을 사용하세요. 좌에서 우로 와이프는 사용하지 마세요. 컷이 기계적으로 느껴집니다.
  • 다음 장면의 첫 번째 시각 요소를 미리 준비하여 어두운 간격이 눈 깜빡임 정도에 불과하도록 하고, 빈 장면이 없도록 하세요. 빈 캔버스가 ~0.2초 이상 노출되지 않도록 하세요.
  • 장면에 챕터 카드가 정말 필요하다면, 모티프를 화면에 유지하여 카드가 빈 텍스트 슬라이드가 되지 않도록 하세요.
  • 장면 시작 + 0.4초 시점의 스틸 이미지로 확인하세요. 약 80% 이상 비어 있다면, 첫 번째 시각 요소를 더 앞으로 옮기세요.

---

4. 구성 및 여백

• 여백: 항상 캔버스의 60%–80%를 비워 둡니다.
• 지면선/기준선: 인물과 건물을 끊기지 않는 하단 수평 가이드라인에 고정합니다.
• 초점 분리: 비트당 1개의 활성 초점 영역(왼쪽, 중앙 또는 오른쪽)을 유지합니다. 관련 없는 여러 사분면을 동시에 애니메이션하지 마세요.
• 전환: 드라큘라 배경 #282A36을 통한 짧은 페이드(4–6 프레임), 지면선을 따른 측면 이동, 또는 갑작스러운 깜빡임 후 어두움. 좌-우 와이프, 화려한 줌, 회전은 사용하지 마세요.
• 글꼴 크기를 크게 유지하세요.

---

5. 스토리보드 생성 워크플로우

내레이션 스크립트 또는 개념적 주제가 주어지면:

1. 작업 수준 분할: 내레이션을 3–7초 시각적 비트로 분할합니다.
2. 시각적 은유 매핑: 추상적인 경제/기술적 주장에 구체적이고 미니멀한 은유를 할당합니다.
3. 화면 텍스트 선택: 비트당 강조할 $\le 3$개의 앵커 단어를 선택합니다.
4. 타이밍 및 유지 시간 할당: 정확한 동기화 지점([SYNC]) 및 일시 중지/유지 시간([HOLD: Xs])을 표시합니다.

---

6. 출력 템플릿

각 비디오 장면에 대해 다음 형식으로 출력합니다:

### 장면 [번호]: [장면 제목]
**오디오 타임스탬프:** [MM:SS - MM:SS]
**내레이션:** "[정확한 대본 부분]"

* **시각적 설명:** (시각적 레이아웃 및 자산에 대한 1-2문장)
* **화면 텍스트:** "[정확한 텍스트]" | 위치: [예: 상단 중앙] | 색상: [예: 드라큘라 레드]
* **애니메이션 순서:**
  1. `[00:00.0 - 단어]` 기준선에 [자산 A] 그리기.
  2. `[00:02.0 - 단어]` [자산 B]를 [자산 A]로 페이드/슬라이드.
  3. `[00:03.5 - 단어]` 작은 바운스와 함께 레이블 팝업.
* **애니메이션 후 유지 시간:** [X.X 초] (전환 전 이해 보장을 위한 정적 프레임 유지)
* **전환 종료:** [컷 / 지면선 왼쪽 이동 / 어두움으로 페이드]

---

1. 선화 및 은유 엔진: Rough.js

• 이유: MinutePhysics의 유기적 손그림 느낌을 원한다면 정적 SVG에 의존할 수 없습니다. Rough.js는 기하학적 모양, 선, 패스를 가져와 조정 가능한 "거칠기", "휨", 스케치 같은 펜 선으로 렌더링하는 경량 캔버스/SVG 라이브러리입니다.

• LLM 친화성: 매우 높음. 복잡한 스플라인 좌표 대신 LLM은 다음과 같이 간단히 호출합니다:

  codeTsx

  rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
  rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });
  

2. 애니메이션 및 타이밍 런타임: Remotion (React + TypeScript)

• 이유:

  • 프레임 드롭이 발생할 수 있는 기존 CSS/브라우저 애니메이션과 달리 Remotion은 프레임별로 렌더링합니다(fps = 30 또는 60).

  • 팝인 및 선형 쓰기를 위한 interpolate() 및 spring()과 같은 내장 훅이 있습니다.

  • useCurrentFrame()을 통한 오디오 타이밍 기본 처리.

• "그리기" 효과 구현: SVG 선 스트로크의 경우, LLM은 strokeDashoffset을 경로의 전체 길이에서 0까지 애니메이션합니다.

3. 타이포그래피: Google Fonts (Caveat 또는 Patrick Hand)

• @remotion/google-fonts 또는 로컬 @font-face를 통해 글꼴을 직접 임베드합니다.

• 스타일을 엄격히 #F8F8F2로 설정하고 콜아웃당 최대 1–5단어를 사용합니다.

4. 오디오-동기 파이프라인 (업스트림): OpenAI Whisper (단어 수준 타임스탬프)

• LLM이 애니메이션을 생성하기 전에, 원시 음성 해설이 단어 수준 JSON 타임스탬프(예: Whisper timestamp_granularities=["word"])로 전사됩니다.

• LLM은 타임스탬프가 포함된 대본을 받아 프레임 번호로 변환합니다:

  Target Frame = Timestamp (seconds) × FPSTarget Frame = Timestamp (seconds) × FPS