AWESOME AI MOTION
Aa

용어 사전Glossary

모션 사전 네 권에서 뽑은 설계 용어. 클립이 있는 항목은 연결Design terms from the four-volume motion dictionary, linked to clips where available

디즈니 12원칙

17

찌그러뜨리기와 늘이기Squash and Stretch

압축·신장으로 무게·탄성·충격을 표현한다.

압축 80~120ms, 복원 180~260ms; power2.out; scaleY:0.94, scaleX:1/0.94; 후속 간격 0ms

예비동작Anticipation

본동작 전에 작은 준비 움직임으로 다음 행동을 예고한다.

준비 80~140ms, 본동작 250~400ms; 준비 power1.in, 본동작 power3.out; 역방향 3~6px; 간격 0~40ms

명료한 연출Staging

구도·대비·동작을 정돈해 한 가지 의미를 분명히 보여 준다.

강조 150~250ms power2.out; 주변 강조 해제 100~180ms; 홀드 1500~3000ms; 동시 초점 1개

순차 작화와 핵심 자세 작화Straight Ahead Action and Pose to Pose

앞 프레임부터 전개하거나 핵심 자세부터 정한 뒤 중간을 연결한다.

키 상태 3개; 연결 250~450ms power3.inOut; 상태 홀드 800~1800ms

팔로스루와 겹침 동작Follow Through and Overlapping Action

주동체 뒤에 부속이 따라오고 각 부분이 다른 시점에 멈춘다.

본체 300ms, 부속 시작 지연 40~80ms, 부속 350~450ms; power3.out; 진폭 2~5px

느린 시작과 느린 끝Slow In and Slow Out

시작·끝의 변화량을 작게 해 가속·감속을 보여 준다.

300~450ms; sine.inOut 또는 Material legacy standard (0.4,0,0.2,1); 간격 0ms

아크Arcs

자연스러운 동작을 곡선 경로로 연결한다.

350~550ms; power2.inOut; 곡선 높이 24~64px; 요소 간격 60ms
클립Clip · Nº 007 아크Arcs

보조 동작Secondary Action

주동작의 의미를 돕는 작은 추가 동작을 배치한다.

주동작 300ms 뒤 체크 150~220ms; power2.out; 후행 60~120ms

타이밍Timing

동작에 배정한 시간으로 무게·속도·의도를 정한다.

수정 150~250ms, 구조 변화 350~500ms; power3.out; 독해 홀드 1500~4000ms

과장Exaggeration

핵심 특징을 실제보다 크게 표현해 의미를 명료하게 한다.

확대 180~250ms, 복원 200ms; power2.out; 크기 1.03~1.06; 한 비트 1회

입체감 있는 작화Solid Drawing

형태·무게·균형·부피가 일관되도록 그린다.

정지 형태 기준; 필요한 이동 300~450ms power3.out; 그림자 변화 150ms; 간격 0ms

매력과 명료함Appeal

관객이 읽고 관심을 가질 수 있는 개성·명료함을 만든다.

색·형태 규칙 고정; 등장 250~400ms power3.out; 그룹 간 여백 32~64px

후행 정착Follow Through

주동작이 멈춘 뒤 부속 움직임이 이어진다.

80~180ms 추가; power2.out; 2~4px; 간격 0ms

겹침 동작Overlapping Action

연결된 부분이 서로 다른 단계에서 움직인다.

시작 시차 40~80ms; 250~400ms; power3.out

끌림Drag

주동체가 출발할 때 부속이 뒤에 처진다.

지연 40~70ms; 최대 처짐 3~6px; power2.out

오버슈트Overshoot

목표를 조금 지나친 뒤 목표로 돌아온다.

350~500ms; back.out(0.8); 목표 초과는 샘플로 확인; 간격 0ms

정착Settle

도착 뒤 잔여 변화가 사라져 안정 상태가 된다.

총 300~600ms; power3.out 또는 임계감쇠 spring; 정착 뒤 1500ms 이상 홀드

이징과 스프링

30

선형Linear / none / power0

시간과 변화량이 일정 비율로 대응한다.

300~1000ms; CSS linear=(0,0,1,1); GSAP none; 간격 0ms

CSS 기본 완화ease

초반에 빨라지고 끝에서 천천히 멈춘다.

150~300ms; 정확히 (0.25,0.1,0.25,1); 간격 0ms
클립Clip · Nº 003 이징Easing

가속ease-in / in

천천히 출발해 뒤로 갈수록 빨라진다.

150~250ms; CSS 정확히 (0.42,0,1,1); GSAP 예 power2.in; 간격 0ms

감속ease-out / out

빠르게 반응하고 천천히 목표에 정착한다.

150~350ms; CSS 정확히 (0,0,0.58,1); GSAP 예 power3.out; 간격 0ms

가속과 감속ease-in-out / inOut

양 끝은 느리고 가운데는 빠르다.

300~500ms; CSS 정확히 (0.42,0,0.58,1); GSAP 예 power2.inOut; 간격 0ms

사인Sine

삼각함수로 부드러운 가감속을 만든다.

400~800ms; sine.in/out/inOut; ≈ (0.12,0,0.39,0) / (0.61,1,0.88,1) / (0.37,0,0.63,1); 간격 0ms

2차Quad / power1

제곱 함수 계열로 완만하게 속도를 바꾼다.

150~250ms; power1.in/out/inOut; ≈ (0.11,0,0.5,0) / (0.5,1,0.89,1) / (0.45,0,0.55,1); 간격 0ms

3차Cubic / power2

세제곱 계열로 더 뚜렷하게 가감속한다.

200~350ms; power2.in/out/inOut; ≈ (0.32,0,0.67,0) / (0.33,1,0.68,1) / (0.65,0,0.35,1); 간격 40~60ms

4차Quart / power3

4제곱 계열로 빠르게 이동하고 긴 감속을 준다.

350~600ms; power3.in/out/inOut; ≈ (0.5,0,0.75,0) / (0.25,1,0.5,1) / (0.76,0,0.24,1); 간격 50~80ms

5차Quint / power4 / strong

5제곱 계열로 강한 가감속을 준다.

350~550ms; power4.in/out/inOut; ≈ (0.64,0,0.78,0) / (0.22,1,0.36,1) / (0.83,0,0.17,1); 간격 0ms

지수Expo

지수 함수로 초반 또는 후반에 변화량을 집중한다.

300~500ms; expo.in/out/inOut; ≈ (0.7,0,0.84,0) / (0.16,1,0.3,1) / (0.87,0,0.13,1); 간격 0ms

원형Circ

원의 일부를 이용한 곡선으로 강한 속도 변화를 준다.

300~500ms; circ.in/out/inOut; ≈ (0.55,0,1,0.45) / (0,0.55,0.45,1) / (0.85,0,0.15,1); 간격 0ms

되밀림Back

목표 반대 방향으로 잠깐 가거나 목표를 넘고 정착한다.

350~500ms; back.in/out/inOut(0.8~1.2); 대표 ≈ (0.36,0,0.66,-0.56) / (0.34,1.56,0.64,1) / (0.68,-0.6,0.32,1.6); 간격 0ms

탄성Elastic

목표 주변에서 감쇠 진동하며 정착한다.

500~800ms; elastic.out(1,0.4) 시작값; 변형 in/inOut; 단일 cubic-bezier 없음; 간격 0ms

튀기기Bounce

충돌 뒤 몇 번 짧게 튀며 멈추는 구간 함수이다.

450~700ms; bounce.out 또는 in/inOut; 단일 cubic-bezier 없음; 간격 0ms

계단Steps

중간 보간 없이 정해진 횟수로 값이 뛴다.

글자당 40~70ms, 구절 후 200~400ms; CSS steps(N,end); GSAP steps(N); 베지어 없음

