영상 스타일 적용 01 | Whiteboard Explainer로 내 열역학 교재를 판서 영상으로 바꾸기

AI오토마타 · 영상 스타일 적용 01

해외 영상 스타일 모음에서 스타일 하나를 고르고, 그 스타일의 제작 지침을 그대로 적용해 내 교재의 한 페이지를 영상으로 만들었습니다. 이번 글에는 원본 예시, 실제로 사용한 지침과 도구, 따라 할 수 있는 프롬프트, 완성 영상과 비교표를 순서대로 정리했습니다.

① 이번에 고른 스타일

원본 자료 · AI오토마타 연재 사례 01 (연재 번호는 AI오토마타 기준이며, 원본 사이트의 공식 번호가 아닙니다)

자료 모음	Lemo-Opuscar (LemoLab · Lemomo)
스타일 이름 / 식별자	Whiteboard Explainer / whiteboard
원본 예시 작품	Einstein in Your Pocket (111초)
원작자 확인	저장소 README "by Lemomo (@lemomo_ai)", LICENSE "LemoLab"까지 확인
원본 갤러리	lemomo-ai.github.io/lemo-opuscar
스타일 지침	styles/whiteboard/STYLE.md (커밋 3961ddb 기준)
확인일	2026-10-24

② 원본 예시 영상과 스타일의 특징

Whiteboard Explainer 원본 예시 — Einstein in Your Pocket · LemoLab

원본 영상에서 몇 장면을 뽑아 직접 확인해 보니, 흰 보드 한 장에 손 없이 떠다니는 마커가 글자를 한 획씩 씁니다. 장면은 컷으로 바뀌지 않고 카메라가 보드 위를 옮겨 다니며, 마지막에는 액자와 펜 트레이까지 보이도록 물러나 보드 전체를 보여줍니다. 지침(STYLE.md)이 정한 핵심은 다음 다섯 가지입니다.

• 화이트보드 한 장: 보드는 지도처럼 쓰고, 아이디어마다 자리를 정해 줍니다.
• 실제 획순: 글자를 블록째 띄우지 않고 한 획씩 씁니다.
• 손이 없음: 마커가 떠서 움직이고, 움직이는 물체는 자석 소품만 허용합니다.
• 색은 세 가지 이내: 영상 내내 색마다 의미를 고정합니다.
• 카메라 문법: 컷 대신 이동하고, 읽어야 할 때는 멈추고, 마지막에 전체를 보여줍니다.

③ 내 교재의 어느 부분인가

교재 입력 『기초 열역학』 91~92쪽 · 그림 2.6 · 예제 2.55와 풀이

핵심 수치: P = 1000 kPa(일정), V₁ = 0.2 m³, V₂ = 0.5 m³, ΔV = 0.3 m³ → W = 300 kJ

학습목표: 정압 과정의 경계일을 ① 피스톤의 이동, ② P–V 선도의 넓이, ③ W = ∫P dV = P(V₂−V₁)의 세 가지 표현으로 연결해 설명할 수 있다.

④ 어떤 지침을 어떻게 사용했나

설치형 스킬을 호출하지 않았고, 스타일 지침(STYLE.md)을 첨부해 제작했습니다. 이 저장소는 Claude Code 플러그인 형태로도 배포되지만, 이번 작업에서는 설치하지 않았습니다. 대신 저장소(커밋 3961ddb)를 받아 STYLE.md 전체를 Claude에게 읽히고, 원본 데모에 들어 있는 그리기 엔진(wb.js, MIT 라이선스)을 복사해 우리 영상의 장면을 새로 짰습니다.

항목	실제 사용
제작 AI	Claude (세션 설정 모델 claude-opus-5-5)
지침	STYLE.md를 문맥에 첨부해 적용
그리기 엔진	원본 데모의 wb.js 복사본(MIT). 손글씨 글리프 ∫, Δ, 깃발 달린 1, 가운뎃점 추가
렌더링	직접 작성한 렌더 스크립트 + Playwright 1.63 / 헤드리스 Chromium → ffmpeg 6.1 (H.264)
소리	획·자석 이벤트로 합성한 마커 효과음만 사용(Python numpy/scipy). 내레이션·음악 없음
변형한 규칙	보드 손글씨 폰트가 라틴 문자 전용이라 한국어는 하단 자막으로 분리(Noto Sans CJK KR)

⑤ 그대로 따라 할 수 있는 제작법

1. 입력 파일 준비: STYLE.md(원본 링크), 교재 해당 쪽과 핵심 수치를 준비했습니다.
2. 지침 읽기: STYLE.md 전체를 AI에게 읽히고, 꼭 지켜야 할 규칙(보드 한 장, 획순, 손 없음, 3색, 카메라)을 목록으로 뽑았습니다.
3. 연출안(TREATMENT): 구조 후보 3개(증명형·지도형·이중 펜형) 중에서 보드를 4개 영역으로 나누는 지도형을 골랐습니다.
4. 제작 프롬프트: 아래 ⑥의 최초 프롬프트로 보드 배치, 타임라인, 카메라를 코드로 작성했습니다.
5. 시험 프레임 → 수정: 다섯 장면의 정지 화면을 렌더링해 글자 모양과 화살표 경로를 고쳤습니다(⑨ 참고).
6. 렌더링: 24fps로 1440프레임을 그려 MP4로 만들고, 효과음을 합성해 합쳤습니다.
7. 검증: 실측 길이, 해상도, 음량, 처음·중간·끝 프레임, 검산값을 확인했습니다.

