Communitygithub.com

explainer-editor: 화면 위 무대에서 설명을 펼치는 숏폼 에디터

사용자가 촬영한 세로(9:16) 원본 테이크를 가져와, 발화자를 프레임 아래쪽에 배치하고 그 위에 설명을 시각화하는 Pipecorn EXPLAINER LANGUAGE 스타일의 숏폼 영상으로 편집합니다. After Effects 모션 디자인처럼 장면 전환, 모션 블러, 그림자와 광원 효과를 적용합니다.

explainer-editor: 화면 위 무대에서 설명을 펼치는 숏폼 에디터란 무엇인가요?

**explainer-editor**는 사용자가 카메라를 보고 말하는 하나의 세로 테이크를 입력받아, 화면 하단에 둥근 모서리 프레임 안에 발화자를 배치하고 그 위로 머리가 튀어나오는 효과를 적용한 후, 그들이 말하는 내용을 **위에, 말하는 그 순간에** 시각화하는 AI 에이전트 기술입니다. 이 스킬은 After Effects 스타일의 모션 디자인을 따르며, 카메라 이동(채찍 팬, 상승, 푸시스루), 모션 블러, 스프링 커브, 모든 요소의 느린 떨림과 시차(parallax) 효과, 부드러운 그림자와 광선을 포함합니다. 숏은 발화자 프레임 아래와 위에 자막이 하나씩 나타나고, 매초마다 새로운 시각적 요소가 등장합니다. Pipecorn의 EXPLAINER LANGUAGE에 따라 제작되며, `short-editor` 스킬을 엔진으로 사용하지만 레이아웃, 무대 구성, 카메라 움직임, 모션 블러, 캡션, 사운드 등 전용 파일을 별도로 관리합니다. 사용자는 선택적으로 라이트/다크 테마, 배경 음악, 속도(×1 또는 ×1.1)를 설정할 수 있으며, 브랜드 키트(brand-kit.md)에 따라 실제 로고, 스크린샷, 숫자만 사용하고 가상의 데이터는 절대 사용하지 않습니다. 음성 전사(transcription) 후 장면 분석을 통해 스토리보드를 작성하고, 각 구절(리스트, 용어 정의, 숫자, 비교 등)에 맞는 시각적 요소(목록 막대, 핀, 화살표, 트리, 방정식, 카드 등)를 자동 배치합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ihsaneGTM/gtm-skills/tree/main/plugins/video/skills/explainer-editor

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

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

문서

explainer-editor: 화면 위 무대에서 설명을 펼치는 숏폼 에디터은(는) 무엇을 하나요?

사용자는 카메라를 보고 말하는 하나의 세로 테이크를 전달합니다. 이 스킬은 발화자를 조명이 설정된 어두운 무대 아래쪽 프레임에 배치하고, 머리가 프레임 위로 튀어나오게 하며, 그들이 설명하는 내용을 위에, 말하는 그 순간에 After Effects 편집과 같은 모션과 조명으로 그려냅니다. 카메라가 이동하는 장면, 날아다니고 떠오르며 모션 블러와 함께 나타나는 형상, 각각의 그림자와 광선, 매초마다 무대에 새로 등장하는 요소, 모든 움직임에 딸린 사운드로 구성됩니다. 발화자의 말은 무대와 발화자 사이에 하나씩 표시됩니다. 1분에 몇 번씩 카메라 플래시가 끊기며 발화자가 풀스크린으로 전환됩니다.

숏의 모습은 이미 결정되어 있습니다: § 설명 언어(explainer language) (파이프라인 아래 참조). 사용자가 클라이언트를 위해 편집한 숏(108초, 텍스트 훅 가이드)을 프레임 단위로 측정한 후, 첫 번째 편집(2026-10-05: "After Effects가 전혀 아니고, 모션 디자인도 아니며, 화면에 표시되는 것이 너무 적고 지루하며, 워시 소리가 빠져있다")과 두 번째 편집("훨씬 낫다. 하지만 요소 뒤에 작은 그림자와 광선이 충분하지 않고, 완전 검은 배경이 요소를 돋보이게 하지 않는다. 더 많은 아주 가벼운 사운드를 위한 팩이 여기 있다")에서 나온 모든 평가 항목이 이제 규칙이 되었습니다. 모든 새 테이크는 이 규칙에서 시작하십시오(init.sh가 이를 구성합니다). 재검토하지 마십시오.