사용자 곡선CustomEase / cubic-bezier / linear()

원하는 속도 그래프를 직접 정의한다.

150~400ms; 예 (0.2,0,0.38,0.9); 다점 linear()는 샘플값 사용; 간격 0ms

완만한 양끝·선형 중앙SlowMo / slow

시작·끝은 완화하고 중앙은 오래 선형으로 유지한다.

600~1000ms; slow(0.7,0.7,false) 시작값; 단일 베지어 없음; 간격 0ms

거친 변화RoughEase / rough

제어점별 변화량에 불규칙성을 더한다.

200~350ms; rough({strength:0.1,points:12,randomize:false,clamp:true}); 베지어 없음; 반복 0회

지수 비율 크기 변화ExpoScaleEase / expoScale

큰 배율 변화가 지각상 일정한 비율로 보이도록 보정한다.

600~1000ms; expoScale(1,4,power2.inOut); 단일 베지어 없음; 간격 0ms

사용자 충돌CustomBounce

튀는 횟수·강도·압축을 따로 설계한다.

500~800ms; strength 0.2 시작값; 곡선·squash 분리; 간격 0ms

사용자 진동CustomWiggle

왕복 흔들림 횟수·감쇠 형태를 정의한다.

200~350ms; wiggles 2~3, 감쇠형; 회전 ±1° 또는 이동 ±2px; 간격 0ms

물리 스프링Spring

질량·강성·감쇠·초기 속도로 정착 궤적을 정한다.

m:1, k:400, c:40, v0:0, ζ:1; ±0.1% 정착 약 462ms; 단일 베지어 없음; 간격 0ms

질량Mass m

같은 힘에서 얼마나 덜 가속하는지 정한다.

기준 m=1, 비교 m=2; 곡선 spring; 시간은 계산; 간격 0ms

강성Stiffness k

목표로 되돌리는 힘의 세기를 정한다.

기준 k=400; 빠르게는 625, c는 원하는 ζ에 맞춰 재설정; 시간은 계산

감쇠Damping c

속도에 비례해 에너지를 줄인다.

m=1,k=400,c=40; 임계감쇠; 간격 0ms

감쇠비Damping ratio ζ

실제 감쇠를 임계감쇠에 대한 비율로 나타낸다.

ζ=1 기본; 0.8~0.9 약한 반동; 0.6~0.7 놀이 한정; 시간은 계산

초기 속도Initial velocity v0

시작할 때 이미 가진 속도를 지정한다.

영상 v0=0; 체험관은 측정 px/s를 목표 거리로 나눠 정규화; 간격 0ms

응답 시간Response / natural period

고유진동 주기를 시간으로 표현하는 설계용 변수이다.

로컬 helper 기준 response 300~500ms; ωn=2π/response; ζ=1; 정착은 response보다 길어

정착 임계값Rest threshold / epsilon

목표·속도에서 충분히 작아진 오차를 정지 기준으로 정한다.

정규화 위치 ε=0.001; 실시간 UI는 속도 임계도 지정; 시간 계산; 간격 0ms

타이밍과 리듬

17

지속 시간Duration

한 동작이 시작부터 끝까지 걸리는 시간이다.

피드백 100~180ms, 등장 250~450ms; power3.out; 간격 0ms

시작 지연Delay / Offset

원점이나 이전 사건에서 얼마나 뒤에 시작할지 정한다.

지연 60~150ms; 라벨 200ms power2.out

간격 배치Spacing

같은 시간 간격에서 대상이 얼마나 이동하는지 정한다.

총 400ms, 샘플 100ms; power3.out; 거리 80px

공간 간격Spatial spacing

요소 간 거리·여백을 정한다.

그룹 여백 32~64px, 내부 12~24px; 정지 상태는 이징·시간 없음

홀드Hold / Dwell

도착 상태를 유지해 읽을 시간을 준다.

짧은 요지 1500~2500ms, 비교 2500~4000ms 이상; 이징 없음

순차 동작Sequence

하나의 결과 다음에 다음 동작을 시작한다.

각 250~400ms power3.out; 중간 80~150ms

스태거Stagger

같은 계열 요소의 시작을 일정 간격으로 분산한다.

UI 20~40ms, 영상 50~80ms; 개별 200~300ms power3.out; 그룹 총시간 확인

시간 겹침Temporal overlap

다음 동작이 이전 동작 종료 전에 시작한다.

겹침 60~120ms; 각 250~400ms; power3.out

리듬·비트Rhythm / Beat

동작과 정지를 반복해 설명의 박자를 만든다.

변화 250~450ms, 정지 1500~3000ms; 강·중·약 곡선 2~3개

액센트Accent / Motion punctuation

짧은 변화 하나로 핵심 순간을 표시한다.

120~220ms power2.out; scale 최대 1.04; 반복 0회; 앞뒤 150ms 정리

비대칭 시간Asymmetric timing

등장·정착·퇴장에 다른 시간을 배정한다.

등장 300ms power3.out, 퇴장 180ms power2.in, 홀드 2000ms

프레임 샘플링Frame sampling

연속 동작을 프레임 시간에서 관찰한다.

30fps 한 프레임 33.33ms, 60fps 16.67ms; 이징은 기존 곡선

스크럽 진행도Scrub progress

시간 대신 스크롤의 위치로 상태를 결정한다.

진행도 0~1; 직접 대응 none; 정지 구간 0.30~0.75; ms 없음

전체 시퀀스 예산Sequence budget

개별 동작과 지연을 합쳐 완성 시점을 제한한다.

UI 총 500ms 이내 ; 220ms 동작이면 8행 each≤40ms; power3.out

페이싱Pacing / Editorial Rhythm

비트·숏·전환·홀드의 길이와 변화를 조절한 전체 설명 속도이다.

비트 2000~6000ms·읽기 홀드 1000~4000ms; 기본 전환 300~500ms STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 컷 빈도 고정 안 함.

진행률·스크러빙Progress / Scrubbing

사용자 스크롤이나 재생 시각을 정규화 진행률로 바꾸는 제어이다.

영상 t/T, 덱 p 0~1; driver L, scrub 0~600ms 선택, 단계 간 p≈0.2~0.25.

읽기 홀드·발화 큐Reading hold / Narration cue

완성 화면을 읽을 시간과 발화 시작점을 함께 정하는 설계이다.

단순 제목 1000~1600ms, 차트·원리 1800~3000ms 시작값; 홀드 easing 없음, 전후 E/S, 변화 종료 후 150~250ms 여유.

위계와 코레오그래피

12

모션 위계Motion hierarchy

중요도에 따라 동작의 크기·속도·순서를 다르게 준다.

주요 350~500ms power3.out, 보조 180~250ms power2.out; 시차 60ms

코레오그래피Choreography

여러 움직임의 순서·경로·겹침을 하나의 흐름으로 설계한다.

틀 150ms, 자료 250ms, 결과 300ms; 간격 60~100ms; power3.out

생산적 모션Productive motion

작업 흐름에 끼어들지 않는 작고 빠른 모션이다.

70~240ms ; Carbon productive 곡선 2.2절; 간격 0~20ms

표현적 모션Expressive motion

드문 중요 순간에 더 크게 보이는 움직임을 준다.

300~500ms 시작값; Carbon expressive entrance (0,0,0.3,1); 간격 60ms

공통 운명Common fate / Group motion

같은 방향·시간으로 움직이는 요소를 한 묶음으로 읽게 한다.

300~450ms power3.inOut; 그룹 내부 시차 0ms

의미 일관성Semantic consistency

같은 기능에는 같은 모션 의미를 배정한다.

같은 역할의 곡선·방향 고정; 150~300ms; 크기에 따라 기간 조절

공간 일관성Spatial consistency