⑥ 복사해서 쓰는 프롬프트

아래 세 프롬프트는 모두 AI오토마타가 쓴 한국어 응용문입니다. 외부 원문(STYLE.md)은 옮기지 않았으니, 위 링크에서 파일을 받아 함께 첨부하세요.

최초 제작 프롬프트

첨부한 Whiteboard Explainer STYLE.md의 시각·움직임 규칙을 실제로 적용하라. 원본 작품의 그림·서사·소품·음악은 복제하지 말고, 첨부한 교재 91~92쪽의 정압 팽창(예제 2.55)을 설명하는 45~60초짜리 독립 영상으로 만든다.
1) 보드 하나를 질문 / 실린더와 피스톤 / P–V 선도 / 일의 유도, 네 영역으로 나눈다.
2) 모든 글자와 도형은 손 없는 마커가 실제 획을 따라 쓰게 한다. 페이드인·타자기 효과는 금지한다.
3) 색은 짙은색(구조) · 청록(과정·측정) · 주황(핵심: W, 넓이, 300 kJ) 세 가지로 고정한다.
4) 추를 얹은 피스톤을 자석 소품으로 만들어 V1 높이에서 V2 높이로 올린다. 높이는 부피에 비례하게 한다.
5) P–V 선도에는 수평 과정선 1→2와 V1~V2 사이의 넓이를 차례로 그리고, 넓이가 0이 아니라 V1에서 시작함을 표시한다.
6) W = ∫P dV → P∫dV → P(V2−V1) → 1000×(0.5−0.2) → 300 kJ를 단계별로 쓰고, P가 상수라서 적분 밖으로 나온다는 이유와 kPa·m³ = kJ를 표시한다.
7) 컷 없이 카메라가 영역 사이를 이동하고, 마지막에 보드 전체를 보여 주며 'V2 = 0.4 m³ → W = ?'를 남긴다.
8) 한국어 설명은 하단 자막으로 분리한다. 내레이션·음악은 넣지 않고 마커 효과음만 합성한다.
9) 규칙별 적용표와 렌더링 소스를 남긴다. 구현하지 않은 효과를 적용했다고 쓰지 마라.

점검 프롬프트

첨부한 영상과 STYLE.md를 비교해 표로 판정하라. 근거는 직접 확인한 프레임의 시각(초)으로 적는다.
- 글자·도형이 실제 획 순서로 그려지는가
- 손·팔·커서가 보이지 않고, 마커가 떠서 움직이는가
- 색이 3색 이내이고 의미가 끝까지 유지되는가
- 움직이는 물체가 자석 소품뿐인가
- 컷 없이 카메라가 이동하고, 마지막에 전체보기가 있는가
- 자막 영역을 가리는 판서나 반쯤 잘린 라벨이 없는가
- 1000×0.3 = 300 kJ인지, 넓이가 V1에서 시작하는지, 피스톤 높이가 부피에 비례하는지
문제는 "장면 / 시각 / 문제 / 수정 제안"으로 적어라.

수정 프롬프트 (이번에 실제로 낸 수정)

시험 프레임에서 다음을 고쳐라.
1) 숫자 1이 l이나 I처럼 보이니 깃발 달린 1 글리프를 정의하라.
2) 폰트에 없는 ∫와 Δ를 같은 손글씨 굵기로 정의하고, Δ의 꼭짓점은 각지게 하라.
3) 1px짜리 가운뎃점은 보이지 않으니 점 글리프로 바꾸고 앞 글자와 붙지 않게 하라.
4) 'P = const' 화살표가 아랫줄 식을 긋지 않도록 두 줄 사이 빈칸으로 경로를 옮겨라.
5) 전체보기의 주황 연결선이 유도식을 가리지 않게 바깥으로 돌아 들어가게 하라.
6) 같은 효과음이 겹치지 않게 하고, 트루 피크가 0 dBFS를 넘지 않게 하라.

프롬프트를 직접 쓰기 어렵다면 AI에게 먼저 이렇게 부탁하세요: "첨부한 STYLE.md를 읽고, 내 교재 ○○쪽의 [개념]을 이 스타일로 설명하는 영상을 만들기 위한 제작 프롬프트를 써 줘. 보드 영역, 색의 의미, 움직일 자석 소품 하나, 유도식 단계, 카메라 경로를 모두 포함해."

⑦ 우리 교재로 만든 실제 영상

AI오토마타 결과물 60.0초 · 1920×1080 · 24fps · 한국어 자막(화면에 새김) · 마커 효과음만 있음(내레이션·음악 없음)

유튜브에서 영상 보기

