데이터 설명 영상 (Tatakye 스타일)

중국어 자막 중심의 설명 영상을 단일 HTML 파일로 제작합니다. 사용자가 브라우저에서 재생하고 화면 녹화할 수 있습니다.

적합한 용도

기사, 에세이, 연구 결과를 3~6분 영상으로 변환
미니멀한 흑금(黑金) "사색적 작품" 미학 (3Blue1Brown / Veritasium / Tatakye 계열)
Xiaohongshu / WeChat Video / Bilibili / YouTube에 게시할 결과물
외부 자산 제로 — 구매할 폰트, 스톡 푸티지, 로열티 문제, 서버 불필요

코드를 단 한 줄도 작성하기 전에

협상 불가능한 사전 질문 — 이후가 아닌 AskUserQuestion으로 먼저 물어보세요. 잘못 답하면 전체를 다시 써야 합니다.

한 문장으로 된 테마: 기사가 "무엇에 관한 것"이 아니라 영상이 방어하는 주장을 말합니다. 한 문장으로 말할 수 없다면 아직 영상이 아니라 읽기 목록만 있는 것입니다.
스파인(Spine): 전체 영상을 고정할 단일 화면 내 객체는 무엇인가요? (아래 "스파인" 섹션 참조 — 가장 중요한 디자인 결정이며, 대부분의 설명 영상이 이를 생략하여 실패합니다.)
길이: 3~~4분 (하이라이트) vs 5~~6분 (표준 Tatakye 길이) vs 8~~10분 (심층). 길이에 따라 살릴 섹션 수가 결정됩니다. 10개 섹션 기사를 5분 목표로 한다면 60~~70%의 섹션을 제거해야 합니다.
내레이션 모드: 자막만 (텍스트 기반 템포) vs AI 음성 vs 자체 녹음. 기본값은 "자막만" — 자막 자체가 비트가 됩니다.
출처 표시: 원작자 크레딧 방법. 기본값은 우측 상단에 "原文 · [Name]"입니다. 스파인이 있다면 출처 표시는 스파인 아래에 위치하며, 스파인을 대체하지 않습니다.
이점(payoff) (수사적 질문이 아닙니다): 시청자가 무엇을 가지고 떠나나요? 재구성된 질문은 이점이 아닙니다. "Are you them?"은 강력하게 들리지만 시청자에게 가져갈 것을 주지 않습니다. 진정한 이점은 다음 날에도 반복할 수 있는 짧은 명명된 목록(2~4항목)입니다. 아래 "이점, 수사학이 아닌"을 참조하세요.

이 단계를 절대 건너뛰지 마세요. 첫 번째 시도는 거의 항상 #1(테마)과 #5(도착점)에서 실패합니다. 이것들이 확정되면 자유롭게 다시 작성할 수 있습니다.

스파인 — 가장 중요한 단일 디자인 결정

훌륭한 설명 영상에는 스파인이 있습니다: 영상의 대부분 동안 보이는 하나의 지속적인 화면 객체이며, 각 비트가 그 객체의 다른 부분을 조명합니다.

Tatakye의 股市回报 영상이 전형적인 예입니다. 스파인은 공식 p = E[mx]이며, 1:00부터 3:30까지 오른쪽 상단에 고정됩니다. 각 섹션은 하나의 기호 — x, m, π_s — 를 강조하며 해당 기호의 의미를 가르칩니다. 마지막에 공식은 세 가지 구체적인 이점 (x → "어떤 미래", m → "어떤 세계", π_s → "얼마나 기다릴지")으로 "해제"됩니다.

이것이 효과적인 이유와 스파인이 없는 영상이 약하게 느껴지는 이유:

