교재 속 피스톤을 움직여 보았다 — 정압 팽창과 300 kJ를 눈으로 확인하는 AI 실습

위 표지는 글의 내용을 요약한 그림입니다. 실제로 동작하는 결과는 바로 아래 실습기와 실행 캡처로 확인하세요.

① 완성 결과: 교재 속 피스톤이 움직입니다

교재 91쪽의 정지된 그림 한 장을, 피스톤을 직접 움직이면서 P–V 선도의 넓이와 계산식이 같이 변하는 실습기로 바꾸었습니다. 아래 화면은 그림이 아니라 이 글 안에서 실제로 동작하는 결과물입니다. 재생을 누르거나 슬라이더를 끌어 보세요.

피스톤이 0.2 m³에서 0.5 m³까지 올라가는 동안 압력은 1000 kPa로 그대로입니다. 그래서 P–V 선도에서 상태점은 수평으로만 움직이고, 그 아래에 생기는 직사각형의 넓이가 곧 기체가 한 일입니다. 오른쪽 그래프의 넓이, 아래 결과 칸의 숫자, 식 전개의 마지막 줄은 모두 같은 부피 값 하나로 계산되므로 어느 순간에 멈춰도 서로 어긋나지 않습니다.

이 글을 마치면

• 정압 과정에서 일이 W = P(V₂ − V₁)인 이유를 P–V 선도의 넓이로 설명할 수 있습니다.
• kPa × m³ = kJ 단위 관계를 이용해 예제 2.55의 300 kJ를 직접 검산할 수 있습니다.
• 압축(ΔV < 0)에서 일의 부호가 음수가 되는 의미를 말할 수 있습니다.
• 같은 방식의 프롬프트로 교재의 다른 예제를 움직이는 실습기로 바꿀 수 있습니다.

② 교재의 어느 부분을 바꾸었나

바탕은 제가 집필한 『기초 열역학』 2장 정압 과정, 91~92쪽입니다. 91쪽의 그림 2.6 정압 과정은 상태 1과 상태 2의 실린더, 그리고 수평선 하나로 된 P–V 선도를 보여 줍니다. 바로 아래 예제 2.55는 “압력이 1000 kPa로 일정하게 유지되는 동안 체적이 0.2 m³에서 0.5 m³로 증가했을 때 기체가 외부에 한 일”을 묻고, 92쪽 풀이에서 ΔV = 0.3 m³, W = 1000 kPa × 0.3 m³ = 300 kJ로 답합니다. 이 두 쪽을 AI에게 넘겨, 정지된 그림과 풀이를 직접 움직여 볼 수 있는 실습기로 바꾸었습니다.

항목	교재 내용	실습기에서
그림 2.6	상태 1·2 실린더, P–V 수평선	피스톤이 연속으로 움직이고 현재 상태점이 따라감
예제 2.55	P = 1000 kPa, V₁ = 0.2 m³, V₂ = 0.5 m³	같은 값으로 시작·끝 상태를 정의
풀이(92쪽)	W = P(V₂ − V₁) = 300 kJ	현재 부피 V로 W = P(V − V₁)을 매 순간 표시

모델의 범위: 일정한 압력에서 천천히 움직이는 준정적 경계일만 다룹니다. 열역학 관례대로 기체가 외부에 한 일을 양(+)으로 둡니다. 피스톤 그림은 설명용이며 실제 장치의 축척이 아닙니다.

③ 준비물과 도구

결과물인 실습기는 HTML 파일 하나입니다. 외부 글꼴이나 라이브러리를 불러오지 않으므로 인터넷이 없어도 크롬·엣지·사파리 같은 일반 브라우저에서 바로 열립니다. 이번 제작에 실제로 쓴 도구는 다음과 같습니다.

• Claude(Anthropic, Claude 앱 · 설정 모델 claude-opus-5-5): 교재 쪽 확인, 실습기 코드 작성, 검증 스크립트 작성과 실행.
• Chromium + Playwright(헤드리스 브라우저 자동화): 버튼을 실제로 누르고 값을 읽는 검산, 화면 캡처, 320·375px 모바일 배치 확인.
• ffmpeg: 실습 화면 녹화를 MP4로 변환.

비용 조건: 실습기 자체를 여는 데에는 비용이 들지 않습니다. 제작에 사용한 AI 서비스 요금은 각자 이용하는 요금제에 따르며, 이 글에서 별도로 확인하지는 않았습니다. 다른 AI 도구에서도 같은 프롬프트를 쓸 수 있지만 결과는 도구마다 다를 수 있으므로 ⑥의 검산을 반드시 다시 해야 합니다.

