효과Effects / 원리 도해Explainer / Nº 367

토큰 쪼개기Token Split

Token Split

토큰 쪼개기

다른 이름Also known as · 토큰 분리 · Tokenization · Tokenization split

367

도판Fig. 367. 토큰 쪼개기 · Token Split · power3.inOut

재생 속도Speed

붙어 있던 문장을 간격 있는 토큰 조각으로 나누는 움직임An animation that separates a continuous sentence into spaced token fragments.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

문장이 모델이 읽는 작은 단위로 바뀐다Shows how a sentence becomes the smaller units a model reads.

언제 쓰나Use whenUSE WHEN

토큰화 과정을 소개할 때
입력 문장의 처리 단위를 보여줄 때

When introducing tokenization
When showing the processing units of an input sentence

과용 주의AvoidAVOID

실제 토크나이저의 결과라고 단정하지 않는다
조각 사이를 과도하게 벌리지 않는다

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 발표Presentation 스크롤덱Scroll deck 난이도 기본Basicgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

AI는 다음 말을 고른다가 5조각으로 벌어지고 번호가 붙는다

과용 · 나쁜 사례OVERUSE

글자를 무작위로 흩어 토큰 순서를 잃는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
조각 수	5	3~8	교육용 예시 분할
추가 간격	34px	24~44px	중앙 기준 양쪽 이동
분리 지속	1.05s	0.8~1.3s	변화를 읽을 시간
번호 시간차	0.06s	0.04~0.1s	순서 유지

GSAP

const tl = Motion.timeline();
const pieces = document.querySelectorAll('.token');
pieces.forEach((el,i)=>tl.to(el,{x:(i-2)*34,duration:1.05,ease:'power3.inOut'},.3));
tl.to(pieces[2],{color:'var(--verm)',duration:.35},.75);
tl.to('.under',{opacity:1,duration:.35,stagger:.06},1.1);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 문장을 5개의 span으로 분리해 0.3초부터 중앙 기준 (i-2)×34px 이동시킨다. 이동은 1.05초 power3.inOut으로 하고 세 번째 조각만 주홍으로 만든다. 1.1초부터 조각 아래 헤어라인과 번호를 0.06초 간격으로 공개한다. 3초 타임라인 하나로 만들고 마지막 0.6초는 정지한다.

Split the <target> sentence into 5 spans and move them relative to the center by (i-2)×34px starting at 0.3 seconds. Use a movement duration of 1.05 seconds with power3.inOut, and make only the third fragment vermilion. Starting at 1.1 seconds, reveal hairlines and numbers below the fragments at 0.06-second intervals. Use a single 3-second timeline and hold still for the final 0.6 seconds.

Codex

<파일>의 <대상>에 <대상> 문장을 5개의 span으로 분리해 0.3초부터 중앙 기준 (i-2)×34px 이동시킨다. 이동은 1.05초 power3.inOut으로 하고 세 번째 조각만 주홍으로 만든다. 1.1초부터 조각 아래 헤어라인과 번호를 0.06초 간격으로 공개한다. 0.24초, 1.25초, 2.9초를 캡처해 순서 유지, 간격 증가, 번호와 마지막 홀드를 확인한다. 시간은 GSAP 타임라인만 사용한다.

In <target> in <file>, Split the <target> sentence into 5 spans and move them relative to the center by (i-2)×34px starting at 0.3 seconds. Use a movement duration of 1.05 seconds with power3.inOut, and make only the third fragment vermilion. Starting at 1.1 seconds, reveal hairlines and numbers below the fragments at 0.06-second intervals. Capture at 0.24, 1.25, and 2.9 seconds to check preserved order, increased spacing, numbering, and the final hold. Use only a GSAP timeline for timing.