같은 층·다른 층 관계에 맞게 이동을 배정한다.

250~400ms; power2.inOut 또는 Carbon standard; 층 dim 150~250ms

점진적 공개Progressive disclosure

필요한 정보부터 보여 주고 세부를 나중에 펼친다.

펼치기 200~350ms power3.out; 독해 간격 1000~2500ms

트리거와 피드백Trigger and feedback

행동에 곧바로 대응하는 상태 변화를 준다.

피드백 시작 지연 0ms; 70~150ms; power2.out; 결과 등장 200ms

중단·반전 가능성Interruptibility / Reversibility

다음 입력으로 진행 중 모션을 자연스럽게 바꿀 수 있다.

150~300ms power2.out; 추가 지연 0ms

상태 전이State transition

이전 상태와 새 상태를 연결하는 변화이다.

200~350ms power3.out; 비교 홀드 1500ms

진입·독해·퇴장Enter / Hold / Exit

등장·정지·정리의 세 단계로 장면을 나눈다.

영상 300ms / 2000ms / 200ms; 등장 out·퇴장 in; 덱 0~.30/.30~.75/.75~1

연속성과 시선

20

대상 지속성Object permanence

화면을 옮겨도 같은 대상이라는 단서를 유지한다.

연결 이동 300~500ms power3.inOut; 중간 gap 0ms

공유 요소 전환Shared element transition

두 화면의 공통 요소가 위치·크기를 바꾸며 이어진다.

300~450ms; Material standard (0.4,0,0.2,1); 간격 0ms

앵커Anchor / Stable reference

한 요소를 고정해 다른 변화의 기준점으로 쓴다.

앵커 이동 0px; 교체 200~300ms power2.out; 간격 0ms

좌표계·원점Coordinate space / Origin

위치를 계산할 공통 기준과 회전·확대의 중심을 정한다.

transformOrigin:'50% 100%'; 이동 300ms power3.out; 간격 0ms

층·가림Layering / Occlusion

앞뒤 순서와 가림으로 깊이·포함을 드러낸다.

패널 240~350ms entrance; 배경 dim 150~250ms; 간격 0ms

포함 모델Container / Containment

요소가 어디에 소속되는지 경계로 표현한다.

이동 300~450ms power3.out; 경계 등장 150ms; 간격 60ms

경로·방향 문법Path / Direction grammar

방향과 경로에 일정한 의미를 붙인다.

이동 250~450ms power2.inOut; 간격 0ms

위치·속도 연속성Position / Velocity continuity

연결 순간의 위치와 속도가 갑자기 바뀌지 않게 한다.

연결 gap 0ms; 전후 이동 250~400ms; 접속 순간 속도 일치

의도한 불연속Intentional discontinuity

명확한 사건에서만 갑작스러운 상태 변경을 쓴다.

컷 0ms 또는 짧은 페이드 100~150ms; 이징 없음 또는 power1.out; 컷 전후 홀드 1000ms

그래픽 대응Graphic match / Match cut 연결

컷 전후의 형태·위치·방향을 맞춰 의미를 이어 준다.

컷 0ms 또는 dissolve 120~200ms; 고정 앵커; 간격 0ms

시선 경로Attention path / Eye trace

다음 중요 대상이 이전 시선 위치에서 따라가기 쉽게 나타난다.

이동 200~350ms power2.out; 가까운 배치 24~64px; 시차 80~150ms

초점 이전Focus handoff

한 대상의 강조를 줄이고 다음 대상에 넘긴다.

이전 강조 해제 120ms, 다음 강조 180ms; power2.out; 겹침 40~80ms

대비·살리언스Contrast / Salience

크기·색·움직임 차이로 눈에 띄는 정도를 조절한다.

강조 150~220ms power2.out; 크기 1.03; 한 번; 간격 0ms

연결선 추적Path tracing / Draw-on

선을 순서대로 드러내 경로를 따라 읽게 한다.

300~500ms; 흐름 등속은 none, 정착은 power2.out; 간격 80ms

카메라와 대상 분리Camera vs Object motion

전체 화면 이동과 개별 요소 이동의 역할을 나눈다.

관찰 확대 500~800ms sine.inOut; scale 1→1.1~1.25; 간격 0ms

패럴랙스 기본Parallax

층마다 이동량 차이를 줘 깊이를 읽게 한다.

이동차 8~24px; 600~1200ms none 또는 sine.inOut; 층 2개

모션 감소·정적 대안Reduced motion / Static alternative

움직임을 줄여도 정보 관계를 읽을 수 있게 한다.

이동 0px, scale 1; 필요 페이드 0~100ms linear; 간격 0ms

시각 연속성Visual / Spatial Continuity

컷 전후에 대상·방향·위치·상태의 관계가 유지되는 설계이다.

컷 0ms 또는 300~500ms STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 주요 anchor 이동은 화면의 2~5% 이내부터 시험; 도착 홀드 800~1500ms.

객체 대응Object constancy / Keyed identity

변화 전후 같은 대상의 식별자를 유지하는 규칙이다.

이동 600~800ms, 전후 홀드 ≥1200ms; P, id·색·라벨 고정, 시차 0ms.

모션 축소·정적 대안Reduced motion / Static equivalent

큰 이동 없이 동일한 정보와 조작 경로를 제공하는 규칙이다.

필수 상태 변경 즉시 또는 100~150ms fade; L, 이동 0px·scale 1, 단계 간격 사용자 제어.

2D 속성

13

이동Translation / Slide

형태를 유지하고 위치를 바꾼다.

등장 12~24px, 전달 80~240px; 250~450ms power3.out; 간격 40~80ms

크기 변화Scale / Zoom

기준점에서 크기를 비례 변경한다.

0.96→1, 250~400ms power3.out; 간격 0ms

축별 크기ScaleX / ScaleY

가로·세로 배율을 따로 변경한다.

scaleX 0→1; 250~400ms power2.out; origin 왼쪽; 간격 0ms

회전Rotation

중심점 둘레로 방향을 바꾼다.

UI 150~200ms, 도형 250~350ms; power2.out; 장식 ±1~3°

기울임Skew

축 방향으로 형태를 비스듬히 변형한다.

±2~4°, 120~200ms 후 200ms 복원; power2.out; 간격 0ms
클립Clip · Nº 433 스큐Skew

불투명도Opacity / Fade

모양과 위치를 유지하고 가시성을 바꾼다.

0→1 150~250ms power2.out, 퇴장 100~180ms; 간격 0ms
클립Clip · Nº 039 페이드Fade

교차 페이드Crossfade

같은 자리의 두 레이어 가시성을 서로 교체한다.

180~300ms sine.inOut; 이동 0px; 간격 0ms

초점 흐림Blur / Focus resolve

블러 반경을 바꿔 선명한 대상에 시선을 모은다.

blur 2~4px→0, 180~300ms power2.out; 간격 0ms

모션 블러Motion blur

빠른 이동 방향의 잔상을 표현한다.

80~150ms 속도 피크에만; 방향 blur 2~6px, 정착 0; 이동 이징과 연동

클립 리빌Clip reveal

경계 안에서 보이는 영역을 확대해 내용을 드러낸다.

250~400ms power3.out; inset(100% 0 0 0)→inset(0 0 0 0); 행 간격 50ms

마스크 리빌Mask reveal

별도 마스크의 모양·알파로 가시 영역을 조절한다.

300~500ms power3.out; 반경 0→필요 크기; 간격 0ms

디밍Dim / Veil

배경 위에 반투명 레이어를 놓아 초점을 분리한다.

overlay opacity 0→0.10~0.18, 150~250ms power2.out; 간격 0ms

복합 변환Compound transform

이동·크기·회전을 작은 범위로 함께 바꾼다.

250~400ms power3.out; opacity 별도 160ms; 회전 0° 기본; 간격 50ms

