3D 애니메이터
평범한 프롬프트는 회색 공허 한가운데에서 회전하는 물체, 정적인 카메라, 평평한 조명, 선형 모션, 소리 없는 영상을 만들어냅니다. 애니메이터는 코드를 작성하기 전에 카메라, 조명, 모션, 사운드 네 가지를 먼저 생각합니다. 이 스킬은 당신이 그렇게 생각하게 하고, 매 프레임을 코드로 작성하게 합니다.
규칙은 WhatsNext AI (@whats.nextai) 프로덕션 파이프라인에서 나왔으며, 측정된 성능 최고의 릴(reel)에 맞춰 조정되었습니다:
- 정적 프레임 10% 미만;
- 10초당 약 0.7회의 하드 컷;
- 음성 대비 약 9dB 낮은 음악.
0. 코드 작성 전: 연출하세요
먼저 숏 리스트를 작성하세요. 각 비트는 한 줄로 표현됩니다:
비트 | 초 | 주제 | CAMERA 이동 | LIGHT 변경 | MOTION 이벤트 | SOUND 큐
숏 리스트 규칙:
- 첫 번째 프레임은 주제를 보여줍니다. 검은 화면에서 페이드 인 하지 말고, 로고를 보여주지 말고, 빈 무대에서 시작하지 마세요.
- 약 1.5초마다 눈에 띄는 것을 변경하세요: 카메라 이동, 드러내기 또는 조명 변경.
- 각 비트는 한 가지를 변경합니다: 스케일(와이드 ↔ 매크로), 각도, 조명, 또는 객체의 상태. 절대 한 번에 모든 것을 변경하지 마세요.
- 관련 없는 장면으로 컷하기보다 같은 객체를 재배치하세요. 끝나는 장면은 시작 장면과 운율이 맞아야 합니다.
- 주제가 없나요? 숨겨진 내부가 있는 것을 선택하세요. 카메라가 들어갈 곳이 있어야 합니다: 시계, 전화기, 엔진, 도시 블록, 케이블. 컷어웨이 또는 드러내기를 계획하세요.
1. 카메라 (references/camera.md)
- 카메라는 절대 멈추지 않습니다. 모든 장면에 두 개의 비공배 사인파로 만든 느린 궤도 운동과 상하 움직임을 추가하여 어떤 프레임도 정적이지 않게 하세요. 초기값: 약 0.17 rad × sin(0.8t) + 0.09 rad × sin(1.9t + 0.7).
- 키 카메라 사이는 ease-in-out(3차)으로 이동하세요. 절대 선형 이동을 사용하지 말고, 절대 스냅하지 마세요.
- 줌 대신 돌리하세요. 카메라 위치를 이동하고 시야각(field of view)을 객체에 대해 30°~40°로 유지하세요. 광각 FOV는 제품을 왜곡합니다.
- 드러내기 시에는 안으로 푸시인, 컨텍스트 제공 시에는 뒤로 당기기. 비트당 하나의 이동.
- 적은 수의 하드 컷: 10초당 약 0.7회. 움직임은 컷이 아닌 카메라에서 나옵니다.
- 세로 9:16 프레이밍:
- 주제를 프레임 높이의 중간 60%에 유지하세요.
- 상단 15%는 제목용입니다.
- 하단 25%는 캡션과 앱 UI용입니다.
- Instagram과 TikTok의 경우 오른쪽 150px을 비워두세요.
- 깊이: 전경에 무언가를, 중간에 주제를, 뒤에 부드러운 배경을 배치하세요. 응시점 근처에 떠다니는 먼지 입자나 파티클을 추가하여 느린 이동도 움직임으로 읽히게 하세요.
2. 조명 (references/light.md)
- 어두운 배경, 하나의 악센트 색상, 하나의 주제. 예를 들어, 네이비
#0B0F18씬에 주황색#FF914D악센트를 "정보"에 사용. - 조명 설정:
- 반구 채우기 조명: 하늘
#A9BDE0, 땅#0B0F18, 강도 약 0.8. - 왼쪽 위에서 오는 차가운 키 방향성 조명: 강도 약 1.5, 그림자 투사.
- 한쪽에는 따뜻한 점광, 다른 쪽에는 차가운 점광을 배치하여 가장자리가 배경과 분리되도록.
- 반구 채우기 조명: 하늘
- 반사: 환경 맵 사용 (
PMREMGenerator를 통한RoomEnvironment), 강도 0.2~0.6. 이것 없이 금속과 유리는 플라스틱처럼 보입니다. - 블룸은 목적이 있을 때만:
- UnrealBloomPass를 임계값 0.9 이상, 강도 약 0.4, 반경 약 0.4로 사용.
- 빛나야 하는 것은
emissive를 사용하고, 다른 것은 빛나지 않습니다. - 과다 노출 함정: 순수 흰색 재질에 블룸이 더해지면 프레임이 허옇게 됩니다. "흰색" 플라스틱에는 밝은 회색(
#C9CFD9)을 사용하세요.
- 안개 사용 (
<fog args={[bg, near, far]}/>). 거리에 따라 배경색으로 사라지도록. - 조명 변화는 스토리 비트입니다: 부품이 이름 불릴 때 빛나고, 방이 드러내기를 위해 어두워지고, 플래시가 결정적 장면에 도달합니다.
3. 모션 (references/motion.md)
- 모든 애니메이션은 프레임의 순수 함수입니다:
t = frame / fps.- 절대
Date.now()나Math.random()을 사용하지 마세요. remotion의random(seed)를 사용하세요. - 절대
useFrame으로 애니메이션하지 마세요.
- 절대
- 팝(Pops)에는 스프링 사용 (댐핑 12~14, 강성 약 170). 이동에는 ease-in-out 3차 사용. 선형은 컨베이어 벨트나 파티클 드리프트 같은 일정한 움직임에만 사용.
- 관련 요소는 3~5프레임 간격으로 배치하세요. 절대 열 가지를 같은 프레임에서 움직이지 마세요.
- 보조 모션 추가: 히어로 객체에 느린 턴테이블 회전(±0.4 rad), 떠다니는 먼지, 호흡 스케일(±1%).
- 정지는 선택입니다. 최대 2초의 정지는 의도적인 극적 비트일 때 괜찮습니다. 그렇지 않으면 항상 무언가 움직여야 합니다.
- 레이블: 짧은 대문자 상태 레이블이 명명되는 비트에 팝 인합니다. 재창작에는 "3D RECREATION" 표시.
4. 사운드 (references/sound.md)
- 이벤트당 하나의 SFX:
- 큰 카메라 이동 시 우슉(whoosh);
- 드러내기 시 히트(hit);
- 드러내기 직전 라이저(riser, 약 2초);
- 레이블에 클릭 또는 팝.
- 직접 합성하거나(scripts/sfx_synth.py) CC0 팩 사용.
- 배경 음악은 음성 대비 6~11dB 아래, 목표 약 9dB. 나레이션 아래에서 사이드체인 덕킹하세요.
- 침묵도 효과입니다. 핵심 대사 직전 한 비트 동안 음악을 빼고, 히트와 함께 다시 강하게 시작하세요.
- 마스터링 통합 -14 LUFS, 트루 피크 -1.5dBTP 이하. 음성 키를 전체 길이로 패딩하여 음악 꼬리가 잘리지 않게 하세요.
5. 코드 규칙 (Remotion + three.js)
- Canvas:
@remotion/three의<ThreeCanvas width={width} height={height}>로 3D를 감싸고, 항상 조명을 포함하세요. - Sequences: 캔버스 내부의
<Sequence>에는layout="none"이 필요합니다. - 후처리: EffectComposer가 우선순위 1의
useFrame(() => composer.render(), 1)로 렌더링을 인계받을 수 있습니다. 이것이 유일하게 허용되는 용도입니다. Remotion이 프레임당 한 번씩 씬을 진행하기 때문에 출력이 결정론적이기 때문입니다. templates/Fx3D.tsx 참조. - 상태: 단일 상태 함수
worldAt(t)로 씬을 구동하세요. 카메라, 스테이지, 플래그를 반환합니다. 컴포넌트는 단순하게 유지하세요. - 렌더링: macOS에서 WebGL 출력이 검은색이거나 불안정할 때
--gl=angle로 렌더링하세요. H.264, yuv420p, 1080×1920, 30fps 사용.
준비된 조각들 (복사하여 사용, 임포트하지 마세요):
templates/Fx3D.tsx: 환경 반사와 블룸.templates/camera.ts:easeCam,orbit,ramp,pop.templates/Motes.tsx: 결정론적 먼지 입자.
6. 에디터처럼 검증하세요
- 4~6개의 스틸 컷 렌더링: 훅, 모든 드러내기, 마지막 프레임. 과다 노출, 캡션이나 제목에 잘린 주제, 빈 프레임, 읽을 수 없는 텍스트를 찾으세요.
- 비디오를 렌더링한 후
scripts/check_motion.sh out.mp4실행. 목표: 정적 프레임 10% 미만, 모션(YDIF) 약 2 이상, 10초당 약 0.7회의 하드 컷. 정적이라면 궤도나 상하 움직임을 늘리거나, 먼지 입자를 추가하거나, 푸시인을 추가하세요. 컷을 추가하지 마세요. - 오디오가 있다면, 음량(-14 LUFS)과 음악이 음성 대비 약 9dB 아래인지 확인하세요.
- 실패한 부분만 다시 렌더링하세요.
완료 조건: 숏 리스트가 존재하고, 모든 비트에 카메라 이동, 조명 역할, 모션 이벤트, 사운드 큐가 있으며, 검사를 통과했고, 스틸 컷을 확인했습니다.