원본 예시(②)와 나란히 보면, 같은 문법(보드 한 장, 획순, 떠다니는 마커, 전체보기)을 지키면서 주제·그림·소품은 모두 교재 내용으로 바뀐 것을 확인할 수 있습니다.

⑧ 원본 스타일 요소와 이번 적용 비교

원본 스타일 요소	이번 적용 장면	변형 이유	확인 근거
화이트보드 한 장, 영역 = 아이디어	질문 / 실린더 / P–V / 유도 / 마지막 질문, 5개 영역	그대로 적용	59.5초 전체 프레임
실제 획순 손글씨	수식·라벨·도형을 모두 한 획씩 씀	한국어는 자막으로 분리	1.0·14.8·22.4·45.5초 진행 중 프레임
손 없는 마커	마커 3자루가 떠서 쓰고, 그림자가 있으며, 화면 밖으로 빠짐	그대로 적용	전 구간
움직이는 것은 자석뿐	추를 얹은 피스톤(자석 소품)이 9.4초에 착지하고 13.6~16.4초에 상승	원본의 지도핀 대신 교재 그림의 피스톤	14.8초 프레임
의미가 고정된 3색	짙은색 = 구조, 청록 = 과정, 주황 = W·넓이·300 kJ	원본의 파랑을 청록으로 바꿈(지침이 허용하는 색 조합 범위)	전 구간
컷 없는 카메라 이동	A→B 이동, B→C는 펜이 그린 화살표를 따라감, C→D 이동	그대로 적용(모션 블러 포함)	8·20.8·50초 프레임
마지막 전체보기	액자·트레이까지 물러나 주황 화살표로 세 표현을 연결	그대로 적용	59.5초 프레임
획마다 소리	마커 마찰음·삑 소리·자석음·실내음	내레이션·음악은 생략(승인된 음성 방식이 없음)	오디오 트랙 존재와 음량만 측정(−22.1 LUFS). 귀로 듣는 확인은 하지 않음

⑨ 오류와 수정, 응용, 한계, 출처

제작 중 고친 점

• 'V1'의 1이 l처럼 보임 → 깃발 달린 1을 새로 정의
• 폰트에 ∫와 Δ가 없음 → 같은 굵기로 직접 정의(Δ는 처음에 δ처럼 둥글게 나와서 꼭짓점을 각지게 다시 그림)
• 'kPa·m³'의 가운뎃점이 사라짐 → 점 글리프로 바꾸고 폭을 넓힘
• 'P = const' 화살표가 아랫줄 식을 긋고 지나감 → 두 줄 사이로 경로 변경
• 9.4초 자석 소리가 두 번 겹침, 트루 피크 +0.5 dBFS → 중복 이벤트 제거, 리미터 적용(−2.9 dBFS)

다른 교재에 적용할 입력칸

교재·쪽·그림·예제
핵심 질문 1문장
주어진 값(기호 = 값 단위)
보드 영역 3~5개
움직일 자석 소품 1개
유도식 단계
색 3개의 의미
마지막 질문

연습문제

1. 영상 마지막 질문: P = 1000 kPa에서 V₂ = 0.4 m³라면 W는? (정답은 보조 실습에서 직접 검산)
2. 피스톤이 V = 0.35 m³까지 올라간 순간, 그때까지 한 일은? P–V 선도에서 그 넓이를 표시해 보세요.
3. P–V 선도의 넓이를 V = 0부터 잡으면 왜 틀릴까요? 한 문장으로 설명해 보세요.

숫자를 직접 바꿔 검산하는 보조 실습: 교재 속 피스톤을 움직여 보았다 — 정압 팽창과 300 kJ를 눈으로 확인하는 AI 실습
기존 글은 V₁·V₂·P 값을 바꾸며 일을 다시 계산해 보는 조작형 실습기이고, 이번 글은 같은 예제를 정해진 순서로 설명하는 판서 영상입니다. 영상으로 개념의 흐름을 먼저 보고, 실습기에서 숫자를 바꿔 연습문제를 확인하는 순서로 쓰면 좋습니다.

한계

• 보드 손글씨 폰트(EMS Tech)는 라틴 문자 전용이라 한국어를 획순으로 쓰지 못했습니다. 한국어는 자막이고, 원본과 달리 손글씨체가 아닌 고딕체(Noto Sans CJK KR)입니다.
• 내레이션과 음악이 없습니다. 원본 지침이 제시하는 음악 기법과 지우개 되감기 동작은 쓰지 않았습니다.
• 판서는 수식·기호 위주이고, 영문 라벨(gas, const, area, starts at V1)이 섞여 있습니다.

출처·이용조건

• 스타일 지침·엔진: Lemo-Opuscar, LemoLab — github.com/lemomo-ai/lemo-opuscar (코드·문서 MIT)
• 원본 예시 영상 "Einstein in Your Pocket": LemoLab · Lemo-Opuscar · CC BY 4.0 · 원본 그대로 재게시
• 보드 손글씨 폰트: EMS Tech (SIL OFL 1.1)
• 교재: 『기초 열역학』 91~92쪽, 그림 2.6, 예제 2.55