Claude Code 모드 'Claude Fables' 제작기: Claude의 활동을 애니메이션 만화로 구현

저는 Claude Code 데스크톱 앱용 모드인 Claude Fables를 만들었습니다. Claude가 작동하는 동안, 이 모드는 Claude가 호출하는 모든 도구(tool call)와 말하는 모든 줄을 관찰합니다. 몇 초마다 가장 최근의 순간들을 프롬프트 위쪽 밴드에 짧은 예술 장면으로 다시 이야기해줍니다. 버그 찾기는 자연 다큐멘터리가 되고, 실패한 테스트는 Claude가 발을 헛디디게 만들며, 턴이 끝나면 Claude는 달빛 마을에서 낮잠을 잡니다.

기능:

• Claude는 7개의 조명 처리된 장면(hand-lit scenes)에 걸쳐 20가지 행동(sneak, dig, trip, shrug, celebrate, sleep 등)을 가진 작은 주황색 생물처럼 나타납니다.
• /fables style <이름> 명령어를 통해 픽셀 아트(pixel art), 청사진(blueprint), 우키요에(ukiyo-e), 골든 에이지 코믹(golden age comic) 등 11가지 시각적 스타일을 전환할 수 있습니다.
• 캡션은 터미널처럼 색상별로 구분됩니다. 파일, 함수, 숫자, 실패 및 성공 각각 다른 모양으로 표시됩니다.

Claude의 도움을 받아 구축한 과정:

저는 Claude Code (Opus 5.5)를 사용하여 Claude Code의 클라우드 환경(주간 할당량이 거의 남아있지 않아 프로모션 크레딧을 사용해야 했습니다 🤓)에서 전체 프로젝트를 만들었고, 이후 GitHub에서 프로젝트를 가져와 로컬 모드로 테스트했습니다 (불행하게도 클라우드 환경에서 작업하는 동안에는 작동하지 않습니다).

Claude Code는 모드의 후크(hooks), 장면 검증기(scene validator), 그리고 스크립트 실행 없이 각 장면을 애니메이션화하는 SVG 렌더러를 작성해주었습니다. 또한 마스코트 스타일 갤러리에서 3D Claude 모델을 포팅하고 테스트 코드도 작성했습니다.

README의 GIF와 런칭 비디오 역시 모드 자체의 렌더러가 헤드리스 Chromium(headless Chromium)에서 프레임 단위로 단계별 처리하여 Claude Code에 의해 렌더링되었습니다. 이것이 UI가 일반적인 CC UI와 약간 다르게 보이는 이유입니다.

실행 시점에도 Claude가 이야기를 만듭니다: Sonnet (또는 Haiku)은 최근 활동을 받아 작은 JSON 장면으로 응답합니다. 모드는 이 JSON을 엄격하게 검증하므로, 잘못된 응답은 단순히 건너뛰어 코드로는 절대 실행되지 않습니다.

자유롭게 사용해 보세요:
이것은 무료이며 GitHub에서 이용할 수 있습니다: https://github.com/henrik-thevibe/Claude-Fables

1. 저장소(repo)를 클론합니다.
2. ~/.claude/settings.json의 env 블록에 그 경로를 CLAUDE_CODE_PLUGIN_DIRS에 추가합니다.
3. 데스크톱 앱을 재시작합니다.

설치 후에는 /fables 명령어가 보이지 않을 수 있지만, 모든 것을 올바르게 했다면 명령어 목록에 표시되지 않더라도 여전히 응답할 것입니다. 설치가 복잡하게 느껴진다면 Claude 또는 다른 AI(ChatGPT로 테스트해 본 결과)를 사용하면 자동으로 설치될 것입니다 (저장소 파일 안에 자세한 설치 가이드가 있습니다)!

각 장면은 작은 소네트(Sonnet)나 하이쿠(Haiku) 요청 하나씩이기 때문에, Claude가 작동하는 동안 사용자 자신의 Claude 사용량 중 몇 건의 요청만 사용합니다.
모드 API는 얼리 액세스 버전이므로 다듬어지지 않은 부분이 있을 수 있습니다. 버그 보고를 환영합니다.

제출자: /u/dagerika
[링크] [댓글]