Communitygithub.com

tugrulz/kurzgesagt-스타일

평면 벡터 애니메이션 '과학 설명' 동영상을 Kurzgesagt – In a Nutshell 스타일로 제작하기 위한 크리에이티브 방향입니다. 채도 높은 그라데이션 팔레트, 외곽선 없는 둥근 도형, 작은 점 눈 캐릭터, 탄력적인 이징, 스케일 점프 줌, 그리고 호기심 가득한 건조한 유머의 내레이션이 특징입니다. 사용자가 애니메이션 설명 동영상, 과학/우주/생물학/경제/기술/역사 설명, 'Kurzgesagt 스타일' 또는 'In a Nutshell 스타일' 동영상, 평면 또는 벡터 모션 그래픽 설명 동영상, 또는 해당 스타일의 스크립트, 스토리보드, 장면 디자인, Remotion 구성을 요청할 때마다 이 스킬을 사용하세요. 사용자가 명시적으로 'Kurzgesagt'를 언급하지 않더라도 마찬가지입니다. 이 스킬은 코드 구현을 담당하는 remotion-* 스킬들과 함께 사용됩니다. 이 스킬은 동영상의 시각적 스타일, 움직임, 사운드, 그리고 내용의 어조를 결정합니다.

kurzgesagt-스타일란 무엇인가요?

이 스킬은 Kurzgesagt(In a Nutshell) 스타일의 과학 설명 동영상을 제작하기 위한 크리에이티브 방향을 제공합니다. 주로 Claude Code, Cursor, Codex와 같은 AI 에이전트와 함께 사용되며, 동영상의 시각적 스타일(외곽선 없는 둥근 도형, 채도 높은 그라데이션, 작은 점 눈 캐릭터), 움직임(탄력적 이징, 스케일 점프 줌, 부드러운 카메라 움직임), 사운드(내레이션, 음악, 효과음) 및 내러티브 구조를 정의합니다. 이 스킬은 `remotion-*` 스킬(예: remotion-best-practices, remotion-markup)과 함께 사용되어 실제 코드 구현을 담당하며, 사용자가 명시적으로 'Kurzgesagt'를 언급하지 않더라도 과학/기술/경제/역사 등 설명 동영상 제작 요청 시 자동으로 활성화됩니다. 주요 워크플로는 브리핑, 리서치, 스크립트 작성, 스토리보드 작업, 스타일 바이블 생성, 빌드, 오디오 믹싱, QA 및 렌더링 단계로 구성되며, 두 번의 승인 체크포인트가 포함되어 비용이 많이 드는 애니메이션 작업 전에 합의를 보장합니다. 또한 팩트 정확성, 접근성(자막), 원본성(캐릭터/로고 사용 금지), 무거운 주제 처리에 대한 가드레일을 제공합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tugrulz/kurzgesagt-style/tree/main

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

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

문서

Kurzgesagt 스타일 설명 동영상

이 스킬은 크리에이티브 방향을 정의합니다. 동영상이 어떻게 보이고, 움직이고, 소리 내고, 읽히는지를 결정합니다. remotion-* 스킬들은 이를 코드로 구현하는 방법을 결정합니다. 어떤 컴포지션을 작성하기 전에 remotion-best-practices(라우터)와 remotion-markup을 먼저 읽고, 이 문서의 내용과 상충되는 부분이 있으면 해당 문서를 따르세요.

이 장르는 어려운 아이디어를 작고, 따뜻하고, 재미있게 만들면서도 시각적인 명확성을 유지하기 때문에 효과적입니다. 아래 규칙의 대부분은 이를 위한 것입니다. 즉, 아이디어를 읽기 쉽게 하기 위한 단순한 도형, 생동감을 주기 위한 지속적이고 부드러운 움직임, 그리고 숫자나 거리를 읽는 대신 느끼게 하기 위한 큰 스케일 점프입니다.

