Communitygithub.com

hozanedBaydu/animated-explainer-shorts

사람들이 실제로 시청하는 짧은 설명 영상(YouTube Shorts, Reels, TikTok 및 긴 설명 영상)을 기획, 스크립트 작성, 애니메이션 제작 및 리뷰할 때 적용하는 규칙 모음입니다.

animated-explainer-shorts란 무엇인가요?

이 스킬은 사용자가 참여도 높은 애니메이션 설명 영상을 제작할 수 있도록 설계된 포괄적인 규칙 세트입니다. 기획, 스크립트 작성, 스토리보드, 애니메이션, 편집 등 영상 제작 전 과정을 다룹니다. Remotion과 Three.js를 기반으로 템플릿을 제공하여 실제 비디오 파일을 생성할 수 있으며, Kokoro TTS를 활용한 음성 더빙, 자동 캡션 생성, 장면별 렌더링 확인 등의 기능을 지원합니다. 이 스킬의 핵심은 '스토리 퍼스트(Story First)' 접근법으로, 영상이 단순한 사실 나열이 아닌 캐릭터, 갈등, 반전, 보상이 있는 미니 스토리여야 한다고 강조합니다. 또한 첫 3초 동안의 강력한 후킹, 장면당 하나의 아이디어, 시각적 스토리텔링(보여주기, 말하지 않기), 수직 프레임 최적화, 카메라 움직임과 캐릭터 애니메이션의 기본 원칙 등 상세한 가이드라인을 제공합니다. 프레이밍, 텍스트 배치, 음성 일러스트레이션, 정직성(출처 표기) 등 세부 규칙까지 포함되어 있어, AI 에이전트가 자동으로 전문가 수준의 설명 영상을 기획하고 제작할 수 있도록 돕습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hozanBaydu/animated-explainer-shorts/tree/HEAD/plugins/animated-explainer-shorts/skills/animated-explainer-shorts

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

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

문서

애니메이션 설명 영상 제작 규칙

영상을 기획, 스크립트 작성, 애니메이션 제작 또는 리뷰할 때 아래 규칙을 적용하십시오. 스토리 규칙이 우선입니다: 아름다운 영상도 평범한 스크립트로는 실패합니다.

영상 제작하기

사용자가 실제 영상 파일을 원할 경우, 이 스킬에 포함된 템플릿을 사용하여 Remotion(3D의 경우 Three.js)으로 빌드합니다.

  1. 스토리 우선. 아래에 있는 스토리 규칙을 사용하여 비트(비트당 하나의 아이디어)로 스크립트를 작성합니다. 다른 것보다 먼저 첫 문장과 처음 몇 초를 확인하세요.
  2. 프로젝트. template/ 디렉터리를 새 폴더로 복사한 후 npm install을 실행합니다. 코드를 작성하기 전에 reference/remotion.md를 읽고, 3D 장면을 시작하기 전에 reference/threejs.md를 읽으십시오.
  3. 음성. 사용자가 음성 더빙(자체 녹음 또는 텍스트 음성 변환 파일)을 제공하면 public/ 디렉터리에 넣고 public/plan.json 파일에서 "voice"를 설정합니다. 제공하지 않으면 각 대사를 해당 장면의 "text"에 넣고 npm run voice(무료 Kokoro 음성, 영어)를 실행합니다. 그러면 public/voice.wav 파일이 생성되고 모든 장면의 시작과 끝이 설정됩니다. node scripts/voice.mjs am_michael(남성) 또는 기본값인 af_heart(여성)로 음성을 선택합니다.
  4. 타이밍. npm run captions을 실행하여 단어 타임스탬프를 생성합니다. 자체 음성 파일을 사용하는 경우, 각 장면을 해당 줄의 첫 단어에서 시작하십시오. npm run voice를 사용하면 이 작업이 이미 완료됩니다.
  5. 장면. src/scenes/ 디렉터리에 장면당 하나의 컴포넌트를 작성하고 등록한 후, plan.json 파일에 장면을 나열합니다. 모든 음성 대사는 고유한 시각 요소를 갖습니다.
  6. 확인. 각 장면의 시작, 중간, 끝에서 스틸 이미지를 렌더링(npx remotion still Main out/still.png --frame=N)하고 살펴본 후, 아래 규칙을 위반하는 부분이 있으면 수정합니다.
  7. 렌더링. npm run render를 실행하면 out/video.mp4 파일이 생성됩니다. 완료했다고 판단하기 전에 처음 3초를 다시 시청하십시오.