스파인은 시각적 앵커입니다. 시청자가 다른 곳을 보았다가 돌아오면 "우리가 현재 무엇을 분해 중인지" 즉시 알 수 있습니다.
추상적인 프레임워크를 화면상의 물리적 객체로 변환합니다. 아이디어에 좌표가 생깁니다.
장 레이블은 시청자에게 구조 내에서의 위치만 알려줄 수 있습니다. 스파인은 시청자에게 설명 중인 아이디어의 구성 요소를 알려줍니다 — 이것이 더 강력한 신호입니다.
마지막의 이점은 말 그대로 "해결된 스파인"이 될 수 있습니다. 질문으로 시작하고, 스파인의 각 부분을 구축하며, 스파인을 답으로 돌려주며 마무리합니다.

좋은 스파인의 조건

스파인 후보는 다음을 충족해야 합니다:

한 줄에 들어갈 것 (항상 구석에 있을 수 있도록)
3~5개의 명명된 구성 요소를 가지며, 각각이 영상의 한 비트에 매핑될 것
시각적으로 안정적일 것 — 애니메이션이 아닌 정적 참조 프레임
테제를 담을 것 — 스파인의 모든 부분을 이해한다면 작품 전체를 이해한 것입니다

일반적인 형태 (펀치감 순서):

방정식: 工作 = 肌肉 × 心智, p = E[mx], 价值 = 稀缺性 × 关注度
명명된 화살표가 있는 다이어그램: 生产者 → 产品 → 用户, 한 번에 하나씩 강조할 수 있는 노드
레이블이 있는 비율 또는 비교: 过去 : 现在 : 未来
짧은 시퀀스: 观察 → 假设 → 实验 → 结论

스파인으로 피해야 할 것:

단일 숫자 (강조할 구성 요소 없음)
긴 문장 (구석에 너무 길어서 목적에 어긋남)
차트 (차트는 핵심 시각 자료이며 중앙에 위치하고 스파인이 아님)

스파인은 반드시 1막이 끝나기 전에 나타나고 지속되어야 함

시작부터 스파인을 던져놓고 다시는 돌아오지 마세요. 2막이 시작될 때까지 기다리지 마세요. 구조는 다음과 같습니다:

0:00–0:30 훅: 아직 스파인 없음; 질문 설정
~0:30 스파인 공개: 방정식/다이어그램이 오른쪽 상단에 페이드 인
1막–3막: 스파인 유지, 각 막이 하나의 구성 요소를 강조
이점: 스파인이 해체되어 세 가지 항목 목록이 됨

스파인 용어 강조 (시각적 레시피)

각 스파인 용어는 세 가지 상태를 가져야 합니다:

어두움 (기본값): color: var(--dim) — 회색, 존재하지만 희미함
조명 (현재 설명 중): color: var(--gold) + text-shadow 광택 — "우리는 지금 여기에 있습니다"를 명확히 표시
완료 (이미 설명됨): color: var(--fg) — 흰색, 가르쳐지고 정착됨

새 섹션이 시작되면 이전 .lit을 .done으로 강등하고 새 용어를 .lit으로 승격합니다. 한 번에 하나의 용어만 조명. 시각적 효과: 스파인이 왼쪽에서 오른쪽으로 점진적으로 밝아지고, 마지막에는 모든 것이 흰색(완전히 가르쳐짐)이 되어 이점으로 해체될 준비가 됩니다.

내러티브 구조 — 하나의 주장, 적은 비트

유일한 엄격한 규칙: 작품은 하나의 주장을 방어하며, 모든 비트는 그 주장을 위해 존재합니다. 섹션이 주장을 앞으로 밀어내거나 이후 비트를 설정하지 않는다면 잘라내세요.

그 외에는 구조는 템플릿이 아닌 도구입니다. 주장에 맞는 형태를 선택하세요:

3막 (훅 → 패턴 → 반전 → 대가) — 주장이 놀라운 반전을 포함할 때 적합 (예: "우리는 이전에도 해봤지만, 이번에는 대가가 있다")
문제 → 메커니즘 → 시사점 — 어떤 것이 왜 그렇게 작동하는지 설명할 때 적합
타임라인 / 축적 — 요점이 축적일 때 적합 ("얼마나 멀리 왔는지 보라")
비교 — "A vs B, 그리고 이것이 왜 중요한지"에 적합
질문 → 시도 → 해결 — 연구 결과나 조사 작품에 적합
단일 통찰력 펼치기 — 하나의 놀라운 사실을 천천히 구축한 후 마무리 (Tatakye의 股市回报 영상이 이에 해당)

