이런 분께
신입 교육 자료, 고객 안내 페이지, 사내 위키에 "주문이 들어오면 창고에서 어떻게 처리되는지" 같은 흐름을 설명해야 하는데, 네모 상자와 화살표 그림으로는 잘 안 전해져서 답답했던 분께 맞아요. 교육 담당자, 기획자, 강사에게 특히요.
Anatomy는 이런 설명을 기계 속을 잘라 보여 주는 단면 그림처럼 만들어 주는 스킬(클로드 코드에 넣는 작업 설명서 묶음)이에요. 버튼을 누르거나 숫자를 바꾸면 그림 속 부품이 움직이고 값이 바뀌어요. 그래서 글로 세 문단 쓸 걸 그림 하나로 보여 줄 수 있어요.
끝나면 이렇게 됩니다
작업 폴더에 HTML 파일 하나가 생기고, 브라우저로 열면 이런 그림이 움직여요.
[주문 처리 흐름]
주문 접수함 → (컨베이어) → 포장대 3개 → 출고 트럭
- "주문 수" 슬라이더를 올리면 컨베이어 위 상자가 늘고
- 포장대가 다 차면 대기 줄에 상자가 쌓이는 모습이 보임
결과는 HTML 한 장, SVG 그림 파일, 개발팀용 React 컴포넌트 중에 고를 수 있고, 밝은 화면·어두운 화면을 고를 수 있어요.
준비물
- 클로드 코드(Claude Code, 유료 Claude 요금제 필요)
- Node.js 20.10 이상(프로그램을 돌리는 기본 엔진. nodejs.org에서 설치)
- 크롬 브라우저(결과 확인용, 없어도 그림은 만들어져요)
- 2026년 10월 기준, 저장소(프로그램 파일을 모아 둔 공개 폴더) wheresryan22/anatomy, MIT 라이선스
따라 하기
- 터미널(컴퓨터에 글자로 명령하는 창)을 열어요. 윈도우는 시작 메뉴에서 "터미널", 맥은 Spotlight에서 "터미널"을 검색하면 돼요.
- 아래 명령어를 붙여 넣고 엔터를 눌러 스킬을 설치해요. 모든 프로젝트에서 쓸 수 있게 설치하는 명령이에요.
npx skills add wheresryan22/anatomy -g -a claude-code
- 그림을 저장할 폴더로 이동해
claude를 입력해 클로드 코드를 켜요. 이미 켜 둔 상태였다면/reload-skills를 입력해 새 스킬을 불러와요. /anatomy뒤에 설명할 개념, 실제 숫자, 원하는 결과 형식을 한 번에 적어요. 아래 프롬프트를 쓰면 돼요.- 클로드 코드가 만드는 동안 파일을 만들겠다고 물어보면 확인하고 허락해요. 다 되면 만든 HTML 파일 이름을 알려 줘요.
- 그 파일을 더블클릭해 브라우저에서 열고 슬라이더와 버튼을 눌러 봐요. 고칠 점은 클로드 코드에 말로 이어서 요청해요.
복사해서 쓰는 프롬프트
/anatomy [우리 회사 주문 처리 흐름]을 설명하는 그림을 만들어줘.
[주문이 들어오면 접수함에 쌓이고, 포장대 3개가 하나씩 가져가 포장한 뒤 출고 트럭에 싣는다. 포장대가 다 차면 주문은 대기 줄에서 기다린다.]
"주문 수" 슬라이더로 1시간 주문을 10~100건 사이에서 바꿀 수 있게 해줘.
글자는 모두 한국어로, 밝은 화면, HTML 한 장으로 만들어줘.
첫 번째 [ ]에는 설명할 주제를, 두 번째 [ ]에는 그 흐름을 평소 말로 적어요. 예: "사내 결재가 올라가는 순서", "고객 문의가 상담원에게 배정되는 방식".
AI에게 통째로 맡기기
위 가이드대로 Anatomy 스킬 설치부터 첫 그림까지 같이 해줘. 내 컴퓨터는 [윈도우]야.
자주 막히는 곳
npx명령이 없다는 오류가 날 때: Node.js가 설치되지 않은 거예요. nodejs.org에서 LTS 버전을 설치하고 터미널을 껐다 켠 뒤 다시 해요.
