AWESOME AI MOTION
효과Effects / 타이포Typography / Nº 108

공간 키네틱 문장Spatial Word Composition

Spatial Word Composition
공간 키네틱 문장
다른 이름Also known as · Spatial Kinetic Word Composition · 공간 키네틱 문장 구성
108
렌더 추가 예정CLIP COMING공간 키네틱 문장Spatial Word Composition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 108. 공간 키네틱 문장 · Spatial Word Composition · power3.out

발화 순서대로 단어가 크기와 각도를 바꾸며 화면 공간을 채워 하나의 타이포 포스터가 되는 구성Words appear in spoken order, changing size and angle to fill the frame as one typographic composition.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
문장의 강세와 의미 관계가 배치로 전달된다. 말하는 리듬이 그대로 그림이 된다Emphasis and meaning relations are carried by placement; speech rhythm becomes a picture.
언제 쓰나Use whenUSE WHEN
  • 내레이션 한 단락을 키워드 중심 타이포 포스터로 구성할 때
  • 감성적인 문장을 크고 작은 글자 배치로 표현할 때
  • Turning a narration paragraph into a keyword-led type poster
  • Expressing an emotional sentence through big and small type
과용 주의AvoidAVOID
  • 모든 단어의 목표 좌표를 사전에 손으로 정하거나 격자로 계산한다. 런타임 난수 배치는 겹침을 낳는다
  • 핵심어는 문장당 1~2개. 전부 크면 강조가 사라진다
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

단어가 250~600ms 간격으로 하나씩 놓이고 핵심어는 1.8배 크기로 최대 15도 기울어 화면 중앙에 자리 잡는다

과용 · 나쁜 사례OVERUSE

단어를 무작위로 흩뿌려 서로 겹치고 읽는 순서를 알 수 없다

03

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM기본DEFAULT범위RANGE메모NOTE
단어 간격250~600ms200~700ms발화 속도에 맞춤
핵심어 크기1.8배1.5~2.2배본문 대비
최대 회전15도5~15도핵심어 위주
등장0.3s0.2~0.4sscale 0.9에서 1
GSAP
// 단어 목표: {text, x, y, size, rot, t} 배열을 사전에 확정
words.forEach(w => {
  tl.fromTo(el(w), {opacity:0, scale:0.9, rotation:w.rot * 0.5}, {opacity:1, scale:1, rotation:w.rot, duration:0.3, ease:'power3.out'}, w.t);
});
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문장을 공간 타이포 구성으로 배치해줘. 단어별 {시각, x, y, 크기, 회전} 배열을 격자 위에서 미리 정하고, 핵심어(<핵심어>)는 1.8배 크기, 최대 15도로 중앙에 놓아. 각 단어는 scale 0.9에서 1, opacity 0에서 1로 0.3초 power3.out. 발화 간격은 250~600ms.

Lay out the sentence in <target> as a spatial typographic composition. Predefine an array of {time, x, y, size, rotation} per word on a grid; the key words (<key words>) are 1.8x size and up to 15 degrees, near center. Each word scales 0.9 to 1 and fades in over 0.3s power3.out, with 250 to 600ms between words.

Codex

<파일>에 spatial word composition을 적용해. 단어 목표 배열을 확정하고 각 단어 scale 0.9에서 1, rotation 절반에서 목표 각, opacity 0에서 1을 0.3초 power3.out으로 w.t에 배치. 완성 프레임 캡처 후 단어 bbox 겹침이 0건인지 검사하고 0.5초 시점에는 첫 단어만 보이는지 확인해.

Apply spatial word composition in <file>. Fix a target array and animate each word scale 0.9 to 1, rotation half to target, opacity 0 to 1 over 0.3s power3.out at w.t. Capture the finished frame and check word bounding boxes overlap in 0 cases; at 0.5s only the first word should be visible.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
좌표와 시각을 담은 데이터 배열에서 timeline을 만든다. 폰트 측정 뒤 겹침 검사를 스크립트로 돌려 통과시킨다
ReelForgeBRIEF TO VIDEO
브리프에 단어별 시각, 크기, 좌표, 회전 배열과 핵심어 표시를 싣는다. 겹침 검사 스크립트를 함께 준다
Scrolline DeckSCROLL SCRUB
단어의 등장 시각을 진행률 위치로 환산한다. 되감으면 단어가 순서대로 사라진다
06

잘 맞는 조합Pairs well with

07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo