한 문장으로 움직이는 상태도를 만드는 오픈소스 AI 스킬

格物 · 크레용 상태도(프로젝트명 sweety-statechart-video)는 오픈소스 AI Skill이다:

- AI 어시스턴트에게 한마디 하면, 하나의 프로세스, 하나의 사업, 또는 하나의 시스템을 움직이는 크레용 상태도 단편 영상으로 만들어 준다: 내레이션이 있고, 각 장마다 포스터도 한 장씩 나온다;

- 기본 3:4, 2–3분으로, 샤오홍슈와 더우인에 올리기에 딱 맞다;

- Codex, Claude Code, Grok Build, Grok Bot, Muse를 지원한다;

- MIT 라이선스, 무료 사용.

이름 속의 '격(格)'은 하나의 일을 한 칸 한 칸의 상태로 쪼개는 것이고, '격물(格物)'은 '격물치지(格物致知)'에서 따온 것으로, 어떤 일이 어떻게 되어가는 것인지 확실히 파악한다는 뜻이다.

위의 2분 10초 소개 영상은 화면, 애니메이션, 내레이션, 자막 모두 격물이 직접 만든 것이다.

핵심 요점 한눈에 보기

프로젝트 내용 이름 格物 · 크레용 상태도(sweety-statechart-video) 무엇인가 오픈소스 AI Skill: 한마디로 내레이션이 있는 크레용 상태도 단편 영상 + 포스터 생성 영감 Ann Nguyen 선생님(@ann_nnng)의 the making of nhang, 우리가 스타일 추출을 진행함 지원 플랫폼 Codex, Claude Code, Grok Build, Grok Bot, Muse; 향후 계획 WorkBuddy 기본 화면비 3:4(1080×1440), 임의 비율 지정 가능 기본 길이 2–3분, 지정 가능 내레이션 네 가지 순수 합성 음색(크레용 언니, 도면 오빠, 원기 소녀, 스승님), 자신의 목소리 추가 가능 결과물 MP4 완성 영상, 각 장당 2000×2666 포스터 한 장, 커버, 자막 파일 버전 / 라이선스 v1.1.1 / MIT 설치 npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes

무엇을 할 수 있나? 한마디로, 한 편의 영상이 나온다

분명 이런 적이 있을 것이다: 어떤 일을 확실히 설명하고 싶은데, 그것에 여러 단계가 있고 여러 상황이 있다. 긴 글 한 덩어리로 쓰면 아무도 안 보고, 순서도로 그리면 너무 딱딱하다.

격물은 이것을 움직이는 크레용 그림으로 바꾼다:

- 구조: 이 일이 '지금 어느 칸에 있고, 어떤 상황이면 변하는지'를 한 칸 한 칸 그려 낸다;

- 움직임: 작은 점이 화살표를 따라 달리고, 카드가 한 칸 한 칸 튀어나오며, 주변의 크레용 인형, 불꽃, 김이 계속 움직인다;

- 소리: 거기에 듣기 좋은 내레이션을 더한다.

평소 쓰는 AI 어시스턴트에 한마디만 하면 된다. 예를 들어:

- 「sweety-statechart-video로, 차 한 잔 우리기 를 상태도 단편 영상으로 만들어 줘」

- 「배달이 주문부터 도착까지의 과정을, 2분짜리 크레용 상태도로, 도면 오빠 목소리로 만들어 줘」

- 「메시지가 발송에서 읽음까지를 확실히 설명해 줘, 9:16 세로 화면, 1분」

나머지는 그것이 한다:

- 일을 한 칸 한 칸의 상태로 쪼갠다;

- 각 단계의 자막과 내레이션을 쓴다;

- 각 칸에 움직이는 일러스트를 붙이고 자동으로 배치한다;

- 더빙하고, 렌더링한다.

몇 분 후, MP4 완성 영상과 각 장마다 바로 이미지 글로 올릴 수 있는 포스터 한 장, 그리고 자막 파일을 받는다. 어디를 고치고 싶으면 다시 한마디 하면, 다시 쪼개고, 다시 그리고, 다시 더빙한다.

왜 예쁜가?

모든 단계가 자란다:

- 작은 점이 빛무리를 두르고 출발해, 화살표를 따라 달리고, 선이 따라 자라난다;

- 화살표 위의 글자가 타자기처럼 하나씩 찍힌다;

- 작은 점이 도착하면, 새 카드가 '톡' 튀어나와, 분홍색이 되고, 다시 동그랗게 테두리가 그려진다.

끊임없이 움직인다: 모든 선이 살짝 떨리며, 마치 한 프레임 한 프레임 손으로 그린 애니메이션 같다. 일러스트는 상태를 따라 움직인다:

