Communitygithub.com

비디오 개념 기술 (Carli Code)

Carli Code(@carli.code)의 Reels/TikTok용 세로형 영상을 생성합니다. HTML 애니메이션 슬라이드(코드 작성 및 하이라이트, 다이어그램)를 음성 스크립트와 동기화하고, 특정 순간에만 얼굴이 등장합니다. 3단계(질문 → 초안 → 최종 영상)로 구성되며, '개념 영상', '음성 영상', '코드 릴' 등의 요청 시 사용됩니다.

비디오 개념 기술 (Carli Code)란 무엇인가요?

이 스킬은 Carli Code 채널의 기술 개념 설명 영상(Reels/TikTok) 제작을 자동화합니다. 사용자가 주제를 입력하면 스킬이 3단계 프로세스를 통해 영상을 제작합니다. 1단계에서는 주제에 대한 이해도를 확인하고 4가지 질문(난이도, 관점, 예제 코드, 지속 시간 및 얼굴 등장 시점)을 합니다. 2단계에서는 spec.json에 초당 시각적 요소와 음성 스크립트를 상세히 담은 초안을 작성하고, --plan 플래그로 검증한 후 사용자의 승인을 받을 때까지 반복 수정합니다. 3단계에서는 승인된 초안을 바탕으로 전체 영상과 장면별 클립을 생성하고, SEO에 최적화된 설명과 해시태그, 텔레프롬프터용 스크립트를 함께 제공합니다. 최종 결과물은 ~/Documents/Contenido tech skill/<slug>/ 폴더에 저장됩니다. 스킬은 HTML/CSS(검정, 분홍, 보라 브랜드 색상), JavaScript, FFmpeg를 활용하며, 기본 형식은 TikTok 스타일(동적이고 텍스트 최소화, Poppins 800 폰트, 코드와 결과물 중심)입니다. 또한 '얼굴 등장' 변형 모드(60% 그래픽/40% 얼굴)도 지원합니다. 플랫폼 독립적인 이 스킬은 Claude Code, Cursor 등에서 실행 가능하며, 사용자 승인 전까지는 절대 영상을 생성하지 않는 안전한 워크플로우를 제공합니다.

지원 대상✓Claude Code~Codex CLI✓Cursor
npx skills add carlicode/video-concepto-tech

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

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

문서

기술 개념 음성 영상 (Carli Code)

아이디어: Carli가 주제를 정하면, 스킬이 시각적 요소(브랜드 스타일의 애니메이션 슬라이드)를 음성 스크립트 길이와 리듬에 맞춰 구성합니다; Carli는 음성 녹음만 하면 됩니다(그리고 몇 번만 카메라에 등장). 영상의 중심은 코드와 다이어그램이지, 얼굴이 아닙니다.

세 단계로 진행되며 각 단계마다 확인 지점이 있습니다. 단계를 건너뛰지 마세요: Carli가 초안을 승인하기 전까지는 아무것도 제작하지 않습니다.

모든 내용은 스페인어로 진행됩니다. 브랜드 스타일: references/style.md (검정, 분홍 = 강조, 보라 = 구조, Space Grotesk + JetBrains Mono, Lucide 아이콘, 영상 내 이모지 없음).

저장 위치

항상 ~/Documents/Contenido tech skill/<slug>/에 저장합니다 (폴더가 없으면 생성하고, 스킬 사용자는 이 경로를 변경할 수 있습니다; 주제를 kebab-case, 무강세로 서브폴더 생성). 최종 내용:

<slug>/
├── video-completo.mp4        (모든 장면을 연결한 1080x1920, 30fps)
├── clips/01-gancho.mp4 …     (장면별 클립)
├── copy.txt                  (SEO 설명 + 해시태그 5개)
├── guion.txt                 (텔레프롬프터용 음성 텍스트만)
├── portada.txt / portada.png (영상 썸네일 제목: 텍스트 + 1080x1920 이미지)
└── fuente/ spec.json, video.html, meta.json   (편집 및 재내보내기용)