선택 방법: 한 문장으로 된 주장을 소리 내어 말해보세요. 그 주장을 하는 자연스러운 리듬은 무엇인가요? 그것이 당신의 구조입니다.

섹션 수는 구조가 아닌 길이에 따라 조정:

3~~4분 → 3~~4개의 핵심 비트
5~~6분 → 5~~7개의 비트
8~~10분 → 8~~12개의 비트

각 비트에는 다음이 필요:

하나의 핵심 시각 자료 (곡선, 비교, 다이어그램, 입자 이벤트)
하나의 핵심 숫자 또는 하나의 핵심 구문
다음 비트로 전환되는 전환 (단순히 "이제 섹션 2"가 아님)

위험 신호: 개요가 "섹션 1, 섹션 2, 섹션 3..."처럼 평평한 목록으로 읽힌다면, 사용자를 읽기 목록을 통해 안내하는 것입니다. 비트가 연쇄되도록 압축하거나 재배열하세요 — 각 비트가 다음 비트를 불가피하게 만듭니다.

장면 경제 — 더 적은 장면, 더 긴 진화

일반적인 실패 모드: 모든 섹션을 새로운 장면으로 만드는 것입니다. 결과: 7개의 관련 없는 시각 자료가 연속으로 배치되고, 각각 30초 동안 지속되며 시청자는 목이 빠지고 아무것도 기억하지 못합니다.

Tatakye 원칙: 하나의 시각 객체가 2~3분에 걸쳐 진화합니다. 股市回报 영상에서 "확률 공간 그리드"는 ~0:40부터 ~2:30까지 거의 2분 동안 화면에 있습니다. 그 기간 동안:

단순한 선으로 나타남 ("모든 가능한 세계")
금색 막대가 자람 (x, 각 세계에서의 보상)
막대에 색상이 입혀짐 (m, 각 세계의 가중치)
공식이 위에 나타남 (기대값)
특정 숫자가 겹쳐짐 (구체적인 예: 0.86, +16.9%)
언어적 레이블이 겹쳐짐 ("萧条/繁荣")

하나의 시각 객체, 여섯 번의 반복. 시청자의 눈은 절대 리셋되지 않습니다.

경험 법칙

목표: 5분 영상에 총 3~5개의 장면. 그 이상은 아마 너무 많이 전환하는 것입니다.
최소 장면 지속 시간: 내용이 있는 장면은 60~90초. 1분 미만은 아마 자체 장면보다는 다른 장면 내의 레이어로 속할 것입니다.
장면이 다음 장면으로 성장하는 것(장면 성장)을 컷보다 선호. 예: 이중 곡선 플롯이 곡선 사이의 음영 영역을 확장하고, 그 영역에서 막대가 솟아오르며 — 세 개의 "섹션" 콘텐츠, 장면 컷 제로.
장면 변경은 막 경계에서 발생하며 막 내부에서 발생하지 않음. 막 내부에서는 오버레이, 강조, 숫자 카운트업, 레이블을 사용하고 장면 변경은 사용하지 마세요.

장면 변경이 정당한 경우

훅 → 첫 번째 콘텐츠 장면
막 N → 막 N+1 (시각적 은유가 다음 아이디어를 전달할 수 없는 경우)
콘텐츠 → 이점 (끝은 시각적 리셋이 필요함)

그게 전부입니다. 5분 영상에서 최대 3번의 장면 변경.

이점, 수사학이 아닌

훌륭한 설명 영상은 시청자가 가져갈 수 있는 2~4개의 구체적이고 명명된 것들의 목록으로 끝납니다. 질문이 아닙니다. 느낌이 아닙니다. 목록입니다.

