영상 스타일 적용 09 | Data Storytelling으로 '열 500 kJ를 넣었는데 왜 300 kJ만 남을까'를 연필 차트 영상으로
계에 열 500 kJ를 넣었는데 내부에너지는 300 kJ만 늘었습니다. 나머지 200 kJ는 계가 바깥에 한 일로 빠져나갔기 때문입니다. 이번 사례에서는 제 책 『기초 열역학』의 열역학 제1법칙(밀폐계) 쪽을, 해외 영상 스타일 'Data Storytelling(데이터 스토리텔링)'의 지침에 맞춰 80초 영상과 직접 숫자를 넣어 보는 실습기로 바꾸었습니다.
- 닫힌계에서 Q와 W의 부호를 정하는 약속을 말할 수 있습니다(받은 열 +, 계가 한 일 +).
- ΔU = Q − W로 '500을 넣었는데 300만 남는' 이유를 계산할 수 있습니다.
- 압축(W < 0)처럼 빼기 앞에 음수가 오는 경우를 틀리지 않고 풀 수 있습니다.
- 해외 스타일 지침과 내 교재 쪽을 AI에게 넘겨 같은 방식의 영상을 만드는 순서를 따라 할 수 있습니다.
① 무엇이 달라졌나
교재 64쪽은 식 2.7과 부호 약속 네 줄, 65~66쪽은 예제 풀이로 이어집니다. 정확하지만 부호가 바뀔 때 무엇이 어떻게 달라지는지는 독자가 머릿속으로 그려야 합니다. 영상에서는 0에서 +Q만큼 오르고 −W만큼 내려와 ΔU가 남는 계단 막대를 연필이 한 칸씩 그리게 했습니다. 같은 막대를 부호만 바꿔 세 번 보여 준 뒤, 세 결과를 Q–W 평면의 점으로 접어 '대각선 W = Q가 ΔU = 0'이라는 전체 그림으로 마무리합니다. 마지막 한 경우는 빈 칸으로 남겨 먼저 예측하게 한 뒤 공개합니다.
② 원본 스타일 예시
스타일은 영상 스타일 모음 Lemo-Opuscar(LemoLab)의 Data Storytelling입니다. 원본 예시 작품은 1926~2026년 여름 지구 평균기온(NASA GISTEMP) 101개를 한 사람의 일생에 겹쳐 그린 A Hundred Summers(50초)입니다. 아래 영상은 원작자가 공개한 원본을 그대로 연결한 것입니다.
원본에서 빨강·파랑 연필이 크림색 종이 위에 점을 하나씩 찍고, 손글씨 쪽지가 점에 핀처럼 붙으며, 점들이 마지막에 줄무늬로 바뀝니다. 이 스타일의 핵심은 ① 차트 자체가 영상이라 모든 움직임이 차트 동작(점 착지, 축 성장, 재조정, 모양 바꾸기)이라는 것 ② 색은 값 하나만 나타낸다는 것 ③ 연필이 유일한 배우이고 파랑은 설명, 빨강은 경고라는 것 ④ 값이 음높이가 되는 소리입니다.
③ 교재 근거
| 교재 쪽 | 내용 | 영상·실습기에서 |
|---|---|---|
| 64쪽 식 2.7·2.8 | 밀폐계: ΔU = U₂ − U₁ = Q − W, Q = ΔU + W | 계단 막대의 규칙, 경계 상자 안 카드 |
| 64쪽 부호 약속 | Q > 0 가열, Q < 0 냉각, W > 0 팽창(계가 일을 함), W < 0 압축(일을 받음) | 화살표 방향, 빨강 연필 경고, 도식 1 |
| 65쪽 예제 2.14 | 열 500 kJ를 받고 일 200 kJ를 함 → ΔU = 300 kJ | 사례 1(교재 수치 그대로) |
| 65~66쪽 예제 2.15~2.17 | Q·W 구하기, 방출 열(−100)과 받은 일(−50)의 부호 처리 | 사례 3·4의 '빼기 앞 음수' 처리 |
사례 2(0, 200), 사례 3(0, −200), 예측 문제(−100, −250)는 교재에 없는 자체 학습 예시입니다. 영상과 실습기에서 '자체 예시'로 표시했습니다.
도식 1. 계 경계와 에너지 전달 — 경계를 넘는 것은 열과 일뿐이고, 화살표 방향이 부호입니다.
④ 실제 적용 방법
Lemo-Opuscar 저장소의 Data Storytelling 지침(STYLE.md)을 처음부터 끝까지 읽고, 제 주제에 맞게 하나씩 적용했습니다. 설치형 스킬을 실행한 것이 아니라 스타일 지침을 읽어 적용한 것입니다. 그리기에는 저장소의 공개 엔진(engine.js, MIT)을 썼고, 이야기·장면·자료·소리는 모두 새로 만들었습니다.
| STYLE.md 규칙 | 이번 영상에서 |
|---|---|
| 데이터가 요구하는 차트를 고른다 | '어디로 가나 + 전후 비교' → 계단(워터폴) 막대, 마지막에 Q–W 평면 점 |
| 색은 값 하나만, 발산 램프는 의미 있는 기준에 | ΔU만 색칠, 기준 0(변화 없음), 대칭 반폭 400 kJ. Q·W 막대는 잉크 빗금 |
| 연필 파랑 = 설명, 빨강 = 경고, 바뀌면 전환점 | 압축(W < 0) 장면에서 빨강 끝으로 뒤집고 부호 경고 쪽지 |
| 축은 단위를 처음 말할 때 자란다, 재조정은 톱니 | kJ 축이 질문 뒤에 자라고, 음수가 나올 때 4단으로 내려감 |
| 인코딩 모프는 고정 카메라 | 세 ΔU 막대 → 평면의 세 점 |
| 다음 값 빈 칸, 그 직전 완전 무음 | (−100, −250) 빈 칸 → 1초 무음 → +150 공개, 한 점 근접으로 끝 |
| 자막은 그림 설명, 1.8초 이상, 모프·무음 위에 없음 | 한국어 12개, 아래 띠, 모든 조건 검사 통과 |
| 값 = 음높이(소니피케이션) | 막대·점이 착지할 때 값에 따른 음, 0 이하 값은 5음 음계 |
바꾼 것과 이유. 지침은 '실제 공개 데이터'를 요구하지만 이 주제는 계산 예시입니다. 그래서 제목 아래에 '학습용 계산 예시 — 측정 자료 아님'을 계속 띄우고, 교재 예제 외 수치에는 '자체 예시'를 붙였습니다. 내레이션은 넣지 않았습니다(자막형). 지침의 배경 음악 층은 아주 작은 드론 하나로 줄였습니다. 영어 글꼴(Newsreader·Caveat)에 한글이 없어 한글은 Noto Serif CJK KR과 Nanum Pen Script로 대체했습니다.
⑤ 직접 해 보기 — 부호 실습기
Q와 W를 바꾸면 경계 화살표의 굵기·방향, 계단 막대, ΔU 카드와 검산식이 함께 바뀝니다. 빠른 선택 버튼은 영상의 네 경우와 (0, 0)입니다.
도식 2. 네 경우의 부호 비교 — 막대는 0 → Q → Q − W 순서이고 마지막 칸이 ΔU입니다.
⑥ 입력 파일과 제작 단계
- 입력: 교재 PDF의 64~66쪽(쪽 이미지로 식과 예제 대조), Data Storytelling STYLE.md(커밋 413a6bd), 원본 엔진 engine.js.
- 1단계: AI에게 바로 만들게 하지 않고, 교재 수치표·지침 핵심 규칙·장면표·검증 기준을 먼저 쓰게 한 뒤 그것을 한 문단 제작 프롬프트로 정리하게 했습니다(아래 [0]).
- 트리트먼트: 구조 후보 3개(질문 먼저 / 완성 평면부터 / 막대 경주) 중 교재 서술 순서와 같은 '질문 먼저'를 골랐습니다.
- 제작: 장면 시간표를 코드 한 곳에 두고 그림·자막·소리를 모두 그 시간표에서 만들었습니다. 1,920프레임을 한 장씩 그려 영상으로 묶었습니다.
- 점검·수정: 계산을 코드로 검사하고 1초 간격 프레임을 눈으로 확인해, 틀린 곳을 '재현 순서 / 기대값 / 관찰값'으로 다시 요청했습니다.
⑦ 프롬프트 전문
어려운 제작 프롬프트는 직접 쓰지 않아도 됩니다. [0]처럼 AI에게 '먼저 정리하고, 그다음 프롬프트를 써 달라'고 하면 [1] 같은 문단이 나옵니다. 저는 그 결과를 교재와 대조해 고친 뒤 사용했습니다.
첨부한 교재 [64~66쪽]과 스타일 지침 STYLE.md를 바탕으로 [80초] 설명 영상과 HTML 실습기를 만들고 싶어. 바로 만들지 말고 다음 순서로 해 줘. 1) 교재의 식 번호, 부호 약속, 예제 번호와 주어진 값·정답을 표로 정리하고, 교재에 없는 값은 '자체 예시'로 따로 표시해. 2) STYLE.md에서 꼭 지켜야 할 규칙(차트 선택, 색, 글자·자막, 움직임, 카메라, 소리)을 10줄 이내로 뽑고, 내 주제에 맞지 않아 바꿔야 할 규칙과 그 이유를 적어. 3) 장면을 4~6개로 나눠 시간·카메라·차트 동작·화면 숫자를 표로 짜 줘. 4) 계산 검증 목록(입력 → 기대값)과 자막 기준(최소 유지 시간, 줄 수), 금지 사항을 적어. 5) 위 내용을 모두 넣어서, 다른 AI에게 그대로 줄 수 있는 '제작 프롬프트'를 한 문단으로 써 줘.
첨부한 『기초 열역학』 64~66쪽과 Data Storytelling STYLE.md 전체를 읽고, 닫힌계 제1법칙의 부호를 이해시키는 1920×1080, 24fps, 80초 자막형 영상을 코드로 만들어라. 운동·위치에너지 변화는 무시하고 Q는 계로 들어올 때 +, W는 계가 외부에 한 일일 때 +로 고정해 ΔU = Q − W(식 2.7)를 쓴다. 차트는 데이터의 성격에 맞춰 0 → +Q → −W로 내려와 ΔU가 남는 계단(워터폴) 막대로 하고, 왼쪽에 닫힌계 경계와 Q 물결 화살표·W 직선 화살표를 둔 흐름도를 함께 그린다. 화살표 굵기는 절댓값에 비례하고 음수는 방향으로 표시하며, 경계를 넘는 물질 입자는 그리지 않는다. 색은 ΔU 하나만 RdBu 발산 램프(기준 0, 대칭 반폭 400 kJ)로 칠하고 나머지는 크림 종이 위 잉크로 한다. 장면: 0~12초 빈 축과 질문, 경계를 그림 / 12~32초 교재 예제 2.14(Q 500, W 200 → ΔU 300) / 32~50초 자체 예시 Q 0, W 200 → −200(축을 0 아래로 톱니 재조정) / 50~65초 자체 예시 압축 Q 0, W −200 → +200(연필이 빨강 끝으로 뒤집혀 부호 경고) / 65~80초 세 막대를 Q–W 평면의 점으로 모프하고 대각선 W = Q를 ΔU = 0 선으로 보여 준 뒤, 빈 칸 (−100, −250)을 예측시키고 1초 무음 후 +150을 공개해 한 점 근접으로 끝낸다. 제목 아래에 '학습용 계산 예시 — 측정 자료 아님'을 표시하고, 예제 2.14 외의 수치에는 '자체 예시'를 붙인다. 한국어 자막은 아래 그림 설명 띠에 두 줄 이내, 1.8초 이상, 차트 모프와 무음 구간 위에는 두지 않는다. 음성·음악 샘플은 넣지 않고 값을 음높이로 바꾼 짧은 음과 연필·종이 효과음만 합성한다. 내부에너지 변화만으로 온도 변화를 단정하지 않는다. 원본 데모의 이야기·장면·자료·음악은 쓰지 않는다.
교재 근거·코드·화면·자막·본문을 대조하라. ① (500, 200) → 300, (0, 200) → −200, (0, −200) → 200, (−100, −250) → 150, (0, 0) → 0과 Q − ΔU − W = 0을 코드로 계산해 화면 숫자·자막·실습기 출력과 비교하라. ② 예제 2.14만 교재 수치로, 나머지는 자체 예시로 표시됐는지 ③ 화살표 굵기가 |값|에 비례하고 음수가 방향으로 표시되는지, 경계를 넘는 입자가 없는지 ④ 색이 ΔU 하나에만 쓰였는지 ⑤ 자막이 겹치지 않고 1.8초 이상, 모프·무음 위에 없는지 ⑥ 무음 1초가 실제 표본 0인지, 길이·해상도·음량·검은 프레임과 전 구간 디코딩을 측정하라. 각 수치의 근거와 스타일 규칙이 적용된 장면을 기대값/관찰값/합격 여부로 기록하고, 미실행을 합격으로 쓰지 마라.
① 66.6초 / 모프가 지나가면 워터폴 숫자·축 이름이 사라져야 함 / 막대는 흐려지는데 '+500', 'Q', '−W' 글자는 그대로 남음 → 원인은 setType이 들어오는 투명도를 덮어쓰는 것(STYLE.md 9절 함정). setType이 기존 투명도에 곱하도록 그 한 곳만 고쳐라. ② 17초 / 왼쪽 Q 화살표가 화면 안에서 화살표로 보여야 함 / 경계 상자가 너무 왼쪽이라 화살표가 화면 밖으로 잘리고 굵은 물결 덩어리로 보임 → 경계 상자를 오른쪽으로 옮기고, 굵기 비율을 0.045에서 0.03으로, 물결을 크게 바꿔라. ③ 23초 / 손글씨 쪽지를 읽을 수 있어야 함 / 한글 손글씨 글꼴이 같은 크기에서 작아 보임 → 쪽지 글자만 1.3배로. ④ 47초 / '내부에너지에서 꺼내 씀'이 축 이름(−W, ΔU)과 겹침 → 사례 2 ΔU 막대 오른쪽으로 옮겨라. ⑤ 79초 / 마지막 계산 쪽지가 깨끗한 곳에 있어야 함 / 평면 눈금·다른 점 라벨과 겹침 → 쪽지를 점 아래로 옮기고 마지막 카메라 중심을 그 점과 쪽지 사이로. ⑥ 렌더 준비 / 원본 저장소에 Newsreader·Caveat·IBM Plex Mono 글꼴 파일이 없음(라이선스 문서만 있음) → 같은 OFL 글꼴을 npm @fontsource 5.1.1에서 받아 쓰고, 한글은 본문 Noto Serif CJK KR, 손글씨 Nanum Pen Script(OFL)로 대체하라. 수정 뒤 계산 검증 전체와 1초 간격 프레임 확인을 다시 실행했다.
같은 부호 규칙과 같은 차트(계단 막대 + Q–W 평면)로, 정답을 숨긴 가상 조건 3개와 해설을 추가하라. 각 조건은 빈 칸으로 먼저 보여 주고, 해설에서 Q·W 부호를 왜 그렇게 정했는지 한 줄로 밝혀라. 교재 수치가 아닌 값은 '자체 예시'로 표시한다. 열린계의 유동일(엔탈피)은 이번 편에 섞지 마라.
⑧ 실제 영상과 대표 프레임
완성 영상은 80초, 1920×1080, 24fps이며 음성 없이 자막이 화면에 들어가 있습니다. 맨 위 영상과 같은 파일입니다.
⑨ 검산 · 오류 · 연습
| (Q, W) kJ | ΔU = Q − W | 근거 |
|---|---|---|
| (500, 200) | 300 | 교재 예제 2.14 |
| (0, 200) | −200 | 자체 예시 |
| (0, −200) | +200 | 자체 예시 |
| (−100, −250) | +150 | 자체 예시 |
| (0, 0) | 0 | 자체 검사 |
다섯 경우 모두 코드로 계산해 화면 숫자·자막·실습기 출력과 비교했고, Q − ΔU − W = 0이 성립했습니다. 내부에너지가 늘었다고 해서 온도가 반드시 오른다고 단정하지는 않습니다(상변화처럼 온도가 그대로인 경우가 있습니다).
실패와 수정. 처음 렌더에서는 막대가 사라지는 장면에서 숫자 글자만 남았습니다. 글자를 그리는 함수가 바깥의 투명도를 덮어쓰는 문제로, 지침의 '함정' 항목에 적힌 그대로였습니다. 그 한 곳을 고친 뒤, 화면 밖으로 잘린 열 화살표, 너무 작은 한글 손글씨, 축 이름과 겹친 쪽지를 차례로 고쳤습니다(⑦의 실제 수정 프롬프트).
연습. 계가 열 350 kJ를 받으면서 바깥에 일 500 kJ를 했다면 ΔU는? 정답: ΔU = 350 − 500 = −150 kJ. 받은 열보다 한 일이 커서, 모자란 150 kJ를 내부에너지에서 꺼내 썼으므로 음수입니다(자체 문제).
⑩ 출처
- 교재: 『기초 열역학』 64~66쪽(식 2.7·2.8, 부호 약속, 예제 2.14~2.17)
- 스타일 지침: Lemo-Opuscar · Data Storytelling STYLE.md (LemoLab, MIT)
- 원본 예시 영상: A Hundred Summers (LemoLab, CC BY 4.0) · 갤러리 lemomo-ai.github.io/lemo-opuscar
- 그리기 엔진: Lemo-Opuscar dataviz demo/engine.js (MIT, 3곳 변경) · 글꼴 Newsreader, Caveat, IBM Plex Mono, Nanum Pen Script, Noto Serif CJK KR (OFL)
- 확인일: 2026년 10월 25일
댓글
댓글 쓰기