④ 프롬프트는 직접 짜지 말고 AI에게 쓰게 하세요

아래에 실은 제작 프롬프트에는 교재 수치, 화면 배치, 확인할 값까지 들어 있어서 처음부터 사람이 쓰기는 어렵습니다. 그럴 필요도 없습니다. 교재 쪽을 첨부하고 짧게 부탁하면, AI가 교재에서 수치와 정답을 뽑아 제작 프롬프트를 대신 써 줍니다. 사람이 할 일은 교재 쪽을 고르는 것과 AI가 뽑은 수치가 교재와 같은지 확인하는 것 두 가지입니다.

1. 교재 쪽 첨부 — 실습기로 만들 쪽을 PDF로 잘라 내거나 화면 캡처해서 AI 대화창에 올립니다. 이 글에서는 91~92쪽 두 쪽입니다.
2. 프롬프트를 써 달라고 요청 — 아래 ‘1단계 요청’을 붙여 넣고 [ ] 안만 바꿉니다.
3. 수치 확인 — AI가 정리한 표의 값과 정답을 교재와 대조합니다. 여기서 틀리면 결과물도 틀립니다.
4. 만들기 — AI가 써 준 제작 프롬프트로 실습기를 만듭니다. 같은 대화에서 “이 프롬프트대로 만들어 줘”라고 이어 가도 됩니다.
5. 확인 — ⑥의 점검 프롬프트로, AI가 기준값을 실제로 실행해서 확인하게 합니다.

1단계 요청 — [ ] 안만 바꿔서 쓰세요

첨부한 교재 [91~92쪽]을 학생이 직접 조작해 보는 HTML 실습기로 만들고 싶어. 바로 만들지 말고 다음 순서로 해 줘.
1) 교재에서 그림·예제 번호, 주어진 값과 단위, 교재의 정답을 표로 정리해.
2) 학생이 무엇을 움직이고, 그때 무엇이 같이 바뀌어야 하는지 화면 구성을 3줄로 제안해.
3) 결과가 맞는지 확인할 기준값 3개(시작·중간·끝)를 교재 값으로 계산해.
4) 위 내용을 모두 넣어서, 다른 AI에게 그대로 줄 수 있는 ‘제작 프롬프트’를 한 문단으로 써 줘. 단일 HTML, 외부 통신 없음, 휴대폰 화면 대응, 오류는 팝업 대신 화면 안에 표시, 그림은 설명용이며 실제 축척이 아님을 표시하는 조건을 꼭 넣어.

4)번에서 받는 결과가 아래 ‘제작 프롬프트’와 같은 형태의 문단입니다. 다른 예제로 바꿀 때도 [ ] 안의 쪽만 바꾸면 됩니다.

이번에 넣은 제작 프롬프트 전문

핵심은 “예쁘게 만들어 달라”가 아니라, 교재의 수치와 확인해야 할 값을 프롬프트 안에 미리 적어 두는 것입니다. 시작 0 kJ, 중간 150 kJ, 끝 300 kJ를 명시해 두면 결과를 보고 맞는지 틀린지를 바로 판단할 수 있습니다.

초기 제작 프롬프트

교재 그림2.6과 예제2.55를 바탕으로 단일 HTML 교육 실습기를 만들어라. 밀폐 피스톤의 부피가 0.2에서 0.5m³까지 증가하고 압력은 1000kPa로 일정하다. 왼쪽 피스톤, 오른쪽 P–V 선도, 아래 W=P(V−V1) 수식이 같은 상태값을 사용하게 하라. 시작 0kJ, V 0.35에서 150kJ, 끝 300kJ가 되어야 한다. 그래프 아래 면적은 0.2부터 현재부피까지 채운다. 기준점·축·단위·양의 일 부호를 명확히 하라. 재생·정지·초기화·부피 슬라이더를 제공하고 작은 화면에서도 겹치지 않게 한다. 피스톤은 설명용 개념도이며 실제 장치 축척이 아님을 표시한다. 외부 통신 없이 실행되게 한다.

여기에 두 가지 조건을 함께 붙였습니다. 하나는 왕복 재생을 해도 일이 계속 더해지지 않도록 하는 것이고, 다른 하나는 압축 과정을 따로 정의해 부호를 확인하는 것입니다.

추가 조건(압축·왕복·오류 표시)