이 스킬은 short-editor 스킬의 엔진 위에서 실행됩니다. 렌더링, 믹스, 인물 매트(사람 마스킹), 미리보기, 빌드, 검증은 엔진의 파일을 사용하며, 이는 ../short-editor/SKILL.md § 전제 조건, § 파일 구조, § 4 ~ § 6에 명시되어 있습니다. 본 파일은 차이점을 설명합니다. 이 스킬만의 파일은 다음과 같습니다: 레이아웃(layout.mjs: 발화자 프레임과 풀스크린 숨 쉬는 구간, 엔진의 build.sh와 preview.mjs가 줌 대신 실행), 무대(stage.mjs: 카메라, 장면, 모션 블러, 형상, 캡션, 모션 사운드), 배경음악(bed.mjs), 스틸 이미지(stills.mjs), 측정(measure.mjs). 첫 컷 전, 모든 실행 시 다음을 읽으십시오:

  • ../../references/pitfalls.md § 전사 및 캡션, § 작업 방법: 편집을 작성할 때의 함정 (다른 섹션은 해당 단계에서 참조: § 수동 측정 사운드 전 오디오, § ffmpeg 및 § 쉘 명령어 전의 셸; 엔진의 도구는 나머지 규칙을 따름)
  • ../../references/brand-kit.md (편집에 표시될 때): 실제 로고, 스크린샷, 숫자만 사용하며 가상의 것은 절대 사용하지 않음, workspace/brand/에 한 번 설정된 브랜드 세트 (§ 브랜드, 한 번 설정)
  • $X/example/: 참조 프로젝트, 완성된 편집의 모든 파일 (stage.theme: "light"는 밝은 버전용); $X/example-2/: 다른 테이크(두 개의 촬영, 조용한 녹음, 숨 쉬는 구간 없음)에서 처음부터 실행한 스킬과 그 실행이 변경한 사항

단계에서 필요할 때 읽으십시오: ../../references/audio-spec.md (레벨 관련: 음량 표준, 청취 시 레벨 측정 방법). 엔진의 수치: node plugins/video/skills/short-editor/scripts/api.mjs <모듈> [수치], 소스 코드는 절대 보지 마십시오.

저는 비디오를 보거나 오디오를 들을 수 없습니다. 머리 위치, 단어 시작점, 워시 소리의 크기 등은 모두 측정값입니다. verify.mjs는 "준비 완료" 상태와 깨진 파일 사이를 중재합니다. measure.mjs는 사운드 디자인이 실제로 들리는지 확인합니다. 절대 건너뛰지 마십시오.

아래 모든 경로는 GTM by Pipecorn 폴더의 루트를 기준으로 합니다. $X는 plugins/video/skills/explainer-editor/scripts (이 스킬), $E는 plugins/video/skills/short-editor/scripts (엔진)을 의미합니다. 절대 경로로 실행하십시오.

전제 조건 (사전 점검: 작업 전 확인)

엔진의 조건: ffmpeg + ffprobe가 PATH에 있어야 함(brew install ffmpeg), python3(Xcode 명령줄 도구) 필요. 여기서 설치할 수 없으므로 누락된 경우 명령어를 알리고 중단하십시오. 나머지는 자체적으로 준비됨: 엔진의 bootstrap.mjs(node 패키지, 음성-텍스트 가상 환경, 음악 라이브러리)는 init.sh, transcribe.sh, build.sh 내부에서 실행되며, init.sh는 글꼴을 프로젝트의 assets/fonts/로 가져옵니다: Inter(ExtraBold, Bold, SemiBold, Medium; SIL Open Font License, npm 패키지 inter-ui에서 jsDelivr를 통해) 및 Instrument Serif Italic(Google Fonts, OFL). 시스템 전체에 설치되는 것은 없습니다. **swiftc**는 인물 매트를 빌드합니다. 이것이 없으면 머리가 프레임 위로 튀어나오지 않고(프레임이 단순히 발화자를 자름) 무대가 오버레이 레이어에 그려집니다. 이 점을 알리십시오.