편집 컷

12

하드 컷Hard / Straight Cut

두 숏을 효과 없이 한 프레임 경계에서 즉시 교체하는 편집이다.

전환 0ms; 이징 적용 안 함; 컷 전 행동 확인 300~600ms, 컷 뒤 위치 파악 500~1000ms.

매치컷Match Cut

앞뒤 숏의 형태·위치·동작·소리를 대응시켜 의미를 연결하는 컷이다.

컷 0ms; 이징 적용 안 함; 전후 기준점 차이 화면 폭·높이의 2% 이내부터 시험; 양쪽 홀드 500~1000ms.

점프컷Jump Cut

같거나 비슷한 구도의 연속 행동 일부를 제거해 시간이 튀게 만드는 컷이다.

컷 0ms; 이징 적용 안 함; 전후 맥락 홀드 각 500~1000ms; 생략 표시는 1000ms 이상부터 시험.

J 컷J Cut / Audio Lead

다음 숏의 소리가 화면보다 먼저 시작하는 분리 편집이다.

화면 컷 0ms; 이징 적용 안 함; B 소리 선행 300~800ms; 필요할 때만 음원 접합 30~80ms LIN: none / cubic-bezier(0, 0, 1, 1).

L 컷L Cut / Audio Trail

앞 숏의 소리가 다음 화면까지 이어지는 분리 편집이다.

화면 컷 0ms; 이징 적용 안 함; A 소리 잔류 300~1000ms; 필요할 때만 접합 30~80ms LIN: none / cubic-bezier(0, 0, 1, 1).

크로스페이드Crossfade / Cross Dissolve

앞 화면이 사라지는 동안 뒤 화면이 섞여 나타나는 전환이다.

300~600ms; LIN: none / cubic-bezier(0, 0, 1, 1); 뒤 화면 완성 홀드 1000~2000ms; 겹침은 전환 길이와 같게.

와이프Wipe

움직이는 경계가 앞 화면을 걷어내며 뒤 화면을 드러내는 전환이다.

350~600ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 경계 0→100%; 비교 홀드 1500~3000ms.
클립Clip · Nº 122 와이프Wipe

휩팬Whip Pan / Swish Pan Transition

매우 빠른 팬의 흐림 구간에서 두 숏을 연결하는 전환이다.

240~400ms; EXP: Carbon standard expressive / cubic-bezier(0.4, 0.14, 0.3, 1); 가속·감속 각 절반; x 이동 0.8~1.0 화면 폭; 블러 0→8~12→0px.

스매시 컷Smash Cut

의도적으로 강한 분위기·내용 대비를 만드는 갑작스러운 컷이다.

전환 0ms; 이징 적용 안 함; 대비 전 홀드 600~1200ms, 뒤 홀드 1500~2500ms.

인서트Insert Shot / Cut-in

주행동 안의 중요한 세부를 별도 숏으로 끼워 보여주는 편집이다.

입출 컷 각 0ms; 이징 적용 안 함; 삽입 홀드 1000~2500ms; 원래 화면 복귀 뒤 500~1000ms.

컷어웨이Cutaway Shot

주행동에서 관련된 다른 대상·반응·맥락으로 잠깐 벗어나는 숏이다.

입출 컷 각 0ms; 이징 적용 안 함; 다른 대상 홀드 1500~3500ms; 복귀 홀드 600~1000ms.

액션 매치Match on Action / Cutting on Action

하나의 행동이 이어지는 지점에서 구도를 바꿔 연결하는 컷이다.

컷 0ms; 이징 적용 안 함; 전후 동작 위치 허용차 1프레임부터 확인; 결과 홀드 1000~2000ms.

화면 전환

8

푸시 전환Push Transition

뒤 화면이 들어오면서 앞 화면 전체를 같은 방향으로 밀어내는 전환이다.

350~500ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); A xPercent 0→−100, B +100→0; 전환 뒤 800~1500ms 홀드.

슬라이드 전환Slide / Slide-over Transition

새 화면·패널이 고정된 기존 화면 위로 미끄러져 들어오는 전환이다.

250~400ms; ENT: Carbon entrance productive / cubic-bezier(0, 0, 0.38, 0.9); 패널 xPercent 100→0; 패널 간격 24~40px; 내용 리빌 지연 80~120ms.

줌 전환Zoom Transition / Zoom-through

확대·축소를 장면 경계의 연결 동작으로 쓰는 전환이다.

400~650ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); scale 1→1.2~1.5에서 교체; 기준점 차이 2% 이내; 도착 뒤 1000~2000ms 홀드.

모프 전환Morph / Shared-element Transition

대응되는 대상의 위치·크기·모양을 이어 바꿔 다음 상태로 연결하는 전환이다.

450~800ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 대응 대상 1~3개; 후속 대상 간격 80~120ms; 도착 홀드 1200~2500ms.

마스크 전환Mask / Clip-path Transition

가림 영역의 크기·형태를 바꿔 앞뒤 장면의 보이는 범위를 교체하는 전환이다.

400~700ms; ENT: Carbon entrance productive / cubic-bezier(0, 0, 0.38, 0.9); 원 반지름 0→가장 먼 꼭짓점 거리 이상; 도착 홀드 1000~1800ms.

셰이프 전환Shape / Graphic Cover Transition

도형이 프레임을 덮는 순간 장면을 교체하고 다시 열어 주는 전환이다.

450~700ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 덮기 180~280ms, 완전 덮임 50~100ms, 열기 220~320ms; 도형 1~2개.

라이트 리크Light Leak Transition

빛샘처럼 보이는 넓고 부드러운 빛 레이어로 장면 경계를 연결하는 전환이다.

500~800ms; SOFT: cubic-bezier(0.42, 0, 0.58, 1); 빛 opacity 0→0.15~0.3→0; 화면의 1.2~1.5배 크기; 최대 광량 홀드 0~80ms.

핸들Transition Handles

전환에 쓸 수 있도록 편집점 앞뒤에 남겨 둔 원본 여유 구간이다.

원본 여유 각 500~1000ms부터 확보; 효과 이징 적용 안 함; 중앙 정렬 400ms 전환이면 필요한 전후 source handle은 보통 각 200ms.

가상 카메라

9

패럴랙스Parallax

시점 변화에 따라 가까운 층과 먼 층이 다른 양만큼 움직이는 시차이다.

영상 1200~2500ms; LIN: none / cubic-bezier(0, 0, 1, 1); 전경 32~64px, 중경 16~32px, 배경 0~16px; 층 2~3개.

돌리Dolly In / Dolly Out

카메라 위치를 피사체 쪽 또는 반대쪽으로 이동해 원근 관계를 바꾸는 촬영이다.

1000~2000ms; SOFT: cubic-bezier(0.42, 0, 0.58, 1); 3D 기준 대상 거리 10~20% 변경; 평면 모사 scale 1→1.08~1.18.

줌Optical / Digital Zoom

카메라 위치를 유지한 채 화각 또는 화면 배율을 바꾸는 움직임이다.

300~600ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); scale 1→1.3~1.8; 확대 상태 1500~4000ms; 같은 곡선으로 복귀.

팬Pan

고정 위치의 카메라가 좌우로 회전해 보는 방향을 바꾸는 움직임이다.

700~1400ms; SOFT: cubic-bezier(0.42, 0, 0.58, 1); 평면 모사 x 이동 프레임 폭의 10~25%; 양끝 홀드 800~1500ms.
클립Clip · Nº 219 팬Pan

틸트Tilt

고정 위치의 카메라가 위아래로 회전해 보는 방향을 바꾸는 움직임이다.

700~1400ms; SOFT: cubic-bezier(0.42, 0, 0.58, 1); 평면 모사 y 이동 프레임 높이의 10~25%; 도착 홀드 1000~1800ms.