왕복 재생 시 일을 프레임마다 더하지 말고 현재 부피로 다시 계산하라. 압축 실습은 시작 0.5m³, 끝 0.2m³로 따로 정의하고 W<0일 때 '외부가 기체에 일을 했다'는 문장을 보여라. 잘못된 입력은 alert 대신 화면 안에 오류로 표시하라.

⑤ 실제 제작 단계와 화면

1단계 — 교재 확인. 먼저 PDF 91~92쪽을 이미지로 열어 그림 2.6과 예제 2.55의 수치, 92쪽 풀이의 300 kJ를 확인했습니다. 텍스트 추출만으로는 교재의 수식 상자가 깨져 보이는 부분이 있어 이미지로 다시 대조했습니다.

2단계 — 실습기 작성. 프롬프트대로 왼쪽에 피스톤, 오른쪽에 P–V 선도, 아래에 식 전개를 두었습니다. 세 영역은 “현재 부피” 하나만 읽어서 그리므로, 재생 중이든 슬라이더를 끌 때든 늘 같은 값을 보여 줍니다. 아래는 슬라이더를 0.35 m³에 놓은 실제 실행 화면입니다.

실제 실행 캡처 — V = 0.350 m³에서 넓이·결과 칸·식이 모두 150 kJ

3단계 — 압축 확인. 압축 버튼을 누르면 시작이 0.5 m³, 끝이 0.2 m³로 바뀝니다. 부피가 줄어드는 만큼 ΔV가 음수가 되므로 일도 −300 kJ가 되고, 넓이는 주황색으로 바뀌며 “외부가 기체에 300 kJ의 일을 했다”는 문장이 나타납니다.

실제 실행 캡처 — 압축 끝 상태, W = −300 kJ

4단계 — 휴대폰 화면. 폭 320px과 375px 화면에서 피스톤과 그래프가 위아래로 쌓이고 가로로 넘치지 않는지 실제로 열어 확인했습니다.

실제 실행 캡처 — 375px 휴대폰 폭

5단계 — 화면 녹화. 같은 실습기를 1280×720으로 녹화하고 자막을 얹은 58초 분량의 화면 녹화 영상(음성 없음)을 만들었습니다. 판서 애니메이션이 아니라 실습기 실제 화면을 그대로 녹화한 것입니다.

⑥ 결과 검산표

아래 표의 “실제 화면” 열은 코드를 읽고 짐작한 값이 아니라, 브라우저 자동화로 버튼을 누르고 슬라이더를 움직인 뒤 화면에 표시된 글자를 읽은 값입니다. 전체 21개 항목을 실행했고 모두 통과했습니다.

확인 항목	교재·기대값	계산	실제 화면	결과
시작 V = 0.2 m³	0 kJ	1000 × 0	0 kJ	통과
중간 V = 0.35 m³	150 kJ	1000 × 0.15	150 kJ	통과
끝 V = 0.5 m³ (예제 2.55)	300 kJ	1000 × 0.3	300 kJ	통과
압력 일정·넓이 범위	점 높이 같음, 0.2부터 채움	—	세 점의 높이 동일, 넓이 시작 0.2	통과
재생 끝·정지·처음	300 kJ에서 멈춤 / 정지 시 고정 / 처음 0 kJ	—	그대로 동작	통과
왕복 반복 약 18초	0~300 kJ 안에서만 변함	—	최소 0, 최대 300 (표본 181개)	통과
압축 0.5 → 0.2 m³	ΔV < 0 → −300 kJ	1000 × (−0.3)	−300 kJ, 부호 설명 표시	통과
예측 확인 V₂ = 0.4 m³	200 kJ	1000 × 0.2	200 kJ, “일치”	통과
잘못된 입력	화면 안 오류, 팝업 없음	—	오류 문구 표시, 팝업 0회	통과
외부 통신·모바일	통신 0건, 320·375px 넘침 없음	—	0건, 넘침 없음	통과

점검에도 프롬프트를 썼습니다. 이 프롬프트의 핵심은 “실행한 검증과 읽기만 한 검증을 나누라”는 문장입니다. AI가 코드를 읽기만 하고 통과라고 말하는 경우를 막기 위해서입니다.

점검 프롬프트

교재 기준값과 실제 실행 결과를 비교하라. 부피 0.2/0.35/0.5m³에서 일 0/150/300kJ, 일정압력, 면적 범위, 단위, 재생과 슬라이더 동기화, 초기화 이후 상태를 확인하라. 실행한 검증과 읽기만 한 검증을 분리하라. 화면 캡처와 실패 조건을 남겨라.

