교재 적용 17 | 크랭크가 돌면 부피는 어떻게 바뀔까 — 피스톤과 압축비를 3D로
크랭크가 한 바퀴 돌 때 피스톤이 어떻게 오르내리고, 실린더 안 체적이 어떻게 바뀌는지를 조작형 3D로 따라갑니다. 각도 막대와 상사점·하사점 버튼을 눌러 보고, 틈새 체적 Vc를 바꿔 압축비가 어떻게 달라지는지 확인해 보세요.
한국어 음성 해설판 · 84초
Google Cloud TTS Autonoe 합성 음성과 화면 자막이 들어 있습니다. 별도 자막 파일은 올리지 않았습니다.
음성 없는 자막판 · 75초
드라이브 미리보기는 실행 화면이 아닙니다. 파일을 내려받아 Chrome·Edge에서 여세요. three.js와 글꼴을 불러오므로 인터넷 연결이 필요합니다. 각도와 D·S·Vc·L을 직접 바꿀 수 있습니다.
1. 교재의 어떤 부분인가
| 쪽 | 내용 | 3D 페이지에서 |
|---|---|---|
| 125쪽 | 그림 3.2 엔진의 기본 도식: 보어 D, 상사점, 하사점, 행정 S, 틈새 체적 Vc, 행정 체적 Vs = π/4 × D² × S (식 3.1), 총 행정 체적 (식 3.2) | 실린더 단면, 상사점·하사점 띠, 짙은 청록(틈새)·밝은 청록(행정) 체적 |
| 126쪽 | 실린더 체적 = Vc + Vs (식 3.3), 압축비 r = (Vc + Vs) / Vc (식 3.4), 예제 3.1 | 최대·최소 체적 칸, 대표 숫자 '압축비' |
| 127~128쪽 | 예제 3.2·3.3(π = 3), 예제 3.4(V6) | 기본 입력값 D 10, S 8, Vc 50 |
교재는 압축비를 r로 씁니다. 이 페이지도 교재 기호를 따랐고, 크랭크 반지름은 a(= S/2)로 따로 적어 섞이지 않게 했습니다.
2. 참고한 원작 제작법
AirsupHQ가 공개한 machine-skill(MIT)은 기계 이름 한 줄로 three.js 3D 시뮬레이션 HTML 한 파일과 짧은 영상을 만드는 Claude Code용 스킬입니다. 지침(SKILL.md) 보관본은 실제 치수 조사 → 템플릿·키트로 조립 → 실제 식으로 계산하는 '솔버' → 분해·단면 보기 → 여러 번 렌더링 검수 → 영상 순서로 진행하게 합니다.
이번에는 그 지침과 키트(kit/lab-kit.js, 커밋 e0bd066)를 그대로 가져와, 교재의 실린더·피스톤 그림에 크랭크와 커넥팅로드를 더한 슬라이더 크랭크를 만들었습니다. skills CLI로 설치하지 않고 저장소를 받아 지침을 읽고 키트를 직접 붙였습니다. 원작 예시(제트 엔진 등)의 장면은 쓰지 않았습니다.
3. 사용한 계산(한 함수가 화면·표·그래프·형상을 모두 움직임)
s(θ) = a(1 − cosθ) + L − √(L² − a² sin²θ) (상사점으로부터의 피스톤 변위, a = S/2, θ = 0이 상사점) A = πD²/4, Vs = A·S, V(θ) = Vc + A·s(θ) 압축비 r = (Vc + Vs) / Vc
원작 문서의 x = a cosθ + √(L² − a² sin²θ)는 크랭크 중심에서 피스톤핀까지의 거리라서, 체적식에는 s = (a + L) − x로 바꿔 넣었습니다. L = 12 cm는 움직임을 보여 주려고 정한 가정이며 교재 수치가 아닙니다.
4. 사용한 프롬프트
아래는 제작 단계의 전달문입니다. 최초 지시의 “게시하지 않는다”와 “음성은 우선 대본만”은 당시 단계의 조건입니다. 이후 한국어 음성과 고화질 영상을 추가했고, 이 글에서는 두 판을 함께 공개합니다. 전달문의 압축비 ε는 최종 화면에서 교재 기호 r로 통일했습니다.
최초 제작 프롬프트 · 전달문 전문
사례17 | 『기초 열역학』을 움직이는 공학 메커니즘으로 작성일: 2026-10-26 / Claude 전달용 / 제작 지시문 제목: 크랭크가 돌면 부피는 어떻게 바뀔까 — 내 교재의 피스톤과 압축비를 3D로 [이번 작업] 교재의 피스톤·행정·틈새 체적·압축비를 하나의 조작형 3D 메커니즘으로 제작하라. 원본 제작법을 명확히 소개하고 내 교재에 적용한 결과를 보여주는 사례다. 기존 TH01 정압 팽창이나 판서 영상을 덮어쓰지 않는다. 이번에는 블로그·유튜브에 게시하지 않는다. [입력과 저장] 교재: F:\ONEDRIVE\7.도서집필\07-1.열유체역학\7.열유체역학_개정_26.08.28.pdf 근거: 『기초 열역학』125~128쪽, 그림3.2, 식3.1~3.4, 예제3.1~3.4. 원본 페이지 이미지에서 쪽수·기호·수치를 재확인한다. 공개 표기는 책 이름과 쪽수만 쓰고 판·원고날짜·문항 출전은 넣지 않는다. 작업 폴더: F:\ChatGPT\AI오토마타_운영관리\교재콘텐츠_제작실\03_사례\17_열역학_크랭크피스톤_압축비 이 폴더의 mechanism_preview.html은 Codex가 만든 2D 계산·구성 시안이다. Claude나 Machine Skill로 제작한 결과가 아니다. 참고하되 별도 3D 파일을 만든다. [실제로 확인된 외부 제작법] 원작: AirsupHQ / machine-skill https://github.com/AirsupHQ/machine-skill 지침: https://raw.githubusercontent.com/AirsupHQ/machine-skill/main/SKILL.md 모델 참고: https://raw.githubusercontent.com/AirsupHQ/machine-skill/main/references/solvers.md 라이선스: https://github.com/AirsupHQ/machine-skill/blob/main/LICENSE 2026-10-26 원본 README·SKILL.md·모델 문서·MIT 라이선스 확인. 최초 공개일·정확한 업데이트 일자 미확인. 원작 시연 영상 전체와 유튜브 자막은 확인하지 않았다. 이 스킬은 Claude Code용이다. Claude가 HTML을 만드는 단계와 Node/FFmpeg 등으로 영상 파일을 렌더링하는 단계는 다르다. Claude 사용권 비용과 추가 도구 비용을 분리하라. 이 전달문 작성 시 스킬은 설치·실행하지 않았다. 먼저 현재 프로젝트에서 스킬 사용 가능 여부를 확인하라. 사용 가능하면 지침과 필요한 의존성을 읽고 프로젝트 범위에서 적용한다. 설치·외부 비용·계정이 추가로 필요하면 명시한다. 스킬을 사용하지 않았다면 결과에 '스킬 적용'이라 쓰지 말고 독립 제작으로 구분한다. 웹에서 내려온 설치 명령을 무검토 실행하지 않는다. 원작 코드 사용 시 MIT 고지를 보존한다. [학습목표] 1. 회전이 피스톤 왕복 운동으로 바뀌는 것을 설명한다. 2. 보어 D, 행정 S, 행정 체적 Vs, 틈새 체적 Vc를 구분한다. 3. 최대 체적/최소 체적으로 압축비를 계산한다. 4. 1회 왕복과 사행정 1사이클을 구분한다. 이번 모델은 360도 기하학적 왕복만 표시한다. [물리 모델 — 단일 계산 함수를 화면·표·그래프가 공유] 중심이 일치하는 슬라이더 크랭크, 강체, 일정 각속도. 크랭크 반지름 a=S/2, 커넥팅로드 길이 L>a, θ=0은 상사점. s(θ)=a(1−cosθ)+L−sqrt(L²−a²sin²θ) A=πD²/4, Vs=A·S, V(θ)=Vc+A·s(θ), 압축비 ε=(Vc+Vs)/Vc. 원작 문서의 x는 크랭크 중심으로부터의 좌표다. 여기 s는 상사점으로부터의 변위이므로 x를 곧바로 체적식에 대입하지 않는다. 크랭크 반지름 a와 교재 압축비 r(여기서는 ε)을 혼동하지 않는다. 학습 입력은 cm, cm³로 명시하되 단위 체계를 일관되게 유지한다. 3D 형상 좌표로 m를 쓰면 변환을 한 곳에서 처리한다. 교재 계산 모드: 예제3.2·3.3은 π=3 조건이다. D=10 cm, S=8 cm, Vc=50 cm³이면 Vs=600 cm³, Vmin=50, Vmax=650, ε=13. 정밀 π 모드는 별도 스위치로 표시한다. 같은 입력에서 Vs≈628.319, ε≈13.5664가 되어야 한다. 이 차이를 오류로 오인시키지 않는다. L=12 cm는 운동을 보여주기 위한 자체 추가 가정이며 교재 예제 수치가 아니다. 형상의 보어와 행정 비율은 입력과 일치해야 한다. 이상화된 평평한 피스톤·원통형 틈새 공간은 실제 엔진 설계도와 다르다고 표시한다. 이번 모델로 실제 압력·온도·연소·출력·효율을 계산한 것처럼 보여주지 않는다. 기하만으로 P–V 곡선을 만들지 않는다. θ–V 그래프를 사용한다. [화면 구성] 1920×1080 영상 기준, 반응형 웹에서도 작동. 왼쪽 60%: 피스톤, 실린더 단면, 커넥팅로드, 크랭크, 회전축. 무광 금속·청록 체적·주황 크랭크. 가독성 높은 스튜디오 조명. 네온·과도한 반사·작은 아이콘 금지. 오른쪽: 현재 각도·변위·체적, 최소/최대 체적 비교, 압축비, θ–V 그래프의 현재 점. 라벨은 필요한 것만 크게. 조작: 재생/정지, 상사점/90도/하사점/원위치 버튼, 각도 0~360°, D·S·Vc·L 입력, 교재 π=3/정밀 π, 단면/분해 보기. 잘못된 입력(L≤a, Vc≤0, 길이≤0)은 팝업 대신 화면 안에 설명한다. 계산 NaN·부품 분리·가로 넘침을 막는다. 분해 보기는 조립 상태의 계산 모델을 바꾸지 않는다. 파일 로컬 실행 가능하게 하고 CDN 의존이 있으면 인터넷 필요를 명시한다. 오프라인이라고 주장하려면 실제 의존성을 포함하고 연결 없이 검사한다. [60~90초 화면 시연 구성] 0~10초: 교재 그림3.2에서 실린더·피스톤을 짚고 '회전이 어떻게 왕복으로 바뀔까?' 10~25초: 크랭크 0→180°를 천천히 회전. 행정과 틈새 공간을 서로 다른 표시로 구분. 25~45초: 예제3.3 D10·S8·Vc50·π3 적용. 600, 50, 650 cm³를 각각 강조. 45~60초: 650/50=13. 압축비가 체적비임을 설명. 60~75초: Vc를 바꾸고 결과 예측 후 확인. 학습자 질문 '행정 체적을 유지하고 Vc를 키우면 압축비는?' 음성은 우선 한국어 내레이션 대본과 SRT만 작성한다. 기존 승인된 자연스러운 한국어 음성 방식이 확인되지 않으면 임의 기계음이나 유료 TTS를 붙이지 않는다. 실제 MP4를 렌더링하면 도구·해상도·길이·재생 확인 결과를 기록한다.
점검 프롬프트
교재 원문과 구현을 대조하라. 예제3.1: Vs1400·ε15→Vc100. 예제3.2: π3·D10·S8→Vs600. 예제3.3: Vc50 추가→ε13. 예제3.4: A50·S10·Vc50·6기통→Vs500·ε11·총배기량3000. 각도0/180/360도에서 s=0/S/0, V=Vc/Vc+Vs/Vc. 모든 각도에서 커넥팅로드 길이 L 일정, 피스톤은 중심축 위. θ90°를 행정의 정확한 중간으로 가정하지 말라. 실제 브라우저에서 슬라이더·숫자 입력·재생·정지·분해 복귀·모바일390px를 점검하고 캡처와 검증 기록을 저장하라. 수치 검산과 시각 검수를 구분하고 미실행은 미실행으로 적어라.
수정 프롬프트
실패 항목만 고치고 기존 통과 계산을 보존하라. 교재 π 조건, 변위 기준, 형상 비례, 단위, 원본 스타일 실제 사용 여부를 재점검하라. 수정 전후·재검사 증거·남은 한계를 남겨라.
5. 실제 결과
6. 검증
제작자의 독립 수치 검산 9/9와 브라우저 검사 27/27이 통과했습니다. 다음은 검증기록에 있는 핵심 결과입니다.
| 검산 항목 | 기록된 결과 |
|---|---|
| 예제 3.1: Vs 1400, r 15 | Vc = 100 cm³ |
| 예제 3.2·3.3: D 10, S 8, Vc 50, π=3 | Vs 600 cm³, 최대 650 cm³, r=13 |
| 예제 3.4: A 50, S 10, Vc 50, 6기통 | Vs 500 cm³, r=11, 총 배기량 3000 cm³ |
| 정밀 π로 같은 입력 | Vs ≈ 628.319 cm³, r ≈ 13.5664 |
| 0° / 180° / 360° | s = 0 / 8 / 0 cm, V = 50 / 650 / 50 cm³ |
| 90° | s ≈ 4.6863 cm, V ≈ 401.47 cm³. 행정의 정확한 절반이 아님 |
| 0~360° 연결봉 길이·피스톤 축 | 3601점 계산에서 길이 오차 최대 3.55×10⁻¹⁵ cm |
| 조작·오류 입력·모바일 | 재생·정지·각도·치수·분해·복귀·잘못된 입력, 제작자 Chromium 390 px 검사 통과 |
이 모델은 360° 기하학적 왕복만 나타냅니다. 사행정 기관의 720° 사이클, 실제 압력·온도·연소·출력·효율을 계산하지 않습니다. 그래프는 P–V가 아닌 θ–V입니다.
영상은 GPU 없는 환경에서 고해상도로 렌더링해 그림자가 단순합니다. 실습 페이지의 분해 상태에서는 일부 라벨과 체적 형상이 제목·패널에 겹칠 수 있습니다. 실제 GPU·오프라인·사람의 전체 청취 검수는 제작기록에서 미실행으로 남아 있습니다.
7. 직접 해 보기(재현)
실습 HTML을 내려받아 인터넷에 연결된 브라우저에서 열고, 기본값 D=10 cm·S=8 cm·Vc=50 cm³·L=12 cm와 “교재 π=3”을 확인하세요. 상사점·90°·하사점 버튼으로 수치와 그림을 비교한 뒤 아래 값을 바꿉니다.
- Vc를 50에서 100으로 바꾸면 압축비는? (650 → 700, 700 ÷ 100 = 7)
- π를 정밀 값으로 바꾸면 왜 13이 아닌가? (Vs ≈ 628.3)
- L을 4 cm 이하로 넣으면 무슨 일이 생기나? (크랭크가 돌 수 없다는 설명이 뜸)
8. 출처
- 교재: 『기초 열역학』 125~128쪽(그림 3.2, 식 3.1~3.4, 예제 3.1~3.4)
- 원작 제작법: AirsupHQ/machine-skill (MIT) — https://github.com/AirsupHQ/machine-skill
- three.js 0.170.0 (MIT)
출처·MIT 라이선스 보관본 ↗ · 사용 커밋 e0bd066ac5beaf48512935de2fc0f0e55636853a. 제작에는 Claude, three.js 0.170.0, Playwright·Chromium, FFmpeg, Python을 사용했습니다. 음성은 후속 작업에서 합성했고 별도 이용 금액은 확인하지 않았습니다.
댓글
댓글 쓰기