Communitygithub.com

concept-reel: 내레이션 없는 콘셉트 설명 영상

Canvas, Playwright, FFmpeg로 내레이션 없는 1080p 자막 콘셉트 영상을 만들거나 수정합니다. 콘텐츠 중심 스토리보드, 15가지 모션 디자인 스타일, 결정적 애니메이션, 미리보기 콘택트 시트, 이벤트에 맞춘 효과음.

concept-reel: 내레이션 없는 콘셉트 설명 영상란 무엇인가요?

제품 데모 영상 레시피 3단계(원리 설명), Jogzh/concept-reel(2026-10-13 생성). README에 스타일 미리보기 이미지와 WebP 예시 클립 포함. 시청자가 대상을 알아보고 변화를 보고 인과를 이해하는 것이 목표. 숫자는 계산에서, 사실에는 출처를 달고, raw.mp4 → 이벤트 효과음 → final.mp4 순으로 렌더링.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add Jogzh/concept-reel

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

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

문서

Concept Reel · 개념 영상

한 문장을 그림으로 설명한다: 시청자가 대상을 알아보고, 변화를 목격하며, 인과 관계를 이해한다. 실행 가능한 엔지니어링, 스토리보드, 사실 출처, 그리고 요청 범위 내의 프리뷰 또는 완성본을 제공한다.

이 skill 디렉터리에는 공유 엔진이 포함되어 있으며, 프로젝트는 사용자 프로젝트 내에 구축할 수 있다. 명령어의 engine/, scripts/는 이 skill 디렉터리 기준 상대 경로이며, 호출 시 실제 경로를 사용한다. 현재 고정 화면 비율은 1920×1080 가로 화면이며, 기본 30fps, 새 프로젝트 생성 시 프레임 레이트를 설정할 수 있다.

작업별 읽기

제작 원칙

  • 먼저 시청자가 무엇을 이해해야 하는지 결정한 후, 대상과 동작을 선택한다. 기하학적 도형은 차트와 추상적 양에 사용될 수 있으며, 실제 사물을 설명할 때는 식별 가능한 형태가 있어야 한다.
  • 자막의 변화는 화면에서 발생해야 한다. 숫자는 계산에서 비롯되며, 개략도, 적용 조건 및 불확실한 사실은 명확히 표시하고, 중요한 사실 기록은 검증 가능한 출처를 남긴다.
  • 한 번에 하나의 주요 시각적 초점만 배치한다. 자막은 안정적일 수 있으며, 제목, 키워드 및 태그는 대상과 여백 레이아웃에 따라 배치한다.
  • 글꼴, 색상 의미 및 움직임 감각을 통일한다. 렌즈 중심, 앵글 및 정보 밀도는 내용에 따라 선택한다. 스타일 프리셋은 시작점이며, 색상 팔레트와 동작을 조정하고, 하나의 주 스타일과 하나의 보조 스타일을 조합할 수 있다.
  • 자막이 완전히 표시된 후에 읽기 체류 시간을 계산하며, 그림 보기와 추론에는 추가 시간이 필요하다. 결론은 먼저 멈춘 후 퇴장한다.
  • 애니메이션은 t에 의해 결정된다. 난수는 고정 시드를 사용하며, 실시간 시계, 타이머 또는 프레임 간 누적 상태에 의해 화면이 결정되지 않는다.
  • 원본 예제는 구현 방법을 학습하기 위한 것이며, 새 영상은 자체 주제, 텍스트 및 스토리보드를 기준으로 제작한다. 출처와 자료 경계는 NOTICE를 참조한다.

작업 흐름

전달 범위를 결정한다. 주제, 기존 텍스트, 기존 나쁜 장면, 길이, 스타일, 배경 음악 및 전체 내보내기 필요 여부를 식별한다. 컨텍스트에서 추론할 수 있는 선택은 바로 진행하며, 결과에 영향을 미치는 누락된 요구 사항만 명확히 한다. 사용자가 전체 제작을 승인한 경우, 계속 완료하고 단계별 승인을 반복적으로 요청하지 않는다.

사실과 스토리보드를 정리한다. 한 문장 핵심 문제와 사실표(사실, 출처, 적용 조건, 확신 정도)를 작성한다. 장면별로 시간, 내러티브 작업, 대상 및 초점, 텍스트 및 읽기 순서, 동작, 전체 읽기 체류 시간 및 사운드를 기록한다. 먼저 그림으로 그릴 수 없는 문장을 해결한 후, 시간을 배분한다. 기존 텍스트의 원래 의미를 유지하며, 수정이 필요한 사실이나 구조는 이유를 설명한다.

스타일을 그리기 방식에 적용한다. 명확한 스타일이 없는 경우, 대상, 공간 관계, 정보 밀도, 움직임 어조 및 구현 비용을 고려하여 2-3가지 방향을 검토한 후, 내용에 적합한 방안을 선택한다. 스토리보드에는 선택 이유, 식별 가능한 특징 및 구현 경계를 기록한다. 스타일 갤러리를 사용하여 동작을 탐색하지만, 자체 영상은 여전히 사실과 스토리보드를 기준으로 제작한다. 3D, 유리 및 액체 프리셋은 Canvas에 적합하며, 복잡한 실제 렌더링은 별도 구현이 필요하며, 예능 자막은 여전히 가로 화면이다.