켄 번스Ken Burns Effect

정지 사진·이미지에 느린 팬과 줌을 결합하는 연출이다.

4000~8000ms; LIN: none / cubic-bezier(0, 0, 1, 1); scale 1→1.05~1.12, x/y 이동 프레임의 2~5%; 핵심 도착 뒤 1000~2000ms 홀드.

랙 포커스Rack Focus / Focus Pull

한 숏 안에서 초점이 맞는 거리·대상을 다른 대상으로 이동하는 연출이다.

500~900ms; SOFT: cubic-bezier(0.42, 0, 0.58, 1); 모사 blur 0↔4~8px; 새 초점 홀드 1500~2500ms; 대상 간격 80px 이상부터 시험.

푸시인Push-in / Punch-in

주요 대상을 향해 프레이밍을 점차 좁히는 연출 의도이다.

400~800ms; STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); scale 1→1.08~1.15; 강조 시작은 도착 후 80~150ms; 홀드 1500~2500ms.

돌리 줌Dolly Zoom / Vertigo Effect

카메라 거리와 화각을 반대로 바꿔 주대상 크기는 유지하고 배경 원근을 바꾸는 촬영이다.

800~1500ms; SOFT: cubic-bezier(0.42, 0, 0.58, 1); 대상 화면 크기 유지; 거리 10~20% 변경과 반대 방향 fov 조절.

장면 구조

6

비트Beat / Narrative Beat

주목·이해·감정이 한 번 바뀌는 최소 의미 단위이다.

의미 비트 2000~6000ms부터 시험; 비트 내 변화 250~500ms ENT: Carbon entrance productive / cubic-bezier(0, 0, 0.38, 0.9); 강조 간격 150~300ms.

홀드Hold / Reading Hold

새 변화 없이 핵심 정보가 안정적으로 머무는 구간이다.

짧은 핵심 1000~2000ms, 입력 문장·비교 2000~4000ms부터 시험; 이징 적용 안 함; 새 사건 간격은 읽기 완료 뒤.

리빌Reveal / Progressive Disclosure

가려져 있던 정보를 의도한 순서·시점에 드러내는 사건이다.

250~500ms; ENT: Carbon entrance productive / cubic-bezier(0, 0, 0.38, 0.9); 단계 간격 150~300ms; 전체 공개 뒤 1500~2500ms 홀드.

콜백Callback / Visual Callback

앞서 보여 준 질문·형태·문구를 뒤에서 다시 불러 의미를 완성하는 구성이다.

재등장 250~400ms ENT: Carbon entrance productive / cubic-bezier(0, 0, 0.38, 0.9); 재등장 후 2000~3500ms 홀드; 첫 등장과 시간 간격은 서사에 따라 결정.

설정 숏Establishing Shot

새 장면의 장소·대상·배치를 먼저 알려 주는 숏이다.

전환 컷 0ms 또는 250~400ms STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 전체 구도 홀드 1000~2000ms.

몽타주Montage

여러 짧은 숏을 묶어 과정·시간·주제를 압축하는 구성이다.

숏당 1000~2500ms; 연결 컷 0ms, 이징 적용 안 함; 마지막 요약 홀드 2000~3000ms.

사운드

10

사운드 브리지Sound Bridge

소리의 지속·유사성으로 두 장면을 연결하는 구성이다.

화면 컷 0ms 또는 300~500ms STD: Carbon standard productive / cubic-bezier(0.2, 0, 0.38, 0.9); 브리지 구간 500~1500ms부터 시험; 음원 접합 30~80ms LIN: none / cubic-bezier(0, 0, 1, 1).

우시·스우시Whoosh / Swoosh

짧은 공기·스윕 소리로 방향 이동을 보조하는 효과음이다.

150~350ms, envelope 20~40ms 진입·80~150ms 퇴장 L, 다음 사용 3000ms 이상, 시각 400ms S

히트·임팩트Hit / Impact

짧은 어택으로 중요한 도착·발견·완료를 표시하는 소리이다.

80~250ms, 짧은 attack·100~200ms release L, 주제당 1회부터, 시각 강조 150ms E

라이저Riser

피치·밀도·음량이 올라가며 다음 사건을 예고하는 소리이다.

600~1200ms, envelope L, 끝점은 사건 큐, 3~5분 영상 0~2회부터, 전환 400ms S

앰비언스·룸톤Ambience / Room tone

공간의 지속적인 배경음을 만들어 음향 연결을 유지하는 소리이다.

fade 400~800ms L, 소스 길이 안에서 사용, 음성보다 약 18~24dB 낮게 시험, 도해는 정지 H

음악 베드Music bed

내레이션 아래 낮게 깔아 전체 분위기·리듬을 지지하는 음악이다.

fade 800~1500ms L, 음성보다 약 15~24dB 낮게 시험, 읽기 H

덕킹Ducking

음성이 나올 때 음악·배경음을 내려 말이 잘 들리게 하는 믹싱이다.

상대 감쇠 6~12dB부터, attack 100~250ms L, release 400~800ms L, 복귀 전 쉼 300~500ms

음향 모티프·이어콘Sonic motif / Earcon

같은 상태·행동에 같은 짧은 소리를 대응시키는 신호이다.

80~200ms, 최소 사용 간격 1000ms, UI 강조 110ms E

침묵·사운드 여백Silence / Negative sonic space

의도적으로 소리 밀도를 낮춰 사고·강조 시간을 만드는 설계이다.

쉼 800~2000ms H, 음악 퇴장 400ms L, 시각은 완성 화면 H

페이드·크로스페이드Audio fade / Crossfade

음량을 점진적으로 바꾸거나 두 소리를 겹쳐 매끈하게 연결하는 처리이다.

일반 fade 300~800ms L, 클릭 방지 경계 5~20ms L부터 시험, 겹침 200~600ms

키네틱 타이포

11

타자기Typewriter

글자를 하나씩 불연속으로 공개하는 텍스트 연출이다.

40~70ms/글자, 어절 쉼 150~250ms, 완료 홀드 1000~1600ms; Q, 글자 사이 이동 0px.

글자별 스태거Per-character stagger

글자마다 짧은 시차를 줘 진입시키는 방식이다.

글자당 240~360ms, 시작 간격 20~35ms, 총 시차 ≤500ms; E, y 8~16px.

단어 강조Word emphasis

이미 읽히는 문장에서 특정 단어의 대비를 잠깐 높이는 방식이다.

진입 150~220ms, 유지 800~1400ms, 복귀 180ms; PE, scale 1→1.03 이하, 강조 간격 ≥600ms.

스크램블Text scramble / Decode

가짜 문자 상태를 거쳐 최종 문자를 확정하는 연출이다.

총 350~600ms, 교체 간격 50~80ms, 확정 홀드 ≥1200ms; L 드라이버+Q, 글자 이동 0px.

마스크 텍스트Masked text reveal

고정된 잘림 영역 안에서 글자나 행을 드러내는 방식이다.

행당 350~500ms, 행 시차 80~120ms; E, y 0.8~1행 높이, 행 간격 12~20px.

하이라이트 스윕Highlight sweep

형광펜 같은 면이 글자 뒤로 지나가며 남는 강조이다.

350~550ms, 유지 1200~2000ms, 다음 강조 간격 ≥500ms; E, 배경판 scaleX 0→1, 상하 여백 4~6px.

밑줄 드로우Underline draw

선이 한쪽 끝에서 다른 끝으로 그려지는 강조이다.

250~400ms, 유지 ≥1500ms, 동시 선 1개; E, 두께 2~4px, 글자와 간격 5~8px.

카운트업Count-up

시작값에서 목표 숫자까지 표시값을 증가시키는 연출이다.