- 주방에서 불을 켠다고 하면, 화구에 불이 붙고, 요리사가 팬을 흔든다;

- 엘리베이터를 기다린다고 하면, 층수가 한 칸 한 칸 위로 튄다;

- 당신 손에 도착한다고 하면, 문이 열리고, 누군가 손을 흔든다.

장마다 이어진다: 각 장의 출구 화살표가 포스터 아래 가장자리에서 뻗어 나와, 다음 장의 위쪽으로 이어져서, 영상 전체를 읽으면 한 장의 긴 크레용 그림 같다.

내레이션에 저작권 문제가 있나? 네 가지 목소리, 그리고 당신의 목소리도

없다. 네 가지 모두 순수 합성 음색으로, 오직 한 줄의 텍스트 설명만으로 디자인되었고, 어떤 실제 사람의 목소리도 참고로 쓰지 않았다.

아래 부분은 네 가지 목소리가 자기소개를 하는 것이다(소리 있음):

목소리 느낌 적합한 이야기 시청 크레용 언니 (기본) 밝고 따뜻하며, 미소를 띤 생활 속 작은 일 도면 오빠 깔끔하고 상쾌하며, 조리가 명확함 프로세스와 원리 원기 소녀 맑고 밝으며, 원기 왕성 재미있는 작은 과학 상식 스승님 온화하고 느긋하며, 약간 쉰 목소리 손기술과 오랜 업종

- 바꿔 쓰기: 같은 영상 안에서 목소리를 바꿀 수 있고, 이야기할 때 역할마다 목소리 하나씩을 줄 수 있다.

- 자신의 목소리 쓰기: 십여 초 정도 깨끗하게 말한 것을 녹음하고, 받아쓴 원고를 적은 뒤 더하면 바로 쓸 수 있다. 못 하겠다면, 홈페이지 Articles에 튜토리얼이 있다.

샤오홍슈와 더우인에 올릴 수 있나? 비율과 길이는 당신 마음대로

그렇다.

- 비율: 기본 3:4로, 샤오홍슈를 꽉 채우기에 딱 맞다. '9:16'이라고 하면 더우인 세로 화면, '16:9'는 가로 화면, 1:1도 되고, 어떤 비율이든 가능하다.

- 길이: 기본 2–3분으로, 대부분의 셀프 미디어에 맞는다. 예를 들어 샤오홍슈의 #AI玩家, 더우인의 #vive지식대赏. 1분이나 5분을 원하면 모델에게 바로 말하면 된다.

어떤 AI 어시스턴트를 지원하나?

Codex, Claude Code, Grok Build, Grok Bot, Muse 모두 테스트를 거쳤다. 서로 다른 플랫폼에 맞춰 호환성 조정을 좀 했기에, 산출 결과가 약간 다를 수 있다. 향후 WorkBuddy 등 플랫폼 지원을 계획하고 있다.

어떻게 설치하고 사용하나?

한 줄 명령으로 설치:

npx skills add threerocks/sweety-statechart- video --skill sweety-statechart- video --agent claude- code codex --global --copy --yes

그다음 AI 어시스턴트에 한마디 하면 된다. 예를 들어 "sweety-statechart-video로 차 한 잔 우리기를 상태도 단편 영상으로 만들어 줘".

처음 사용할 때는 렌더링 환경을 자동으로 설치해 준다. 더빙에는 Apple Silicon Mac이 필요한데, 없다면 "내레이션 없이"라고 한마디 하면 무음 버전으로 만든다.

어떤 주제에 적합한가?

'그것이 지금 어느 칸에 있고, 어떤 일이 그것을 바꾸게 하는지'를 설명할 수 있는 것이라면 다 적합하다:

- 배달 한 건, 택배 하나, 진료 접수 한 번, 경비 상신 승인 한 번;

- 요리 한 접시, 손기술 하나, 하루의 생활 리듬;

- 한 App의 로그인, 메시지 한 통의 여정, 버그 하나가 어떻게 나타나는지.

순수한 관점, 순수한 목록 형태의 콘텐츠에는 적합하지 않으니 다른 형식으로 만드세요.

어떻게 하는 건가요?

간단히 짚고 넘어가면:

- 레이아웃: 각 칸을 어떻게 배치하고, 화살표를 어떻게 꺾고, 글자를 어디에 둘지는 모두 자동입니다.

- 삽화: 전부 코드로 즉석에서 그린 크레파스 그림이며, 외부 이미지는 전혀 사용하지 않았습니다.

