← 강의 목록
LMS-2242 제작 기록
AI 개념강의 영상 v2 — 인터랙티브 플레이어 및 연계복습 구조 (LMS-2241 후속)
결과물
- 단원: 일차함수와 그래프 — 일차함수의 식 구하기 (지난 시간 '기울기와 y절편'의 다음 소단원)
- 연계 복습: 지난 시간(기울기·y절편) + 중1 정비례 y = ax
- 교육과정: 2022 개정 [9수02-16] 일차함수 그래프의 성질을 이해하고 활용한다. ⚠️ 2차 자료 기준, NCIC 원문 확인 필요
- 길이: 6분 24초 (요건 5–10분 ✅, 체크포인트에서 멈춘 시간 제외)
- 음성·자막: 한국어 음성 + 한국어 자막 ✅
- 교사 아바타: 코드로 그린 오리지널 캐릭터(남자 선배). 실존 인물 얼굴 사용 없음 ✅
- 교과서 복제: 없음. 예시와 문제 모두 새로 작성 ✅
인수 조건 점검
| 조건 | 결과 |
|---|
| 작동하는 웹 플레이어 링크·소스코드·대본 제출 | ✅ 링크·소스·대본 준비 (티켓 첨부·공유는 남음) |
| 답을 제출해야 재생되는 체크포인트 2개 이상 | ✅ 3개 (1:44 선택형, 3:36 입력형, 5:32 선택형) |
| 구간 비율 5% / 90% / 5% | ✅ 실측 4.8% / 90.4% / 4.8% |
| 속도 조절 시 음성·자막 싱크 유지 | ✅ 0.75× · 1× · 1.25× · 1.5× · 2× 테스트 통과 (아래) |
| 수학 오류 0건, 한국인 검수 | ⏳ 자동 검증 통과 — 한국인 검수 필요 |
| 도구·프롬프트·소요시간·비용 기록, LMS-2241과 비교 | ✅ 본 문서 |
| 교과서 복제 금지, 실존 인물 얼굴 미사용 | ✅ |
강의 구성
구간 비율은 실제 음성 길이로 계산했습니다. 인트로(2초)는 도입에, 아웃트로(4초)는 마무리에 포함했습니다.
| 구간 | 내용 | 길이 | 비율 |
|---|
| 도입 (연계 복습) | 지난 시간 y = ax + b, 중1 정비례 y = 2x → y = 2x + 2 | 18.4초 | 4.8% |
| 본론 (개념 + 체크포인트) | ① 기울기·y절편 ② 기울기·한 점 (평행선 응용) ③ 두 점 (x절편·y절편 응용), 체크포인트 3개, 세 방법 비교·검산 | 346.2초 | 90.4% |
| 마무리 (요점 정리) | 세 가지 경우 정리, 다음 시간 예고 | 18.5초 | 4.8% |
인터랙티브 기능과 테스트 결과
브라우저에서 직접 실행해 확인했습니다.
| 항목 | 동작 | 테스트 결과 |
|---|
| 체크포인트 정지 | 문제 지점에서 정확히 멈추고 문제 카드 표시 | ✅ 1:44, 3:36에서 정확히 정지, 음성 정지 확인 |
| 건너뛰기 차단 | 스페이스바, 진행 바 클릭, 재생 버튼 모두 막힘 | ✅ 3가지 모두 1:44에서 그대로 |
| 즉시 피드백 | 정답 → 해설 / 오답 → 힌트 / 2회 오답 → 정답과 해설 공개 | ✅ 세 경우 모두 확인 |
| 입력형 문제 | 숫자 입력, 화면 자막의 "−" 기호도 정답 처리 | ✅ "2" 오답 → 힌트, "−2" 정답 |
| 이어서 보기 | 해설 내레이션부터 재생 재개 | ✅ (버그 1건 수정 후 확인) |
| 속도 조절 | 0.75×–2× 버튼 | ✅ 2×: 4.2초에 영상 9초 진행, 0.75×: 8초에 6초 진행 |
| 음성·자막 싱크 | 자막·입모양은 프레임 기준이라 속도와 무관하게 일치 | ✅ 2×에서 6회 샘플 모두 재생 중 음성과 자막 일치, 음높이 유지 |
| 모바일 | 375px 화면에서 가로 스크롤 없음 | ✅ (휴대폰에서는 영상 속 자막이 작게 보임) |
대표님 피드백 반영 (2차)
| 피드백 | 원인 | 조치 |
|---|
| "처음 1–2초 소리가 안 나요" | 문장마다 음성 파일을 그 문장이 시작될 때 불러와서, 불러오는 동안 첫 음절이 잘림 | 목소리별로 전체 내레이션과 차임을 하나의 연속 오디오 트랙으로 합쳐 처음에 한 번만 불러옴 (scripts/lesson-track.ts). 첫 음절 정상 재생, 체크포인트 정지·재개 싱크 확인 (106.6초 정지 → 재개 후 오디오 109.5초 / 영상 1:50) |
| "밝고 높은 톤의 여자 선생님 목소리" | — | ko-KR-SunHiNeural, 속도 +10%, 음높이 +15%로 전체 내레이션 추가. 문장 중간 "!" 뒤 1초가량 멈추는 문제는 쉼표로 읽게 해서 해결. 길이 6분 34초, 구간 비율 4.9% / 90.4% / 4.8% |
| (추가) 아바타·테마 선택 | — | 플레이어 위에 선생님 (선배 남 = Hyunsu / 선생님 여 = SunHi + 여자 선생님 아바타)과 테마 (기본·칠판·나이트·파스텔) 선택 버튼. 목소리를 바꾸면 처음부터 다시 재생, 테마는 재생 위치 유지 |
사용 도구
| 단계 | 도구 | 비고 |
|---|
| 대본, 수업 데이터, 아바타, 플레이어 코드 | Claude Code (Claude Opus 5.5) | 전부 AI 작성 |
| 음성 | Microsoft Edge neural TTS, ko-KR-HyunsuMultilingualNeural, 속도 +10%, 음높이 +4% | 3가지 샘플 비교 후 선택 |
| 입모양 동기화 | ffmpeg로 음성 음량 추출 → 아바타 입 모양 | |
| 수업 엔진 | Remotion 4.0.535 + @remotion/player | 수업 JSON을 그대로 화면으로 그림 |
| 웹 플레이어 | React 19, Vite 6.3.5 | 체크포인트·피드백·속도 조절 |
| 호스팅 | Claude Artifact (비공개 링크) | 시범용 |
| 수학 검증 | 자체 검증 스크립트 scripts/lesson-check.mjs | 모든 예시·점·기울기·정답을 계산으로 확인 |
프롬프트
사용자 → Claude Code 프롬프트 (원문, 순서대로):
Currently I have an in progress related to the continuation of this ticket, please retrieve that ticket and analyze it. → LMS-2242 분석Go with your recommended defaults: topic = 일차함수의 식 구하기, review = 지난 시간 기울기·y절편 + 중1 정비례, host as a private Artifact link first, keep the illustrated avatar restyled as a friendly senior. Start with the lesson JSON template and script. → 수업 템플릿·대본 작성Yes, generate 2-3 short voice samples of the friendly-senior persona (different Edge voices or settings) so I can pick one. → 음성 샘플 3종Use C (Hyunsu, young male senior) for the lesson. → 음성 선택Yes, restyle the avatar as a young male senior student to match the Hyunsu voice, then generate the full narration. → 아바타·전체 내레이션Yes, build the interactive web player: checkpoints that block playback, instant feedback, 0.75x-2.0x speed control with synced subtitles, using the new avatar and narration. → 웹 플레이어Yes, publish the player as a private Artifact link. → 배포- 대표님 피드백 전달: 첫 1–2초 무음, 밝고 높은 톤의 여자 선생님 목소리 요청 +
I think let's add an avatar and theme selector? → 연속 오디오 트랙, SunHi 목소리, 선생님·테마 선택 추가
소요 시간
| 단계 | 시간 |
|---|
| 티켓 분석, 기본값 결정 | 약 5분 |
| 수업 템플릿·대본 작성, 수학 자동 검증, 구간 비율 조정 | 약 20분 |
| 음성 샘플 3종 | 약 3분 |
| 아바타 제작 + 전체 내레이션 44클립 | 약 10분 |
| 수업 엔진 + 웹 플레이어 | 약 12분 |
| 브라우저 테스트, 버그 2건 수정 | 약 5분 |
| 배포 | 약 3분 |
| 합계 | 약 1시간 (사용자 응답 대기 시간 제외) |
비용
| 항목 | 비용 |
|---|
| TTS (Edge neural TTS) | ₩0 |
| Remotion · @remotion/player (소규모 팀 무료 라이선스 기준*) | ₩0 |
| React, Vite, ffmpeg, 글꼴 | ₩0 |
| 호스팅 (Claude Artifact) | 기존 구독 내 |
| Claude Code 사용량 | 기존 구독 내 사용 (별도 과금 없음) |
| 합계 | 추가 비용 ₩0 |
* Remotion은 직원 3명 이하 회사는 무료, 그 이상은 회사 라이선스가 필요합니다. 플레이어(@remotion/player)도 같습니다.
LMS-2241과 비교
| 항목 | LMS-2241 (v1) | LMS-2242 (v2) |
|---|
| 결과물 형태 | MP4 영상 | 웹 플레이어 (링크) |
| 단원 | 일차함수와 그래프 — 기울기와 y절편 | 일차함수의 식 구하기 (다음 소단원) |
| 길이 | 4분 27초 | 6분 24초 |
| 구성 | 도입·설명·정리 (비율 기준 없음) | 연계 복습 5% / 본론 90% / 요점 정리 5% (실측 4.8 / 90.4 / 4.8) |
| 연계 복습 | 없음 | 지난 시간 + 중1 정비례 |
| 학습자 참여 | 없음 (보기만 함) | 체크포인트 3개, 답을 내야 재생, 정답·힌트·해설 피드백 |
| 속도 조절 | 없음 (영상 플레이어 기능에 의존) | 0.75×–2×, 음성·자막 싱크 유지 |
| 음성 | SunHi (여), 존댓말 선생님, 속도 −4% | Hyunsu (남), 반말 선배, 속도 +10% |
| 아바타 | 여자 선생님 | 남자 선배 (후드티) |
| 수업 내용 형식 | 장면마다 코드로 직접 작성 | JSON 템플릿 — 새 차시는 JSON 파일만 새로 작성 |
| 수학 검증 | AI가 눈으로 확인 | 검증 스크립트가 모든 예시·점·정답을 계산으로 확인 |
| 소요 시간 | 한국어 1편 약 30분 (변형 포함 약 3시간 10분) | 약 1시간 (플레이어 포함) |
| 비용 | 추가 ₩0 | 추가 ₩0 |
| 다음 차시 제작 | 장면 코드 새로 작성 | JSON 작성 → lesson-check → lesson-tts → 빌드 (플레이어·엔진 재사용) |
수학 검토 (자동 검증 통과 — 한국인 검수 필요)
node scripts/lesson-check.mjs lessons/linear-function-equation/lesson.ko.json 결과:
- 기울기 3, y절편 −2 → y = 3x − 2 ✔
- 그래프 (0, −1), 오른쪽 1·위 2 → y = 2x − 1 ✔
- 체크포인트 1: 기울기 −2, y절편 5 → y = −2x + 5 ✔
- 기울기 2, 점 (1, 5) → y = 2x + 3 ✔
- 기울기 −3, 점 (2, −1) → y = −3x + 5 ✔
- y = 3x와 평행, 점 (2, 1) → y = 3x − 5 ✔
- 체크포인트 2: 기울기 3, 점 (2, 4) → b = −2 ✔
- 두 점 (1, 3), (3, 7) → y = 2x + 1 ✔
- 두 점 (−1, 4), (1, 0) → y = −2x + 2 ✔
- x절편 2, y절편 4 → y = −2x + 4 ✔
- 체크포인트 3: 두 점 (−1, 1), (2, 7) → y = 2x + 3 ✔ (오답 보기 3개는 두 점 중 하나 이상을 지나지 않음 확인)
- 그래프 위 모든 점이 그려진 직선 위에 있고, 모든 증가량 표시가 실제 좌표 차와 같음 ✔
남은 일