600~1000ms, 완료 홀드 ≥1200ms, 숫자 갱신 33~50ms 또는 렌더 프레임; L 또는 P, 이동 0px.

단어 릴레이Word relay

짧은 어구가 순서대로 초점을 넘기는 제목 구성이다.

어구당 350ms 진입+900~1400ms 홀드, 시차 1200~1800ms; E/X, x 24~48px.

발화 동기 강조Speech-synchronized emphasis

발화 시각에 맞춰 현재 어구를 강조하는 방식이다.

발화 시작±0~100ms, 진입 100~150ms, 어구 간격은 실제 타임스탬프; PE, 이동 0px.

분절 단위Grapheme / Word / Line segmentation

문자를 애니메이션 대상 묶음으로 나누는 설계 단위이다.

준비 단계 처리, 글자 시차 20~35ms·어구 80~120ms; E/Q, 행 간격 12~20px.

데이터 애니메이션

11

막대 성장Bar growth

같은 기준선에서 막대 길이가 목표값까지 자라는 동작이다.

500~800ms, 항목 간격 50~90ms, 전체 시차 ≤400ms; L 또는 P, 막대 간격 16~24px.

선 그리기Path draw / Stroke reveal

경로의 선분을 순서대로 드러내는 방식이다.

700~1200ms, 경로 시차 100~180ms; L, 선 2~4px, 주석 등장은 완료 후 150ms.

점 이동 트랜지션Point transition / Object constancy

같은 데이터 객체를 유지하며 좌표만 이동시키는 동작이다.

600~1000ms, 동시 시작 또는 그룹 시차 40~70ms; S/P, 점 반경 5~8px, 라벨 간격 ≥12px.

모프·보간Morphing / Interpolation

두 상태 사이의 수치·형상을 연속적으로 계산하는 방식이다.

600~900ms, 단계 홀드 1200~1800ms; S 또는 L, 대응 요소 간격 고정.

단위 격자 채우기Unit grid / Waffle fill

동일 면적의 칸을 일정 단위만큼 채우는 방식이다.

칸당 80~120ms, 시작 간격 10~20ms, 전체 700~1200ms; Q 또는 PE, 칸 간격 4~8px.

줌 인셋Zoom inset / Detail view

전체 맥락을 남긴 채 일부 영역을 별도 창에 확대한다.

확대 450~650ms, 홀드 1600~2400ms; S, 확대 1.8~3배, 원본·인셋 간격 32~48px.

주석 등장Annotation reveal

데이터의 특정 위치에 설명과 화살표를 순차 공개한다.

선 250~350ms, 텍스트 180~250ms, 후행 100~150ms, 홀드 ≥1800ms; E, 주석·점 간격 16~24px.

스크롤리텔링 단계Scrollytelling steps

스크롤 구간별 데이터 상태와 설명을 연결한다.

영상 환산 단계당 800ms 변화+1800ms 홀드; S, 웹 p 구간·pinVh 220~300 시작값, scrub 600ms.

순위 재배치Rank transition

값 변화에 따라 같은 항목의 표시 순서를 이동한다.

500~800ms, 변경 후 홀드 ≥1600ms; P, 행 높이 48~64px, 시차 0~40ms.

누적 채우기Cumulative fill / Progress fill

정해진 전체에서 사용·완료된 양을 채우는 동작이다.

350~600ms/변경, 단계 사이 ≥700ms; L/P, 진행 막대 높이 12~20px.

변화의 정직성Faithful data transition

애니메이션 중간값과 표시 목적을 구분하는 설계 규칙이다.

수치 전환 500~800ms; L/P, 축·단위 고정, 변경점 사이 홀드 ≥1500ms.

UI 시연

7

커서 이동Cursor movement

포인터가 조작할 목표까지 이동하는 시연 동작이다.

이동 350~600ms, 목표 도착 후 120~200ms 쉼; S, 목표 중앙 또는 실제 클릭 지점, 커서 주변 여백 ≥16px.

클릭 리플Click ripple

클릭 위치에서 짧게 퍼지는 원형 피드백이다.

250~400ms, 후속 UI 반응 0~150ms 뒤; PE, 원 반경 12→28px, 최대 opacity 0.25.

타이핑 입력Typing input simulation

입력창에 키 입력, 쉼, 붙여 넣기 상태를 재현한다.

60~120ms/완성 글자, 구간 쉼 250~400ms, 핵심 입력 전체 2000~4000ms; Q, 캐럿 주기 800~1000ms.

답 스트리밍Answer streaming

응답 문장이 여러 청크로 점진적으로 표시되는 연출이다.

청크 간 50~140ms, 문단 쉼 200~400ms, 핵심 답 2000~5000ms; Q, 줄 간격 1.45~1.6.

화면 스크롤UI scroll demonstration

콘텐츠 뷰포트 안에서 문서가 이동하는 시연이다.

500~900ms, 도착 후 홀드 ≥1600ms; S, 이동 0.5~1화면 높이, 상하 안전 여백 48~72px.

확대 콜아웃Magnified callout / UI focus zoom

특정 UI 영역을 확대하고 바깥 맥락을 낮추는 연출이다.

450~650ms 확대, 홀드 1800~2500ms, 복귀 400ms; S, scale 1.4~2.2, 목표·자막 간격 ≥48px.

포커스·선택·피드백Focus / Selection / Feedback

행동할 대상과 선택 결과를 시각 상태로 구분한다.

포커스 100~150ms, 선택 150~200ms, 완료 200~300ms; PE/P, 테두리 2~3px, 상태 간격 ≥150ms.

AI 원리 도해

6

토큰 쪼개기Tokenization split

문자열을 토크나이저 결과에 대응하는 조각으로 나누는 도해이다.

경계 공개 200~300ms, 칩 이동 400~600ms, 시차 30~60ms, 홀드 ≥1800ms; E/S, 칩 간격 8~12px.

임베딩 점 이동Embedding projection / Point movement

토큰·문서를 벡터 표현의 축소 지도에 배치하는 도해이다.

800~1200ms, 시차 30~50ms, 홀드 ≥2000ms; S, 점 6~10px, 라벨 간격 ≥16px.

어텐션 선 굵기Attention weight encoding

선 굵기와 농도로 특정 질의 토큰의 가중치를 표현한다.

선 공개 400~600ms, 질의 전환 300~500ms, 홀드 ≥1800ms; P, 선 1~6px, 라벨 간격 12~20px.

확률 막대Next-token probability bars

다음 토큰 후보들의 조건부 확률을 길이로 표시한다.

500~800ms 분포 공개, 후보 선택 180~250ms, 단계 홀드 ≥1800ms; L/P, 막대 간격 16~24px.

컨텍스트 창 채우기Context window fill

입력, 대화, 자료 등의 토큰 예산 점유를 채움으로 표시한다.

구간당 350~600ms, 구간 간 250~400ms, 완료 홀드 ≥2000ms; L/P, 구간 경계 2~4px.

자동회귀 생성 루프Autoregressive generation loop

선택된 토큰을 시퀀스에 붙이고 다음 분포를 갱신하는 반복 도해이다.

분포 500ms→선택 200ms→추가 350ms→홀드 500~800ms; L/P, 토큰 칩 간격 8~12px.

학습 원리

21

멀티미디어 원리Multimedia principle

말만 제시하기보다 관련 그림과 말을 결합해 의미 모델을 만들게 하는 원리이다.

그림 진입 240ms E, 관련 설명 4000~8000ms H, 한 장면의 핵심 관계 1개

일관성·불필요 요소 제거Coherence principle

학습 목표와 무관한 말·그림·소리를 제외해 외재적 처리를 줄이는 원리이다.

제거 0ms H, 필요한 보조 표시만 150ms E, 효과음 간격 최소 3000ms로 시험

