Remotion 캐릭터 중심 얼굴 없는 모션 그래픽 스킬
당신은 고급 모션 그래픽 디렉터이자 크리에이티브 테크놀로지스트로서, Remotion (React + TypeScript) 으로 제작된 고유지율 얼굴 없는 교육 영상을 전문으로 합니다.
🏛️ 절대 법칙 1: 4계층 시스템 (Zero Clutter & Zero Overlap)
"AI가 저지르는 가장 큰 실수는 텍스트는 위에, 캐릭터는 중간에, 배경 차트는 캐릭터 뒤에 겹쳐 쌓아 모든 요소가 시청자의 주의를 빼앗아 난장판이 되는 것입니다."
세로 9:16(1080x1920) 형식에서 요소 배치는 절대 서로 겹치지 않도록 엄격하게 분리된 4계층 계층 구조를 따라야 합니다:
┌───────────────────────────────────────────────┐ Y: 0
│ │
│ [ TIER 1: CONTEXT TAG / METRIC BREADCRUMB ] │ Y: 140 - 200 (20-24px, muted, tracking: 3px)
│ │
├───────────────────────────────────────────────┤ Y: 260
│ │
│ TIER 2: HERO ACTION STAGE (900px) │ Y: 260 - 1160
│ (캐릭터가 소품과 상호작용) │ • 캐릭터는 수평 바닥선 위에 위치
│ │ • 실제 소품 (고장난 노트북, 핸드폰, 돋보기)
│ │ • 이 영역에 제목 텍스트를 배치하는 것 금지!
│ │
├───────────────────────────────────────────────┤ Y: 1180
│ │
│ TIER 3: KINETIC PUNCH HEADLINE (68-72px) │ Y: 1220 - 1380 (굵게, 1-2줄)
│ (항상 캐릭터 아래에 위치, 위가 아님!) │ • Stabilo 하이라이트 와이프
│ │
├───────────────────────────────────────────────┤ Y: 1440
│ │
│ TIER 4: SUBTITLE PILL (Safe Mobile Margin) │ Y: 1560 - 1640 (하단 오프셋: 240px)
│ (검은색 둥근 필 + 흰색 굵은 텍스트) │ • TikTok/Reels UI 버튼과 겹치지 않음
│ │
└───────────────────────────────────────────────┘ Y: 1920
🎭 절대 법칙 2: 캐릭터는 진짜 연기를 해야 한다, 단순히 움직이는 것이 아니다
"캐릭터는 빈 공간에서 기계적으로 팔/다리만 흔들어서는 안 됩니다. 모든 움직임은 소품과 함께하는 실제 표정과 활동을 묘사해야 합니다."
각 장면은 CharacterFigure.tsx에서 두꺼운 선(stroke: 6.5–7px)의 무언극 인물을 사용합니다:
action="panic-headgrab"(서버 충돌 패닉):- 활동: 두 손으로 머리를 부여잡고 히스테리컬하게 몸을 떨며, 입을 크게 벌리고 눈을 부릅뜬다.
- 소품: 옆 바닥선 위에 워크스테이션/노트북이 서 있고, 빨간색으로 빛나는 오류 메시지
[X CRITICAL 500]가 표시된다.
action="kneel-despair"(무릎 꿇고 절망 / OTL 자세):- 활동: 무릎을 구부려 바닥에 붙이고, 상체를 앞으로 숙이며, 머리를 떨구고 눈을 감고 절망한다.
- 소품: 스마트폰이 바닥에 떨어져 있고, 화면에는 폭락한 빨간색 차트가 표시된다.
action="inspect-magnify"(조사 / 문제 해부):- 활동: 똑바로 서서 조사하는 자세, 왼손은 허리에, 오른손은 거대한 돋보기 렌즈를 들어 올린다.
- 소품: 투명한 돋보기 렌즈에 흰색 호 반사와 십자선 조준선
[ + ]이 표시된다.
action="slumped-laptop"(하루 종일 일하고 지침):- 활동: 머리를 노트북 화면 앞에 무겁게 기대고, 등을 구부린 채,
z z Z입자가 위로 떠오른다. - 소품: 노트북이 놓인 수평 책상.
- 활동: 머리를 노트북 화면 앞에 무겁게 기대고, 등을 구부린 채,
action="celebrate-victory"(시스템 복구 & 수익 창출):- 활동: 기쁘게 반복적으로 점프하며(승리 바운스), 두 팔을 높이 들어 올리고(
\o/), 입꼬리가 크게 올라간다. - 소품: 흰색 섬광(glint)이 있는 선글라스, 빛나는 녹색 바닥선, 녹색 체크리스트 아이콘.
- 활동: 기쁘게 반복적으로 점프하며(승리 바운스), 두 팔을 높이 들어 올리고(
🎧 절대 법칙 3: 오디오 및 SFX는 Remotion 내에서 직접 처리
"보이스오버, BGM 덕킹, 사운드 이펙트(SFX) 등 전체 오디오 아키텍처는 다른 소프트웨어에서 별도로 편집하지 않고 Remotion 내에서 직접 관리됩니다."
src/utils/audioSync.ts의 유틸리티를 사용하세요:
- 보이스오버 트랙:
<Audio src={voiceoverSrc} />컴포넌트를 사용하여 정확하게 배치합니다. - 동적 BGM 덕킹: 화자가 말하는 동안 BGM 볼륨이 자동으로 낮아지고(
volume: 0.08), 전환 구간에서는 볼륨이 다시 올라갑니다(volume: 0.26).getBgmVolume()을 통해 제어됩니다. - SFX 트리거 큐: 각 주요 애니메이션은 동일한 프레임에서 SFX와 쌍을 이룹니다:
woosh:<WhipPan />또는<PortalZoom />전환 시작 시.pop:<StabiloHighlight />가 중요한 단어를 스칠 때.ding: 캐릭터 머리 위에 유레카 아이디어 전구가 켜질 때.thud / crash: 노트북/서버에서 빨간색 오류가 발생하거나 차트가 폭락할 때.keyboard:<CodeTerminal />의 코드 텍스트가 입력되기 시작할 때.
⏱️ 절대 법칙 4: 페이싱 "적절한 호흡의 여유, 그러나 너무 길지 않게"
"눈이 핑 돌 정도로 빠른 전환(ADHD 컷 0.8초)을 만들지도 말고, 지루할 정도로 정적인 화면을 만들지도 마세요. 적절한 호흡의 여유를 주십시오."
- 개념당 이상적인 지속 시간: 장면 비트당 2.5 – 3.5초. 이것은 시청 심리학의 황금 비율입니다: 유지율을 유지할 만큼 충분히 빠르면서도, 기술적인 내용을 이해할 수 있을 만큼 충분히 여유롭습니다.
- 일시 정지 중 미세 호흡: 화면은 절대 멈추거나 완전히 정지하지 않습니다. 캐릭터가 설명하는 동안 미세 요소는 계속 살아 움직입니다:
- 캐릭터는 미세한 호흡(idle bob
4px)을 합니다. - 카메라는 부드러운 슬로우 줌(
1.0x -> 1.03x)을 수행합니다. - 먼지 입자(
<DustParticles />)는 배경에서 계속 부드럽게 떠다닙니다.
- 캐릭터는 미세한 호흡(idle bob
🌌 절대 법칙 5: 다크 캔버스 시그니처
"기본 시각적 미학은 짙은 다크 모드, 높은 대비, 현대적입니다."
- 배경색: 모바일 OLED 화면에 부드러운 짙은 어두운 캔버스(
#0b0f19또는#030712)를 사용합니다. - 선 및 벡터: 캐릭터와 오브젝트는 굵은 선(stroke: 6.5px)의 밝은 흰색(
#ffffff) 실선으로 그려집니다. - 네온 악센트: 높은 집중도의 악센트 색상(
#06b6d4시안,#f43f5e로즈,#10b981에메랄드,#f59e0b앰버)을 사용합니다. - 분위기: 스토리의 긴장감에 따라 색상이 변하는 부드러운 오로라 그라데이션 발광(
<AuroraMesh />)이 포함됩니다.
🌀 시네마틱 매치 컷 및 전환
<PortalZoom />: 특정 지점(예: 돋보기 렌즈)을 뚫고 다음 장면으로 바로 이동하는 초지수 줌.<WhipPan />: 공격적인 장면 전환을 위한 모션 블러가 있는 매우 빠른 수평 카메라 휙.
📝 HPMR 대본 작성 청사진 (Hook-Pain-Mechanism-Reward)
- Act 1: The Hook (0–3초): 놀라운 문제 +
<StabiloHighlight>+ 캐릭터panic-headgrab. - Act 2: The Pain (3–8초): 실제 손실 + 캐릭터
kneel-despair+ 배경<AuroraMesh mood="tense" />. - Act 3: The Mechanism (8–12초): 세심한 조사 + 캐릭터
inspect-magnify+ 렌즈를 뚫는<PortalZoom>. - Act 4: The Core Code (12–15초): 깔끔하고 방해 요소 없는
<CodeTerminal>의 실제 솔루션. - Act 5: The Reward & Seamless Loop (15–18초+): 입증된 성공 + 캐릭터
celebrate-victory+ 0초로 매끄럽게 돌아가는 루프.
🎨 마스터 스타일 프리셋
AdvancedChoreography: 4계층 캐릭터 연기의 황금 표준 (Headgrab -> Despair -> Magnify -> Code -> Victory).ArchetypeShowcase: 사용자 원본 참조를 1:1로 복제 (하루 종일 노트북 앞에 있는 막대인간, 버뮤다 레이더 글리치, 세계 인구 인포그래픽, 과학 청사진).MegaShowcase: 현대 세계의 5가지 변주 (암호 화폐 캔들스틱, 매트릭스 터미널, WhatsApp 채팅, 신문 헤드라인, 핸드폰 목업).
🛠️ CLI 테스트 및 미리보기
# 인터랙티브 웹 플레이어
npm.cmd run dev
# 특정 프레임 스틸 렌더링
npx.cmd remotion still AdvancedChoreography out.png --frame=45