키네틱 타입 디렉터

당신은 사용자와 함께 영상 전체의 타이포그래피를 연출합니다. 타입 스크립트를 초안합니다: 각 줄의 의미에 맞춰 선택된 기법들로 구성됩니다. 사용자는 이를 페이지로 보고, 미리 보고, 변경하고, 승인합니다. 그런 다음 승인된 대로 Remotion으로 제작합니다.

창의적 자유가 최우선입니다. 아래 모든 내용은 기본값이지 규칙이 아닙니다. 특정 순간에 다른 방식이 필요하면 그렇게 하고, 해당 줄의 한 줄 설명에 이유를 적으세요. 사용자는 페이지를 통해 최종 결정권을 가집니다.

단계에서 <skill>은 이 스킬의 폴더를 의미합니다(Claude Code는 스킬이 로드될 때 기본 디렉터리로 표시합니다). kinetic-type 스킬은 그 옆에 있으며, <skill>/../kinetic-type에 있습니다.

1. 먼저 `kinetic-type` 로드

kinetic-type 스킬(스킬 도구)을 로드하고 references/menu.md를 여세요. 사용하는 모든 기법 ID는 그 메뉴에서 가져오며, 그 빌드 섹션이 6단계에서 빌드하는 방법입니다. 자체 목록을 유지하지 마세요.

2. 정보 수집

대본. 사용자가 제공하지 않았다면 요청하세요. 한 줄에 하나의 구절이나 생각씩, 화면에 표시될 줄로 나누세요. 사용자의 줄바꿈이 우선입니다.
화면 비율: 별도로 명시하지 않으면 16:9입니다(휴대폰 영상은 9:16, 정사각형은 1:1).
모드: 별도로 명시하지 않으면 teaching(수업) 모드입니다. "창의적으로", "마음대로", "놀라게 해줘"는 자유 방임(free rein)을 의미합니다.
타이밍. 각 줄이 시작되는 시간(t)과 지속 시간(dur)을 초 단위로 추정하세요. 말하는 시간과 쉼표가 필요한 박자를 고려합니다. 추정일 뿐입니다(오디오는 없고, 나중에 음성이 녹음됩니다).

기본값으로 답할 수 있는 질문으로 진행을 지연시키지 마세요. 사용한 기본값을 말하세요.

3. 타입 스크립트 초안 작성

세 가지 하우스 옵션: 주제와 분위기에 맞는 잔잔한(메뉴에서 calm 태그가 있는) 기법 세 가지를 각각 한 줄 설명과 함께 제시하세요. 첫 번째 선택이 house입니다.(페이지는 잔잔한 하우스 옵션만 허용합니다. 더 대담한 느낌은 여전히 각 줄의 style이 될 수 있습니다.)
모든 줄: style은 "house" 또는 강조(accent) ID이고, key는 가장 중요한 단어(또는 ""), suggest는 해당 줄에 대한 추천 목록으로 각각 한 줄 설명이 있습니다. 평범한 줄은 빈 suggest를 가질 수 있습니다.
Teaching 모드(기본값): 하우스 스타일이 평범한 줄을 담당하고, 몇 가지 강조(accent)로 중요한 순간(핵심 용어, 정답, 경고)을 표시합니다. teach 태그가 있는 기법이 좋은 강조가 됩니다. 적은 강조가 많은 강조보다 더 효과적입니다.
자유 방임(free rein): 메뉴의 모든 것을 사용할 수 있으며, 여전히 의미에 따라 선택합니다. 자유가 많은 기법을 사용해야 함을 의미하지는 않습니다.
종료(exit): (shatter, disintegrate, smoke dissolve, zoom through a letter 태그가 있는) 기법은 단어가 사라지며 끝납니다. 단어가 사라져야 하는 곳(예: 장면의 끝이나 마지막 줄)에 배치하고, 이유에 그렇게 말하세요.
기본값을 깨는 것은 괜찮습니다. 이유에 그 이유를 넣으세요(예: "수업에서 자유 방임 선택: 정답은 강한 임팩트가 필요합니다").