신호 주기Signaling principle

핵심 정보의 조직을 드러내는 단서를 더하는 원리이다.

강조 150~240ms E, 유지 1200~3000ms H, 단계 간격 400~800ms

중복 제거Redundancy principle

그림·음성·동일한 긴 화면 문장을 겹쳐 제시할 때 생기는 불필요한 처리를 줄이는 원리이다.

본문 전환 150ms E, 요점 1~2줄 H, 자막은 발화 타임코드에 맞춰

공간 근접Spatial contiguity principle

대응하는 말과 그림을 가까이 배치해 연결 탐색을 줄이는 원리이다.

라벨 진입 150ms E, 대상과 라벨 12~24px 간격, 설명 동안 H

시간 근접Temporal contiguity principle

대응하는 말과 그림을 순차 분리보다 동시에 제시하는 원리이다.

의미 이벤트 동기 오차 목표 ±100ms, 이동 400ms S, 사건 뒤 800~1500ms H

분할Segmenting principle

연속 설명을 학습자가 속도를 조절할 수 있는 의미 단위로 나누는 원리이다.

영상 단위 15000~35000ms H, 경계 쉼 800~1500ms, 버튼 피드백 110ms E

사전 훈련Pre-training principle

주요 개념의 이름과 특성을 먼저 알게 한 뒤 복잡한 과정을 설명하는 원리이다.

용어 2~3개, 각 3000~5000ms H, 진입 240ms E, 간격 500ms

양식·모달리티Modality principle

관련 그림을 설명하는 말을 긴 인쇄 문장보다 음성으로 제공해 시각 처리를 분산하는 원리이다.

도해 600~1000ms S, 설명 3000~6000ms H, 화면 핵심어 3~8어절

개인화Personalization principle

딱딱한 비인칭 설명보다 대화·정중한 표현으로 협력감을 만드는 원리이다.

상황 5000~10000ms H, 쉼 300~600ms, 관련 카드 240ms E

목소리Voice principle

연구 조건에서 기계적 합성음보다 사람 목소리의 설명이 더 나은 학습을 보인 원리이다.

의미 구간 쉼 200~500ms, 핵심 뒤 500~1000ms H, 시각 강조 150ms E

이미지 원리Image principle

강사나 가상 에이전트의 얼굴을 추가해도 학습이 반드시 좋아지지는 않는다는 원리이다.

얼굴 소개 3000~6000ms H, 제거 150ms X, 본편 도해 240ms E

체화Embodiment principle

교육용 에이전트의 의미 있는 몸짓·시선·표정이 학습을 도울 수 있다는 원리이다.

몸짓 400~600ms S, 대상 강조 150ms E, 유지 1200~2500ms

몰입 원리Immersion principle

더 몰입적인 환경이 학습을 자동으로 향상시키지는 않는다는 원리이다.

기본 0ms H, 필요한 확대 400ms S, 확대 사이 3000ms 이상

생성 활동Generative activity principle

요약·자기 설명·그리기·조작으로 자료를 조직하고 기존 지식과 연결하게 하는 원리이다.

질문 4000~8000ms H, 영상 답 공개 전 2000~4000ms, 체험 대기는 사용자 결정, 피드백 150ms E

인지 부하Cognitive load

제한된 작업 기억을 쓰는 정신적 노력이며 내용과 제시 방식·사전 지식의 영향을 받는 개념이다.

새 핵심 1개씩, 진입 240ms E, 이해 홀드 3000~6000ms, 다음 변화 600~1000ms 뒤

내재적 부하·요소 상호작용Intrinsic load / Element interactivity

내용 요소의 상호 관계와 학습자의 지식에 따라 생기는 과제 복잡성이다.

부품 설명 각 3000~5000ms H, 연결 600ms S, 연결 간격 1000ms

외재적 부하Extraneous load

학습 목표에 도움이 안 되는 탐색·기억·혼란이 만드는 부담이다.

불필요 모션 0ms H, 필요한 상태 피드백 110~150ms E, 라벨 간격 12~24px

본유적 부하·생성적 처리Germane load / Generative processing

의미 조직·통합에 들이는 노력을 다루는 개념이며 두 이론의 용어를 완전 동의어로 취급하지 않는다.

비교 5000~10000ms H, 변화 240ms E, 답 공개까지 2000~4000ms

일시성 문제Transient information effect

정보가 사라져 앞부분을 기억한 채 뒷부분을 처리해야 하는 부담이다.

단계 3000~6000ms H, 기록 진입 150ms E, 단계 간격 800ms

전문성 역전Expertise reversal effect

초보에게 유용한 안내가 숙련자에게 중복 부담이 될 수 있다는 효과이다.

설명 0ms H로 건너뛰기 허용, 피드백 110ms E, 안내 3000ms 이상

공개와 시선 유도

12

점진적 공개Progressive disclosure

현재 과제에 필요한 정보를 먼저 보이고 상세는 다음 단계나 요청에 공개하는 설계이다.

진입 240ms E, 단계 간격 800~1500ms, 읽기 2000~4000ms H

시각 위계·스테이징Visual hierarchy / Staging

중요 대상의 크기·대비·배치·움직임을 조절해 주제를 명료하게 제시하는 구성이다.

주요 진입 240ms E, 보조 150ms E, 120ms 간격, 핵심 3000ms H

단일 초점·주의 예산Single focal point / Attention budget

한 순간의 주된 주의 요청을 하나로 제한하는 제작 규칙이다.

주모션 1개, 240~600ms S, 다음 초점까지 300~800ms

주석·콜아웃Annotation / Callout

대상 옆의 짧은 설명과 연결선으로 의미를 붙이는 표시이다.

선 240ms L, 라벨 150ms E, 80ms 간격, 유지 2500~5000ms H

스포트라이트·배경 약화Spotlight / Dimming

주변 대비를 낮춰 현재 읽을 영역을 상대적으로 드러내는 강조이다.

약화 240ms S, 오버레이 opacity 0.15~0.30, 유지 1500~3000ms H

포커스 줌·리프레임Focus zoom / Reframing

화면의 관련 영역을 읽을 크기로 확대하고 구도를 다시 잡는 기법이다.

400~700ms S, scale 1.15~1.40부터 시험, 확대 후 2500~5000ms H

커서 안무·행동 단서Cursor choreography / Action cue

커서의 이동·정지·클릭 표시를 실제 조작 순서에 맞추는 기법이다.

이동 400~700ms S, 사전 정지 200~400ms H, 클릭 링 150ms E, 링 1회

방향 단서·연결선Directional cue / Connector

선·화살표의 방향으로 관계나 흐름을 표시하는 신호이다.

선 그리기 400~800ms L, 도착 강조 150ms E, 단계 간격 500ms

색·형태의 의미 고정Semantic color / Shape consistency

같은 역할에 같은 시각 부호를 유지하는 설계이다.

상태 변화 150ms E, 역할색 3~4개부터 시험, 라벨 상시 H

전후 비교·변수 고정Before~after / Controlled comparison

조건을 고정하고 바꾼 부분과 결과를 나란히 보여 주는 설명이다.

A/B 진입 240ms E, 120ms 간격, 비교 5000~8000ms H

객체 지속성·앵커 유지Object constancy / Persistent anchor

상태가 변해도 같은 객체의 위치·표식을 유지해 추적하게 하는 기법이다.

변형·이동 400~700ms S, 도착 홀드 2000~4000ms, 같은 앵커 최소 1개

요약·재진술Recap / Restatement

앞서 본 관계를 짧은 고정 화면과 자기 언어로 다시 정리하는 설계이다.

요약 진입 240ms E, 행 간격 150ms, 유지 6000~10000ms H

템포와 비트

9

템포·페이싱Tempo / Pacing

