Li의 코드 애니메이션 스킬은(는) 무엇을 하나요?
한 줄 요약: 수학 수업에서 "설명하기 어려운" 부분을, 반복해서 멈춰 볼 수 있고 공식이 항상 정확하게 배치된 90초 코드 애니메이션 영상으로 만듭니다.
핵심 기술 체인은 네 단계로 고정되어 있으며, AI로 화면을 생성하지 않습니다: HTML/CSS/SVG로 화면 구성 → GSAP으로 타임라인 편성 → 헤드리스 Chromium으로 프레임 캡처 → FFmpeg로 H.264 MP4 인코딩. HyperFrames는 프로젝트 계약과 조정만 담당하며, 단 한 프레임도 생성하지 않습니다. 인쇄기와 같아서, 원고는 직접 작성해야 합니다.
사전 조건 (작업 시작 전 확인, 누락 시 진행하지 마세요)
프로젝트 루트에서 npx -y [email protected] doctor를 실행하여 다음 네 가지 항목이 모두 녹색인지 확인하십시오.
| 소프트웨어 | 버전 | 용도 | 누락 시 문제점 | 설치 방법 (Linux/클라우드 PC) |
|---|---|---|---|---|
| Node.js | ≥22 | CLI 및 스크립트 실행 | 전체 프로세스 불가 | nvm install 22 |
| FFmpeg 및 ffprobe | 4.x | 인코딩, 프레임 추출, 매개변수 확인 | ffmpeg만 있고 ffprobe가 없으면 내보내기 및 확인 실패 | apt install ffmpeg (ffprobe 포함됨), 타사 패키지 관리자 사용 금지 (일부만 설치될 수 있음) |
| Chromium / Chrome 무헤드 | 최근 2년 버전 | 프레임 캡처 | 이미지 출력 불가 | apt install chromium, 클라우드 PC는 일반적으로 /usr/local/bin/chromium에 있음 |
| GSAP | 3.x 로컬 파일 | 타임라인 및 트윈 | CDN 참조 시 무음 블랙 스크린, 오류 없음 | 이 스킬의 assets/gsap.min.js를 프로젝트 assets/에 복사 |
자체 점검에 필요한 추가 항목 (누락 시 자체 점검만 약화, 영상 제작에는 영향 없음):
| 도구 | 용도 | 누락 시 해결 방법 |
|---|---|---|
| playwright-core | 6개 장면 자동 캡처 | npm i playwright-core |
| ffmpeg의 scale 필터 | 캡처 밝기 진단 | DOM 진단으로 자동 하향 조정 |
| zip | 소스 코드 패키징 | tar.gz 사용, 전달 시 설명 명시 |
반드시 알아야 할 다섯 가지 함정
ffmpeg와ffprobe가 반드시 함께 있어야 합니다. 많은 시스템이 전자만 설치합니다.- winget / 휴대용 패키지를 혼용하지 마십시오. PATH에서 가리키는 버전이 일치하지 않을 수 있습니다.
- GSAP는 항상 로컬 파일을 사용하며, CDN은 금지입니다. CDN 연결이 끊기면 영상 전체가 검은 화면이 되고 오류가 발생하지 않습니다.
- 브라우저는 소프트웨어 렌더링으로 실행됩니다 (로그에
BeginFrame did not run이 나타나는 것은 정상). GPU를 건드릴 필요가 없습니다. - 렌더링 기본 비트레이트는 약 500 kbps에 불과합니다. 1080p에서는 일반적으로 3–8 Mbps여야 합니다. 비트레이트를 명시적으로 지정하지 않으면 어두운 색의 얇은 선이 반드시 흐려집니다. 6절을 참조하십시오.
경로 선택: 기본값 A, 나레이션 또는 복잡한 화면이 필요한 경우 B
| A 트랙 · 순수 그래픽 (기본값) | B 트랙 · 나레이션/복잡한 화면 | |
|---|---|---|
| 적합 | 함수 그래프, 기하, 공식 유도, 개념 변별 | 나레이션 설명 필요, 손/캐릭터/지도/3D 필요, 배경 음악 포함 영상 |
| 화면 | 이 스킬의 6개 장면 HTML+SVG, 좌표 고정 | code2video 스킬 호출: film.json 스크립트 + 빌딩 블록 라이브러리 |
| 음성 | 기본적으로 나레이션 없음, 자막이 화면 텍스트; BGM은 사용자가 후반 작업에서 추가 | TTS 나레이션 + 배경 음악 + 음량 정렬 |
| 명령어 | npx [email protected] render | node $C/tools/make.mjs <영상 디렉토리> film |
| 전환 시기 | 사용자가 명시적으로 "설명 음성/더빙/나레이션" 요청, 또는 실사 동작/지도/캐릭터가 필요한 화면 | 사용자가 화면과 텍스트만 원할 때 |
B 트랙의 기능은 상속하지만 복사하지 않습니다: code2video의 engine/kits/presets을 이 스킬로 가져오지 않습니다 (약 20MB이며, 두 스킬이 각각 업그레이드된 후 버전 불일치가 발생할 수 있음). 대신 이미 설치된 버전을 호출합니다. 연결 세부 사항은 references/two-tracks.md를 참조하십시오. 스토리보드는 두 트랙에서 공통으로 사용되며, A 트랙 스토리보드는 B 트랙의 film.json으로 변환할 수 있습니다 (scripts/story-to-filmjson.mjs).
작업 수신 후 실행 프로세스
0 · 환경 자체 점검
npx -y [email protected] doctor
ls assets/gsap.min.js
누락된 항목이 있으면 설치 명령어를 제공하고 사용자가 설치를 완료할 때까지 기다리십시오. 실행 가능한 척하지 마십시오.
1 · 질문 보완 (사용자는 일반적으로 한 문장만 제공)
선생님들은 대부분 20자 내외로 말합니다: "코드로 영상을 만들어주세요. 허수에 대해, x²=-4를 만족하는 x가 실제로 있는지에 대해." 나머지 사양은 여러분이 보완하고, 네 가지 질문만 하되 각 질문에 선택지를 제공하십시오:
| 질문 | 왜 반드시 질문해야 하는가 | 권장 기본값 |
|---|---|---|
| 설명 수준 (어디까지 설명할지) | 수학적 결론이 결정되며, 전체 영상에서 유일하게 "틀릴" 수 있는 부분 | 새로운 개념이 필요하지 않은 단계에서 중단 |
| 길이 및 단락 | 장면 수 결정 | 90초 6장면 |
| 스토리보드 작성자 | 사용자가 이미 칠판에 적힌 순서를 가지고 있을 수 있음 | 여러분이 작성하고 먼저 보여줌 |
| 대상 학년 | 깊이와 용어 결정 | 주제가 속한 학년에 따라 결정 |
스타일은 묻지 않음: 기본값은 어두운 야간 광선 스타일 (사용자가 이미 고정). 사용자가 흰색 배경을 지정하는 경우에만 질문.
사용자가 "알아서 해주세요"라고 말하면, 기본값을 한 문장으로 요약하여 회신하십시오 ("어두운 스타일, 90초, 6장면, 이 단계까지만 진행합니다. 문제가 있으면 말씀해 주세요"). 사용자는 고개만 끄덕이면 됩니다.
2 · 6개 장면 스토리보드 작성, 사용자 승인 대기
3절의 뼈대에 따라 스토리보드 테이블을 작성하십시오: 장면 번호, 길이, 화면 요소, 자막 원문, 해당 장면이 해결해야 할 문제. 스토리보드만 제공하고 코드는 작성하지 마십시오. 사용자가 "좋아요"라고 말하면 3단계로 진행하십시오. 이 단계의 재작업 비용이 가장 낮으므로 반드시 확인을 기다리십시오.
3 · 프로젝트 생성
node <스킬 디렉토리>/scripts/init-project.mjs --name <프로젝트 디렉토리> --title "<영상 제목>" --scenes 6
스크립트는 다음을 수행합니다: assets/project-template/의 6개 장면 뼈대와 index.html을 복사하고, GSAP을 복사하고, verify-seeks.json 뼈대를 생성합니다. 수동으로 npx hyperframes init를 실행할 필요가 없습니다. 템플릿이 이미 계약을 준수합니다.
템플릿 내용은 "반비례 k의 기하학적 의미" 영상의 완전한 6개 장면 (어두운 버전)입니다. 바로 재렌더링하여 동일한 스타일의 영상을 만들 수 있습니다. 테마를 변경할 때는 좌표계, 타임라인 및 스타일을 유지하고, 텍스트와 K 값만 수정하면 처음부터 작성하는 것보다 훨씬 빠릅니다.
4 · 각 장면별 화면 작성
- 각 장면은 별도 파일:
compositions/scene-1-hook.html…scene-6-outro.html;index.html은 마운트만 담당하며, 내용을 하나의 거대한 HTML로 작성하지 마십시오. - 모든 좌표는 하드코딩하고, 플로우 레이아웃에 의존하지 마십시오: 먼저 원점과 축척을 정의하십시오 (예:
OX=460, OY=620, S=96, 1 단위 = 96픽셀). 모든 점을 이 기준으로 계산하십시오. - 곡선은 함수 샘플링을 통해 path를 생성하고, 수동으로 근사하게 그리지 마십시오.
- 공식 및 색 구성표는 references/visuals.md를 따르십시오. 설명 수준은 references/math-rules.md를 따르십시오.
5 · 린트
npx -y [email protected] lint
오류 0, 경고 0이어야 합니다. 오류가 있으면 보고된 대로 수정하고 다시 실행하십시오.
6 · 6개 장면 캡처 (자체 점검 1–3)
node <스킬 디렉토리>/scripts/verify.mjs --browser=/usr/local/bin/chromium
각 장면에서 정보가 가장 많은 초를 seek하여 verify-shots/에 캡처하고, 동시에 GSAP 로드 여부, 타임라인 등록 여부, 요소 오버플로우 여부, JS 오류 여부를 진단합니다. 모든 이미지를 직접 확인하십시오. 실행만으로 끝내지 마십시오.
7 · 프레임 추출 확인 (자체 점검 4)
이전 버전의 완성된 영상에서 16프레임을 추출하여 패널로 구성하고, 각 주요 요소가 주장하는 시간에 실제로 나타나는지 확인하십시오. 방법은 references/qa.md를 참조하십시오.
8 · 전체 영상 렌더링 (반드시 비트레이트를 명시적으로 지정)
npx -y [email protected] render --output <name>.mp4 --quality delivery --video-bitrate 3M
--video-bitrate와 --crf는 상호 배타적이므로 둘 중 하나를 선택하십시오. 90초 1080p 완성품은 일반적으로 15–25MB입니다. 10MB 미만은 압축이 너무 심한 것입니다.
9 · 완성품 매개변수 확인 (자체 점검 6)
node <스킬 디렉토리>/scripts/inspect-video.mjs <name>.mp4 --expect-duration 90
해상도, 프레임 속도, 총 프레임 수, 길이, 비트레이트, 용량을 확인하십시오. 하나라도 기준에 미치지 못하면 8단계로 돌아가서 다시 렌더링하십시오.
10 · 전달
zip -qr <name>-project.zip <프로젝트 디렉토리> \
-x "<프로젝트 디렉토리>/node_modules/*" -x "<프로젝트 디렉토리>/verify-shots/*" \
-x "<프로젝트 디렉토리>/.verify-tmp/*" -x "<프로젝트 디렉토리>/*.mp4"
세 가지 전달물: 완성품 mp4, 순수 소스 코드 프로젝트 패키지 (mp4 제외), 세 가지 설명 (무엇을 다루었는지, 사용자를 위해 무엇을 결정했는지, 어느 부분을 선생님이 다시 확인해야 하는지). 파일만 보내는 것은 전달이 아닙니다.
3. 6개 장면 뼈대 (90초 기준)
길이는 요청에 따라 조정 가능하지만, 구조 순서는 변경하지 마십시오: 먼저 관심을 끌고, 한 단계 더 나아가고, 일반화하고, 결론을 도출하고, 오류를 수정하고, 마무리합니다.
| # | 장면 id | 시작/길이 | 이 장면의 임무 | 필수 포함 요소 |
|---|---|---|---|---|
| 1 | s1-hook | 0 / 10 | 진짜 문제를 제기하여 시청자가 계속 보고 싶게 만듦 | 주요 그래픽 고정 + 오른쪽 세 줄 질문 + 하단 그림 설명 |
| 2 | s2-q1 | 10 / 20 | 가장 간단한 경우에서 핵심 값을 계산함 | 좌표축, 곡선, 동점, 직사각형/삼각형, 한 줄씩 자막 |
| 3 | s3-other | 30 / 18 | 다른 사분면에서 동일한 결론을 검증함 | 네 개의 곡선을 순서대로 켜고 + 결론 카드 |
| 4 | s4-triangle | 48 / 15 | 결론을 반으로 나누고, 큰 전제를 제공함 | 기하 블록 + 직각 표시 + 세 줄 추론 |
| 5 | s5-table | 63 / 12 | 가장 흔한 오류를 수정함 | 얇은 선 테이블 + 오류 카드 (취소선 포함) + 올바른 카드 + 핵심 문장 |
| 6 | s6-outro | 75 / 15 | 다른 좌표 스케일로 결론을 반복하고 마무리함 | 동일 구성의 축소 버전 + 중앙 세 줄 + 맥동 강조 |
index.html 마운트 요점: body 배경색 고정 (어두운 #050a14), 6개 장면 track-index 0–5 연속, start/duration을 위 표와 일치, 전체 영상 title은 "주제｜각도 이름" 형식.
4. 수학적 설명 수준 빠른 확인 (잘못 작성하면 교육적 사고)
하드 제약 사항이며, 각 항목을 화면에 반영해야 합니다. 전체 목록과 반례는 references/math-rules.md를 참조하십시오.
- 기호만 사용하고 숫자를 대입하지 마십시오. 반비례를 설명할 때는
|k|와½|k|까지만, 영상 전체에 "4"와 같은 구체적인 값이 나타나지 않습니다. 일반 결론을 설명할 때도 마찬가지입니다. - 분수는 항상 수평선 형식을 사용하고, 슬래시나
a/b표기를 사용하지 마십시오. - 삼각형 기호는 S의 오른쪽 아래 첨자로, 문자와 나란히 배치하지 마십시오.
- "공통점"을 사용하고, "교점"을 사용하지 마십시오.
- 음수 상황 설명은 고정 형식 사용: "k<0일 때, 2, 4사분면도 마찬가지입니다."
- 동일한 개념에 대해 영상 전체에서 한 단어만 사용하고, 다른 표현으로 바꾸지 마십시오. 자막 용어는 교과서와 일치해야 합니다.
- 결론이 나타나기 전에, 화면에 이미 근거가 제시되어야 합니다. "결론이 먼저 나오고 근거가 나중에 나오는" 것은 허용되지 않습니다.
5. 시각적 빠른 확인 (기본값 어두운 야간 광선)
전체 색상 값과 구현은 references/visuals.md를 참조하십시오. 세 가지 어두운 배경의 철칙을 기억하고, 나머지는 조정 가능합니다:
- 면적 채우기는 18%로 낮추고 테두리를 추가하십시오 — 어두운 배경에서 40% 채우기는 안개처럼 흐려집니다.
- 삼각형/기하 블록은 "호박색 윤곽 + 매우 옅은 청록색 채우기"를 사용하십시오 — 진한 파란색 위에 금색 채우기는 더러운 올리브색이 됩니다.
- 테이블은 배경색을 사용하지 말고 얇은 선으로 나누십시오 — 흰색 배경 테이블을 그대로 가져오면 세 줄이 하나로 연결됩니다.
글꼴 크기는 전체적으로 흰색 배경 버전보다 4포인트 더 큽니다. 왼쪽 상단 각도는 고정 Vibe 지식 대상 ｜ 이 장면 부제목, 26px, 자간 5px, left 84 / top 70.
**글꼴 철칙: 세 가지 역할로 구분 — 중국어 Noto Sans CJK SC (사위 헤이티), 라틴 레이블 및 숫자 Inter, 수학 기호 TeX Gyre Termes 세리프 이탤릭체 (Times 계열, 교과서 문자 형태와 일치). @font-face는 반드시 <template>의 <style>에 작성해야 합니다 (head에 넣으면 캡처 하니스가 이를 버리고 글꼴이 조용히 로드되지 않습니다). 세부 사항 및 네 가지 함정은 references/visuals.md 0절을 참조하십시오.
6. 렌더링 및 비트레이트
| 매개변수 | 값 | 설명 |
|---|---|---|
--quality | delivery | 고화질 모드, 기본 모드는 비트레이트가 낮아짐 |
--video-bitrate | 3M | 반드시 명시적으로 지정; --crf와 상호 배타적 |
--resolution | 기본 landscape (1920×1080) | 4K는 명시적 요청 시에만 사용 |
--resume | 중단 후 재렌더링 | 이미 렌더링된 프레임은 다시 렌더링하지 않음 |
판단 기준: 90초 → 용량 15–25MB, 비트레이트 1.5Mbps 이상, 2700프레임, 길이 90.000000초. 숫자가 맞지 않으면 다시 렌더링하고 전달하지 마십시오.
선명도가 충분하지 않을 때 (실제 측정: --video-bitrate가 적용되지 않음)
2026-11 실제 측정: --video-bitrate 30M으로 렌더링해도 여전히 1.8Mbps입니다. --quality delivery도 마찬가지입니다. 즉, 내장 인코딩의 비트레이트 매개변수는 기본적으로 무시되며, 전달 수준의 선명도는 직접 인코딩을 제어해야 합니다. 사용자가 "선명하지 않음"이라고 말할 때는 이 경로를 따르고, 더 이상 --video-bitrate를 반복해서 조정하지 마십시오:
# 1) 프레임만 렌더링, 인코딩하지 않음 (2700프레임 / 약 2.4GB / 16분)
npx -y [email protected] render --format png-sequence --output pngseq
# 2) 직접 인코딩. 정적 콘텐츠가 많고 텍스트가 얇으므로 CRF가 아닌 CBR을 사용해야 함 (CRF는 0.5Mbps만 제공, 플랫폼 재인코딩 시 반드시 흐려짐)
ffmpeg -v error -framerate 30 -i pngseq/frame_%06d.png \
-c:v libx264 -b:v 4M -minrate 4M -maxrate 4M -bufsize 8M \
-preset slow -tune animation \
-x264-params "nal-hrd=cbr:aq-mode=3:chroma-qp-offset=-2" \
-pix_fmt yuv420p -movflags +faststart -y out.mp4
chroma-qp-offset=-2는 컬러 가는 선 그림용입니다: 청록색 문자, 호박색 문자가 4:2:0 색도 샘플링에서 가장자리가 변색될 수 있으며, 이 옵션은 색도가 휘도보다 약간 더 많은 비트레이트를 갖도록 합니다.
약 2분 인코딩, 결과: 90초 / 43MB / 4Mbps. 40MB 라인은 "교실에서 재생 가능하고, 플랫폼 재인코딩 후에도 선명한" 균형점입니다. 10MB 미만 파일은 모바일에서 보면 즉시 흐려집니다. 플랫폼 (비디오 계정/틱톡)에 업로드할 경우 -b:v 8M의 마스터 버전 (약 85MB)을 추가로 제공하십시오. 플랫폼 재인코딩 후에도 텍스트를 유지할 수 있습니다.
4K 업샘플링을 기대하지 마십시오: 소프트웨어 GPU에서 2700프레임은 1시간 이상 소요됩니다 (실제 측정: 20분 동안 8%만 진행). 단일 영상 제작 일정을 감당할 수 없습니다.
인코딩 후 반드시 한 프레임을 1:1로 확인하십시오 (crop=760:300으로 텍스트 가장자리에 블록/링잉이 있는지 확인). 전체 축소판만 보지 마십시오. 축소판으로는 흐려짐을 볼 수 없습니다.
음향 효과 (점음 효과, BGM 아님)
사용자가 "소리를 좀 넣어주세요" "너무 조용해요"라고 말하지만 BGM을 요구하지 않을 때는 점음 효과만 넣으십시오: 화면에서 동작이 발생할 때마다 한 번만 소리가 나고, 소리가 나면 멈춥니다. 수학 설명 영상에 배경 음악을 넣으면 사고 효과가 약화되고 선생님의 나레이션을 덮을 수 있습니다.
# 1) 스토리보드 동작 지점에 따라 타임라인 작성 (절대 초 단위), 예시: assets/sfx-events.example.json
python3 <스킬 디렉토리>/scripts/make-sfx.py events.json -o sfx.wav --duration 90
# 2) 비디오 스트림 복사, 오디오 트랙만 믹싱 (화면은 한 픽셀도 변경되지 않음)
ffmpeg -v error -i in.mp4 -i sfx.wav -c:v copy -c:a aac -b:a 128k -shortest \
-movflags +faststart -y out.mp4
여섯 가지 음향 효과는 각각 다른 역할을 담당합니다: brush 곡선/선분 성장, slide 동점 균일 슬라이딩, tick 한 줄 텍스트 등장, ding 카드/제목/질문, thump 가장 중요한 값, chime ✓/핵심 문장/엔딩.
세 가지 규칙:
- 모든 줄에 소리를 넣지 마십시오 — "화면 동작"만 선택하며, 90초 영상에 약 30포인트면 충분합니다. 너무 많으면 시끄럽습니다.
- 최고 피크는 -16dBFS 이내로 유지하고,
tick은 -29dB 정도,thump/ding은 -24dB 정도로 합니다. 이 정도면 "들을 수 있지만 눈에 띄지 않습니다". - 믹싱 후
ffmpeg -ss <t> -t 0.6 -af volumedetect로 샘플링 확인: 음향 효과가 있는 곳은 -24~-30dB, 빈 곳은 -91dB (완전 무음)이어야 합니다. 음향 효과가 있는 곳이 -18dB보다 높으면 줄이십시오.
7. 6단계 자체 점검 (전달 전 반드시 모두 통과)
| # | 확인 사항 | 명령어 | 통과 기준 |
|---|---|---|---|
| 1 | 구조 준수 | npx -y [email protected] lint | 0/0 |
| 2 | 6개 장면 화면 존재 | scripts/verify.mjs | 6개 장면 모두 이미지 출력, 블랙 스크린 없음, JS 오류 없음 |
| 3 | 요소 경계 초과 없음 | 위와 동일, 진단 보고서 확인 | 오버플로우 항목 없음; 자막 하단 여백 ≥80px |
| 4 | 타이밍 실제 존재 | 프레임 추출 패널 (qa.md 참조) | 각 단계 요소가 주장하는 시간에 이미 나타나고, 빈 구간 없음 |
| 5 | 설명 수준 정확성 | math-rules.md 대조하여 각 장면 자막 읽기 | 7개 항목 모두 통과 |
| 6 | 완성품 매개변수 | scripts/inspect-video.mjs | 해상도/프레임 수/길이/비트레이트/용량 모두 기준 충족 |
1, 2, 3, 4, 6은 기계가 판단하고 사람이 검토합니다. 5는 사람만 할 수 있습니다 — 교육적 사고를 막을 수 있는 유일한 검사입니다.
8. 수정 반복 규칙
사용자가 의견을 제시하면 "세 가지 세트"로 받아야 합니다: 어느 장면 / 어느 초 / 어떻게 수정할지. 모호한 "여기가 좀 이상해요"는 위치를 다시 질문해야 하며, 전체를 다시 만들지 마십시오.
수정 후 반드시 다시 실행해야 합니다: 수정이 좌표 또는 글꼴 크기와 관련된 경우 → 1+2+3; 텍스트와 관련된 경우 → 5; 여러 장면과 관련된 경우 → 전체 6단계 점검.
한 번에 여러 수정 사항을 모아서 처리하는 것이 반복적인 소규모 수정보다 빠르지만, 장면을 넘어서는 큰 수정은 스토리보드를 다시 작성하고 확인을 받아야 합니다.
실제 수정 과정 (10가지 녹취록)은 references/revisions.md를 참조하십시오.
9. 금지 사항
assets/gsap.min.js누락 또는 CDN 사용scaleX/scaleY+transformOrigin으로 SVG 선분 성장 (한쪽 끝에서만 자람)onUpdate로 SVG 속성 구동 (seek 시 트리거되지 않음, 캡처가 잘못됨)letterSpacing,width등 리플로우를 유발하는 속성 트윈d=""일 때 먼저getTotalLength()호출 (먼저 센티넬 d를 제공해야 함)- 렌더링 시 비트레이트 미지정
- 모든 내용을 하나의 HTML에 작성
- 공식을 슬래시로 표시
- 전달 시 mp4만 보내고 수정 사항을 설명하지 않음
- SVG
<text>에<sup>삽입 (HTML 태그가 SVG에 들어가면 전체 텍스트 위치가 어긋남; 위 첨자는 항상²문자 사용) - 전체 너비(1920) 컨테이너에서 scale 맥동 (4% 확대만 해도 경계에 부딪힘, 3차 검사에서 즉시 오버플로우 판정; scale은 컨테이너 내부의 inline-block에 연결)
- 절대 위치 취소선을 대상 텍스트의 형제 위치에 배치 (전체 열에 걸쳐 있음; 해당 텍스트 자체의 상대 위치 컨테이너 안에 넣어야 함)
repeat: -1로 순환 맥동 사용 (하위 조합에data-duration이 없으면 lint에서 오류 발생; 제한된 반복 횟수로 변경)- 프로젝트 루트에 임시
.html파일 남기기 (두 번째 루트로 간주되어 lint에서 "index.html은 하나만 있어야 함" 오류 발생) - 곡선을 두 개의 path(밝은 선 + 광선)로 그릴 때 밝은 선에만
dasharray/dashoffset설정 (광선은 전체가 조기에 나타나 "아직 다 그리지 않았는데 어두운 그림자가 있음"처럼 보임; 둘 다 설정하고 동시에 트윈해야 함) --video-bitrate로 선명도 추구 (실제 측정 결과 적용되지 않음, 6절 참조)- CRF만 지정하고 용량을 확인하지 않음 (정적 콘텐츠에서 CRF는 0.5Mbps만 제공, 플랫폼 재인코딩 후 반드시 흐려짐)
- 시스템 기본 글꼴로 영어/숫자 렌더링 (
system-ui는 무헤드 Chromium에서 DejaVu Sans, 영어/숫자가 딱딱함; 항상"Inter", sans-serif사용) font-family에 중국어 이름 작성 (예:"Noto Sans SC", 설치되지 않은 경우 lint에서font_family_without_font_face오류 발생)- 좌표축을 두 직선으로만 그리고 끝점에 정방향 화살표를 그리지 않음 (교재 규범: x는 오른쪽, y는 위쪽, 각각 하나의 실선 화살표, 작성 방법은 references/visuals.md의 "좌표축" 절 참조)
9.5. 기존 프로젝트에 글꼴 추가
기존 프로젝트 (글꼴이 아직 system-ui인 경우)는 재구축할 필요 없이 한 명령어로 세 가지 역할 글꼴로 업그레이드할 수 있습니다:
node scripts/apply-fonts.mjs --project <프로젝트 디렉토리>
다섯 가지 작업을 수행합니다: 글꼴을 assets/fonts/에 복사하고, @font-face를 <template>의 <style>에 병합하고 (head에 있는 것은 캡처 하니스가 버림), .row/.cap/.tag 컨테이너에 Inter를 고정하고, 본문의 일반 변수 x/y/k/S를 하나씩 <i>로 래핑하고 (순수 CSS 선택자는 일반 텍스트를 제어할 수 없으며, 이는 "글꼴을 변경했지만 변경되지 않은" 가장 흔한 원인입니다), SVG의 font-family를 'Termes', serif로 변경하고 x/y/k에 이탤릭체를 추가합니다. 수학 기호는 calc(1em + 2px)로 통일하고, 세리프가 산세리프에 비해 시각적으로 수축하는 것을 보정합니다. 멱등적이며, 반복 실행해도 중복 삽입되지 않습니다.
변경 후 평소대로 실행: lint → verify → render; 반드시 재렌더링해야 하며, 글꼴은 이전 완성품에 적용되지 않습니다.
10. 참조 파일
| 파일 | 언제 읽을지 |
|---|---|
| references/pipeline.md | 처음 제작하거나, 네 단계가 어떻게 연결되는지 설명해야 할 때 |
| references/math-rules.md | 공식이나 결론을 작성하기 전 |
| references/visuals.md | 색 구성표, 글꼴 크기, 카드, 공식 레이아웃을 결정할 때 |
| references/prompts.md | 질문 보완, 스토리보드 작성, 다른 사람에게 첫 문장을 말하는 방법을 가르칠 때 |
| references/revisions.md | 사용자가 의견을 제시하거나, 연구 그룹에 "열 번 수정 과정"을 설명해야 할 때 |
| references/qa.md | 각 자체 점검 라운드, 영상 전달 가능 여부 판단 |
| references/two-tracks.md | 나레이션/배경 음악/손/지도/캐릭터가 필요하여 B 트랙으로 전환해야 할 때 |
assets/project-template/ | 프로젝트 생성 시 init-project.mjs가 복사하며, 수동으로 수정하지 마십시오 |
assets/gsap.min.js | 프로젝트 생성 시 프로젝트 assets/에 복사 |