코드를 읽지 않고도 시각화를 통해 코드베이스를 이해하게 해주는 스킬을 만들었습니다
I created a skill that lets you understand understand your codebase using visualizations without reading the code
핵심 요약
Claude Code를 활용해 복잡한 코드베이스를 시각화하고 단계별로 이해할 수 있게 돕는 오픈소스 도구 'code-slowmo'를 개발했습니다.
- 코드 시각화 — 복잡한 시스템 구조와 알고리즘을 애니메이션으로 쉽게 파악함
- 학습 최적화 — 40단어 이하의 간결한 설명과 사용자 주도형 인터페이스 제공
- 간편한 사용 — 별도 서버나 계정 없이 브라우저에서 바로 실행 가능한 HTML 파일 생성
- 범용성 — Claude Code, Codex 등 다양한 코딩 환경과 호환됨
복잡한 디자인 툴 프로젝트를 만들다 보면 시스템의 특정 부분을 이해하는 게 진짜 골치 아플 때가 많았음. 나는 주로 Claude Code로 대충 감 잡으면서 코딩하는 편인데, 코드를 한 줄씩 읽는 건 너무 피곤하고, AI한테 설명해달라고 하면 텍스트를 벽처럼 길게 쏟아내서 집중력이 싹 사라지더라고.
복잡한 시스템의 특정 부분을 이해하는 건 진짜 중요함. AI가 짠 코드보다 더 나은 해결책을 제시해야 할 때도 많고, 애초에 코드베이스가 어떻게 돌아가는지 제대로 알아야 하니까.
그래서 내가 code-slowmo라는 스킬을 만들었음. 코드베이스의 전체적인 아키텍처를 설명해달라고 하거나, 복잡한 시스템이 어떻게 작동하는지 시각화해서 보여달라고 할 수 있음. 만약 복잡한 알고리즘을 한 줄씩 뜯어보고 싶을 때도 code-slowmo를 쓰면 훨씬 편해짐.
어떻게 만들었냐면: Claude Code로 만들었음. 에이전트가 먼저 실제 코드를 읽고 각 설명마다 파일이랑 라인 번호를 기록함. 그다음 페이지 내용을 작은 JSON 파일로 작성하고, 파이썬 스크립트가 페이지를 만들기 전에 검사함. 체커는 40단어가 넘는 단계, 쉬운 설명이 없는 코드 이름, 불필요한 추임새, 수동태를 다 쳐내버림. 전문 용어랑 씨름할 필요 없게 만드는 게 핵심이니까. 페이지 디자인은 그림이랑 애니메이션으로 학습하는 방식에 대한 연구를 참고했음. 처음엔 멈춰 있고, 직접 속도를 조절하고, 레이아웃은 절대 안 흔들림. 중간중간 다음 단계에 뭐가 나올지 맞춰보게 하는 구간도 있음. 결과물은 그냥 HTML 파일 하나라 브라우저만 있으면 어디서든 열리고, 서버나 계정도 필요 없음.
code-slowmo는 Claude Code, Codex, OpenCode를 포함해서 본인이 쓰는 어떤 코딩 도구랑도 같이 쓸 수 있음.
설치 방법: npx skills add precious112/code-slowmo
완전 무료에 오픈소스임 https://github.com/precious112/code-slowmo