- 내레이션: 문장마다 녹음한 뒤 자동으로 받아쓰기 검사를 해서, 잘못 읽었으면 다시 녹음합니다.

- 규칙 장: "이런 일은 일어나면 안 된다"고 한 줄 쓰면, 그것이 일어나게 만드는 경로를 스스로 찾아내 붉은 선으로 그리고, 그 위에 도장을 하나 찍습니다.

자주 묻는 질문

格物 · 크레파스 상태도란 무엇인가요? 오픈소스 AI Skill(프로젝트명 sweety-statechart-video)입니다. AI 어시스턴트에게 한마디 하면, 하나의 과정을 움직이는 크레파스 상태도 단편 영상으로 만들어 주고, 내레이션과 장마다 한 장씩 포스터가 따라붙습니다.

유료인가요? 무료이며, MIT 오픈소스입니다. 생성 시에는 당신 자신의 AI 어시스턴트 크레딧을 사용하고, 더빙과 렌더링은 모두 당신의 컴퓨터에서 완료됩니다.

어떤 플랫폼을 지원하나요? Codex, Claude Code, Grok Build, Grok Bot, Muse. 이후 WorkBuddy 등을 지원할 계획입니다.

어떤 컴퓨터가 필요한가요?

- 영상 출력: macOS 또는 Linux, Chrome(또는 Chromium)과 ffmpeg 설치 필요

- 더빙: Apple Silicon Mac. 없다면 무음 버전으로 만들 수 있습니다.

내레이션에 저작권 문제가 있나요? 없습니다. 네 가지 내레이션 모두 순수 합성 음색이며, 어떤 실제 사람의 목소리도 참고로 사용하지 않았습니다. 게시할 때 플랫폼 요구사항에 따라 "AI 합성"이라고 표기하면 됩니다.

제 목소리를 쓸 수 있나요? 가능합니다. 8–15초의 깨끗한 말소리를 녹음하고, 축자 원고를 적어서 넣으면 바로 사용할 수 있습니다. 튜토리얼은 홈페이지 Articles에 있습니다.

기본 비율과 길이는 어떻게 되나요? 바꿀 수 있나요? 기본은 3:4, 2–3분입니다. 비율과 길이 모두 변경할 수 있으며, 모델에게 한마디 하면 됩니다.

일반적인 순서도나 PPT 애니메이션과 무엇이 다른가요? 모든 단계가 움직이고, 삽화와 내레이션이 있으며, 바로 완성 영상과 포스터까지 나오므로 다시 편집할 필요가 없습니다.

영감은 어디서 얻었나요? Ann Nguyen 선생님(@ann_nnng)의 the making of nhang입니다. 저희는 스타일 추출을 했고, 그리는 방식과 플레이어는 직접 작성했으며, 원작의 코드는 포함하지 않았습니다.

감사의 말

- 영감은 Ann Nguyen 선생님(@ann_nnng)의 the making of nhang에서 얻었습니다. 감사드립니다.

- 규칙 장 아이디어는 Kevin Ngo(@kevin_t_ngo)의 밀크티 가게 상태도, 그리고 Lauren Tan(poteto)의 /statechart 스킬에서 나왔습니다.

오픈소스 주소: github.com/threerocks/… (MIT 라이선스), 사용해 보시고 이슈를 남겨 주세요.

English summary

Gewu · Crayon Statechart(sweety-statechart-video)는 오픈소스(MIT) AI 에이전트 스킬입니다:

- 만드는 것: 한 문장에서 내레이션이 있는 크레파스 상태도 애니메이션 영상과 장마다 한 장의 포스터를 만듭니다. 구슬이 화살표를 따라 흐르고, 글자가 타이핑되듯 나타나며, 카드가 튀어나와 분홍색으로 변하고, 손으로 그린 장면은 계속 움직입니다.

- 기본값: 3:4, 2–3분으로 숏폼 플랫폼에 바로 쓸 수 있습니다. 화면 비율과 길이는 요청에 따라 얼마든지 가능합니다.

- 음성: 완전 합성 내레이터 음성 네 가지로 저작권 문제가 없으며, 당신의 목소리를 쓸 수도 있습니다.

- 플랫폼: Codex, Claude Code, Grok Build, Grok Bot, Muse에서 작동합니다.

- 영감: Ann Nguyen의 the making of nhang.

설치: npx skills add threerocks/sweety-statechart-video --skill sweety-statechart-video --agent claude-code codex --global --copy --yes .

영상 속 내레이션은 AI 합성 음성임을 밝힙니다.

XiaoLei_Liu

시니어 프런트엔드 / 아키텍트

76

글

179k

조회

558

팔로워