파일 구조

엔진이 명시한 대로, 다음 방식만 따릅니다: 편집당 하나의 작업 디렉터리(workspace/projects/<slug>/, 다른 프로젝트와 중복되지 않는 슬러그), 완성된 파일 workspace/videos/<slug>.mp4. 같은 테이크라도 다른 프로젝트의 파일은 절대 사용하지 않음. 임시 파일은 프로젝트의 tmp/에 저장, /tmp/에 저장하지 않음. 스킬의 scripts/는 읽기 전용으로 유지. 사용자의 이미지(스크린샷, 로고, 비디오 프레임)는 프로젝트의 assets/에 저장.

파이프라인

0. 작업 디렉터리 설정

$X/init.sh workspace/projects/<slug> <source.mp4> workspace/videos/<slug>.mp4 [--theme light]

엔진의 기본 구조(파일에서 읽는 project.json, assets/sfx-top5/의 SFX 팩), 그 다음 이 스킬의 plan.mjs와 edl.mjs, explainer 언어의 키를 project.json에 설정(style: "explainer", layout: $X/layout.mjs 경로, blurBand 0), sfxMasterDb를 테이크 음성에 설정(음량 + 15.3 dB, -20.5 LUFS 아래 1dB당 +0.13 dB: 기본 스킬과 동일한 청취 음량, 테이크 레벨과 무관), 글꼴, 더 작은 인물 테이크용 1080x1920 마스터(두 번째 실행 시 유지), 테마(stage.theme: dark(기본) 또는 light; --theme light로 설정; 이미 설정된 프로젝트는 자체 테마 유지). 이후 모든 명령은 해당 디렉터리에서 실행하십시오.

0.2. 먼저, 한 가지 질문으로 물으십시오

테마(어두운 기본 또는 밝은: 동일한 무대, 흰 유리, 어두운 단어, 더 부드러운 그림자), 음악(라이브러리, plugins/video/assets/music/; 기본값 Convergence; Mixkit이 아닌 트랙은 동영상 수익화를 차단할 수 있음을 알림), 속도(기본 ×1; 느린 발화는 ×1.1에서 더 잘 읽힘), 그리고 사용자가 제공할 수 있는 이미지(제품 스크린샷, 언급한 비디오 프레임, 로고, 실제 숫자). 사용자가 제공하지 않은 것은 단어와 하우스 픽토그램으로 그리며, 가상의 스크린이나 숫자는 절대 사용하지 않음. GTM by Pipecorn 페이지에서 실행할 때 첫 메시지의 브리프가 답변을 제공합니다(테마는 메모에서: "light"는 밝은 테마 의미). 아래 규칙으로 결정하고 다시 묻지 마십시오.

Pipecorn 제네릭: 모든 스타일의 BONUS, 매번 질문, 기본적으로 켜지지 않음 (plugins/video/references/pipecorn-generic.md): 맨 끝에 약 6초, Pipecorn, 그 다음 값들이 하나의 슬롯에서 서로 교체, 다시 Pipecorn, 음악 없음. 아니오 · 예, 어떤 값으로 할지(1~4개; node $E/generic.mjs --list; 기본값: 전화 커버리지, 연결률, 파이프라인).

더 나은 목소리: BONUS, 매번 질문, 기본적으로 켜지지 않음 (plugins/video/references/voice-clean.md): ElevenLabs의 음성 분리기가 테이크의 방 에코와 노이즈를 제거합니다. 아니오 · 예, 내 목소리를 더 좋게. ElevenLabs 커넥터가 필요합니다. 키가 없으면 한 줄로 존재함을 알리고(Settings › Connectors › Add key) 계속 진행하십시오. 예인 경우, 1단계 전에: node plugins/video/motion/voice.mjs clean <source>, 그런 다음 project.json › source는 <...>-voice.<ext>(동일 길이, 이미지 변경 없음).

