/stick-figure: 막대 인물로 만드는 카툰 설명 영상
사용자가 아이디어나 질문을 제시합니다 ("하품은 왜 전염될까?", "고양이는 왜 물건을 떨어뜨릴까?", "우리는 왜 미룰까?"). 당신은 답을 한 줄로 작성하고, 이를 보여주는 작은 장면을 연출한 후 몇 프레임을 확인하고, 비디오를 렌더링하여 무음 MP4(5~7초)를 전달합니다.
${CLAUDE_SKILL_DIR} 아래는 이 스킬의 폴더(이 SKILL.md가 있는 폴더)입니다. 환경에서 자동으로 채워지지 않으면 해당 폴더의 경로를 사용하세요. 모든 파일은 사용자의 현재 폴더나 사용자가 지정한 폴더에 저장하세요.
0. 설치 확인
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
몇 초 정도 걸리며, 이 컴퓨터가 설정되어 있는지 확실하지 않으면 실행하세요. "ready": true면 진행합니다. 그렇지 않으면 나열된 "fix" 명령어를 실행하고, 사용자에게 일회성 설치라고 알려주세요: python3 -m pip install playwright (브라우저 드라이버), python3 -m playwright install chromium (Google Chrome이나 Edge가 설치되지 않은 경우에만, 약 150MB), python3 -m pip install imageio-ffmpeg (ffmpeg가 없는 경우). pip가 "externally managed environment" 오류를 내면, 개인 환경을 한 번 생성하고 모든 명령에 해당 Python을 사용하세요: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, 필요한 경우 ~/.animate-skills/bin/python -m playwright install chromium. Windows에서는 python3 대신 py를 사용하세요. 여기서 브라우저를 사용할 수 없는 경우(예: Claude 앱 샌드박스)? 이 파일의 끝부분을 참조하세요.
1. 장면 계획 (간략히)
- 제목(Title): 질문이나 아이디어를 짧게 (최대 ~40자).
- 답변(Answer): 한 줄 설명, 사실적이고 간단하게 (최대 ~45자). 약 1초 후에 나타납니다.
- 장면(The scene): 1
4명의 캐릭터가 57초 동안 3~8개의 동작(비트)으로 답변을 연기합니다. 실제로 일어나는 모습을 보여주세요: 사람에서 사람으로 전염되는 하품, 테이블에서 머그컵을 떨어뜨리는 고양이, 일어나서 꼬리를 흔드는 개. 마지막 비트는 핵심 장면이며 화면에 끝까지 남습니다.
2. 사양 작성
stick-<주제>.json을 저장합니다. 예시 (examples/knock-things-off.json):
{
"title": "Why do cats knock things off tables?",
"answer": "Hunting instinct, and it gets your attention",
"scene": "room",
"props": [{"type": "table", "x": 0.62}, {"type": "cup", "x": 0.70, "on": "table", "wobbleAt": 1.6, "fallAt": 2.15},
{"type": "plant", "x": 0.08}],
"figures": [{"id": "cat", "kind": "cat", "x": 0.52, "on": "table", "head": "#F4A261", "hatColor": "#F4A261"},
{"id": "you", "x": 1.2, "label": "You", "hat": "hair", "hatColor": "#6B4423"}],
"beats": [
{"who": "cat", "do": "look", "at": 0.0, "for": 1.0, "to": 0.7},
{"who": "cat", "do": "swipe", "at": 1.0, "for": 1.2, "to": 0.7, "say": "Boop"},
{"who": "you", "do": "run", "at": 2.3, "for": 0.8, "to": 0.86},
{"who": "you", "do": "surprised", "at": 3.1, "for": 0.9, "say": "My mug!"},
{"who": "cat", "do": "sit", "at": 3.3, "for": 1.0},
{"who": "you", "do": "point", "at": 4.1, "for": 1.2, "to": "cat"},
{"who": "cat", "do": "love", "at": 4.4, "for": 1.0}
],
"arrows": [{"from": "cat", "to": "you", "at": 3.6, "for": 0.4}]
}
더 많은 예시: examples/contagious-yawns.json (세 사람), examples/procrastination.json (사무실, 걸어 들어오는 사람), examples/dog-wags.json (개와 아이 in 공원).
장면(Scene): street (하늘, 포장도로, 도로), park (태양, 언덕, 잔디), room, office (도시가 보이는 창문), classroom (칠판: "board": "text" 추가), night (별과 달), plain ("background": "#hex" 추가).
인물(Figures) (x 0 = 왼쪽 가장자리에서 1 = 오른쪽 가장자리까지; 화면 밖에서 시작해 걸어 들어오게 하려면 -0.2나 1.2 사용). 세 사람은 세로 영상에 잘 맞습니다 (x 0.2, 0.5, 0.8); 네 번째 사람은 scale ~0.85와 ~0.22 간격 필요. 개나 고양이는 옆모습으로 프레임 폭의 약 0.35를 차지합니다 (x는 몸통; 코는 약 0.2 앞): 달려가는 사람에게서 애완동물을 약 0.3 떨어뜨려 멈추세요. 이름 레이블은 짧게 유지 ("Bill", "The bill" 아님):
kind:person(기본값),cat,dog(옆모습, 사람 키의 약 1/3).id,x,label(발 아래 이름: "You", "Your brain"),scale(어린이 0.6-0.8),facing(left/right; 지정하지 않으면 중앙을 바라보며, 마지막으로 움직이거나 가리키거나 쓸어낸 방향을 바라봄).on: 가구 위에 서기:table,desk,bench,shelf,bed(해당 가구 prop을 같은 x에 배치).- 사람:
hat(cap,tophat,beanie,crown,bow,hair),hatColor(머리색),head(얼굴색),glasses(true),tie(색상). 애완동물:head(털색),hatColor(귀색).
비트(Beats) ({"who", "do", "at", "for", "to", "say"}, 초 단위): to는 다른 인물의 id나 x (0-1).
do (사람) | 모습 | do (사람) | 모습 |
|---|---|---|---|
walk, run | to로 이동 | talk | 입 움직임, 한 손 제스처 |
wave | 손 흔들며 큰 미소 | yawn | 팔 올리며 크게 하품, 눈 감음 |
look | to로 고개 돌림 | point | to를 가리킴 (인물의 머리, 또는 x의 테이블 높이) |
think | 턱에 손 (with say: 생각 풍선) | shrug | "글쎄?" |
jump | 기쁨에 점프 | cheer | 팔을 V자로 올림 |
surprised | 뒤로 점프, "!" | sad | 고개 숙임, 눈물 |
sleep | 눈 감고, Zzz | laugh | 깡충깡충, 큰 미소 |
dance | 춤, 음표 | idea | 팔 올림, 전구 |
love | 하트 | fall | 넘어져서 그대로 있음 |
raise | 한 손 들기 (투표, 질문, "저요!") | write | 책상에서 글쓰기 또는 서명 |
relabel | 이름표 변경: {"who": "bill", "do": "relabel", "at": 4, "text": "Law"} |
애완동물: walk, run, jump, sit, swipe (to 방향으로 발톱 휘두르기, 물건 넘어뜨리기), sleep (몸 웅크리고, Zzz), meow/bark/talk (입 벌림; say 추가), surprised (등 구부리기, "!"), look (to 방향으로 고개 돌림), wag (기쁨, 꼬리 흔들기), love, idea, sad.
say는 해당 비트 동안 그 인물 위에 말풍선을 표시합니다 (최대 5단어; think는 생각 풍선; 풍선은 비트의 작은 아이콘을 대체하며, 다른 사람 얼굴을 가리지 않도록 합니다). 각 인물의 마지막 비트는 끝까지 포즈를 유지 (걷기, 달리기, 말하기, 하품 제외), 그리고 장면에서 마지막으로 말한 줄도 그대로 유지되므로, 핵심 장면에서 끝나도록 하세요. point는 먼 인물의 머리, 가까운 인물의 가슴을 겨냥합니다.
소품(Props) ({"type", "x", ...}): 가구와 세트 조각 bus-stop, tree, bench, desk (노트북 포함), table, door, sign (text 포함), car ("drive": 1이면 지나감), house, plant, lamp, tv, bed; 그리고 작은 물체 cup, mug, glass, vase, bottle, plate, ball, book, phone, box, paper (문서). 작은 물체는 바닥에 놓거나 "on": "table" (또는 desk, bench, shelf, bed; 해당 가구의 폭 내에 x를 주세요. 가구 폭은 x 기준 약 ±0.15); "wobbleAt": s는 흔들리게, "fallAt": s는 떨어뜨림 ("fallDir": -1은 왼쪽으로); 컵, 유리잔, 꽃병, 병, 접시는 CRASH와 함께 깨짐 ("sound": "SMASH!" 단어 변경), 공은 튕겨 나감. 또한 color, scale, front: true (캐릭터 앞에 그려짐).
화살표(Arrows) ({"from", "to", "at", "for", "color", "hold"}): 한 머리에서 다른 머리로 가는 점선 화살표, "전염된다"는 뜻; hold는 그려진 후 유지 시간 (기본 0.9초).
기타 필드: answer는 적절한 위치에서 줄바꿈 (줄당 약 24자); 원하는 줄바꿈 위치에 |를 넣으세요. answerAt (초; 기본 ~1.1), size ("1080x1920" 기본, "1080x1080", "1920x1080"), duration (기본: 마지막 비트 종료 + 1.3초, 최소 5), fps (기본 30).
연출 팁: 0.0초에 비트를 시작하여 아무도 처음부터 멈춰 있지 않게 하세요; 비트를 약간 겹쳐 항상 무언가 움직이게 하세요; 각 비트 0.8~1.6초; 넘어뜨리기나 핵심 순간을 중간에 배치하고 그 후 반응을 넣으세요.
3. 세 프레임 확인
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topic>.json --still 0.5 --out stick-<topic>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topic>.json --still 2.5 --out stick-<topic>-check2.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topic>.json --still end --out stick-<topic>-check3.png
--still은 초 단위, 또는 end; 핵심 순간(넘어뜨리기, 드러내기)의 시간도 확인하세요. 확인 사항: 캐릭터가 화면에 있고 올바른 방향을 보고 있는지, 서로 통과하지 않는지, 풍선이 얼굴이나 제목을 가리지 않는지, 소리 없이도 이야기가 읽히는지. 필요하면 위치나 타이밍을 조정하고 다시 확인하세요.
4. 비디오 렌더링
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topic>.json --out stick-<topic>.mp4
약 10~25초 소요됩니다. 확인 이미지는 삭제하세요.
5. 전달
사용자에게 MP4 파일의 경로를 알려주세요 (환경에서 파일을 표시할 수 있으면 보여주세요). 소리가 없으므로 음악이나 내레이션을 추가할 준비가 되어 있습니다. 한 가지 변형(다른 결말, 다른 장면)을 제안하세요.
여기서 브라우저를 사용할 수 없나요? (예: Claude 앱 샌드박스)
설치 확인에서 브라우저를 실행할 수 없으면 대신 애니메이션을 페이지로 작성하세요:
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" stick-<topic>.json --html stick-<topic>.html. 이 페이지는 모든 브라우저에서 재생됩니다 (가능하면 artifact로 보여주세요). 사용자에게 MP4를 만들려면 컴퓨터에서 Claude Code를 사용하거나 페이지를 화면 녹화해야 한다고 알려주세요.