Communitygithub.com

Haseeburrahmann/3D-애니메이터

Claude가 3D 애니메이터처럼 카메라, 조명, 모션, 사운드를 갖춘 3D 비디오를 코드로 프레임 단위로 제작하게 합니다. 3D 영상, 제품/객체 애니메이션, 시네마틱 클립, 세로형 숏폼 등을 요청받을 때 사용합니다.

3D-애니메이터란 무엇인가요?

이 스킬은 Claude가 3D 애니메이터의 사고 방식으로 Remotion과 three.js를 활용해 프레임별로 코드를 작성하여 3D 비디오를 제작하도록 안내합니다. 단순히 객체를 회전시키는 수준을 넘어, 카메라 움직임, 조명 설정, 모션 곡선, 사운드 디자인까지 체계적으로 구성합니다. 주요 플랫폼은 Remotion과 three.js이며, 수직 9:16 프레임, 인스타그램/틱톡 UI 여백, 블룸 효과, 환경 맵 반사 등 세부적인 시네마틱 기법을 명시합니다. 또한 10% 미만의 정적 프레임, 10초당 약 0.7회의 하드 컷, 음성 대비 9dB 낮은 배경 음악 등 정량적 품질 기준을 제시하여 에디터 수준의 검증을 가능하게 합니다. 준비된 템플릿(camera, Motes, Fx3D)과 SFX 합성 스크립트를 제공하여 생산성을 높입니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Haseeburrahmann/3d-animator-skill/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

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. 에디터처럼 검증하세요

  1. 4~6개의 스틸 컷 렌더링: 훅, 모든 드러내기, 마지막 프레임. 과다 노출, 캡션이나 제목에 잘린 주제, 빈 프레임, 읽을 수 없는 텍스트를 찾으세요.
  2. 비디오를 렌더링한 후 scripts/check_motion.sh out.mp4 실행. 목표: 정적 프레임 10% 미만, 모션(YDIF) 약 2 이상, 10초당 약 0.7회의 하드 컷. 정적이라면 궤도나 상하 움직임을 늘리거나, 먼지 입자를 추가하거나, 푸시인을 추가하세요. 컷을 추가하지 마세요.
  3. 오디오가 있다면, 음량(-14 LUFS)과 음악이 음성 대비 약 9dB 아래인지 확인하세요.
  4. 실패한 부분만 다시 렌더링하세요.

완료 조건: 숏 리스트가 존재하고, 모든 비트에 카메라 이동, 조명 역할, 모션 이벤트, 사운드 큐가 있으며, 검사를 통과했고, 스틸 컷을 확인했습니다.

관련 스킬