먼저 핵심 장면을 검증한다. 환경을 확인하고, 프로젝트를 생성한 후, 가장 어렵거나 스타일을 가장 잘 대표하는 구간을 구현한다. 스켈레톤에는 완성 화면이 없으며, SUBS와 장면 함수를 채워야 한다. 기존 스토리보드는 유지되며, 기존 소스 코드는 기본적으로 덮어쓰지 않는다.

python scripts/check_env.py
python scripts/new_film.py --list-styles
python scripts/new_film.py --describe-style isometric
python scripts/new_film.py <프로젝트 디렉터리> --style isometric --title "영상 제목" --duration 60 --fps 30
python engine/render.py <프로젝트 디렉터리> --serve
python engine/render.py <프로젝트 디렉터리> --stills 2.5 8 15
python engine/render.py <프로젝트 디렉터리> --motion 8 10 12

환경에 종속성이 누락된 경우 README에 따라 설치하고, 글꼴이 누락된 경우 python engine/get_fonts.py를 실행한다. 기본적으로 번들된 Chromium을 사용하며, 사용자가 로컬 Chrome이 필요한 경우 --browser chrome을 전달한다.

--style ID와 --world B/C는 상호 배타적이며, 지정하지 않으면 기본 C를 유지한다. 새 스타일 프로젝트에는 조정 가능한 STYLE 레시피가 내장되며, 공유 VStyles를 사용한다. motion.fps는 스타일 동작의 권장 샘플링 빈도를 나타내며, 실제 출력 프레임 레이트는 --fps에 의해 결정된다. 스켈레톤은 자동으로 주제 콘텐츠를 생성하지 않는다.

확인 후 확장한다. 실제 스크린샷을 보고, 대상이 인식 가능한지, 동작이 설명을 담당하는지, 텍스트가 읽을 수 있는지 확인하며, 대상 시청 크기에서 가림 여부를 확인한다. 발견된 문제를 조정하고 관련 시점을 재검토한 후, 전체 영상으로 확장한다. 한 장면은 하나의 함수로, 자막은 draw의 최외곽에서 그린다. 복잡한 챕터는 파일을 분할하여 index.html에서 선언할 수 있다.

python engine/render.py <프로젝트 디렉터리> --sheet 16
python engine/render.py <프로젝트 디렉터리> --det
python engine/render.py <프로젝트 디렉터리> --clip 0 5 preview

--sheet 단일 값은 프레임 수를 나타내고, 여러 값은 지정된 시점을 나타낸다. --det 실패 시 Canvas 상태, 난수 시드 및 프레임 간 캐시를 확인해야 하며, 실패를 통과라고 부르면 안 된다.

권한 범위에 따라 내보내기 및 사운드 합성. 완성본 요청 시 전체 영상 렌더링, 이벤트 내보내기 및 오디오 합성을 수행하며, 소스 코드/프리뷰만 필요한 경우 해당 결과 완료 후 전달한다.

python engine/render.py <프로젝트 디렉터리> --jobs 4
python engine/render.py <프로젝트 디렉터리> --events
python engine/audio.py <프로젝트 디렉터리>
# 사용 가능한 외부 배경 음악이 있는 경우
python engine/audio.py <프로젝트 디렉터리> --bgm music.mp3 --bgm-db -8

fr.sfx 이벤트 이름은 tick, soft, chord, bloom (flash 호환), rise, thud, tock, stamp, shimmer, hush이다. 외부 배경 음악이 없어도 배경 사운드와 이벤트 사운드를 합성할 수 있으며, 구체적인 결과는 실제와 같이 설명한다. --wav-only는 합성 오디오 트랙만 출력하고 외부 BGM을 중첩하지 않는다.

검수 및 전달. 내보낸 클립/전체 영상을 연속 시청하고, 진입, 안정적인 읽기, 주요 동작 및 전환 중간 지점을 샘플링한다. 사실과 스토리보드 일치 여부, 오디오-비디오 동기화, 숫자 일치, 글꼴 누락 없음을 확인한다. 발견된 문제를 수정하고, 영향을 받은 장면을 재검토한다. 소스 코드 경로, 프리뷰 또는 renders/final.mp4를 전달하고, 검증 결과와 실제 제한 사항을 간략히 설명하며, 완전히 시청하지 않은 부분은 명확히 명시한다.

엔지니어링 및 산출물

index.html은 /engine/ 공유 리소스와 로컬 film.js를 참조하며, storyboard.md는 스토리보드와 사실을 저장한다. review/는 키프레임, audio/는 이벤트 및 합성 오디오 트랙, renders/는 클립과 완성본을 저장한다. 생성물은 기본적으로 커밋하지 않으며, 재렌더링 가능한 소스 코드를 유지한다.

관련 스킬