요구 사항 (한 번 확인)

python3 --version && node --version && ffmpeg -version | head -1 && ls "/Applications/Google Chrome.app" >/dev/null && echo OK

없는 것이 있으면 설치 명령어를 알려주세요 (brew install ffmpeg).

1단계 — 질문

references/flujo.md (1단계 섹션)을 읽으세요. 주제에 대한 이해를 요약하고, 항상 4가지 질문(난이도, 관점, 코드 예제, 지속 시간 및 얼굴 등장 시점)을 AskUserQuestion으로 하세요. 답변을 기다리세요.

2단계 — 초당 상세 초안 + 음성 스크립트

references/flujo.md (2단계), references/escenas.md 및 references/voz.md를 읽으세요. fuente/spec.json을 작성하고 다음으로 검증하세요:

python3 ~/.claude/skills/video-concepto-tech/scripts/build_video.py spec.json --plan

채팅에 초안을 제시하세요(이번에는 시간 포함; 표 형식: 초 | 화면 | 음성 (장면별), 전체 스크립트, 얼굴 등장 순간, 가정 사항) 그리고 무엇을 변경할지 물어보세요. 승인되었다고 말할 때까지 반복하세요. 초안의 시간은 --plan의 시간이어야 하며, 임의로 만든 시간이 아니어야 합니다.

3단계 — 전체 영상 + 클립 + 카피 + 스크립트

승인 후에만 진행하세요. references/flujo.md (3단계)를 따르세요: 컴파일 → 각 장면을 --still로 검토 → 백그라운드로 내보내기 → copy.txt 작성 (references/copy-seo.md) → entregar.py. 최종 응답에는 일반 텍스트로 다음을 포함하세요: 경로, 영상 길이, 썸네일 제목(portada.txt 및 portada.png에도 저장; 첫 번째 장면 제목이 썸네일로 적합하지 않으면 spec에 portada를 정의), 전체 카피 및 전체 스크립트를 각각 별도의 코드 블록(표 없음, 복사하여 붙여넣기 준비 완료, 스크립트는 그녀가 말하는 텍스트만, 시간, 제목, 마크 없음, 장면 사이에 빈 줄 하나, 텔레프롬프터에 붙여넣기 위함); 그리고 동일한 카피와 스크립트가 폴더에 .txt 파일로 저장됩니다.

만약 그녀가 이미 오디오를 가지고 있다면

build_video.py spec.json --out fuente --audio voz.m4a가 단어별로 장면을 나누고, 각 장면이 끝나는 정확한 초(--cortes 9.8,24.1,…)를 사용하여 밀리초 단위로 맞춥니다. 그런 다음 export_video.mjs … --audio voz.m4a가 전체 영상과 각 클립에 음성을 혼합합니다.

기본 형식: 내레이션 TikTok (Carli 수정, 2026년 10월)

