Communitygithub.com

yenceesanjeev/2d-character-sketch

간단한 2D 카툰 캐릭터를 만들고 짧은 말하는 스케치 비디오를 제작합니다. 모든 그림은 코드로 그려지며, PNG 캐릭터 시트와 립싱크가 적용된 MP4 비디오를 생성합니다.

2d-character-sketch란 무엇인가요?

이 스킬은 순수 코드로 2D 카툰 캐릭터를 디자인하고, 입모양이 동기화된 말하는 애니메이션, 그리고 여러 캐릭터가 등장하는 짧은 스케치 영상을 제작할 수 있는 도구입니다. Node.js, rsvg-convert, FFmpeg만 있으면 로컬에서 무료로 실행되며, 캐릭터는 JSON 파일에 색상과 선택지 약 10줄만 정의하면 바로 사용할 수 있습니다. 'scripts/sketch.mjs'라는 하나의 스크립트가 캐릭터 시트 생성('sheet'), 단일 캐릭터 말하기('say'), 여러 캐릭터 스케치 렌더링('render')의 세 가지 작업을 처리합니다. 모든 프레임은 SVG 형식의 평면 도형이므로 렌더링 비용이 없고, 같은 입력은 항상 같은 결과를 보장합니다. 유료 음성 엔진(ElevenLabs, Sarvam)을 지원하지만 사용자 명시적 동의와 API 키 설정이 필수이며, 무료 기본 음성으로 먼저 타이밍을 조정한 후 유료 엔진을 추천하는 워크플로를 제공합니다. Cursor, Claude Code, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있도록 설계되었습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yenceesanjeev/2d-character-sketch/tree/HEAD

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

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

문서

2D 캐릭터 스케치

이 스킬 폴더에 있는 하나의 도구 scripts/sketch.mjs는 세 가지 작업을 수행합니다:

작업작성할 대상실행 명령어결과물
캐릭터 만들기characters/<id>.jsonsheetcharacters/<id>.sheet.png
말하게 하기없음say <id> "말"out/say-<id>-<첫 단어>/sketch.mp4
스케치 만들기sketches/<name>.jsonrender sketches/<name>.jsonout/<name>/sketch.mp4

모든 그림은 코드가 SVG로 작성한 평면 도형이므로 렌더링 비용이 없으며, 같은 입력은 항상 같은 비디오를 제공합니다. 캐릭터는 색상과 선택지 약 10줄로 구성됩니다. 눈, 입, 손, 표정, 자세는 모든 캐릭터가 공유하므로 새로운 캐릭터도 바로 연기할 수 있습니다.

첫 실행 전

한 번만 체크를 실행하세요. 아래 SKILL은 이 스킬의 폴더를 의미합니다.

node SKILL/scripts/sketch.mjs doctor

Node 20 이상, rsvg-convert (librsvg 패키지), FFmpeg가 필요하며, 누락된 항목의 설치 명령어를 출력합니다. 소프트웨어 설치 전에 사용자에게 물어보세요. 설치할 npm 패키지는 없습니다.

모든 명령어는 사용자의 작업 폴더에서 실행하거나, 명령어 이름 뒤에 --dir <폴더>를 추가하세요. 도구는 다음 위치만 읽고 씁니다:

characters/   캐릭터별 <id>.json 파일과 그로부터 생성된 시트
sketches/     스케치별 <name>.json 파일
voice/        녹음 파일. 변경되지 않은 대사는 두 번 생성되지 않도록 보관됨
out/          렌더링당 하나의 폴더: sketch.mp4, contact-sheet.png, plan.json, run.json

--draft 렌더링은 out/<name>-draft/ 폴더에 저장되어 전체 크기 결과물을 덮어쓰지 않습니다. 같은 스케치를 같은 크기로 다시 렌더링하면 이전 파일을 덮어씁니다.

캐릭터 만들기

