Communitygithub.com

iamjeffia/estudio-ia

규칙 기반 모션 그래픽 제작 가이드: 나레이션에 따라 장면이 구성되며, 스포일러 없이, 읽을 시간이 충분한 자막, 각 아이디어에 실제 요소나 시각적 은유 사용, 다양한 강조 및 대사 종료 후 비트에 맞춰 전환. After Effects, EffectCraft, HyperFrames, Remotion 등 모든 모션 동영상에 적용.

estudio-ia란 무엇인가요?

이 스킬은 나레이션 기반 모션 그래픽 동영상(설명형 릴스, 튜토리얼, 인터페이스 화면이 포함된 내레이션 광고)을 제작하기 위한 상세한 지침을 제공합니다. 핵심은 **시각적 스포일러 방지**로, 모든 요소가 나레이션에서 언급되는 순간에만 등장합니다. 또한, 읽을 시간이 충분히 확보된 자막(formatting), 각 아이디어에 대한 실제 이미지나 시각적 은유 사용, 다양한 강조 기법, 대사가 끝난 후 비트에 맞춰 장면 전환 등을 규칙화합니다. After Effects, EffectCraft, HyperFrames, Remotion 등 다양한 모션 그래픽 도구에서 활용 가능하며, 스토리보드 작성 전과 렌더링 전에 이 규칙을 다시 확인하도록 권장합니다. 특히 프레임별 정확성이 중요한 Remotion이나 HyperFrames 환경에서 함수형 시간 기반 애니메이션을 강조하여 일관된 결과물을 보장합니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/iamjeffia/estudio-ia/tree/HEAD/.agents/skills/motion-narrado

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

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

문서

나레이션 기반 모션: 말로 장면을 만든다

날짜: 2026-10-22 · 유형: 가이드 · 상태: 유효

요약: 나레이션 위에 애니메이션을 적용하는 규칙: 언급되기 전에는 아무것도 나타나지 않고, 자막은 읽을 시간이 충분하며, 각 아이디어는 실제 요소나 시각적 은유를 얻고, 화면은 문장이 끝난 후에만 전환됩니다. 모든 엔진에서 적용 가능합니다(엔진 선택은 estudio-video 참조). 시작 숫자는 regras.md에 있습니다.

시작하기 전에 video-referencias를 따르세요(참조 영상 시청 및 실제 자산 수집). 제품 또는 소프트웨어의 나레이션 동영상은 이 규칙에 animacao-saas의 표준을 더하며, 각 변환의 타이밍을 비트 대신 나레이션이 결정합니다.

입력 데이터: 단어당 시간

모든 것은 승인된 나레이션과 이를 단어별로 전사한 파일(words.json: 단어, 시작 시간, 종료 시간)에서 비롯됩니다. 이후 나레이션이 빨라지면, 이미 빨라진 파일을 전사하고 그 위에 애니메이션을 적용합니다.

리듬보다 먼저 스토리보드

튜토리얼과 설명형에서는, 적을수록 좋습니다: 각 요소는 목적이 있고, 정확한 타이밍에 등장하며, 사라지거나 다음 요소로 전환됩니다. 더 길고 부드러운 애니메이션, 한 번에 하나의 주요 아이디어, 항상 살아있는 움직임, 효과음은 필요한 경우에만 사용합니다. 시작점:

  • 문장당 하나의 컴포지션, 4~6초;
  • 1.5~2초마다 새로운 요소, 해당 요소를 명명하는 단어에 맞춰;
  • 자막 외 최대 3개(주요 1개 + 보조 2개);
  • 절반의 전환은 요소가 다음 요소로 변하는 방식(컷이 아님).

운동감 있는 릴스 오프닝은 훨씬 빠를 수 있습니다(0.5초마다 새로운 요소). 프로젝트에서 각 구간에 어떤 리듬이 적용되는지 명시하세요. 등장, 퇴장, 카메라 지속 시간은 regras.md를 참조하세요.

규칙 1 — 언급되기 전에는 아무것도 나타나지 않음

각 요소는 그를 정당화하는 단어가 나오는 순간에 등장합니다(최대 ~0.15초 먼저, 절대 몇 초 먼저 안 됨). 장면은 비어 있거나 자막만 있는 상태로 시작하여 점차 구성됩니다.

틀린 경우올바른 경우
제품 카드가 장면 시작부터 보임아이콘은 음성이 이름을 말할 때 고유 애니메이션과 함께 생성됨; 전체 이름이 나오면 헤더로 날아가고 카드가 구성됨
활성화되길 기다리는 정지된 막대막대는 "첫 번째 부분"이라는 단어에 나타나고 첫 번째 막대가 바로 채워짐
언급되기 전에 이미 페이드 인된 세 단계각 단계는 말해질 때 등장함
"이렇게 작동합니다"에서 이미 열려있는 휴대폰주제 사진은 언급될 때 등장함; 휴대폰은 "앱 검색"에서 등장함