⑦ 실패했던 점과 수정 요청

계산은 첫 실행에서 모두 맞았지만, 화면을 직접 보니 고칠 곳이 세 군데 있었습니다. 숫자 검사만으로는 잡히지 않는 문제였기 때문에 캡처를 눈으로 확인하는 단계가 필요했습니다.

• 휴대폰에서 그래프 글자가 너무 작음. 폭 320px에서 축 눈금 글자가 약 7px로 줄어 읽기 어려웠고, 결과 칸 숫자가 두 줄로 꺾였습니다. 그래프 글자를 키우고 모바일 결과 칸 글자를 줄였습니다.
• 빼기 기호가 두 가지로 표시됨. 압축 끝에서 그래프 안 라벨은 “-300”(하이픈), 결과 칸은 “−300”(수학 빼기 기호)이었습니다. 같은 기호로 맞췄습니다.
• 녹화 화면 배치. 첫 녹화에서는 실습기가 화면 왼쪽만 차지하고 자막이 식 전개를 덮었습니다. 녹화용 배치를 세 칸으로 바꾸어 다시 녹화했습니다.

고칠 때는 아래 양식으로 요청하면 됩니다. 재현 순서, 기대값, 실제로 본 값을 모두 적고, 고친 뒤에는 기존 검산 3건을 다시 실행하게 하는 것이 핵심입니다. 이번에도 수정 후 21개 항목 전체를 다시 실행했습니다.

수정 프롬프트 양식

다음 실제 실패를 고쳐라: [재현순서/기대값/관찰값]. 수정 범위를 설명하고 기존 검산3건 및 실패 재현을 다시 실행하라. 실행하지 않은 테스트는 통과로 쓰지 마라.

예시(실제 적용)

다음 실제 실패를 고쳐라: 320px 화면에서 V=0.35로 둔다 / 그래프 눈금·점 번호가 읽힌다 / 눈금 글자가 약 7px로 작아 읽기 어렵고 결과 칸 숫자가 두 줄로 꺾인다. 수정 범위를 설명하고 기존 검산3건 및 실패 재현을 다시 실행하라. 실행하지 않은 테스트는 통과로 쓰지 마라.

⑧ 직접 해 보기: 먼저 예측하고 확인하세요

맨 위 실습기 아래쪽의 예측하고 확인하기 칸을 사용합니다. 최종 부피 V₂를 바꾸고, 계산기를 쓰기 전에 일 W를 먼저 머릿속으로 구해 입력한 다음 확인을 누르세요. 실습기가 계산값과 비교해 일치 여부를 알려 주고, 그래프도 그 상태로 바뀝니다.

1. V₂ = 0.4 m³ → 예측해 보세요. (ΔV는 얼마인가요?)
2. V₂ = 0.6 m³ → 300 kJ보다 큰가요, 작은가요? 얼마나 큰가요?
3. ‘정압 압축’을 고르고 V₂ = 0.3 m³ → 부호까지 맞혀 보세요.
4. 팽창 모드에서 V₂ = 0.1 m³를 넣어 보세요. 왜 오류가 나는지 설명해 보세요.

정답: 1) 200 kJ 2) 400 kJ(100 kJ 더 큼) 3) −200 kJ 4) 팽창이라면 끝 부피가 처음 부피 0.2 m³보다 커야 하기 때문입니다.

한 걸음 더: 같은 프롬프트에서 수치와 그림 번호만 바꾸면 교재의 다른 예제도 실습기로 만들 수 있습니다. 예를 들어 예제 2.57(100 kPa, 2 → 5 m³)은 같은 실습기에서 P와 V 값만 바꾸면 됩니다. 이때도 ⑥처럼 교재 답과 실제 화면을 표로 대조하세요.

⑨ 내려받기 · 원출처 · 확인일

• 실습기: 이 글 맨 위에서 바로 실행하거나, 위의 ‘실습기 HTML 내려받기’ 버튼으로 파일을 받아 오프라인에서 열 수 있습니다.
• 화면 녹화 영상: YouTube에서 보기 (58초, 자막형)
• 원출처: 『기초 열역학』 91~92쪽, 그림 2.6 정압 과정, 예제 2.55와 풀이.
• 확인일: 2026년 10월 24일 — 교재 쪽 대조, 실습기 실행 검증 21항목, 모바일 320·375px 확인.