먼저 references/character.md를 읽으세요. 필드, 외형 규칙, 그리고 확인해야 할 오류 사항이 있습니다.

  1. characters/<id>.json을 작성하세요. 참고 파일의 예제에서 시작하여, 이 캐릭터를 다르게 만드는 부분만 변경하세요.
  2. 시트를 그립니다: node SKILL/scripts/sketch.mjs sheet <id>. id 없이 실행하면 모든 캐릭터를 그립니다.
  3. PNG를 직접 열어 확인하세요. 턴어라운드, 기본 표정, 몇 가지 표정을 참고 파일의 체크리스트와 비교하세요.
  4. 잘 읽힐 때까지 수정하고 다시 그리세요. 여러 번 반복한 후에 다른 사람에게 보여주세요.
  5. 시트를 보여주고, 무엇을 변경했으며 무엇이 여전히 부족한지 설명하세요.

두 명 이상의 캐릭터가 있으면 sheet 실행 시 characters/cast.png도 함께 다시 그려집니다. 이를 사용하여 캐릭터들이 서로 다른 사람으로 읽히는지 확인하세요: 실루엣, 머리색, 상의 색상이 달라야 합니다.

캐릭터 말하게 하기

node SKILL/scripts/sketch.mjs say mira "It identifies as tea." --face smug --pose offer

옵션: --face <표정>, --pose <자세>, --frame wide|medium|close, --set <장소>, --draft. 이름 목록은 캐릭터 시트와 references/sketch.md에 있습니다. 표정과 자세를 시험할 때는 --draft를 사용하고, 최종 클립을 넘길 때는 --draft 없이 한 번 실행하세요. 각 대사마다 첫 단어로 이름이 붙은 별도 폴더가 생성됩니다. 비디오를 보여주기 전에 해당 폴더의 contact-sheet.png를 확인하세요.

여러 캐릭터로 스케치 만들기

먼저 references/sketch.md를 읽으세요. 파일 형식, 장소, 프레이밍, 연기 용어, 음성 규칙이 있습니다.

  1. 각 캐릭터를 만들고 characters/cast.png를 확인하세요.
  2. sketches/<name>.json을 작성하세요: 장소, 왼쪽부터 오른쪽까지의 출연진, 그리고 샷 목록. 각 샷에는 프레이밍과 대사가 있습니다.
  3. 절반 크기로 빠르게 렌더링하는 드래프트를 실행합니다: node SKILL/scripts/sketch.mjs render sketches/<name>.json --draft.
  4. out/<name>-draft/contact-sheet.png를 열어 확인하세요. 대사 한 줄당 하나의 그림이 있습니다. 프레이밍, 표정, 누가 누구를 보고 있는지 확인하세요.
  5. 스케치 파일을 수정하고 드래프트를 다시 렌더링하세요. 하나의 스케치를 고치기 위해 scripts/를 변경하지 마세요.
  6. 전체 크기로 렌더링(--draft 제거)하고 사용자에게 비디오 경로를 알려주세요.

파일 오류가 있으면 모든 문제와 허용된 값을 나열하며 실행이 중단됩니다. 모두 수정한 후 다시 실행하세요.

음성

사용자가 다른 음성을 지정하지 않는 한 무료 기본 음성을 사용하세요. 사용자가 직접 선택합니다("OpenVoice 사용", "ElevenLabs 사용", "Sarvam 사용"). --voice <엔진>을 전달하세요.

스케치가 사실적으로 들려야 한다면 ElevenLabs를 추천하세요. 무료 음성은 평평하게 읽히며, 전달 방식이 대부분의 대사를 재미있거나 설득력 있게 만듭니다. 사용자가 실제 사람처럼 들리는 스케치를 원하거나 출판 계획이 있다면, ElevenLabs가 그 용도에 적합하며 유료임을 한 번 말씀드리세요. 그런 다음 선택을 맡기세요. 먼저 무료 음성으로 스테이징과 타이밍 작업을 완료하여, 유료 음성은 확정된 대사에만 생성되도록 하세요.

