Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
본 글은 Claude Code의 '스킬(skill)' 기능을 활용하여 Khan Academy 스타일의 교육 비디오를 무료로 제작하는 방법을 소개합니다. 특히, [khan-explainer]라는 도구를 사용해 칠판 강의, UI 오버 드로잉 등 다양한 형태의 설명 콘텐츠를 만들 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기지난주에 "저는 Claude Code skills가 대부분 쓸모없다고 생각합니다."라는 내용의 LinkedIn 게시물을 올렸습니다. 약 30,000회의 노출과 많은 반대에 부딪혔기 때문에, 제가 무슨 의미였는지 그리고 제 생각을 바꾼 단 하나의 스킬에 대해 정확히 설명해 드리겠습니다.
스킬(skill)이란 Claude Code가 사용자의 요청이 설명을 일치할 때 읽는 markdown 파일입니다. 제가 본 대부분의 스킬들은 프롬프트 단축키일 뿐입니다. 즉, 원래 다시 타이핑해야 할 지침 문단 같은 것입니다. Claude는 이미 평범한 문장만으로도 그 작업을 충분히 수행할 수 있습니다. 단순히 문장을 저장하는 것은 레포지토리(repo)를 만들 가치가 없습니다.
예외는 Claude가 한 번에 즉흥적으로 만들어낼 수 없는 것을 제공하는 스킬입니다. 렌더러(renderer), 하루 종일 공들여 완성한 캡처 레시피, 서른 번의 실패한 출력에서 배운 규칙 목록 같은 것입니다. 그런 종류의 스킬은 설명서가 있는 도구와 같고, 그 설명서가 모델이 읽는 것입니다. khan-explainer가 바로 그런 유형입니다. 저는 이것을 사용하여 Khan Academy 스타일의 설명 비디오를 만들었는데, 펜이 칠판에 그림을 그리고 목소리가 설명을 하는 방식이며, API 키 없이 노트북에서 무료로 전체 과정이 실행됩니다. 제가 이것을 게시한 지 이틀 만에 58개의 별과 16개의 포크가 생겼고, 제가 한 번도 만나본 적 없는 사람으로부터 병합된 풀 리퀘스트(pull request)를 받았습니다.
khan-explainer explains itself
누구도 이 펜을 들고 있지 않습니다. Claude Code가 프롬프트로부터 이 비디오를 그렸습니다. 목소리는 ElevenLabs이며, 나머지 모든 것은 무료입니다. YouTube에서 시청하세요:
모든 모드는 칠판 위의 분필 자국이나 화이트보드의 마커로 렌더링되며, 가로 또는 세로 방향을 지원합니다. 환경 변수 하나만으로 테마를 전환할 수 있으며, 단 하나의 비트(beat)로도 영상 중간에 보드를 뒤집을 수 있습니다.
The same khan-explainer scene rendered on a blackboard and on a whiteboard
같은 장면 파일이지만, 어둡게와 밝게 렌더링됩니다. 색상 이름은 하나에서는 분필에 매핑되고 다른 하나에서는 마커에 매핑됩니다.
여기에 비디오 모델은 전혀 사용되지 않습니다. 네 가지 지루한 요소가 작업을 수행합니다:
say 명령어가 각 문장을 오디오 파일로 말해줍니다. 기계적이지만 무료이며, 모든 Mac에 탑재되어 있고, 각 구절이 정확히 얼마나 오래 걸리는지 보고합니다.이것이 전체 제작 재료 목록입니다. 이러한 스타일의 비디오를 만드는 상업적 도구들은 월별 구독료를 청구합니다. Manim도 할 수 있고 아름답지만, 이것은 프롬프트를 입력하는 것이 아니라 학습해야 하는 라이브러리입니다. AI 비디오 생성기는 초당 비용을 청구하며 60초 동안 일관성을 유지하는 다이어그램을 그릴 수는 없습니다. 교육용 비디오의 핵심은 펜이며, 이 펜은 단순히 캔버스 스트로크일 뿐입니다.
제가 본 모든 시도는 같은 방식으로 실패합니다. 누군가 스크립트를 작성하고, 한 문장이 3초 걸릴 것이라고 추측한 다음, 3초 동안 애니메이션을 만들고, 그러다가 음성이 너무 일찍 또는 너무 늦게 나옵니다. 네 번째 문장쯤 되면 펜이 잘못된 것을 그리고 있습니다.
khan-explainer는 절대 추측하지 않습니다. 한 장면(scene)은 **비트(beats)**의 목록입니다. 비트는 말하는 하나의 구절과 그것이 말해지는 동안 발생하는 그림을 포함합니다. 렌더러는 각 비트를 먼저 읽고, 오디오를 측정하여 해당 비트의 그림을 정확히 그 시간만큼 만듭니다. 아무도 타임스탬프를 입력하지 않기 때문에, 펜은 단어보다 앞서 나갈 수 없습니다.
scene({
beats: [
{ say: 'What is an AI agent?', draw: p => {
...
p는 구절이 말해지는 동안 0부터 1까지 실행됩니다. seg(p, 0, .4)는 비트의 처음 40%를 타원형에 사용하고 나머지를 레이블에 사용합니다. 이것이 전체 타이밍 모델입니다. Claude는 규칙들이 충분히 짧아서 머릿속에 담을 수 있기 때문에 이 장면 파일들을 한 줄짜리 프롬프트로 작성합니다.
git clone https://github.com/haiderfarooq3/khan-explainer ~/.claude/skills/khan-explainer
cd ~/.claude/skills/khan-explainer/scripts && npm install && npx playwright install chromium
그런 다음 원하는 비디오를 위해 Claude Code에게 요청합니다.
렌더러(renderer)는 아마도 값의 3분의 1 정도일 것입니다. 나머지는 스킬 파일에 있는 규칙들인데, 이 규칙들은 비디오, 슬라이드, 광고 또는 다이어그램 등 콘텐츠를 생성하는 모든 스킬에 적용됩니다. 이것들이 자리를 얻은 이유입니다.
모든 렌더는 컨택 시트(contact sheet)를 인쇄합니다: 즉, 매 비트가 끝날 때의 보드 전체를 하나의 이미지로 그리고, b000.jpg, b001.jpg 등으로 모든 비트를 전체 크기로 출력합니다. 렌더러는 또한 보드에서 벗어나는 텍스트나 한 레이블이 다른 레이블 위에 놓이는 경우에 대해 WARN 라인도 인쇄합니다. Claude에게 이 시트를 읽고 무언가를 보여주기 전에 모든 경고를 수정하도록 지시합니다. 렌더는 몇 초가 걸리므로 세 번 또는 네 번 반복하며, 사용자는 마지막 결과만 보게 됩니다. 스킬이 무엇을 만들든, 모델이 결과를 살펴볼 수 있는 저렴한 방법을 제공하세요. 이것 없이는 당신이 QA 부서가 되어야 합니다.
say는 무료이고 즉각적이기 때문에 모든 레이아웃 작업은 그것으로 이루어집니다. 보드가 제대로 되면, 장면에 ElevenLabs 음성 ID를 추가합니다. 전체 스크립트가 한 번에 읽히므로 한 사람이 말하는 것처럼 들리고, 그런 다음 API가 반환하는 캐릭터 타임스탬프에서 비트로 다시 잘립니다. 테이크(takes)는 스크립트의 해시 값으로 캐싱되므로, 같은 단어를 재렌더링하는 것은 무료입니다. 그림 하나를 바꾸는 것은 비용이 들지 않습니다. 단어 하나를 바꾸는 것은 새로운 테이크를 구매합니다. 작업 순서를 조정하여 유료 단계가 한 번만 실행되도록 하세요.
LinkedIn 게시물 아래에서 가장 흔한 질문은 교사로부터 왔습니다: 작업 해결 과정의 한 단계가 잘못되었다면, 그 단계를 수정할 수 있나요, 아니면 전체를 다시 실행해야 하나요? 답변은 비트(beat) 하나만 편집하고 재렌더링하면 되고, 새 파일이 몇 초 후에 존재한다는 것입니다. 이것이 가능한 이유는 비트가 에디터의 타임라인이 아니라 몇 줄의 JavaScript이기 때문입니다. 콘텐츠 단위를 설계할 때 사람이 그중 하나를 가리키며
오버레이 UI 튜토리얼의 경우, 해당 스킬은 Playwright를 사용하여 스크린샷을 캡처하고 포인팅할 모든 버튼과 필드에 대해 getBoundingClientRect() 값을 저장합니다. 이는 이미지에서 좌표를 읽지 않습니다. 또한 요소가 포커스되거나, 입력되거나, 메뉴가 그 위에 열릴 때 움직이기 때문에 모든 상태에 대해 다시 측정합니다. view() 헬퍼는 캡처된 픽셀을 보드 단위로 매핑하여 어떤 크롭에서도 링이 올바른 버튼에 위치하도록 합니다. 제가 모델에게 스크린샷에서 좌표를 추측하게 했던 초기 튜토리얼들은 모두 잘못된 것을 동그라미 치곤 했습니다.
이 게시물의 영상은 네 가지 버전(어둡게/밝게, 가로/세로)으로 존재합니다. 이들은 "블랙보드"나 "왼쪽"이라는 단어를 스크립트에 절대 언급하지 않기 때문에 하나의 음성 녹음을 공유합니다. 테마는 깃발이고, 화면 비율은 크기이며, 음성 캐시는 그 어느 것에도 신경 쓰지 않습니다. 만약 콘텐츠에 여러 변형 요소가 필요하다면, 가장 비싼 단계 이전에 어떤 변형 요소들이 있는지 결정하고, 변형 요소와 관련된 모든 것은 공유 레이어에서 제외해야 합니다.
빠른 설명 영상은 대략 단어 수 ÷ 3 + 비트 × 0.15 + 1.3초 동안 재생되며, 오차 범위는 약 5%입니다. 10초짜리 설명 영상은 5비트에 약 24개의 단어로 구성됩니다. 60초짜리 튜토리얼은 15비트에 약 145개의 단어에 해당합니다. 이 스킬 파일에는 이러한 공식이 포함되어 있어 Claude가 음성을 늘려서 맞추는 대신, 실제로 30초인 30초짜리 영상을 계획할 수 있게 합니다. 음성을 속도를 높이는 것이 바로 "너무 AI 같다"는 불만을 유발하는 방식입니다.
모든 좋지 않은 렌더링(render) 경험은 시스템에 무언가를 가르쳤고, 그 교훈은 모델이 읽는 SKILL.md 파일로 들어갑니다. 몇 가지 예시를 들겠습니다. ElevenLabs의 다국어 모델을 속도 1.12와 스타일 0.35 음색으로 사용했을 때, 제가 보여준 첫 번째 사람의 말에 따르면 "너무 AI 같다"는 피드백이 나왔고, 그 결과 시스템은 이제 v3 모델을 사용하고 완성된 비디오를 ffmpeg의 atempo 기능을 이용해 속도를 조절합니다. 스크린샷은 칠판 색상 쪽으로 어둡게 처리하여 바쁜 화면에서도 분필 자국이 읽히도록 합니다. 개인 데이터는 어떤 정지 이미지가 찍히기 전에 페이지에서 숨겨집니다. 데모는 공유되거나 공개적인 채널에서는 절대 연출되지 않습니다. 한 번은 렌더링이 영원히 멈춘 적이 있어, 빌드 스크립트에는 워치독(watchdog) 기능이 포함되어 있습니다. 이 모든 것이 기발한 것은 아닙니다. 이것은 두 번째 시도에 작동하는 기술과 열 번째 시도에 작동하는 기술의 차이일 뿐입니다.
클립 모드는 yt-dlp를 이용해 비디오를 다운로드하고, faster-whisper로 로컬에서 전사(transcribe)한 다음, 사용자가 칠판에 적을 가치가 있는 순간들을 표시할 수 있게 해줍니다. 각 클립은 화자의 말에 맞춰 자체 장면이 그려지며, macOS Vision cutout 기능을 이용하면 세로 버전으로 화자를 칠판 앞에 배치할 수 있습니다. 20분짜리 강연 하나가 오후 만에 22개의 클립으로 만들어졌습니다. 여기서 언급하는 이유는 다음과 같습니다: 렌더러는 전혀 변경되지 않았다는 것입니다. 타이밍이 측정된 오디오에서 나오기 때문에, 오디오는 어디서든 가져올 수 있습니다.
say와 Vision cutout은 Apple API입니다. 렌더러 자체는 브라우저 페이지이며, 첫 외부 기여(아랍어 및 히브리어의 오른쪽에서 왼쪽 쓰기)는 board.html을 직접 구동하여 Windows에서 테스트되었지만, 아직 Windows 음성 경로는 존재하지 않습니다.소셜 미디어의 문제는 이렇습니다: 하루 동안 도달률이 높지만 그게 끝입니다. 피드에 올린 비디오는 일주일 만에 기록에서 사라집니다. 하지만 자신이 소유한 도메인의 페이지는 수년 동안 검색 결과에 남아 있고, AI 답변 엔진에 인용되며, 저장소(repo)가 다시 참조할 수 있는 곳이 됩니다. 이 게시물이 바로 그런 페이지입니다. 무언가를 만들었고 피드에서 좋은 반응을 얻었다면, 트래픽이 아직 존재하는 그 주에, 자신이 통제하는 URL을 가진 어딘가에 그것을 기록해 두어야 합니다.
제가 이런 방식으로 만든 다른 형식들을 보고 싶다면, 콘텐츠 카탈로그에 각 완성된 예시가 하나씩 있습니다. 만약 여러분의 제품을 위해 이런 파이프라인 구축을 원한다면, 보통 시작할 곳은 연락 페이지입니다. 그리고 단순히 이 기술만 원한다면, GitHub에 있으며 MIT 라이선스가 적용되어 있습니다. 가서 무언가를 그려보세요.
khan-explainer가 정말 무료인가요?
네. 헤드리스 Chromium(Playwright)의 HTML 캔버스로 렌더링하고, macOS에 내장된 음성(say)을 사용하며, ffmpeg를 사용합니다. API 키, 계정 또는 사용 제한이 없습니다. 유일하게 선택적인 유료 부분은 Mac 음성을 ElevenLabs 음성으로 교체하는 것인데, 이 경우에도 짧은 스크립트에는 무료 등급에서 작동합니다.
Windows나 Linux에서도 작동하나요?