wheresryan22/anatomy

어떤 프로젝트인가요?

핵심 기능

• 01기술 개념을 등각 투영 그림으로 표현한 물리적 기계로 바꿉니다.
• 024단계 음영과 실시간 표시 영역이 있는 SVG 그림을 만듭니다.
• 03불·물·빛·증기 효과를 위한 WebGL 셰이더 레이어를 추가합니다.
• 04움직이는 부품을 매 프레임 다시 음영 처리하는 베타 3D 모드를 제공합니다.
• 05독립 실행형 HTML, 단일 SVG 파일, 또는 React/Next.js 컴포넌트로 내보냅니다.
• 06지오메트리 검사와 headless Chrome 스크린샷 검사를 실행합니다.

활용 사례

• 기술 문서나 블로그 게시물에 넣을 설명용 일러스트 제작
• 랜딩 페이지나 강의용 대화형 설명 콘텐츠 제작
• rate limiter나 connection pool 같은 시스템의 작동 방식 시각화
• Next.js 사이트에 프로세스를 시각화하는 React 컴포넌트 삽입

토픽

자주 묻는 질문

anatomy은(는) 무엇인가요?

기술 개념을 설명하는 기계의 대화형 등각 투영 SVG, WebGL 및 3D 일러스트를 만드는 Claude Agent Skill입니다. Anatomy는 Claude가 기술 개념을 설명할 때, 그 개념의 작동 원리를 닮은 물리적 물체를 고안한 뒤 등각 투영 그림으로 구현하도록 하는 에이전트 스킬입니다. 변경 사항이 없으면 작업을 건너뛰는 캐시 키는 모든 핀이 맞아야만 돌아가는 핀 텀블러식 자물쇠로 표현할 수 있습니다. 결과물은 음영이 들어간 작은 부품 여러 개로 구성되며, 제목과 힌트, 실시간 표시 영역이 담긴 프레임 카드 안에 배치되고 포인터와 키보드 입력에 반응합니다.

anatomy은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

anatomy은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

anatomy은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. anatomy의 마지막 커밋은 2026년 10월 15일입니다.

anatomy은(는) 어디에 사용할 수 있나요?

기술 문서나 블로그 게시물에 넣을 설명용 일러스트 제작 랜딩 페이지나 강의용 대화형 설명 콘텐츠 제작 rate limiter나 connection pool 같은 시스템의 작동 방식 시각화 Next.js 사이트에 프로세스를 시각화하는 React 컴포넌트 삽입

anatomy은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/wheresryan22/anatomy