요구 사항: Node.js 18+ 및 ffmpeg. Remotion은 첫 번째 렌더링 시 자체 헤드리스 Chrome을 다운로드합니다.

스토리

  1. 모든 영상은 작은 스토리입니다: 캐릭터가 무언가를 원하고, 어떤 것이 그것을 막으며, 반전이 일어나고, 보상이 있습니다. 사실의 나열은 스토리가 아닙니다.
  2. 첫 번째 문장은 대담한 주장, 사람들이 믿는 것에 대한 반박, 또는 문제를 가진 캐릭터여야 합니다.
    • 좋은 예: "당신의 부엌에 있는 어떤 것이 당신을 죽이고 있습니다." / "저는 항상 컴퓨터가 사람보다 수학을 더 잘한다고 생각했습니다." / "이분은 돈 삼촌입니다. 거대한 문제가 있습니다."
    • 나쁜 예: "X는 어떻게 작동할까요?" / "다음은 이를 위한 3가지 도구입니다…" / "오늘 우리는…을 살펴보겠습니다.". 영상이 "어떻게" 질문에 답하는 경우, 그 질문을 두 번째 문장으로 옮기십시오.
  3. 처음 3초 안에 질문이나 긴장감을 열어두고 답은 나중으로 미루십시오. 후킹에 반전을 소모하지 마십시오.
  4. 광범위하거나 시대에 맞는 주제를 선택하십시오. 틈새 주제는 누구나 공감할 수 있는 일상적인 각도가 필요합니다.
  5. 강력한 오프너가 약한 주제를 구원하지는 않습니다. 주제를 먼저 결정한 후 후킹을 작성하십시오.
  6. 모든 영상은 독립적으로 완결되어야 합니다. "파트 2", 이전 영상을 이어가는 오프너, 일반적인 유틸리티 목록은 허용되지 않습니다.
  7. 보여주고 말하지 마십시오: 모든 음성 대사는 고유한 시각 요소를 가집니다. 영상이 음소거 상태에서도 이해가 된다면 장면이 제대로 작동하는 것입니다.
  8. 장면당 하나의 아이디어. 하나의 대사에 두 가지 아이디어가 포함되어 있다면 두 개의 장면으로 나누십시오.
  9. 고조시키기: 각 비트는 이전 비트보다 이해 관계나 놀라움을 조금 더 높입니다.
  10. 시청자가 따라 하거나 사용할 수 있는 문장(물어볼 질문, 경험 법칙)으로 끝내고 요약으로 끝내지 마십시오.
  11. 길이는 자유롭게 선택하십시오: 스토리에 필요한 길이를 사용하십시오. 긴 영상에서는 적어도 60-90초마다 작은 보상을 제공하십시오.

프레이밍(별도 명시가 없으면 수직 1080x1920)

  1. 주요 대상을 상단-중간 영역(y = 500-1100)에 유지하십시오.
  2. 하단 약 20%(y > 1500)는 플랫폼 UI 아래에 위치하므로 주요 시각 요소를 배치하지 마십시오. 캡션은 그 바로 위에 배치하십시오.
  3. 측면에 약 60px 여백을 유지하십시오. 오른쪽 가장자리(x > 960, y 900-1700)는 좋아요 및 댓글 버튼이 위치하므로 주요 정보를 배치하지 마십시오.
  4. 수직 영상에서는 일반적으로 중앙 프레이밍이 가장 잘 작동합니다. 두 명의 대상이 있는 장면에서는 3분할 법칙을 사용하십시오.
  5. 프레임당 하나의 지배적인 요소. 다른 모든 것은 더 작거나, 더 어둡거나, 채도가 낮아야 합니다.
  6. 중요한 순간에 캐릭터의 얼굴은 프레임 너비의 최소 약 15% 이상이어야 합니다.

오프닝(첫 3초)

  1. 0프레임에서 바로 말하기 시작하십시오. 무음 인트로나 로고는 없습니다.
  2. 처음 1-2초 내에 시각적으로 변화하는 것이 있어야 합니다: 새로운 물체, 움직임, 변형 등. 정적인 타이틀 카드는 없습니다.
  3. 첫 프레임의 큰 텍스트는 선택 사항입니다. 사용하는 경우, 주장을 진술해야 하며 장식이 되어서는 안 됩니다.
  4. 첫 프레임의 얼굴은 선택 사항입니다. 강력한 캐릭터나 이미지도 마찬가지로 잘 작동합니다.