다른 요청이 없으면, 내레이션 영상은 역동적이고 텍스트를 최소화합니다: 중요한 것은 제목, 코드, 결과입니다.

  • 썸네일: 제목만 표시(cover에 solo_titulo: true), 위쪽에 중앙 정렬(아래 공간은 얼굴용), 5초(dur: 5). 로고 없음, 라일락 선 없음, 화면에 "N부" 없음(카피에 포함).
  • 스티커 스타일 제목 (Carli 참조, 2026년 10월 14일): Poppins 800 대문자, 중앙 정렬 및 크게(108px, 썸네일 120px), 약간 기울어짐, 검정 테두리와 단단한 그림자. 단어는 하나씩 나타납니다(팝). 키워드는 분홍(*단어*), 선택적으로 노랑(~단어~). 제목 아래에는 노랑 알약(pill)에 2-4단어 개념이 포함되며, 제목을 반복하지 않고, 양쪽에 분홍/노랑 스파클이 있습니다.
  • 노랑 #ffd60a: 세 번째 브랜드 악센트(알약과 스파클에만 사용, 분홍은 여전히 강조, 보라는 구조). Carli가 표준으로 승인(Poppins 800 서체와 함께).
  • 개념 장면: 짧은 제목 + 코드(code_focus) + 보이는 결과(salida), 핵심 값은 분홍색. 라일락 킥커 없음, 코드 아래 텍스트 노트 없음, 텍스트가 많은 다이어그램 없음(versus, list…). 개념이 명령어라면 코드는 명령어이고, 결과는 출력입니다.
  • 올바른 영어 기술 용어 사용(커뮤니티에서 그렇게 말하는 경우: "lazy imports", "frozendict", "profiler"), 직역 금지("imports perezosos").
  • 실제 결과: 공식 문서에서 코드 출력을 확인하세요; 요약해야 한다면(긴 테이블), 가정 사항에 명시하세요. 출력이나 명령어를 임의로 만들지 마세요.
  • 화면 요약 없음("Lo que te llevas"): 종료는 브랜드 애니메이션(outro: CARLICODE 한 글자씩 반짝임과 함께 나타나고 커서가 "sígueme"를 클릭), 약 5초, 음성만 "Sígueme para más contenido tech". 제작 전에 명확하지 않은 내용(썸네일에 무엇이 포함되는지, 종료 효과, 다이어그램을 코드로 변환하는 방법 등)을 질문하세요.

변형: 얼굴 등장 개념 영상 (60% 그래픽 / 40% 얼굴)

개념(코드 아님)용: cara 구간과 diagram 구간을 번갈아 배치합니다. "70초 안의 Kubernetes on AWS (EKS)"에서 테스트 완료.

  • 1단계 추가 질문: 관점, 얼굴/그래픽 분할 방법(기본적으로 번갈아, 후크와 종료는 얼굴), 비유 + 아키텍처 또는 둘 중 하나, 얼굴 구간 수신 방법.
  • cara: 그녀가 카메라에 나오는 구간. 제목만 남깁니다(프레임, 아이콘, 텍스트 없음; 그녀가 편집 시 자신의 영상을 위에 덧씌움; dur 필수). "marco": true이면 진행률 표시줄이 있는 "TU CARA AQUÍ" 프레임이 그려집니다(요청 시에만). cara: true로 표시합니다.
  • diagram: 요소별로 구성되는 1000×1000 대형 캔버스(box, dbox, arrow, text, pill, icon, poly, wave; cae는 요소가 떨어지게 함; escala는 확대). references/escenas.md 참조. t를 그 순간 음성이 말하는 문구와 동기화하고 --still로 검토합니다.
  • 제목: ==단어== = 노랑 마커, *단어* 분홍, ~단어~ 텍스트 노랑; title_px는 크기를 조정합니다. 각 구간의 제목은 중앙에 크게 표시됩니다.
  • 70초 구조: 얼굴 8 → 그래픽 12 → 얼굴 6 → 그래픽 14 → 얼굴 6 → 그래픽 12 → 얼굴 6 → 종료 6 (≈63/37). 첫 번째 장면은 cara일 수 있습니다(더 이상 cover 필수 아님).
  • 일반적인 그림(이름이 있는 상자), 공식 AWS 아이콘 사용 안 함; 가정 사항에 명시하세요.

규칙

  • 오디오 없는 영상은 시각적 베이스입니다: 그녀가 보면서 녹음하고 편집합니다(얼굴은 cara로 표시된 장면 위에 덧씌워짐).
  • 기술적 정확성: 단순화된 부분이 있으면 음성과 가정 사항에 명시하세요; 수치를 임의로 만들지 마세요. 예시 데이터 → // datos de ejemplo.
  • 영상당 하나의 개념. 약 90초 이상 필요하면 2부작 시리즈를 제안하세요.
  • 화면 텍스트는 짧게(escenas.md 셀이 제한 표시); 코드는 12줄 이하, 줄당 40자 이하로 휴대폰에서 읽을 수 있게.
  • 편집 방법: fuente/spec.json을 변경하고, 재컴파일 및 재내보내기(--only N은 한 장면만 재내보내고 전체를 다시 연결).

관련 스킬