Tatakye의 股市回报 영상은 세 가지 것(x, m, π_s)을 구체적인 해석("어떤 미래를 사야 하는지, 어떤 세계에 있는지, 얼마나 기다려야 하는지")과 함께 제공하며 끝납니다. 시청자는 그날 저녁 식사 시간에 이를 반복할 수 있습니다.

일반적인 안티패턴:

"你，是吗？" / "Are you them?" — 재구성된 질문. 강력하게 느껴짐. 아무것도 가르치지 않음. 시청자는 영상을 닫고 분위기는 기억하지만 내용은 잊음.
"What do you think?" — 수사적 회피. 영상이 어떤 것에도 전념하지 않음.
"Only time will tell." — 저널리즘적 애매모호함. 같은 문제.
위로의 한 문장. "We've been here before." — 평평하고 실행 가능하지 않음.

좋은 이점의 느낌: 스파인을 해제하는 것과 같습니다. 스파인이 A = B × C였다면 이점은 "따라서 중요한 것은 (1) B, (2) C, (3) 둘 사이의 상호작용입니다"입니다. 영상은 말 그대로 답으로 해결됩니다.

3항목 답변 화면 (레시피)

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

세 개의 세로 열, 동일한 간격
항목이 약 1초 간격으로 하나씩 나타남 (항목당 차임)
각 항목: 인덱스 번호 (01/02/03), 단일 글자 엠블럼 (한자 또는 수학 기호), 짧은 레이블 (2~4자), 한 문장 설명
세 개가 모두 나타난 후 3~4초 유지한 후 전환
그런 다음 한 줄의 마무리 문장, 훅을 해결된 형태로 바꾼 것일 수 있음: "你，在哪一侧？"는 측면을 명명한 후에 작동합니다.

내용 신호로서의 장 레이블

약한 장 레이블: ACT I, ACT II, ACT III — 시청자에게 구조 내에서의 위치를 알려줍니다. 그들은 신경 쓰지 않습니다.

강력한 장 레이블: 肌肉 · 第一次外包, 心智 · 第二次外包, × · 相乘, = · 代价, 答案 · 三件事 — 각 레이블은 스파인의 용어이거나 직접적인 내용 조각입니다. 레이블을 읽으면 시청자는 지금 어떤 아이디어가 분해되고 있는지 즉시 알 수 있습니다.

규칙: 장 레이블은 스파인이 강조할 단어여야 합니다. "ACT II"가 장 레이블이지만 스파인이 "心智"를 말한다면 장 레이블을 "心智"로 변경하세요. 구조적 발판을 장 레이블에 복제하지 마세요 — 구조는 암시적이며, 내용이 시청자에게 필요한 것입니다.

시각 시스템 (Tatakye 스타일)

색상

--bg:    #0a0a0f   /* #000000이 아님 — 순수 검정은 화면에서 죽어 보임 */
--fg:    #eceae4   /* 따뜻한 흰색, 2% 파랑 편향; 절대 순수 흰색 아님 */
--dim:   #8a8a90   /* 축 레이블 및 설명용 */
--gold:  #d4a85a   /* 강조에 사용되는 유일한 색상 */
--red:   #c15b4e   /* "부정적" 통계 전용 (임금이 뒤처짐) */

이 5가지 이상을 절대 사용하지 마세요. 다양성을 위해 파랑/초록을 추가하려는 충동을 참으세요.

타이포그래피 — 영상이 죽는 부분