적용 방법: 애니메이션 전에 단어 → 시간 → 등장 요소 테이블을 작성합니다. 리뷰 시 콘택트 시트에서 말해지지 않고 나타난 요소가 있는지 확인합니다.

예외: 장면의 주인공(액션이 일어나는 휴대폰)은 음성이 이미 그것에 대해 말하고 있다면 처음부터 화면에 있을 수 있습니다.

규칙 2 — 읽을 시간이 충분한 자막

  • 49단어로 이루어진 문장, 수동으로 줄바꿈하여 최대 2줄. 12단어 구간이 끊임없이 바뀌면 읽히기 전에 사라집니다.
  • 최소 읽기 시간: 각 문장은 마지막 단어가 등장한 후 최소 ~0.6초 동안 유지됩니다. 다음 문장은 이전 문장이 사라질 때까지 기다립니다; 나레이션에 비해 최대 ~0.5초까지 늦어질 수 있지만, 절대 앞서지 않습니다.
  • 자동 줄 바꿈 금지: 글꼴이 줄어들어 맞춰집니다. 이렇게 하면 휴대폰 뒤에 숨겨진 세 번째 줄이 생기지 않습니다.
  • 마스크를 이용한 단어별 표시: 각 단어는 잘라낸 상자 안에서 위로 올라옵니다(100%에서 0으로, 약간의 블러 포함). 떠다니는 단어(블러와 자유로운 이동)는 아마추어처럼 보입니다.
  • 나레이션으로 자막 생성: uv run scripts/video/make_captions.py.

규칙 3 — 하이라이트(마크 텍스트 및 반복 금지)

  • 마크 텍스트(단어 뒤의 컬러 밴드)를 피하세요: 단어별 마스크에 의해 잘리고 반복적으로 느껴집니다.
  • 표준: 키워드는 동영상의 강조 색상으로 변경되고 굵기가 증가합니다. 문장당 최대 하나.
  • 다양하게 사용하세요 하이라이트가 중요할 때: 줄 안의 공식 로고, 단어에서 생성되는 요소(로고 글자), 카운터, 카드의 강조 링. 연속된 장면에서 동일한 효과를 반복하지 마십시오.
  • 큰 강조 텍스트는 항상 마감 처리: 그라데이션, 광택, 텍스처, 외곽선 또는 영상으로 채워진 단어.

규칙 4 — 각 아이디어에 실제 요소와 은유 사용

  • 실제 장소 → 실제 스크린샷. "지역 비즈니스"는 실제 지도가 필요합니다: Chrome을 창 없이 Google Maps 캡처(--headless --window-size=1900,1600 --force-device-scale-factor=2 --virtual-time-budget=20000 및 URL .../maps/place/<city>/@lat,lng,13.5z). 그 위에 동일한 중심과 줌으로 메르카토르 투영법을 사용하여 위치시킨 실제 비즈니스 마커(모든 포인트를 먼저 플롯하여 확인). "귀사"는 강조 색상의 유일한 핀.
  • 대중적인 비유 → 그에 대한 삽화. "보건소 줄보다 느린"은 공식 서비스 심볼, 줄 사진(뒤통수가 보이는 사람들, 읽을 수 있는 텍스트 없음) 및 "대기 시간: 4시간"을 표시하는 LED 번호판이 필요합니다. 일반 번호는 농담을 전달하지 않습니다.
  • 로고, 아이콘 및 SVG: 항상 브랜드 웹사이트의 공식 버전. 타사 로고는 주제를 식별하며, 파트너로 나타나지 않습니다.
  • 개념을 나열하지 말고 설명하세요. "병목"은 막히는 흐름입니다: 고객이 도착하여 한 단계에 쌓이고, 카운터가 올라가고, 로딩이 멈추고, "막힘" 레이블.
  • 재사용된 비디오 없는 감정. 다른 상황을 위해 만들어진 사람 비디오를 사용하지 마십시오. 음성에 따라 변하는 SVG 이모지(중립 → 화남 → 증기와 함께 빨강)가 더 효과적입니다; 실제 사람이 필요하면 새로운 자료를 사용하세요.
  • 말해진 각 문장에는 문자 그대로의 시각적 번역이 있어야 합니다. 문장에 요소가 없으면 자막만으로 충분해야 합니다.