1. 전사, 단어 그대로

$E/transcribe.sh --lang en      # 실제로 사용된 언어; 그런 다음 project.json "lang"

words.json, 원본 테이크의 시간 기준. 절대 번역하지 않음. 재시작이 많은 테이크는 먼저 엔진의 rough-cut.mjs(short-editor/SKILL.md § 0.7)로 조립한 후 다시 전사합니다. 그런 다음 node $E/words.mjs (엔진의 것): words-fixed.json, 각 단어의 시작점을 침묵에서 목소리로 이동하고, 실제 끝을 일시 정지 전으로 이동, 의심스러운 단어는 나열됨. words.mjs env|end|say로 하나를 읽습니다(short-editor/SKILL.md § 1). 자체 스크립트를 사용하지 마십시오.

2. 매트와 프레임

node $E/matte.mjs                          # 인물 매트 (swiftc 필요), 1분당 약 1분
node $X/layout.mjs --measure --write       # 머리 위치 → project.json stage
node $X/layout.mjs --print                 # 프레임, 캡션, 숨 쉬는 구간

--measure는 테이크의 촬영(소스 컷, verify.mjs가 찾는 대로)을 찾고 각 촬영에서 매트의 머리를 읽습니다(촬영당 32 프레임): 프레임 너비는 가장 긴 촬영의 머리를 참조 크기(226px 너비)로 설정합니다. 가까운 테이크는 더 좁은 프레임을 얻습니다(중앙 정렬, 어깨와 가슴이 들어오도록: 작업 예제에서는 머리가 테이크 너비의 38%로 598px, 두 번째 테이크는 782px; --keep-frame은 참조 942px를 유지하고 프레임이 주로 얼굴을 보여줄 것이라고 경고). 각 촬영에서 프레임의 상단 가장자리는 머리의 일반적인 상단 아래 88px를 통과합니다(참조 기준), 그래서 머리가 프레임 위로 튀어나옵니다. 캡션은 머리가 일반적으로 올라가는 높이만큼(최대 90px) 위로 이동하고 머리 위 20px에 유지됩니다. 풀스크린은 머리를 너비의 45%로 만듭니다. 여러 촬영이 있는 테이크는 stage.shots를 얻습니다(각 촬영의 크롭, 캡션 및 전체 프레이밍; 컷에서 카메라 전환, 프레임 유지). 미리보기(§ 5)에서 확인하십시오. 이 스타일에서 소스 컷은 발화자 프레임 내부에서 발생하며, 그림의 작은 부분입니다. verify.mjs는 "전체 프레임 플레이트 아래"로 보고할 수 있습니다(두 번째 테이크). 프레임 자체의 차이로 컷이 프레임에 도달하는지 확인하고, 눈으로 확인하지 마십시오.

3. 대본 읽기, 스토리보드 작성