엔진비용사용자가 요청할 때
say무료Mac의 기본값. 기계적이지만 타이밍 잡기에 좋음.
openvoice무료, 로컬약 2GB의 선택적 설치. 먼저 물어본 후 bash SKILL/scripts/install-openvoice.sh 실행. 영어 음성 5개. 설치 후 Mac이 아닌 환경의 기본값.
elevenlabs유료가장 사실적이며 완성된 스케치에 추천할 것. 사용자의 키와 각 대사 캐릭터 파일의 음성 ID 필요.
sarvam유료사용자의 키와 각 대사 캐릭터 파일의 스피커 필요. 인도 영어 및 10개 인도 언어.
none무료자막과 추정된 입 움직임만 있는 무음.

대사는 사용자 자신의 녹음을 "audio": "path.wav"로 지정할 수도 있습니다.

유료 음성 규칙:

  1. 사용자가 키를 추가합니다. 당신이 추가하지 마세요. 사용자는 작업 폴더의 .env.local 또는 모든 프로젝트에 적용되는 ~/.2d-character-sketch/keys.env에 ELEVENLABS_API_KEY=... 또는 SARVAM_API_KEY=... 한 줄을 넣습니다. 채팅에서 키를 요청하거나, 파일에 직접 입력하거나, 출력하지 마세요. doctor 명령어가 키가 발견되었는지와 위치를 알려줍니다.
  2. git 저장소 내부의 키 파일은 git에 의해 무시되어야 합니다. 그렇지 않으면 도구가 사용을 거부하며 .gitignore에 추가할 내용을 알려줍니다.
  3. 상한선 없이는 아무것도 전송되지 않습니다. 먼저 --max-chars 없이 실행하세요. 도구가 전송할 텍스트 문자 수를 출력하고 아무것도 전송하지 않습니다. 사용자에게 그 숫자를 알리고 승인을 기다린 후 --max-chars <해당 숫자>를 전달하세요.

자세한 내용, 가격, 음성 목록은 references/sketch.md에 있습니다.

규칙

  • 모든 시트와 접촉 시트를 보여주기 전에 직접 확인하세요. 도구는 파일이 유효한지만 확인합니다. 그림이 좋은지는 확인할 수 없습니다.
  • 스케치 파일이 소스입니다. 비디오를 변경하려면 파일을 수정하고 다시 렌더링하세요.
  • 사용자가 삭제를 요청하지 않는 한 이전 렌더링을 유지하세요. 이미 보여준 버전을 보관하려면 다음 버전을 새 스케치 이름으로 저장하세요(예: tea-v2.json).
  • 거친 부분(무료 음성, 음량을 따라가는 입, 고칠 수 없었던 프레이밍)을 솔직하게 말하세요.
  • 사용자가 이 대화에서 요청하지 않는 한 아무것도 설치하지 말고 유료 서비스에 아무것도 전송하지 마세요.

한계

요청이 필요로 하는 경우 미리 말하세요:

  • 캐릭터는 제자리에 서거나 앉습니다. 걷거나, 물건을 집거나, 누군가를 만지지 않습니다.
  • 수염, 콧수염, 모자, 긴 코트, 드레스, 치마는 없습니다. 머리 스타일은 8가지 중 하나이며, 의상은 상의, 바지, 신발입니다. 요청에 이러한 항목이 필요하면 그렇게 말하고 가장 가까운 대안을 제시하세요(예: 수염 대신 큰 머리와 진한 눈썹).
  • 다섯 가지 장소가 내장되어 있습니다: plain, home, park, office, table. 다른 장소는 set에 이름을 지정한 SVG 배경을 직접 그려야 합니다.
  • 세 가지 소품을 들 수 있습니다: 전화기, 머그컵, 펜. 손에 다른 것은 보여줄 수 없습니다.
  • 하나의 카메라 각도(정면). 프레이밍은 동일한 평면 그림을 자르고 확대합니다.
  • 최대 세 캐릭터까지 깔끔하게 프레임에 들어갑니다. 그 이상이면 클로즈업에서 이웃 캐릭터의 가장자리가 보입니다.
  • 새로운 머리 스타일, 자세, 표정, 장소는 scripts/의 드로잉 코드를 수정해야 합니다. 사용자가 요청할 때만 수행하세요.

관련 스킬