규칙 5 — 장면 전환, 대사 및 비트

  • 대사가 끝난 후에만 화면 전환. 새 장면은 이전 문장의 마지막 단어가 끝난 후에 시작됩니다(단어 종료 + 짧은 숨). 전환이 컷 전에 화면을 덮으면 그 시간을 계산하세요. 그런 다음 가장 가까운 비트(최대 ~0.2초 이내)에 맞춥니다.
  • 트랙 측정: uv run scripts/som/batida.py는 비트와 강한 박자를 표시합니다(--help 참조; 렌더를 트랙과 대조하여 확인). 목표: 대부분의 컷이 비트에 맞도록.
  • 장면 오프닝은 킥 드럼에; 트랙의 정지는 대본의 전환점에 맞춥니다(음악을 앞당기거나 늦춤).
  • 건조한 나레이션, 음악은 대사 아래에서 낮아지고 비디오 전체를 따릅니다. 영화적 음악 오프닝이 있으면 대사는 그 후에 나오며, 절대 겹치지 않습니다. 음악, 효과 및 믹스 선택: 스킬 som-do-video.

규칙 6 — 마감 처리

  • 주인공 뒤에 아무것도 없음: 자막은 전용 밴드(세로 비디오의 상단)에, 주인공은 그 아래에.
  • 전환으로 인해 중간에 잘리는 효과 없음: 하이라이트는 문장 종료 전에 끝낼 시간이 있을 때만 시작됩니다.
  • 부드러운 전환: 새 장면이 위에서 들어오며, 블러와 약간 더 큰 스케일에서 시작됩니다. 이전 장면은 계속 불투명하며, 블러와 축소만 됩니다; 두 개의 반투명 장면은 회색 베일을 만듭니다.
  • 어두운 장면(텍스트만 있는)은 첫 단어 전까지 ~1초 정도 숨을 쉴 수 있습니다; 밝은 장면은 요소가 아직 언급되지 않은 경우가 아니라면 ~0.3초 이상 비어 있지 않아야 합니다.

규칙 7 — 효과적인 마감 리소스

리소스사용 시기방법
액션을 따라가는 카메라타이핑, 터치, 메시지: 시선이 세부 사항으로 가야 함액션 지점에서 확대(스케일 ~1.3–1.5) 후 복귀; 자막은 카메라 밖에
파도가 있는 손 커서표시되는 모든 클릭 또는 터치손가락 끝이 대상에; 누르고 놓으면 두 개의 파도; 터치 사운드
점 전환2~3개의 큰 전환(임팩트 장면, 브랜드, CTA); 모든 장면에 사용하지 않음비디오 색상의 작은 점 그리드가 화면을 덮고, 중간에서 컷, 다음 장면 공개
사진이 있는 핀 + 레이더지도 또는 위치흰색 테두리와 이름이 있는 둥근 사진; 주요 핀에서 회전하는 레이더
단어 더미연속으로 언급되는 혜택언급된 단어가 중앙에 들어오고, 이전 단어는 희미해지며 위로 올라감
휴대폰 상단 섬알림 또는 메시지 도착스프링으로 확장되는 검은색 알약
선으로 그리는 로고브랜드 공개선이 그려진 후 채워짐
파스텔 광택이 있는 밝은 배경밝은 장면장면당 하나의 톤
롤링 카운터숫자 언급등장 시 해당 값까지 올라감
알약이 있는 웨이브"처음부터 끝까지", 단계별 프로세스그려지는 물결선, 말해진 각 단계마다 알약 추가
카메라가 따라가는 선 요소여러 화면을 통한 여정화면보다 큰 "세계"에서 실제 화면 사이를 여행하는 점; 각 화면은 점이 도착할 때 켜짐; 마지막에 카메라가 열려 전체를 보여줌

Motion Kit AE가 있는 After Effects에서는 키트의 기성 작업(스프링, 등장, 퇴장, 라이브 카메라)을 선호하고, 새로 표현식을 작성하지 마십시오. HyperFrames 또는 Remotion에서는 모든 것이 시간 함수(t)가 되며, 실제 시계 없이 모든 렌더에서 동일한 프레임이 나오도록 합니다.

렌더링 전 체크리스트

  • 단어 → 요소 테이블이 작성됨; 단어보다 먼저 나타나는 요소 없음.
  • 자막: 4~9단어 문장, 최대 2줄, 최소 읽기 시간, 주인공 뒤에 아무것도 없음.
  • 마크 텍스트 없음; 다양한 하이라이트.
  • 언급된 각 비유, 장소 또는 브랜드에는 실제 이미지 또는 명확한 삽화가 있음.
  • 문장이 끝나기 전에 화면 전환 없음; 비트에 맞춰 전환 확인.
  • 클릭은 손 커서로 표시; 작은 동작에서는 카메라 확대; 최대 3개의 점 전환.
  • 원래 컨텍스트 외부에서 재사용된 비디오 없음.
  • 콘택트 시트 및 확대된 컷아웃을 검토하여 스포일러, 숨겨진 텍스트, 잘린 효과 및 빈 화면 확인(uv run scripts/video/detectar_saltos.py를 렌더에서 실행).
  • 참조 및 동일 유형의 이전 최고 비디오와 나란히 비교: 전체적으로 더 나은가? 아니라면 아직 준비되지 않음.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

관련 스킬