카메라(2D 및 3D)

  1. 모든 카메라 움직임에는 동기가 있어야 합니다: 캐릭터를 따라가거나, 정보를 공개하거나, 강조를 추가합니다. 장식적인 움직임은 없습니다.
  2. 절대 선형으로 움직이지 마십시오: 항상 이징(가속/감속)을 적용하십시오.
  3. 공개: 느린 푸시인(scale 1.0에서 1.1-1.25로 1-3초 동안). 충격: 빠른 펀치인(0.15-0.25초)과 약간의 흔들림.
  4. 새로운 장소: 먼저 와이드 샷, 그다음 클로즈업.
  5. 로우 앵글 = 힘 또는 위협, 하이 앵글 = 작거나 무력함, 아이 레벨 = 중립.
  6. 두 캐릭터가 서로 마주보는 경우, 장면 전체에서 각각 자신의 면을 유지하십시오.
  7. 3D에서: FOV 35-50도, 전경, 중간, 배경 레이어로 깊이감을 만듭니다. FOV(줌)를 변경하는 대신 카메라(돌리)를 움직이십시오.
  8. 3D 만화 장면에서는 선형 톤 매핑과 약간의 채도 향상을 사용하십시오. 필름 톤 매핑은 만화 색상을 씻겨 나가게 합니다.

편집 및 템포

  1. 오프닝 이후 템포는 스타일을 따릅니다. 빠른 첫 순간이 영상 전체의 빠르기보다 중요합니다.
  2. 눈길 추적: 새로운 샷의 관심 지점은 이전 샷의 관심 지점에서 시작됩니다.
  3. 매치 컷: 한 장면 끝의 모양이나 색상이 다음 장면의 시작이 됩니다.
  4. 농담이나 포인트 이후에는 컷 전에 0.3-0.6초 정도 유지하십시오.
  5. 핵심 순간 전에는 속도를 늦추고, 후에는 속도를 높이십시오.
  6. 액션에 맞춰 컷: 움직임이 멈춘 후가 아니라 움직임이 진행 중일 때 샷을 전환하십시오.
  7. 흰색 플래시나 스트로보 전환은 사용하지 마십시오. 휩 팬, 매치 컷, 와이프를 사용하십시오.

캐릭터 애니메이션

  1. 모든 충돌과 점프 시 스쿼시 앤 스트레치(scale 0.8-1.25, 부피는 대략 유지)를 적용합니다.
  2. 예비 동작: 큰 움직임 전에 반대 방향으로 작은 움직임을 넣습니다(0.1-0.2초).
  3. 후속 동작: 머리카락, 안테나, 팔은 몸통이 멈춘 후에도 계속 움직이다가 안정됩니다.
  4. 팔다리와 던져진 물체는 직선이 아닌 호 모양으로 움직입니다.
  5. 장면이 대기 중일 때도 깜빡임, 호흡, 무게 중심 흔들림은 멈추지 않습니다.
  6. 타이밍이 무게감을 전달합니다: 무거운 것은 느리게 움직이고 강하게 착지하며, 가벼운 것은 빠르게 움직입니다.
  7. 감정을 과장하십시오: 큰 눈, 큰 입 모양, 날아가는 땀방울.
  8. 포즈당 하나의 명확한 실루엣. 포즈가 검은색 형태로 읽히지 않으면 변경하십시오.

텍스트 및 캡션

  1. 캡션: 청크당 2-5단어, 음성과 동기화되어 나타나며, 고대비(어두운 테두리가 있는 흰색).
  2. 큰 동적 단어는 포인트 순간에만 사용하고, 화면에 한 번에 하나의 큰 단어 그룹만 표시하십시오.
  3. 화면의 숫자는 내레이션 및 출처와 정확히 일치해야 합니다.

음성

  1. 짧은 문장, 말하는 리듬, 축약형 사용("it's", "didn't").
  2. 분당 약 170-200단어.
  3. 비트 사이에는 0.2-0.4초의 침묵, 마지막 대사 전에는 0.6-1.0초의 침묵.

정직성

  1. 화면의 모든 숫자는 실제 출처가 있으며 일치해야 합니다.
  2. 창작자가 실제로 하지 않은 일을 1인칭 주장으로 내레이션에 절대 넣지 마십시오.
  3. 패러디 헤드라인은 실제 매체를 모방하지 않고 명백히 가상의 이름을 사용하십시오.

관련 스킬