열 가지 스타일 규칙

  1. 외곽선 없음. 도형은 채우기, 그라데이션 및 음영으로 정의됩니다. 선은 다이어그램 선, 그래프 및 포인터에만 사용되며, 모든 선은 균일한 두께와 둥근 끝 모양을 가집니다.
  2. 둥글고 단순한 기하학. 원, 캡슐, 둥근 직사각형, 부드러운 블롭. 도형에 약 12개 이상의 패스 포인트가 필요하면 단순화하세요.
  3. 짙고 채도 높은 배경, 강렬한 악센트. 어두운 그라데이션 필드(남색, 인디고, 가지색, 진한 청록색)에 하나 또는 두 개의 선명한 악센트 색상을 사용합니다. 따뜻함과 차가움의 대비가 시선을 주제로 끌어당깁니다.
  4. 빛은 방향성을 가집니다. 모든 객체는 기본 색상 + 음영(단순히 어둡게 하는 것이 아니라 파란색/보라색 계열로 색조 이동) + 하이라이트 슬리버로 구성됩니다. 장면당 하나의 광원 방향만 사용합니다.
  5. 작고, 얼굴이 거의 없는 캐릭터. 점 눈, 보통 입은 없으며, 짧은 팔다리. 감정은 얼굴 디테일이 아니라 자세와 움직임으로 전달됩니다.
  6. 가장자리는 복잡하게, 중심은 깔끔하게. 배경 레이어에는 작고 대비가 낮은 디테일(별, 입자, 먼 물체)이 있습니다. 주제는 썸네일 크기에서도 선명하고 읽기 쉬워야 합니다.
  7. 정적인 것은 없습니다. 유휴 표류, 느린 카메라 푸시, 시차 효과, 반짝임. 정지된 프레임은 죽은 것처럼 느껴집니다.
  8. 들어올 때는 빠르게, 나갈 때는 부드럽게. 요소는 약간의 오버슈트와 함께 웨이브로 나뉘어 등장합니다. 페이드와 카메라 이동은 부드럽게 마무리됩니다.
  9. 스케일이 주요 특수 효과입니다. 물체를 통해 더 작은 세계로 확대하거나, 물체가 얼마나 작았는지 보여주기 위해 축소하거나, 숫자가 표시될 때까지 아이콘을 반복합니다.
  10. 글은 최소한으로. 내레이션이 내용을 전달합니다. 화면상의 텍스트는 레이블, 숫자 및 가끔씩의 재미있는 요점에만 사용합니다.

워크플로

두 번의 승인 체크포인트와 함께 단계별로 작업합니다. 스크립트와 스토리보드는 변경 비용이 저렴하지만 애니메이션은 비용이 많이 들므로, 제작 전에 합의를 얻으세요.

  1. 브리핑. 누락된 정보만 물어보세요: 주제, 대상, 길이, 화면 비율, 음성 소스(사용자 녹음, remotion-markup의 voiceover.md를 통한 ElevenLabs, 무음 플레이스홀더), 분위기. 기본값: 16:9, 1920×1080, 30fps, 3-5분.
  2. 리서치 → research/facts.md. 주장 | 숫자 | 출처 | 신뢰도 표. 통계를 절대 조작하지 말고, 추정치는 추정치로 표시하세요. 설명 동영상의 품질은 사실의 정확성에 달려 있습니다.
  3. 스크립트 → script.md. references/script-and-structure.md를 읽으세요. 체크포인트: 사용자가 스크립트를 승인합니다.
  4. 스토리보드 → storyboard.md, 각 샷당 한 행(템플릿은 스크립트 참조에 있음). 각 샷에 대해 references/scene-recipes.md에서 레시피를 선택하세요. 체크포인트: 사용자가 스토리보드를 승인합니다.
  5. 스타일 바이블. assets/theme.ts를 src/kg/theme.ts로 복사하세요. 각 막(시각적 언어 참조의 "컬러 스크립트")에 대한 팔레트를 선택하여 주장이 전개됨에 따라 분위기가 변화하도록 합니다.
  6. 제작. 먼저 src/kg/에 공유 프리미티브(음영 도형, 별 필드, 캐릭터, 레이블, 카메라 리그)를 만든 다음, src/scenes/에 장면별로 하나의 컴포넌트를 만듭니다. references/visual-language.md와 references/motion-language.md를 읽으세요. 스캐폴딩에는 remotion-create를, 메커니즘에는 remotion-markup을 사용하세요.
  7. 오디오. 먼저 내레이션을 배치하고, 오디오 타이밍에서 각 샷의 길이를 도출합니다(remotion-captions로 단어 타이밍, calculateMetadata로 동적 길이). 배경 음악과 주요 등장마다 부드러운 팝/우쉬 효과음을 추가합니다(remotion-markup의 sfx.md). 내레이션은 약 -20dB RMS, 배경 음악은 그보다 약 8dB 아래, 피크는 -1dBFS 이하로 믹싱합니다. TTS 파일은 종종 0dBFS에서 피크가 나므로, 다른 것을 추가하기 전에 내레이션을 약 0.8로 스케일링하세요(자세한 내용은 references/motion-language.md 참조).
  8. QA 및 렌더링. 각 비트, 프레임 0, 그리고 모든 장면 경계의 양쪽 프레임에서 스틸 이미지를 렌더링합니다. 아래 체크리스트를 실행하고, remotion-render로 렌더링한 후 결과물의 오디오를 측정합니다.

프로젝트 레이아웃

src/
  kg/theme.ts          팔레트, 음영 램프, 이징 프리셋
  kg/primitives/       ShadedSphere, StarField, Character, Label, CameraRig, ...
  scenes/NN-name.tsx   스토리보드 샷 그룹당 하나의 장면
  Video.tsx            장면들을 시퀀싱하고 오디오 소유