중국어 또는 영어, 요소당 하나를 선택하세요. 절대 "ACT II · THE PARALLEL · 第二幕 · 现在轮到心智"처럼 하지 마세요 — 중복되고 읽기 어려우며 "AI가 만든 이중 언어 슬라이드"처럼 보입니다. 레이블당 하나의 언어를 선택하세요.
이탤릭체 최소화. 거의 모든 브라우저에서 CJK의 이탤릭체는 보기에 좋지 않습니다 (가짜 기울임꼴 글리프). 강조를 위해 이탤릭체 대신 색상(var(--gold))을 사용하세요.
모바일 시청을 위한 최소 크기:
- 축 눈금: 17px 기준선 (fontPx()로 스케일링됨)
- 축 레이블: 17~19px
- 곡선 끝 레이블: 19px
- 장 레이블 (좌측 상단): 1.1rem
- 자막 (중앙 하단): 1.15rem
- 헤드라인 숫자 (중앙): 4.5rem+
- 메가 오프닝/클로징 텍스트: 1.9rem+
표시 숫자에는 세리프 (EB Garamond fallback → Noto Serif SC). 그 외 모든 것은 산세리프 (Inter → PingFang/Noto Sans).

4계층 정보 아키텍처 (Tatakye 시그니처)

모든 장면에는 고정된 위치에 최대 4개의 텍스트 레이어가 있습니다:

좌측 상단: 장 레이블 (작게, 자간 넓게, 흐리게)
우측 상단: 저자 크레딧 (작게, 흐리게)
중앙: 큰 숫자 / 헤드라인 (크게, 세리프)
중앙 하단: 자막 내레이션 (중간, 산세리프)
좌측 하단 이탤릭체 (선택 사항): 학술 인용 (恩格斯停滞 · Robert Allen)

핵심 모티프 (작품 전체에서 3~5개 재사용)

섹션마다 새로운 시각 자료를 발명하지 마세요 — 작은 세트를 선택하고 변형하세요:

원근감이 있는 입자 필드: 120×36 그리드, 먼 줄이 수평선 근처, 약간의 사인파
시간 축에서 상승하는 곡선: X축의 대부분에서 평평, 기하급수적 상승; 시간 앵커를 특정 연도(2000년은 이미 지남) 대신 내러티브 단어("现在", "未来")로 레이블 지정
영역 채우기가 있는 하강 곡선: 가격 붕괴 / 가치 소진
수평 시간 막대: 비례 길이 비교 (1/8 스케일에서 40年 vs 5年)
코드 레인: 짧은 도메인별 라인이 떨어짐, "기계가 인지 작업을 인수"에 사용
점/입자 파쇄: "무언가가 부서지는" 순간에 사용

카메라 호흡

정적 장면에 마이크로 시차를 추가: camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4, 깊이 가중치 승수를 적용하여 가까운 요소가 먼 요소보다 더 많이 움직이도록 합니다. "죽은 프레임" 느낌을 방지합니다.

장면 전환

장면 사이에는 항상 블랙아웃 깜빡임을 사용하세요 — 절대 하드 컷을 사용하지 마세요. sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5}): 0.45초에 걸쳐 검정으로 페이드 → 장면 변경 실행 → 0.5초에 걸쳐 다시 페이드. 전환당 약 1초. 슬라이드 전환이 아닌 필름 컷처럼 느껴집니다.

숫자 카운트업

모든 큰 숫자는 공개될 때 easeOutCubic으로 약 1.1초에 걸쳐 0 → 목표까지 애니메이션됩니다. <span class="count" data-to="...">를 사용하여 구현하세요. 값은 가능한 경우 논리적으로 관련되어야 하며 단순히 시각적 효과를 위한 것이 아닙니다.

이전 스킬과 함께 사용할 수 있는 유틸리티 함수

이 스킬은 prompt/auto 아래의 유틸리티를 사용하여 HTML 파일을 구성하고 미리보기를 표시합니다. 생성된 HTML이 의도한 대로 작동하고 디자인 규칙을 따르는지 확인하기 위해 사용자와 반복하는 것을 주저하지 마세요.

스킬의 기여

이름: Liqiuyue9597
GitHub: https://github.com/Liqiuyue9597
데이터 설명 영상 제작을 위한 Tatakye 스타일 가이드의 광범위한 적용
구조적 일관성 및 시각적 충실도 보장을 위한 AI 에이전트 워크플로우

Liqiuyue9597/data-video-skill

data-video-skill란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서