키네틱 타입
비디오에서 단어가 화면에 나타날 때 가장 먼저 떠오르는 움직임은 페이드, 슬라이드, 팝입니다. 그것들도 괜찮지만, 선택이 아닌 기본값일 뿐입니다. 이 스킬은 18개 패밀리에 속한 약 80가지 기법을 전체 범위로 제시하여, 진정한 선택을 가능하게 합니다.
이 스킬은 상기시켜 주지만 지시하지는 않습니다. 요청받은 작업에 단계, 페이지 또는 승인 절차를 추가하지 않습니다.
창의적 자유 우선
여기의 모든 것은 기본값 또는 제안일 뿐, 절대 규칙이 아닙니다. 특정 순간에 다른 것이 필요하다면 기본값을 깨고 그 이유를 한 문장으로 설명하십시오 (계획, 코드 주석 또는 답변에). 메뉴에 없는 기법도 자유롭게 사용할 수 있습니다. 메뉴는 선택지를 넓히기 위해 존재하는 것이지, 당신을 가두기 위한 것이 아닙니다.
순간별로, 의미에 따라 선택
단어가 어떻게 움직일지 결정하기 전에 먼저 단어를 읽으십시오. 그 줄이 무엇을 하는지 물어본 다음, 의미가 일치하는 기법을 선택하십시오:
| 단어가... | 사용하세요 |
|---|---|
| 무언가를 나누거나, 부수거나, 분리하다 | slice, shatter |
| 답을 알아내거나 비밀을 밝히다 | scramble |
| 힘으로 착지하거나, 카운트다운하다 | stomp |
| 용어를 처음으로 정의하거나 쓰다 | stroke-write-on, marker-highlight |
| 변화하는 숫자를 보여주다 | odometer |
| 사라지는 것을 묘사하다 | disintegrate, smoke-dissolve |
| 그래프나 방정식을 따라가다 | text-on-a-path, sine-wave-type |
메뉴의 "다음과 같은 경우 사용" 열은 정확히 이 질문을 위해 작성되었습니다.
다양성 수준
- 교육 모드 (수업 및 설명 동영상의 기본값, 그리고 요청에 명시되지 않은 경우): calm 태그가 지정된 기법 중 하나의 하우스 스타일을 모든 일반적인 줄에 사용하고, 핵심 용어, 답, 경고 등 중요한 순간을 위해 몇 가지 악센트를 저장합니다. teach 태그가 지정된 기법은 좋은 악센트가 됩니다. 적은 악센트가 많은 것보다 더 강하게 와닿습니다.
- 자유 재량 (사용자가 요청하는 경우: "창의적으로 해봐", "마음껏 해봐", "놀라게 해줘"): 메뉴의 모든 것이 열려 있으며, 여전히 의미에 따라 선택합니다. 자유가 많은 기법을 사용해야 한다는 것을 의미하지는 않습니다. 하나의 대담하고 잘 선택된 기법이 열 가지를 능가할 수 있습니다.
- 비디오가 분명히 수업이 아니고(뮤직 비디오, 예고편) 모드가 지정되지 않은 경우, 적합한 것을 선택하고 어떤 방식을 선택했는지 말하십시오.
마무리 작업 및 확인 사항
- 빠른 움직임에는 모션 블러. 컴퓨터 애니메이션은 완벽하게 선명하기 때문에 빠른 텍스트가 깜빡거리는 것처럼 보일 수 있습니다. 이동 방향으로 약간의 블러를 추가하면 촬영한 것처럼 보입니다. Remotion에는 모션 블러 도구(
@remotion/motion-blur)가 있습니다; 프로젝트의 Remotion 버전과 정확히 일치하게 설치하고, "Remotion에서 구축하기" 아래 패키지와 동일한 방식으로 설치하십시오 (npm i -E @remotion/motion-blur@<버전>). 빠른 움직임에 마무리 터치로 사용하십시오; 느린 드리프트에서는 초점이 맞지 않은 것처럼 보일 뿐입니다. - 연속된 스크립트는 문자 수준 효과를 깨뜨립니다. 아랍어, 페르시아어 및 문자 모양이 이웃 문자에 따라 달라지는 다른 스크립트에서 단어를 문자로 분할하면(캐스케이드, 스크램블, 아나그램, 랜덤 순서 팝온, 3D 플립인) 문자 형태가 깨집니다. 대신 전체 단어나 줄을 애니메이션화하십시오.
- 글꼴에 악센트가 있는지 확인하십시오. 아프리칸스어 및 기타 악센트가 있는 라틴어 텍스트의 경우, 애니메이션을 적용하기 전에 글꼴에 필요한 문자(ê, ë, ô, ï...)가 있는지 확인하십시오.
메뉴 사용하기
선택하기 전에 references/menu.md(이 스킬의 폴더 내)를 여십시오. 각 기법을 패밀리별로 그룹화하여 다음 정보를 제공합니다:
- 이름과 id(
KT_COMPONENTS의 키) - 한 줄 look과 다음과 같은 경우 사용 힌트
- 태그: calm(좋은 하우스 스타일), teach(좋은 교육 악센트), exit(단어가 사라지는 것으로 끝나므로 줄이나 장면의 끝에 적합), ✚ new
- built 방법:
component(바로 사용 가능), 또는example(적응할 수 있는 주석이 달린 장면, 경로 제공)
패밀리 제목을 훑어본 다음, 순간에 맞는 패밀리의 행을 읽으십시오.
references/catalogue.md는 배경 자료입니다: 메뉴 뒤에 있는 연구, 출처, 역사 및 각 기법을 구축하는 난이도를 제공합니다. 깊이 있는 정보가 필요할 때만 여십시오.
Remotion에서 구축하기
- 이 스킬의 폴더에서
remotion/폴더를 프로젝트에src/kinetic-type/로 복사하십시오. - 프로젝트에
remotion,@remotion/google-fonts및@remotion/layout-utils가 프로젝트의 Remotion 버전과 정확히 일치하는지 확인하십시오(Remotion은 모든 패키지가 하나의 버전으로 통일되어야 함). 예를 들어 4.0.536 버전의 경우:npm i -E @remotion/[email protected](-E는^4.0.536대신 정확한 버전을 저장함). - 메뉴 ID로 컴포넌트를 조회하고
<Sequence>안에 렌더링하십시오:
import { Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
const House = KT_COMPONENTS["tracking-in"];
const Accent = KT_COMPONENTS["slice"];
export const Intro: React.FC = () => (
<>
<Sequence durationInFrames={75}>
<House text="모든 전체는 나눌 수 있습니다" />
</Sequence>
<Sequence from={75} durationInFrames={60}>
<Accent text="반으로 나누세요" keyWord="나누세요" />
</Sequence>
</>
);
- Props(
KTProps):text(필수),keyWord(악센트 처리),fontFamily(기본 Poppins),color,accent,fontSize(기본값은 프레임 너비에 맞춤). - 각 컴포넌트는 해당
<Sequence>의 프레임 0에서 시작하여 약 1초 안에 안정화되므로, Sequence의 길이가 단어가 유지되는 시간을 설정합니다. 두 가지 종류는 다르게 동작합니다: exit 기법은 Sequence의 마지막 프레임까지 단어가 사라진 상태로 끝나며, 사운드 페이스 기법(패밀리 15)은 전체 Sequence에 걸쳐 단어를 분산시키므로 Sequence의 길이가 속도를 설정합니다. example기법의 경우, 메뉴에 명명된 파일을 열고 장면을 적응시키십시오.- 기타 비디오 도구: 메뉴와 선택 방법은 여전히 적용됩니다; 바로 사용 가능한 컴포넌트는 Remotion 전용입니다.
미리보기 또는 전체 비디오 연출
- 갤러리: 모든 기법의 라이브 프리뷰는 https://dricosnyman.github.io/kinetic-type-skills/ 에서 확인할 수 있습니다.
- 전체 비디오 또는 줄별 연출: 작업이 대본에서 전체 키네틱 타이포그래피 비디오를 만드는 것이거나, 사용자가 각 줄의 타이포그래피를 계획, 검토 및 승인하려는 경우,
kinetic-type-director스킬을 사용하십시오. 이 스킬은 전체 프로세스를 실행하고 이 스킬을 기반으로 합니다: 타입 스크립트 초안을 작성하고, 편집 가능한 페이지에 표시한 다음, 승인된 버전을 이 컴포넌트로 구축합니다.