기계 원리를 직접 움직여 보기 — Anatomy 스킬로 기어비 수업 자료 만드는 프롬프트 4개
실제로 만든 영상과 SVG 실습
유튜브에서 영상 보기 · 46.5초 · 한국어 합성 음성 · 1920×1080
2026-10-14 추가: 아래는 이 글의 제작 명세를 실제 SVG/JavaScript로 구현한 예제입니다. 위 영상은 같은 회전 관계를 Remotion으로 렌더링했습니다. Claude 전용 Anatomy 스킬을 실행했다고 주장하는 결과는 아닙니다.
실제 브라우저 검사: 20/40·60rpm→30rpm, 20/40·120rpm→60rpm, 20/20·60rpm→60rpm. 시작·정지·초기화와 반대 방향 회전을 확인했습니다. 화면 속도는 0.25배이며 정밀 치형 검증용이 아닙니다.
톱니바퀴가 왜 반대 방향으로 도는지 설명할 때, 글과 정지 그림만으로는 전달이 어려울 수 있습니다. 학생이 속도를 바꾸고 덮개를 열어 볼 수 있다면 질문이 달라집니다. “외워야 하는 공식”에서 “내가 바꾸니 이렇게 움직이는구나”로 넘어갈 수 있기 때문입니다.
Anatomy는 기계와 시스템을 인터랙티브한 그림으로 만드는 커뮤니티 에이전트 스킬입니다. 공식 저장소는 SVG 중심 그림, WebGL을 결합한 효과, 일부 3D 표현을 소개합니다. 완성된 영상을 재생하는 도구라기보다 사용자가 조작할 수 있는 웹 자료를 만드는 흐름에 가깝습니다. 공식 저장소
중학생 대상 ‘기어비와 회전 방향’ 한 화면 수업 자료. 두 기어, 시작·정지·초기화 버튼, 입력 속도 조절, 예상 결과를 묻는 질문 3개를 설계합니다. 아래는 제작·검수 명세이며, Anatomy 설치와 완성 HTML의 수업 적용 시험을 완료했다는 뜻은 아닙니다.
1. 화려한 엔진보다 두 개의 기어로 시작하기
로켓 엔진처럼 부품이 많은 사례를 곧바로 재현하면 그림의 완성도와 원리의 정확성을 함께 확인하기 어렵습니다. 첫 실습에서는 외접하는 평기어 두 개만 다룹니다. 같은 모듈의 이상적인 기어가 미끄럼 없이 맞물린다는 조건을 두고, 손실·백래시·치형 설계는 이번 학습 범위에서 제외합니다.
예시 입력은 구동 기어 20개 이, 종동 기어 40개 이, 입력 회전수 분당 60회입니다. 맞물리는 동안 지나가는 이 수가 같아야 하므로 출력 회전수의 크기 = 입력 회전수 × 구동 기어 잇수 ÷ 종동 기어 잇수로 계산합니다. 따라서 출력은 분당 30회이고, 외접 기어의 방향은 반대입니다. 이는 설명용 이상화 모델의 계산이며 실제 감속기의 성능값이 아닙니다.
| 바꿀 입력 | 기대되는 결과 | 확인할 것 |
|---|---|---|
| 입력 60rpm → 120rpm | 출력 30rpm → 60rpm | 숫자와 애니메이션 속도가 함께 바뀌는가 |
| 입력 60rpm, 종동 잇수 40 → 20 | 출력 30rpm → 60rpm | 두 기어의 크기와 중심 거리도 정합적인가 |
| 정지 버튼 | 회전 정지 | 표시값은 설정 속도인지 실제 동작 속도인지 구분되는가 |
2. 설치와 제작을 나눠서 진행하기
Claude Code 환경이 준비돼 있다면 저장소의 설치 안내를 확인한 뒤 다음 명령으로 스킬을 추가할 수 있습니다. 프로젝트 제공자는 Anthropic이 아닌 wheresryan22입니다. 설치 성공 여부와 실제 호출 가능 여부를 먼저 확인한 다음 아래 제작 프롬프트를 사용하세요.
npx skills add wheresryan22/anatomy -g -a claude-code
공식 안내는 설치 후 /anatomy 호출 예를 제공합니다. 저장소의 MIT 라이선스와 AI 실행 환경의 사용 비용은 구분해야 합니다. 예제 코드를 수정해 재배포한다면 해당 라이선스 고지를 유지하고, 함께 사용하는 폰트·이미지의 조건도 확인합니다. 설치·사용 안내
3. 화면은 ‘예측 → 조작 → 설명’ 순서로
먼저 “큰 기어는 더 빠를까, 느릴까?”를 보여 줍니다. 학생이 예상한 뒤 속도 슬라이더를 움직이게 하고, 마지막에 계산식과 설명을 펼치도록 구성합니다. 분해 보기에서는 부품 이름을 읽고, 동작 보기에서는 회전 관계를 관찰하게 역할을 나눕니다.
교사는 정답을 알려 주기 전에 “구동 기어가 두 바퀴 돌 때 큰 기어는 몇 바퀴 도는가?”를 물을 수 있습니다. 예상 답은 한 바퀴입니다. 다만 애니메이션이 보기 좋게 속도를 줄여 재생한다면 반드시 ‘표시 속도 배율’을 안내해야 합니다. 화면에서 잰 시간과 표시 rpm이 다른데 설명이 없으면 오히려 오개념을 만들 수 있습니다.
4. 완성 판정은 ‘예쁜 그림’보다 계산과 조작
첫 검수는 위 표의 숫자 세 가지로 충분합니다. 수치가 맞더라도 이가 서로 관통하거나 두 기어가 같은 방향으로 돌면 다시 고쳐야 합니다. 한글 라벨이 작은 화면에서 겹치지 않는지, 마우스 없이 버튼을 쓸 수 있는지도 확인합니다. 정밀 치형 구현이 어렵다면 실제 치합을 재현했다고 쓰지 말고, 단순화한 원판·회전 화살표로 원리를 정확히 설명하는 편이 좋습니다.
복사해서 쓰는 프롬프트
01 · 원리와 화면 명세
중학생을 위한 외접 평기어 2개의 기어비 수업 자료를 설계해 줘. [학습 목표] 잇수와 회전수의 관계, 외접 기어의 반대 회전 방향을 설명한다. [입력] 구동 20개 이, 종동 40개 이, 입력 60rpm. 이상적인 미끄럼 없는 맞물림을 가정한다. [결과] 출력 회전수 크기 30rpm, 회전 방향 반대. 관찰할 현상, 계산식, 바꿀 입력, 학생 질문 3개, 검수 표를 먼저 작성해. 토크·효율·재료 강도와 실제 감속기 성능은 이번 범위에서 제외해. 도식이 실제 치형과 다르면 교육용 단순화라고 명시해.
02 · Anatomy로 제작
/anatomy 위에서 검토한 기어비 명세로 한국어 인터랙티브 수업 HTML을 만들어 줘. [저장 폴더] 내가 지정한 작업 폴더 흰 바탕, 진한 글자, 구동은 파랑·종동은 주황으로 구분해. 시작·정지·초기화 버튼, 입력 회전수 슬라이더, 분해 보기 버튼을 넣어. 두 기어의 회전 상태와 표시 숫자는 같은 계산값에서 나오게 해. 외접 기어는 반대 방향. 화면 속도를 낮추면 재생 배율을 명시해. 예측 질문을 먼저, 계산 설명은 펼치기 영역에 둬. HTML·사용 설명·검수 결과를 저장해. 설치나 렌더 실패를 성공으로 보고하지 마.
03 · 계산과 조작 점검
제작한 HTML을 실제 브라우저에서 확인해 줘. ① 20/40 잇수, 60rpm 입력 → 출력 크기 30rpm ② 같은 잇수, 120rpm 입력 → 출력 크기 60rpm ③ 20/20 잇수, 60rpm 입력 → 출력 크기 60rpm 각 경우 회전 방향이 반대인지, 숫자와 움직임이 함께 바뀌는지 확인해. 정지·초기화·분해 보기·키보드 조작과 작은 화면 한글 겹침도 확인해. 실행한 검사와 못 한 검사를 구분하고, 화면 캡처와 계산 근거를 남겨.
04 · 오류만 수정
검수에서 발견한 다음 문제만 수정해 줘. [문제] 여기에 관찰한 현상과 발생 입력값을 적기 원인을 추정으로 단정하지 말고 재현한 뒤 수정해. 기어 크기·중심 거리·회전 방향·표시 rpm 중 영향을 받는 항목을 함께 점검해. 정밀 치합을 보장할 수 없다면 정확한 회전 관계를 보여 주는 단순 도식으로 바꾸고 한계를 표시해. 수정 전후 같은 입력값으로 다시 확인하고 정상 기능은 유지해.
출처와 확인 범위
2026년 10월 14일 공개 영상의 제목·설명을 수집하고 아래 공식 자료를 대조했습니다. 원영상 전체 자막은 확보하지 않았습니다. 이 글의 실습 구성과 한국어 프롬프트는 AI오토마타가 새로 작성한 응용안이며, 실제 서비스 실행 결과를 보고하는 사용기는 아닙니다.
주제 참고: Claudical — 시계도 엔진도 속까지 뜯어 보는 Claude Code 스킬 | Anatomy. 원영상과 공식 자료는 링크로 안내하며, 외부 유료 자료나 비공개 프롬프트는 전재하지 않았습니다.
댓글
댓글 쓰기