public/                내레이션, 음악, 효과음
research/facts.md
script.md
storyboard.md

환경 참고 사항

  • Windows: 프로젝트 경로를 짧게 유지하세요. Remotion이 실행하는 도구(esbuild, 렌더러, 헤드리스 Chrome)는 확인된 경로가 260자를 초과하면 ENOENT 오류와 함께 실패합니다. 이는 AppData 아래나 깊은 세션 폴더 내에서 쉽게 발생하며, 시스템이 경로를 확인하면서 더 길어집니다. D:\my-video와 같은 곳에 스캐폴딩하고, 아무것도 만들기 전에 하나의 스틸 이미지를 먼저 렌더링하세요.
  • Remotion에 번들된 ffmpeg는 최소 빌드로 volumedetect 필터가 없습니다. 레벨을 확인하려면 결과물을 WAV로 디코딩(npx remotion ffmpeg -i out.mp4 -vn -ac 1 -c:a pcm_s16le check.wav)하고 짧은 스크립트로 피크와 RMS를 계산하세요.

렌더링 전 체크리스트

모든 장면의 시작, 중간, 끝에서 스틸 이미지를 렌더링하고, 프레임 0 및 각 장면 경계 양쪽 프레임에 대해 다음을 확인하세요.

  • 다이어그램 선이 아닌 도형에 외곽선이 있나요? 제거하세요.
  • 각 객체에 장면의 단일 광원 방향으로부터 비춰지는 음영 면과 하이라이트가 있나요?
  • 프레임에 배경 색상군을 포함하여 최대 2개의 악센트 색상만 있나요?
  • 주제가 25% 크기에서도 읽기 쉬운가요? 그렇지 않다면 키우거나 주변의 대비를 낮추세요.
  • 장면의 매 초마다 무언가 움직이나요(유휴 모션, 카메라, 입자)?
  • 새로운 시각적 비트가 최소 2-4초마다, 보통 문장과 맞물려 나타나나요?
  • 화면상 텍스트는 6단어 이하이고, 1080p에서 최소 36픽셀이며, 문장 첫 글자 대문자 형식인가요?
  • 화면상의 모든 숫자가 출처와 함께 research/facts.md에 있나요?
  • 모든 글로우는 단일 그라데이션(겹쳐진 밴드 없음)이며, 프레임 0에서 화면 밖에서 대기 중인 요소에 보이는 글로우가 없나요?
  • 비네트는 밝고(모서리에서 약 35%) 보라색으로 착색되어 밝은 주제가 탁해지지 않나요?
  • 커지는 주제 옆의 텍스트가 주제의 최대 크기와 겹치지 않고, 카운터의 상자가 가장 넓은 값을 수용할 수 있나요?
  • 렌더링 후: 오디오 피크가 -1dBFS 이하이고, 내레이션이 음악보다 분명히 위에 있나요?

가드레일

  • 오리지널리티. 이 스타일은 하나의 장르입니다. 채널의 정체성은 아닙니다. 출력물에 Kurzgesagt 이름, 로고, 인트로/아웃트로 또는 특정 캐릭터(예: 새)를 사용하지 마세요. 독창적인 캐릭터와 엔드 카드를 디자인하고, 동영상을 해당 채널의 작품으로 제시하지 마세요.
  • 정확성. 설명 동영상은 가르치는 목적을 가지므로, 예쁜 프레임보다 출처가 있는 사실이 더 중요합니다. 내레이션에서 불확실성을 표면화하고("과학자들은 추정합니다..."), 동영상을 출처 목록으로 마무리하세요.
  • 접근성. 자막을 추가하세요(remotion-captions). 초당 3회 이상의 플래시(전체 프레임 줌 스루 플래시 포함)를 피하세요. 차트 시리즈를 색상으로만 인코딩하지 말고 직접 레이블을 붙이세요.
  • 무거운 주제. 귀여운 비주얼과 심각한 주제의 조합은 이 장르의 매력이자 위험 요소입니다. 죽음, 질병, 전쟁, 빈곤과 같은 주제에 대해서는 비주얼을 단순하게 유지하고 농담을 자제하세요.

참조 파일

언제 읽을 것파일명
팔레트 선택, 음영 도형 그리기, 배경, 캐릭터, 타이포그래피, 구성, 객체 레시피references/visual-language.md
애니메이션 작성: 이징, 팝인, 유휴 모션, 카메라, 시차, 줌 스루, 그래프, 타이밍references/motion-language.md
내레이션 작성, 아크 계획, 페이싱, 사실 시트, 샷 목록references/script-and-structure.md
각 샷 계획: 스케일 공개, 100명의 군중, 컷어웨이, 타임라인 러시, 프로세스 다이어그램 등references/scene-recipes.md
디자인 토큰의 시작점 (팔레트, 음영 램프, 이징 프리셋)assets/theme.ts

관련 스킬