이것은 판단 단계이자 전체 작업입니다. 대본을 처음부터 끝까지 읽고 스토리보드를 코드 작성 전에 목록으로 작성하십시오: 장면, 각 장면에서 어떤 단어에 무엇이 나타나는지.

  • 장면, 카메라 이동으로 연결. 장면은 하나의 아이디어(약속, 제품, 프로세스, 단계, 목록, 비교)입니다: 4~8초, 그런 다음 카메라가 다음 장면으로 이동합니다. 기본 이동은 채찍 팬(오른쪽으로 패닝: 이전 장면이 흐릿하게 왼쪽으로 사라지고, 빛줄기가 교차하며, 새 장면이 도착); 다음 아이디어가 더 깊이 들어갈 때는 상승(이전 장면이 위로 사라짐); 푸시스루(이전 장면을 통과하여 새 장면이 답할 때, "이유", 공개); 숨 쉬는 구간 뒤에만 컷. 가능하면 같은 이동을 연속으로 사용하지 마십시오.

  • 장면은 구성되어 도착. 장면 자체 시간에 배치된 것은 카메라와 함께 이동합니다(이동이 끝날 때 이미 존재: 참조는 이동 후 빈 무대를 보여주지 않음). 나중에 오는 것은 해당 단어에 들어옵니다. 장면의 내용이 차례로 명명될 때는 모두 장면 시간에 배치하고, 어둡거나 초점이 맞지 않게(dim: 0.6, blur: 10) 설정한 후 각 단어에 불을 붙입니다(.blurTo(on(i), 0).lit(on(i)) 및 해당 사운드): 무대는 첫 프레임부터 가득 차 있고 모든 단어에서 계속 움직입니다(두 번째 테이크의 페르소나와 채널, 2026-10-05).

  • 매초마다 새로운 것. 사물, 숫자, 단계, 주장을 명명하는 각 구절은 해당 단어에 형상 또는 이동을 얻습니다: 형상 등장, 레이블 공개, 무언가 주위에 표시, 무언가 조명, 장면 이동. 화면에 새로운 것이 2초 이상 없으면 지루하게 읽힙니다: 첫 번째 편집의 평가였습니다(2026-10-05).

  • 제목은 섹션을 두 줄의 짧은 줄로 명명하며, 핵심 단어는 세리프체(*Killer* Text Hooks), 개수나 주장이 있는 줄에 빨간 상자(3 Winning Types Of). 섹션과 함께 변경되며, 이전 제목은 새 단어가 올라오기 전에 위로 사라집니다.

  • 무엇에 어떤 형상:

    말하는 내용형상
    N개 항목, 단계, 규칙의 목록S.list: 왼쪽에서 날아오는 막대, 각각 말할 때까지 흐릿한 레이블(reveal), 설명된 것 조명(focus), 끝에서 평가 표시(glyph: "check", "cross"…); header는 막대를 섹션 헤더로 전환
    이름, 용어, 정의S.pill(그 안에 픽토그램: glyph), S.arrow(명명된 것에서), S.ping(ring: true) 주위, S.mark(원, 프레임, 밑줄) 강조하는 단어에 그림
    부분으로 구성된 것, 원인과 결과, 체인S.tree(자식들이 떨어지며 들어오고, 각각 불꽃으로 연결), S.wires(둘 사이)
    조합, 비교S.equation(+, =), VS 기호와 S.shake 및 글리치
    제품, 도구, 플랫폼사용자 로고(S.icon, 광선, ring으로 전화 벨소리), 스크린샷(S.card 또는 S.phone), 사용 시 S.prompt 입력
    예시, 비디오, 시리즈사용자 사진의 S.cards 또는 테이크 자체 프레임(stills.mjs)과 player 카드
    검색, 여러 소스, 군중glyphs가 있는 S.cards 그리드, 하나씩 조명(스캔)
    숫자S.count(숫자까지 올라감) 또는 색상 단어({g:22 Days} 초록, {r:A Few Weeks} 빨강)
    좋음/나쁨, 예/아니오S.glyph(녹색 타일의 check, 빨간 타일의 cross), 막대의 평가
    행동 유도제목(Comment "X", To Get The *Skill*), S.file(보내는 것)
  • 숨 쉬는 구간(FULL): 발화자 풀스크린으로 하드 컷(들어갈 때 카메라 플래시, 나갈 때 워시 소리), 캡션 외에는 아무것도 그리지 않음. 고백, 결정타, 강한 의견에서; 2~6초; 처음 15초 내에는 절대 사용하지 않음. 말하는 머리가 아닌 촬영(b-roll, 와이드 샷)은 전체 화면으로 전환: [from, to, { zoom: 1 }]. 숨 쉬는 구간 후 장면은 그 뒤에서 열립니다(S.scene(<breather end> - 0.45, "push")), 그래서 숨 쉬는 구간이 끝날 때 이미 존재합니다.

  • 실제 이름과 실제 숫자만(brand-kit.md): 사용자가 제공하지 않은 화면이나 숫자가 필요한 형상은 단어와 하우스 픽토그램으로 그리거나 삭제합니다.

  • 캡션은 단어 그대로: fi

[이하 생략]


참고: 위 내용은 사용자가 제공한 SKILL.md의 일부를 번역한 것입니다. 전체 문서가 잘린 경우, 나머지 부분도 동일한 형식과 정확도로 번역되어야 합니다.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