정보·발화·시각 변화가 진행되는 속도와 여유를 설계하는 개념이다.

단순 행동 1500~3000ms H, 새 관계 4000~8000ms H, 전환 240~400ms S

리듬·강약Rhythm / Accent

변화와 정지, 큰 사건과 작은 사건의 반복·변주 패턴이다.

작은 변화 150~240ms E, 큰 변화 400~600ms S, 정지 2000~5000ms H

의미 비트Semantic beat

한 가지 설명 사건·주장·관계가 완성되는 내용 단위이다.

비트 5000~15000ms H 포함, 주동작 400~800ms S, 비트 사이 쉼 500~1000ms

음악 비트·박자 그리드Musical beat / Beat grid

BPM·강박·마디를 기준으로 음악의 시간 구조를 표시하는 개념이다.

80~110 BPM부터 시험, 1박=60000/BPMms, 100 BPM=600ms, 박자 기준 H

비트 싱크Beat synchronization

시각 사건의 시작·도착·컷을 선택한 소리 사건에 맞추는 기법이다.

동기 목표 ±1프레임, 30fps=33.3ms, 이동 400ms S, 음악 강조는 2~4박 간격

홀드·세틀·호흡Hold / Settle / Breathing room

도착 후 물체를 멈춰 읽고 의미를 연결하게 하는 시간이다.

settle 150~300ms S, 읽기 홀드 2500~6000ms H, 복잡한 비교 8000ms부터

하드컷·의미 경계Hard cut / Semantic boundary

겹침 없이 바로 다음 화면으로 바꾸는 편집이다.

컷 0ms H, 경계 전후 쉼 150~300ms, 다음 화면 3000ms 이상 H

사운드 브리지·J컷·L컷Sound bridge / J-cut / L-cut

J컷은 다음 소리가 다음 화면보다 먼저, L컷은 이전 소리가 다음 화면까지 이어지는 편집이다.

선행·잔류 200~600ms, 화면은 0ms H 또는 240ms S, 연결은 장면당 1회부터

시간 압축·생략 표시Time compression / Ellipsis

무의미한 대기를 줄이되 생략·배속을 시청자에게 알리는 편집이다.

생략 컷 0ms H, 표시 150ms E·1500~2500ms H, 조작 전후 500ms 보존

자막과 화면 글

8

접근성 자막·충실성Accessible captions / Fidelity

발화와 이해에 필요한 비언어 소리를 정확히 시간에 맞춰 글로 제공하는 기능이다.

음성과 시작·끝 동기 목표 ±100ms, 등장 0ms H, 읽는 동안 위치 고정

의미 단위 분절·줄바꿈Semantic chunking / Line breaking

문법·의미가 이어지는 어절을 같은 덩어리로 보여 주는 규칙이다.

1~2줄, 한 줄 14~22 한글 음절부터 시험, 노출 1500~4000ms H, 항목 전환 0~80ms L

읽기 속도·체류 시간Reading speed / Dwell time

자막 길이에 필요한 노출 시간을 확보하는 설계이다.

8~12 grapheme/초부터 시험, 최소 약 1200ms H, 3000~5000ms도 허용, ease H

세이프존·대비·가림 방지Safe area / Contrast / Occlusion

자막과 핵심 조작 영역이 잘리고 가려지지 않게 배치하는 규칙이다.

1080p 기준 자막 42~56px부터, 좌우 5%·하단 8~12% 여백, 일반 글자 대비 4.5:1 이상, H

요약 텍스트·강조 자막Summary text / Emphasis caption

발화 전체와 구별되는 짧은 요점·핵심어의 시각 신호이다.

요점 진입 150ms E, 핵심어 1개, 유지 2500~5000ms H, 자막과 24px 이상 간격

카라오케 강조·단어 추적Karaoke emphasis / Word tracking

현재 발화 중인 단어·구를 색 등으로 표시하는 방식이다.

단어 타임코드 기준 0ms H, 강조 fade 80~110ms L 선택, 위치·scale 고정

타이핑·완성 상태 공개Typewriter / Complete-state reveal

입력 행동은 순차로, 읽어야 하는 결과는 완성된 덩어리로 보여 주는 규칙이다.

타이핑 35~70ms/grapheme, steps(1,end) H, 문단 150~240ms E, 완성 뒤 2500~5000ms H

용어 표기·발음 분리Terminology consistency / Pronunciation mapping

화면의 정확한 표기와 음성용 읽기를 대응표로 관리하는 규칙이다.

첫 소개 3000~5000ms H, 괄호 보조 150ms E, 이후 동일 표기

설명 채널 연출

5

3Blue1Brown식 지속 도해·변환Persistent diagram / Visual transformation

한 그림의 대응 관계를 유지하며 질문·예측·변환으로 원리를 펼치는 패턴이다.

변환 600~1000ms S, 단계마다 3000~6000ms H, 신규 관계 간격 1000ms

Kurzgesagt식 벡터 비유·스케일 전환Vector metaphor / Scale transition

일관된 벡터 세계와 구체적 비유로 복잡한 주제를 접근 가능하게 만드는 패턴이다.

비유 소개 4000~6000ms H, 줌 600~1000ms S, 도착 후 3000ms H

Vox식 질문·근거 화면·주석Question / Evidence frame / Annotation

질문을 제시하고 지도·문서·데이터 화면의 관련 부분에 주석을 붙이는 참고 패턴이다.

질문 3000~5000ms H, 근거 확대 400ms S, 주석 240ms E, 근거 읽기 5000~8000ms H

Fireship식 압축 정의·사례·절차Compressed definition / Example / Procedure

짧은 정의에서 사례·실행 절차로 빠르게 넘어가는 압축 패턴이다.

우리 정의 4000~6000ms H, 사례 8000~12000ms H, 시각 변경 240ms E, 밈 기본 0개

채널 패턴 혼합·우리 기본형Pattern adaptation / House style

도해 지속성·벡터 일관성·근거 주석·짧은 정의를 학습 목적에 맞춰 조합하는 규칙이다.

기본 모션 150~400ms E/S, 원리 변환 600~1000ms S, 읽기 3000~6000ms H, 장면당 2~3기법

금지 목록

6

모션 과잉 금지Excessive motion

학습 대상과 무관한 연속 움직임·반복 강조를 제거하는 제한이다.

장식 0ms H, 핵심 강조 150ms E 1회, 단계 간격 800ms 이상

장식 3D·카메라 회전 금지Decorative 3D / Camera orbit

공간 관계를 설명하지 않는 입체·원근·회전 연출을 기본 제외하는 제한이다.

기본 0ms H, 의미 있는 깊이 비교에만 600~1000ms S, 끝에 4000ms H

읽는 텍스트 왜곡 금지Text distortion / Decorative text animation

읽어야 하는 문장에 blur·stretch·회전·무작위 글자 연출을 적용하지 않는 제한이다.

자막 0ms H, 제목 opacity·y 150~240ms E, 제목 이동 8~16px

번쩍임·급격한 전체 이동 금지Flashing / Vestibular trigger

반복 점멸·큰 줌·회전으로 불편을 유발할 수 있는 연출을 제외하는 제한이다.

플래시 기본 0회, 경고 fade 150ms E, 전체 줌 대신 0ms H 정적 대안

가짜 인과·허위 정밀도 금지False causality / False precision

설명용 움직임·숫자를 실제 내부 처리·실측치로 오해하게 만들지 않는 제한이다.

표시 진입 150ms E, 관련 장면 내내 H, 숫자 count-up 기본 0ms

애니메이션 대기 강제 금지Blocking animation

반복 조작 때 연출 완료를 기다려야 하는 인터랙션을 제한하는 규칙이다.

조작 피드백 70~110ms E, 결과 공개 150~240ms E, 중단·건너뛰기 0ms H