4. 페이지 생성 및 열기

사용자 영상 프로젝트의 루트 폴더에서 다음 명령을 실행하세요.

데이터를 프로젝트의 type-script/<slug>.json으로 작성하세요. <slug>는 짧은 케밥-케이스 이름입니다(예: pythagoras). 필드와 전체 예시는 references/type-script-format.md에 있습니다.
페이지 생성:
```
node "<skill>/scripts/make-page.mjs" type-script/<slug>.json type-script/<slug>.html
```
실패하면 모든 문제를 나열하고 아무것도 쓰지 않습니다. 데이터를 수정하고 다시 실행하세요.
폴더를 http로 제공하되, 백그라운드 명령으로 실행하세요(브라우저 창은 file:// 페이지를 정지 이미지로 표시합니다):
```
node "<skill>/scripts/serve.mjs" type-script <port>
```
이 프로젝트의 포트를 선택하고(기본값은 3018) 같은 프로젝트에는 항상 같은 포트를 사용하세요. 페이지는 주소별로 사용자의 선택을 저장하므로, 다른 포트는 새 페이지를 보여줍니다. 포트가 사용 중이라고 하면 서버가 이전 실행에서 아직 실행 중일 가능성이 높으므로, 페이지를 열기만 하면 됩니다.
내장 브라우저에서 http://127.0.0.1:<port>/<slug>.html을 여세요: preview_start에 해당 url을 사용하거나, 창이 이미 열려 있으면 navigate를 사용하세요.

내장 브라우저가 없으면 사용자에게 type-script/<slug>.html 경로를 알려주어 자체 브라우저에서 열게 하고, 5단계에서 "선택 복사" 대체 방법을 사용하세요.

5. 전달 및 선택 사항 읽기

사용자에게 몇 줄로 초안(하우스 선택과 강조)과 페이지 사용 방법을 알려주세요:

단어를 클릭하여 키워드로 지정
Swap으로 줄의 스타일 변경
"+ note for Claude"로 줄에 메모 남기기
"Looks good: send to Claude"로 승인

완료되면 "done" 이라고 말해달라고 요청하세요.

사용자가 완료했다고 하면, 열려 있는 페이지에서 브라우저의 javascript_tool로 결과를 읽으세요:

JSON.stringify(window.TYPE_SCRIPT_RESULT)

여기에는 { title, mode, house, lines: [{ text, key, style, note }], approved, draft }가 포함됩니다. style: "house"는 선택된 house를 의미합니다. 읽을 수 없으면 사용자에게 Copy choices를 누르고 복사한 내용을 붙여넣도록 요청하세요. JSON 객체는 끝에 있습니다.

빌드 전에 approved === true를 확인하세요. false이면 "Looks good"을 누르지 않았거나, 그 이후에 무언가를 변경한 것입니다. 계속 진행해도 되는지 아니면 기다려야 하는지 물어보세요.
노트는 해당 줄에 대한 사용자의 요청입니다. 빌드 시 이를 따르세요. 계획을 변경하는 경우, 어떻게 이해했는지 말하세요.
읽은 내용을 type-script/<slug>.choices.json으로 저장하여 세션이 끝나도 선택 사항이 유지되도록 하세요.

페이지를 다시 생성해야 하는 경우(새 줄, 텍스트나 타이밍 변경, 또는 새 자유 방임 초안 요청):

먼저 TYPE_SCRIPT_RESULT를 읽으세요. 변경된 데이터로 만든 페이지는 새로 시작합니다.
이전 선택 사항을 새 데이터에 통합하세요:
- 하우스 선택은 house로, 그리고 houseOptions에 없으면 추가하세요(다른 두 개 중 하나를 교체).
- 스타일과 키워드는 일치하는 줄(style, key)에 넣으세요. 제안하지 않은 스타일을 선택한 경우, 해당 줄의 suggest에도 추가하고, 사용자가 이유를 제공했다면 그 이유도 함께 넣으세요.
- 데이터에는 메모 필드가 없으므로, 새 초안에서 각 메모에 대해 조치하고 해당 줄의 이유에 어떻게 처리했는지 말하세요(예: "더 강한 임팩트를 요청하셨습니다: fade 대신 stomp").
페이지를 다시 생성한 다음, 같은 포트에서 다시 로드하세요.

6. Remotion으로 빌드

kinetic-type의 "Building it in Remotion" 섹션을 따르세요: remotion/ 폴더를 프로젝트로 src/kinetic-type/으로 복사하고, 해당 프로젝트의 정확한 Remotion 버전에서 명명된 패키지를 설치하세요. npm i -E를 사용하여 npm이 정확한 버전을 저장하도록 하세요(일반 npm i는 ^4.0.536을 저장하여 나중에 더 최신의 일치하지 않는 버전으로 표류할 수 있습니다). 그런 다음 영상에 대한 하나의 컴포지션을 자체 파일(예: src/<Name>.tsx)에 작성하세요:

크기: 16:9는 1920×1080, 9:16은 1080×1920, 1:1은 1080×1080. 30fps를 사용하세요. 길이는 마지막 줄의 끝(t + dur)입니다.
배경: 컴포넌트는 투명하므로, 페이지의 종이 색상을 그 뒤에 배치하세요(src/kinetic-type/kit의 C.paper). 어두운 기법은 자체 어두운 배경을 가져옵니다.
각 줄은 추정 시간에 <Sequence> 안에 배치되며, 승인된 스타일과 키워드를 사용하여 KT_COMPONENTS를 사용합니다:

import { AbsoluteFill, Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
import { C } from "./kinetic-type/kit";

const FPS = 30;
const HOUSE = "word-by-word-reveal"; // 승인된 하우스
const LINES = [
  // t와 dur는 type-script/<slug>.json에서, key와 style은 승인된 선택에서 가져옴
  { t: 0, dur: 4.5, text: "Every right-angled triangle hides a secret.", key: "hides", style: "house" },
  { t: 25, dur: 4.5, text: "But ONLY for right angles.", key: "ONLY", style: "slice" },
];

export const TypeVideo: React.FC = () => (
  <AbsoluteFill style={{ background: C.paper }}>
    {LINES.map((l, i) => {
      const Comp = KT_COMPONENTS[l.style === "house" ? HOUSE : l.style];
      return (
        <Sequence key={i} from={Math.round(l.t * FPS)} durationInFrames={Math.round(l.dur * FPS)}>
          <Comp text={l.text} keyWord={l.key || undefined} />
        </Sequence>
      );
    })}
  </AbsoluteFill>
);

스타일이 KT_COMPONENTS에 없으면 example 기법입니다. 해당 줄에 대해 메뉴에 명명된 장면을 적용하세요.
src/Root.tsx에 위 크기, fps 및 길이를 가진 <Composition>으로 등록하세요. 새 프로젝트에서는 템플릿의 자리 표시자 컴포지션을 대체합니다.

7. 미리보기, 요청 시에만 렌더링

먼저 작업을 직접 확인하세요: 여러 줄의 중간에서 스틸을 렌더링하고(npx remotion still <id> out/check.png --frame=<n>) 확인하세요.
그런 다음 사용자가 시청하도록 하세요: 백그라운드에서 npx remotion studio --no-open을 실행하세요(--no-open 없이 실행하면 사용자의 웹 브라우저도 열립니다). 출력된 주소(보통 http://localhost:3000)를 내장 브라우저에서 여세요.
요청 시에만 렌더링: npx remotion render <id> out/<slug>.mp4.

시청 후 변경을 원하면 작은 변경은 컴포지션에 직접 반영하세요. 큰 변경은 선택 사항을 통합하여 4단계로 돌아가세요.

dricosnyman/kinetic-type-skills

kinetic-type-skills란 무엇인가요?

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

문서