도판 00. 임팩트 효과 몽타주Fig. 00. Impact effects montage무한 캔버스 팬Infinite Canvas Pan · 카메라 플라이스루Camera Fly-through · 무한 줌 스루Infinite Zoom · 깊은 다층 패럴랙스Deep Multi-layer Parallax · 대형 키네틱 타이포 스윕Kinetic Type Sweep · 대형 마스크 리빌Giant Mask Reveal
AWESOME AI MOTION · 에이전트에게 먹이는 모션 사전AWESOME AI MOTION · A MOTION DICTIONARY YOUR AGENT CAN READ
모션 기법 도감A field guide to
Motion for agents
무한 팬과 플라이스루부터 오버랩, 매치컷, 막대 성장, 토큰 쪼개기까지. 효과마다 정의, 기본 파라미터, 과용 주의, 구현 코드, 그리고 Claude Code와 Codex에 그대로 붙여 넣는 프롬프트를 한 장에 모았다. 클립은 전부 같은 종이, 같은 먹, 같은 주홍으로 그려 움직임만 비교된다.From infinite pans and fly-throughs to overlapping action, match cuts, bar growth and token splits. Every effect gets a definition, tuned defaults, overuse warnings, implementation code, and prompts you can paste straight into Claude Code or Codex. Every clip is drawn with the same paper, ink and vermilion, so only the motion differs.
637
정의한 기법techniques defined
128
기준 클립reference clips
11
조합 레시피recipes
7
용도별 루트design routes
01
대표 효과Featured
임팩트 큰 효과와 가장 많이 쓰는 효과High-impact effects and the ones used most
Nº 233무한 캔버스 팬Infinite Canvas PanInfinite Canvas Pan
여섯 도판이 이어진 긴 지면을 가로 5400px 이동해 마지막 초점에 멈춘다A continuous 5,400px camera pan across six editorial plates settles on a scarlet focus.
Nº 557카메라 플라이스루Camera Fly-throughCamera Fly-through
깊이 900px 간격의 일곱 평면을 카메라가 통과하며 마지막 핵심어에 멈춘다A camera flies through seven planes spaced 900px apart and stops on the final keyword.
Nº 234무한 줌 스루Infinite ZoomInfinite Zoom
작은 주홍 점 속의 다음 도판으로 세 번 연속 파고들며 2744배 확대한다Dive into a scarlet dot three times as nested plates expand through a continuous 2,744× zoom.
Nº 561깊은 다층 패럴랙스Deep Multi-layer ParallaxDeep Multi-layer Parallax
7겹 지면이 서로 다른 속도로 흘러 깊이를 드러내는 카메라 이동A horizontal camera move reveals depth through seven independently paced editorial layers.
Nº 096대형 키네틱 타이포 스윕Kinetic Type SweepKinetic Type Sweep
200px 넘는 세리프 문장 세 줄이 서로 반대 방향, 다른 속도로 화면을 가로지르고 마지막에 핵심어 하나만 정중앙에 급정지한다.Three lines of 200px+ serif type sweep across the frame in opposite directions at different speeds, then one key word slams to a stop dead center.
Nº 232대형 마스크 리빌Giant Mask RevealGiant Mask Reveal
화면을 채운 큰 숫자 939가 창이 되어 안쪽 세계를 비추고, 카메라가 획 속으로 파고들어 세계 전체가 드러난다.A frame-filling 939 acts as a window onto an editorial world, and the camera dives into a stroke until the whole world is revealed.
Nº 529입자 흩어졌다 모이기Particle Scatter & AssembleParticle Scatter & Assemble
화면 전체에 흩어져 떠 있던 입자 수백 개가 날아와 큰 숫자 하나의 모양을 이룬다Hundreds of particles floating across the frame fly in and assemble into one large number.
Nº 181매치컷 모프Morph Match CutMorph Match Cut
주홍 원이 같은 자리·같은 크기의 글자 O로 한 프레임에 컷되고, 그 O가 도넛 차트로 모프된다.A vermilion circle hard-cuts to a serif letter O at the same position and size, then the O morphs into a 62% donut chart.
Nº 5583D 카드 플립 스택3D Card Flip Stack3D Card Flip Stack
겹친 종이 다섯 장이 순차로 뒤집혀 뒤로 쌓이는 3D 전환Five overlapping paper sheets flip in sequence and stack behind a frontal final card.
Nº 2363D 원근 틸트 리빌Perspective Tilt RevealPerspective Tilt Reveal
편집 지면을 55도로 눕혀 전체 격자를 드러내고 한 도판으로 돌아오는 카메라 이동An editorial page tilts back by 55 degrees to reveal its grid before returning to one frontal figure.
Nº 194셰이더 와이프Shader Directional Warp WipeShader Directional Warp Wipe
휘어진 부드러운 대각 경계가 화면을 쓸고 지나가며, 경계 근처의 두 도판이 진행 방향으로 늘어나 번진다A soft, bent diagonal edge sweeps across the frame while both plates near the edge stretch and smear along the direction of travel.
Nº 184노이즈 디졸브 전환Noise Dissolve TransitionNoise Dissolve Transition
노이즈 값이 진행률보다 낮은 픽셀부터 지워져 앞 장면에 얼룩진 구멍이 번지고 다음 장면이 드러난다Pixels whose noise value falls below the progress disappear first, so blotchy holes spread through the first scene and reveal the next.
Nº 475라이트 스윕Light SweepLight Sweep
기울어진 빛 띠가 큰 숫자와 제목 글자 안쪽만 한 번 훑고 지나가 인쇄된 금속 광택처럼 보이게 한다.A tilted band of light passes once through a giant number and title, only inside the glyphs, like a metallic print sheen.
Nº 238스크롤 스크럽 시네마Scroll-scrub Cinema SceneScroll-scrub Cinema Scene
고정된 장면 하나에서 스크롤 진행률 p 하나가 제목 마스크, 도해 조립, 배경 숫자 패럴랙스를 함께 움직인다.In one pinned scene, a single scroll progress value p drives a title mask reveal, an assembling diagram, and a parallaxing background number together.
Nº 218켄 번스Ken BurnsKen Burns
한 정지 도판을 천천히 확대하고 비스듬히 옮기는 카메라 움직임A camera move that slowly zooms into a still image while panning diagonally.
Nº 220패럴랙스ParallaxParallax
카메라가 이동할 때 가까운 층은 빠르게, 먼 층은 느리게 흘러 깊이를 만드는 움직임A motion effect that creates depth by moving nearer layers faster and distant layers more slowly as the camera moves.
동작별Motion
목적별Purpose
매체별Medium
난이도Level
02
클립 갤러리Clip gallery
화면에 들어온 클립은 저절로 재생된다. 비교 버튼으로 나란히 보기Clips play as they scroll into view. Use Compare to watch them side by side기본기
PRINCIPLES디즈니 12원칙, 이징, 타이밍과 간격. 모든 움직임의 문법 · 클립 9Disney's 12 principles, easing, timing and spacing. The grammar of all motion · 9 clips
Nº 001오버랩Overlapping ActionOverlapping Action
한 물체의 부위들이 같은 방향으로 움직이되 출발과 정지 시각이 조금씩 어긋나는 움직임Parts of an object move in the same direction with slightly offset start and stop times.
Nº 002예비동작AnticipationAnticipation
주 동작 전에 반대 방향으로 짧게 움직여 다음 움직임을 예고하는 기법A brief movement in the opposite direction prepares the viewer for the main action.
Nº 003이징EasingEasing
같은 거리와 시간을 유지하면서 진행률에 따른 속도를 바꾸는 움직임Easing changes velocity over the course of an animation while keeping its distance and duration constant.
Nº 004스프링 오버슛Spring & OvershootSpring & Overshoot
목표 크기를 조금 넘었다가 되돌아와 안착하는 움직임An object briefly exceeds its target scale before returning and settling.
Nº 005스쿼시 앤 스트레치Squash & StretchSquash & Stretch
속도가 붙으면 늘어나고 충돌하면 납작해지되 두 축의 배율 곱을 일정하게 유지하는 변형An object stretches as it gains speed and squashes on impact while keeping the product of its axis scales constant.
Nº 006스태거StaggerStagger
여러 요소를 일정한 시간차로 차례로 등장시키는 움직임Multiple elements appear in sequence with a consistent delay between them.
Nº 007아크ArcsArcs
물체가 직선 대신 휘어진 궤적을 따라 이동하는 기법An object follows a curved trajectory instead of a straight line.
Nº 008팔로스루Follow-throughFollow-through
몸통이 멈춘 뒤 붙어 있는 끝부분이 관성으로 더 움직였다가 늦게 정지하는 기법An attached extremity continues moving through inertia after the main body stops, then settles later.
Nº 009모션 위계Motion HierarchyMotion Hierarchy
중요한 정보부터 크기와 등장 시간을 달리해 읽는 순서를 만드는 움직임Differences in scale and entrance timing establish a reading order that prioritizes important information.
등장·퇴장
ENTRANCE & EXIT요소가 화면에 들어오고 나가는 방식 · 클립 5How elements come in and leave · 5 clips
Nº 029블라인드 리빌Blinds RevealBlinds Reveal
여러 띠나 블라인드가 조금씩 다른 시점에 열려 전체 이미지를 완성한다.Staggered strips open to assemble a complete image.
Nº 030블러 리빌Blur RevealBlur Reveal
흐릿한 글자나 이미지가 선명해지면서 나타난다.Blurred text or imagery resolves into sharp focus.
Nº 038페이드 슬라이드Fade SlideFade Slide
요소가 가장자리나 조금 낮은 위치에서 이동하며 선명하게 나타난다.An element fades in while sliding into position.
Nº 041플립 등장Flip RevealFlip Reveal
얇은 옆면으로 보이던 요소가 3D 축을 돌아 정면으로 나타난다.An edge-on element rotates around a 3D axis to face the viewer.
Nº 053스케일 팝Scale PopScale Pop
요소가 작은 크기에서 제 크기로 커져 멈춘다. 반대로 축소되어 사라질 수 있다.An element grows from a small scale to its final size.
강조·주의
EMPHASIS이미 보이는 것 중 하나로 시선을 끌어오는 방식 · 클립 4Pulling the eye to something already on screen · 4 clips
Nº 069펄스PulsePulse
요소가 제자리에서 살짝 커졌다 원래 크기로 돌아오는 맥동A short scale beat where an element grows slightly and returns to its size in place.
Nº 076둘레선 강조CircumscribeCircumscribe
대상 바깥에 원이나 사각 테두리가 그려졌다가 지워지는 임시 강조A circle or rectangle is drawn around a target and then erased.
Nº 079강조점 순회Focus HandoffFocus Handoff
이미 배치된 여러 항목 중 하나씩 색이나 빛이 켜졌다가 다음 항목으로 옮겨 간다Among items already laid out, one lights up at a time and the highlight hands off to the next.
Nº 083셰이크ShakeShake
요소가 기준 위치나 각도의 양쪽을 오가다가 멈춘다An element oscillates on both sides of its rest position or angle, then stops.
타이포
TYPOGRAPHY글자가 등장하고 바뀌고 강조되는 방식 · 클립 9How text appears, changes and gets emphasis · 9 clips
Nº 088글자별 스태거Per-character RisePer-character Rise
글자들이 아래에서 위로 시간차를 두고 올라오며 불투명해지는 효과Characters rise from below and fade in with a staggered delay.
Nº 089하이라이트 스윕Highlight SweepHighlight Sweep
핵심 구절 뒤의 형광펜 띠를 왼쪽에서 오른쪽으로 칠하는 효과A highlighter band sweeps from left to right behind a key phrase.
Nº 090키네틱 비트Kinetic BeatsKinetic Beats
단어를 일정한 박자마다 중앙에 크게 찍고 빠르게 정착시키는 효과Words hit the center at a large scale on regular beats and quickly settle.
Nº 091마스크 리빌Mask RevealMask Reveal
숨겨진 창 아래의 제목을 위로 올려 줄마다 드러내는 효과A title rises into clipped windows to reveal one line at a time.
Nº 092스크램블Text ScrambleText Scramble
자리마다 기호가 바뀌다가 왼쪽부터 정답 글자로 고정되는 효과Symbols cycle in each character position before resolving into the final text from left to right.
Nº 093타자기TypewriterTypewriter
문장을 한 글자씩 일정 간격으로 드러내고 커서가 입력 위치를 따라가는 효과A sentence appears one character at a time at regular intervals while a cursor follows the insertion point.
Nº 094밑줄 드로우Underline DrawUnderline Draw
핵심어 아래의 SVG 경로를 왼쪽부터 한 획으로 그리는 효과An SVG path draws beneath a key phrase from left to right in a single stroke.
Nº 095단어 강조Word EmphasisWord Emphasis
정지한 문장에서 한 구절만 색과 크기를 바꾸고 주변 글을 옅게 만드는 효과A phrase changes color and scale within a stationary sentence while surrounding text fades.
Nº 096대형 키네틱 타이포 스윕Kinetic Type SweepKinetic Type Sweep
200px 넘는 세리프 문장 세 줄이 서로 반대 방향, 다른 속도로 화면을 가로지르고 마지막에 핵심어 하나만 정중앙에 급정지한다.Three lines of 200px+ serif type sweep across the frame in opposite directions at different speeds, then one key word slams to a stop dead center.
전환·컷
TRANSITIONS장면과 장면을 잇는 컷과 화면 전환 · 클립 21Cuts and transitions that join scenes · 21 clips
Nº 120크로스페이드CrossfadeCrossfade
장면 A의 불투명도가 낮아지는 동안 장면 B의 불투명도가 함께 높아지는 전환Scene A fades out as scene B fades in at the same time.
Nº 121푸시 전환PushPush
새 장면이 들어오는 만큼 기존 장면을 같은 방향으로 밀어내는 전환An incoming scene pushes the existing scene out by the same amount in the same direction.
Nº 122와이프WipeWipe
이동하는 경계 뒤로 새 장면을 순서대로 공개하는 전환A moving boundary progressively reveals the new scene behind it.
Nº 123마스크 전환Shape Mask TransitionShape Mask Transition
한 점에서 원형 마스크가 커지며 다음 장면을 드러내는 전환A circular mask expands from a point to reveal the next scene.
Nº 124매치컷Match CutMatch Cut
컷 앞뒤에서 같은 위치와 크기의 형태를 이어 두 장면을 연결하는 전환Matching shapes at the same position and size connect two scenes across a cut.
Nº 125모프 전환MorphMorph
같은 요소의 형태와 색을 바꿔 다음 장면의 구성 요소로 이어지는 전환The same element changes shape and color to become a component of the next scene.
Nº 126휩팬Whip PanWhip Pan
장면을 빠르게 수평으로 쓸며 가로 블러와 급감속으로 다음 장면에 안착하는 전환A rapid horizontal sweep with horizontal blur and sharp deceleration settles into the next scene.
Nº 127줌 전환Zoom ThroughZoom Through
글자 O의 구멍을 확대해 그 안의 다음 장면으로 통과하는 전환The opening in the letter O enlarges to carry the viewer through to the next scene inside it.
Nº 128블러 디졸브Blur DissolveBlur Dissolve
두 장면이 흐려진 채 겹쳐 교체되고 새 장면이 다시 선명해지는 전환Two scenes overlap while blurred, swap, and the new scene sharpens back into focus.
Nº 136플래시 전환Flash TransitionFlash Transition
흰색 섬광이 화면을 덮는 순간 장면이 바뀌고 밝기가 돌아오는 전환A white flash covers the frame, the scene changes at the peak, and brightness recovers.
Nº 138페이지 턴Page TurnPage Turn
페이지 한쪽이나 모서리가 접히고 말려 올라가 뒷면과 그림자를 드러내며 다음 화면으로 넘어간다A page corner curls up, exposing the back and a soft shadow, and turns to the next screen.
Nº 142스케일 스왑Scale SwapScale Swap
기존 장면이 기준점으로 줄어드는 동안 새 장면이 커져 그 자리를 잇는 전환The old element shrinks toward a pivot while the new one grows in to take its place.
Nº 143스플릿 슬라이드Split SlideSplit Slide
두 반쪽 장면이 서로 반대쪽으로 벌어지거나 모여 다음 장면과 교체된다Two halves of the frame slide apart or together in opposite directions and swap scenes.
Nº 148밴드 슬라이드Band SlideBand Slide
가로나 세로로 나눈 영상 띠가 조금씩 다른 시점이나 방향으로 이동하며 다음 화면이 나타난다Video bands split horizontally or vertically slide at slightly different timings to reveal the next screen.
Nº 150챕터 인터스티셜Chapter InterstitialChapter Interstitial
장면 사이에 단계 제목 카드가 나타나 잠시 유지된 뒤 다음 장면으로 넘어간다A step-title card appears between scenes, holds briefly, then hands off to the next scene.
Nº 163글리치 전환Glitch TransitionGlitch Transition
영상 블록이 순간적으로 어긋나고 색 채널이나 잔상이 깨지는 동안 다음 장면으로 교체된다Video blocks momentarily misalign and color channels or ghosts break apart while the scene is replaced.
Nº 166그리드 플립Grid FlipGrid Flip
장면을 나눈 사각 타일이 순차로 뒤집혀 뒷면의 다음 장면을 보여주는 전환Rectangular tiles cut from the scene flip in sequence to reveal the next scene on their backs.
Nº 181매치컷 모프Morph Match CutMorph Match Cut
주홍 원이 같은 자리·같은 크기의 글자 O로 한 프레임에 컷되고, 그 O가 도넛 차트로 모프된다.A vermilion circle hard-cuts to a serif letter O at the same position and size, then the O morphs into a 62% donut chart.
Nº 184노이즈 디졸브 전환Noise Dissolve TransitionNoise Dissolve Transition
노이즈 값이 진행률보다 낮은 픽셀부터 지워져 앞 장면에 얼룩진 구멍이 번지고 다음 장면이 드러난다Pixels whose noise value falls below the progress disappear first, so blotchy holes spread through the first scene and reveal the next.
Nº 194셰이더 와이프Shader Directional Warp WipeShader Directional Warp Wipe
휘어진 부드러운 대각 경계가 화면을 쓸고 지나가며, 경계 근처의 두 도판이 진행 방향으로 늘어나 번진다A soft, bent diagonal edge sweeps across the frame while both plates near the edge stretch and smear along the direction of travel.
Nº 214줌 와이프Zoom WipeZoom Wipe
중심 확대가 진행되는 도중 직선 경계가 좌우로 이동해 새 장면을 공개하는 와이프Mid-zoom on the center, a straight edge moves across the frame and reveals the new scene.
가상 카메라
CAMERA화면 전체를 움직여 시선과 공간을 옮기는 법 · 클립 11Moving the whole frame to move the eye and the space · 11 clipsNº 218켄 번스Ken BurnsKen Burns
한 정지 도판을 천천히 확대하고 비스듬히 옮기는 카메라 움직임A camera move that slowly zooms into a still image while panning diagonally.
Nº 219팬PanPan
확대율을 유지한 채 가로로 긴 장면을 한 방향으로 훑는 카메라 움직임A camera move that scans a wide scene in one direction while keeping the scale constant.
Nº 220패럴랙스ParallaxParallax
카메라가 이동할 때 가까운 층은 빠르게, 먼 층은 느리게 흘러 깊이를 만드는 움직임A motion effect that creates depth by moving nearer layers faster and distant layers more slowly as the camera moves.
Nº 221푸시인Push-inPush-in
문장이나 장면의 특정 중심을 유지하면서 카메라가 천천히 다가가는 움직임A camera move that slowly approaches a fixed focal point in a sentence or scene.
Nº 222랙 포커스Rack FocusRack Focus
위치를 움직이지 않고 앞뒤 대상의 선명함을 교환하는 초점 이동A focus shift that swaps sharpness between foreground and background subjects without changing their positions.
Nº 223좌표 줌Zoom to DetailZoom to Detail
전체 도해의 특정 좌표를 화면 중심으로 옮기며 확대하고 세부 정보를 드러내는 움직임A motion that centers and enlarges a specific coordinate in an overview diagram to reveal detail.
Nº 232대형 마스크 리빌Giant Mask RevealGiant Mask Reveal
화면을 채운 큰 숫자 939가 창이 되어 안쪽 세계를 비추고, 카메라가 획 속으로 파고들어 세계 전체가 드러난다.A frame-filling 939 acts as a window onto an editorial world, and the camera dives into a stroke until the whole world is revealed.
Nº 233무한 캔버스 팬Infinite Canvas PanInfinite Canvas Pan
여섯 도판이 이어진 긴 지면을 가로 5400px 이동해 마지막 초점에 멈춘다A continuous 5,400px camera pan across six editorial plates settles on a scarlet focus.
Nº 234무한 줌 스루Infinite ZoomInfinite Zoom
작은 주홍 점 속의 다음 도판으로 세 번 연속 파고들며 2744배 확대한다Dive into a scarlet dot three times as nested plates expand through a continuous 2,744× zoom.
Nº 2363D 원근 틸트 리빌Perspective Tilt RevealPerspective Tilt Reveal
편집 지면을 55도로 눕혀 전체 격자를 드러내고 한 도판으로 돌아오는 카메라 이동An editorial page tilts back by 55 degrees to reveal its grid before returning to one frontal figure.
Nº 238스크롤 스크럽 시네마Scroll-scrub Cinema SceneScroll-scrub Cinema Scene
고정된 장면 하나에서 스크롤 진행률 p 하나가 제목 마스크, 도해 조립, 배경 숫자 패럴랙스를 함께 움직인다.In one pinned scene, a single scroll progress value p drives a title mask reveal, an assembling diagram, and a parallaxing background number together.
데이터
DATA숫자와 차트를 움직여 크기·변화·비교를 보이는 법 · 클립 14Animating numbers and charts to show size, change and comparison · 14 clips
Nº 240주석 등장Annotation CalloutAnnotation Callout
그래프의 한 점에서 지시선을 그린 뒤 주석을 보여주는 표현An animation that draws a leader line from a point on a chart and then reveals an annotation.
Nº 241막대 성장Bar GrowBar Grow
막대가 기준점에서 값에 비례하는 길이까지 자라는 표현An animation in which bars grow from a baseline to lengths proportional to their values.
Nº 242카운트업Count-upCount-up
숫자가 0에서 목표값까지 감속하며 증가하는 표현An animation in which a number increases from 0 to its target value while decelerating.
Nº 243점 재배치Dot RegroupDot Regroup
흩어진 점이 분류별 규칙적인 무리로 이동하는 표현An animation that moves scattered dots into orderly groups by category.
Nº 244선 그리기Line DrawLine Draw
선의 시작부터 끝까지 경로를 순서대로 드러내는 표현An animation that progressively reveals a path from start to finish.
Nº 245단위 격자Unit Grid FillUnit Grid Fill
전체를 나타내는 격자에서 해당 개수만 순서대로 채우는 표현An animation that fills a specified number of cells in sequence within a grid representing the whole.
Nº 250막대 차트 레이스Bar Chart RaceBar Chart Race
시계열이 진행하며 막대 길이와 순위가 바뀌고 선두의 강조가 이동한다.Bar lengths and vertical ranks interpolate between time steps.
Nº 283파이와 도넛 비율 갱신Pie and Donut UpdatePie and Donut Update
부채꼴의 시작각과 끝각이 움직여 각 항목의 몫이 바뀐다.Shares update by interpolating the start and end angles of each pie or donut slice.
Nº 285원형 진행 게이지Progress RingProgress Ring
원형 선이 목표 비율까지 채워지고 끝점이나 숫자가 같이 움직인다.A circular stroke fills to a target ratio with a synchronized label.
Nº 286레이더 차트 모프Radar Chart MorphRadar Chart Morph
고정된 축을 따라 꼭짓점이 중심에서 목표값으로 이동하거나 새 값으로 바뀌며 다각형 윤곽을 만든다.Vertices move along fixed radial axes to form or update a radar profile.
Nº 291생키 리본 성장Sankey Ribbon GrowthSankey Ribbon Growth
흐름 리본이 출발 노드에서 도착 노드 방향으로 자라며 단계별 네트워크를 드러낸다.Flow ribbons grow from source toward destination, revealing the network stage by stage.
Nº 294누적 막대와 그룹 막대 전환Stacked-to-grouped TransitionStacked-to-grouped Transition
쌓인 막대 조각들이 옆으로 펼쳐진 뒤 공통 기준선으로 내려온다.Stacked segments spread sideways, then move onto a shared baseline.
Nº 297표에서 차트로 전환Table-to-chart TransitionTable-to-chart Transition
표의 수치가 강조된 뒤 같은 항목의 위치에서 막대나 점이 나오며 차트로 정렬된다.Highlighted table values become marks that move into a chart layout.
Nº 305워터폴 순차 누적Waterfall AccumulationWaterfall Accumulation
증감 막대가 앞선 누적 끝점에서 차례로 생겨 합계 막대에 도달한다.Change bars appear from the preceding cumulative endpoint until a total bar is reached.
UI 시연
UI DEMO화면 조작과 제품 사용을 영상으로 보여 주는 법 · 클립 11Showing screen interaction and product use on video · 11 clips
Nº 314답 스트리밍Answer StreamingAnswer Streaming
답변을 토큰 묶음 단위로 순서대로 표시하고 새 묶음의 농도를 점차 높이는 동작An animation that reveals an answer in sequential token groups and gradually increases the opacity of each new group.
Nº 315커서 이동과 클릭Cursor Move & ClickCursor Move & Click
커서가 곡선으로 목표 단추에 도착하고 눌림과 파문으로 클릭을 알리는 동작An animation in which a cursor follows a curved path to a target button and signals a click with a pressed state and ripple.
Nº 316스포트라이트SpotlightSpotlight
주변 화면을 옅게 낮추고 한 영역의 농도를 유지해 괄호로 집중시키는 동작An animation that dims the surrounding screen while keeping one region fully opaque and framing it with brackets.
Nº 317타이핑 입력Typing InputTyping Input
질문이 글자마다 불규칙한 간격으로 입력되고 끝의 캐럿이 깜빡이는 동작An animation in which a question is typed character by character at irregular intervals with a blinking caret at the end.
Nº 318화면 스크롤UI ScrollUI Scroll
긴 문서 내용을 부드럽게 위로 옮겨 목표 문단에 멈추고 세로선으로 표시하는 동작An animation that smoothly moves a long document upward, stops at a target paragraph, and marks it with a vertical line.
Nº 319확대 콜아웃Zoom CalloutZoom Callout
작은 UI의 수치를 옆의 원형 확대 영역으로 띄우고 두 위치를 선으로 잇는 동작An animation that enlarges a small UI value in an adjacent circular callout and connects both locations with a line.
Nº 320아코디언 펼치기Accordion ExpansionAccordion Expansion
접힌 영역이 고정된 가장자리에서 펼쳐지고 주변 항목이 새 공간만큼 밀려난다.A panel expands from a fixed edge while adjacent content moves aside.
Nº 326대화 말풍선 누적Chat ThreadChat Thread
메시지 말풍선이 차례로 나타나고 이전 대화가 위로 밀려 올라간다.Messages appear in sequence while the previous conversation shifts upward.
Nº 332드래그 앤 드롭Drag and DropDrag and Drop
커서가 요소를 집어 들어 반투명 복사본과 이동하고 새 위치에 놓는다.Lift a translucent copy, carry it with the cursor, and settle it in a new slot.
Nº 343레이아웃 재배치Layout ReflowLayout Reflow
목록이나 격자의 요소가 새 위치와 크기로 부드럽게 옮겨가고 삭제된 항목의 빈자리를 메운다.Elements retain their identity as a layout changes position and size.
Nº 346모달 등장Modal LiftModal Lift
대화상자가 떠오르면서 뒤 화면이 어두워지거나 흐려진다.A dialog rises into focus as the backdrop dims.
원리 도해
EXPLAINER보이지 않는 원리와 과정을 그림으로 풀어 보이는 법 · 클립 12Drawing invisible mechanisms and processes · 12 clips
Nº 361어텐션 선Attention LinesAttention Lines
한 토큰이 참조하는 다른 토큰을 굵기와 진하기가 다른 호로 연결하는 움직임An animation that connects one token to the tokens it references using arcs of varying thickness and opacity.
Nº 362컨텍스트 창Context WindowContext Window
고정 길이 창에 새 토큰을 넣고 가장 오래된 토큰부터 밀어내는 움직임An animation that inserts new tokens into a fixed-length window and pushes out the oldest tokens first.
Nº 363임베딩 공간Embedding SpaceEmbedding Space
단어가 의미에 따른 좌표로 이동해 가까운 뜻끼리 모이는 움직임An animation that moves words to semantic coordinates so words with similar meanings cluster together.
Nº 364다음 말 고르기Next-token PickNext-token Pick
후보 확률 막대가 자란 뒤 가장 높은 후보가 문장의 빈칸으로 이동하는 움직임An animation in which candidate probability bars grow, then the highest-probability candidate moves into a blank in the sentence.
Nº 365점진적 공개Progressive DisclosureProgressive Disclosure
새 단계가 켜질 때 이전 단계를 옅게 남기는 순차 공개 움직임A sequential reveal that leaves earlier stages dimmed as each new stage becomes active.
Nº 366비교 분할Split CompareSplit Compare
같은 대상을 전후 상태로 겹치고 움직이는 세로 경계로 비교하는 움직임An animation that overlays before and after states of the same subject and compares them with a moving vertical divider.
Nº 367토큰 쪼개기Token SplitToken Split
붙어 있던 문장을 간격 있는 토큰 조각으로 나누는 움직임An animation that separates a continuous sentence into spaced token fragments.
Nº 380노드 연결망 구축Node-link BuildNode-link Build
노드가 순서대로 나타나고 연결선이 각 노드 사이에 그려진다. 선택 경로의 노드와 선을 차례로 강조한다.Reveal eight service nodes before their connecting edges.
Nº 395시퀀스 메시지 전달Sequence Message DrawSequence Message Draw
행위자 사이의 화살표가 시간 순서대로 그려지고 수신 지점이 강조된다.Message arrows draw between actors in chronological order, highlighting each receiver.
Nº 396원본과 변환 결과 연결Source-to-result MappingSource-to-result Mapping
원본 코드가 유지된 채 반대편에 변환된 코드가 나타나고 대응 부분이 연결된다.The source remains visible as transformed code appears with linked corresponding tokens.
Nº 398상태 전이 순회State Transition WalkState Transition Walk
현재 노드가 켜지고 연결선을 따라 신호나 강조가 다음 노드로 이동한다. 도착한 노드가 새 활성 상태가 된다.A signal moves to the next node, which becomes the active state.
Nº 403벡터 끝잇기Vector Tip-to-tail ConstructionVector Tip-to-tail Construction
두 성분 벡터를 차례로 늘리고 두 번째를 첫 번째의 끝으로 옮겨 합벡터를 만든다.Component vectors extend in sequence, then join tip to tail to form a resultant.
도형·패스
SHAPE & PATH선 그리기, 모프, 경로 이동, 셰이프 레이어 기법 · 클립 4Line drawing, morphing, path motion, shape layers · 4 clips
Nº 412조각 조립Piece AssemblyPiece Assembly
떨어져 있던 도형 조각들이 이동하고 회전해 하나의 로고나 빈틈 없는 배열을 완성하는 움직임Loose shapes move and rotate until they lock into a single logo or a gap-free arrangement.
Nº 425윤곽 후 채움Outline Then FillOutline Then Fill
윤곽선이 먼저 그려진 뒤 내부 면과 색이 채워지는 2단계 등장The outline or wireframe appears first, then the interior surfaces and color fill in.
Nº 426패스 하이라이트Path HighlightPath Highlight
전체 선 중 짧고 밝은 구간만 경로를 따라 지나가는 강조Only a short bright stretch travels along the full line.
Nº 432도형 분할과 통합Shape Split and MergeShape Split and Merge
하나의 도형이 여러 작은 도형으로 갈라지거나, 여러 도형이 하나로 합쳐진다One shape splits into several smaller shapes, or several shapes merge into one.
질감·스타일
TEXTURE & STYLE글리치, 그레인, 빛, 인쇄 질감 같은 화면 처리 · 클립 6Glitch, grain, light, print texture · 6 clips
Nº 446필름 그레인Film GrainFilm Grain
프레임 위에 미세한 입자 노이즈를 낮은 프레임 레이트로 갱신해 필름 질감을 주는 효과A fine layer of grain updated at a low frame rate gives the frame a film texture.
Nº 448RGB 분리 글리치RGB Split GlitchRGB Split Glitch
색 채널과 가로 조각이 순간적으로 어긋나 떨린 뒤 원래 화면으로 돌아오는 효과Color channels and horizontal slices jitter apart for a moment, then snap back to the original frame.
Nº 468골 유리Fluted Glass DriftFluted Glass Drift
반복된 세로 굴곡이 배경을 늘리고 접으며 옆으로 천천히 이동하는 골 유리Repeated vertical flutes stretch and fold the background as they drift sideways.
Nº 472잉크 번짐Ink BleedInk Bleed
잉크 덩어리가 종이 속으로 번지며 합쳐진 뒤 수축해 선명한 글자나 마크가 남는 효과Ink blobs bleed into paper, merge, then contract, leaving a crisp letter or mark.
Nº 475라이트 스윕Light SweepLight Sweep
기울어진 빛 띠가 큰 숫자와 제목 글자 안쪽만 한 번 훑고 지나가 인쇄된 금속 광택처럼 보이게 한다.A tilted band of light passes once through a giant number and title, only inside the glyphs, like a metallic print sheen.
Nº 497글자 복제 잔상Text Echo TrailText Echo Trail
움직이는 문구 뒤로 여러 복사본이 시간차로 따라오며 사라지는 잔상Delayed text copies trail behind a moving phrase and fade out.
입자·생성
GENERATIVE입자, 노이즈, 반복 규칙으로 만드는 움직임 · 클립 6Particles, noise and rule-based repetition · 6 clips
Nº 506입자 버스트Particle BurstParticle Burst
한 점에서 입자 여러 개가 사방으로 터져 나가 중력에 떨어지며 사라지는 효과Particles explode outward from a single point, fall under gravity, and fade out.
Nº 507입자 이미지 공개Particle image revealParticle image reveal
흩어진 입자가 모여 이미지의 형태와 색을 이루며 공개되는 효과Scattered particles gather into the shape and color of an image and reveal it.
Nº 523흐름장Flow FieldFlow Field
많은 작은 입자와 잔상이 보이지 않는 흐름을 따라 곡선으로 이동하는 효과Many small particles and trails move along curves following an invisible flow.
Nº 525하프톤 모션Halftone MotionHalftone Motion
격자 위 점의 크기가 밝기를 따르며 물결이나 스캔처럼 움직이는 하프톤 패턴A grid of dots whose size follows brightness and moves in waves or scans.
Nº 529입자 흩어졌다 모이기Particle Scatter & AssembleParticle Scatter & Assemble
화면 전체에 흩어져 떠 있던 입자 수백 개가 날아와 큰 숫자 하나의 모양을 이룬다Hundreds of particles floating across the frame fly in and assemble into one large number.
Nº 533입자 연결망Connected Particle NetworkConnected Particle Network
움직이는 점 사이에서 가까운 것끼리 선이 이어지고 멀어지면 사라지는 입자 연결망Moving dots connect with nearby ones by lines that vanish as they drift apart.
3D·깊이
3D & DEPTH원근, 회전, 레이어 깊이로 만드는 공간감 · 클립 7Perspective, rotation and layered depth · 7 clips
Nº 548카드 플립Card FlipCard Flip
카드가 세로축이나 가로축으로 180도 돌아 앞면에서 뒷면으로 바뀌는 움직임A card rotates 180 degrees around its vertical or horizontal axis to swap front for back.
Nº 552텍스트 익스트루전Text ExtrusionText Extrusion
같은 글자를 겹쳐 깊이 방향으로 벌리고 살짝 돌려 두꺼운 옆면이 보이게 하는 움직임The same letters are stacked, their back layers spread along depth and the group turns slightly to reveal a thick side.
Nº 557카메라 플라이스루Camera Fly-throughCamera Fly-through
깊이 900px 간격의 일곱 평면을 카메라가 통과하며 마지막 핵심어에 멈춘다A camera flies through seven planes spaced 900px apart and stops on the final keyword.
Nº 5583D 카드 플립 스택3D Card Flip Stack3D Card Flip Stack
겹친 종이 다섯 장이 순차로 뒤집혀 뒤로 쌓이는 3D 전환Five overlapping paper sheets flip in sequence and stack behind a frontal final card.
Nº 560커버플로우CoverflowCoverflow
카드가 곡면 배열을 따라 이동하며 중앙 카드는 크고 정면, 옆 카드는 비스듬히 작아지는 목록Cards travel along a curved arrangement: the center card faces front and large, side cards tilt away and shrink.
Nº 561깊은 다층 패럴랙스Deep Multi-layer ParallaxDeep Multi-layer Parallax
7겹 지면이 서로 다른 속도로 흘러 깊이를 드러내는 카메라 이동A horizontal camera move reveals depth through seven independently paced editorial layers.
Nº 567레이어 분리와 재결합Layer SeparationLayer Separation
겹쳐진 평면 레이어들이 깊이와 각도 차이를 두고 벌어져 보인 뒤 다시 포개진다Stacked flat layers spread out at different depths and angles, then fold back together.
반복·앰비언트
LOOP & AMBIENT로더, 숨쉬기, 배경 루프처럼 계속 도는 움직임 · 클립 5Loaders, breathing, ambient loops · 5 clips
Nº 581원호 스피너Arc SpinnerArc Spinner
원호가 돌면서 길어졌다 짧아져 계속 작업 중임을 알린다.A rotating arc alternately lengthens and shortens.
Nº 585로딩 도트Loading DotsLoading Dots
나란한 점들이 시간차로 커지거나 위로 뛰고 다시 돌아온다.Dots bounce or pulse with staggered phases.
Nº 586마키MarqueeMarquee
콘텐츠가 화면 밖으로 나간 뒤 반대편에서 이어져 끊임없이 흐른다.Duplicated content flows continuously across the viewport.
Nº 587리플 링Ripple RingsRipple Rings
중심에서 생긴 원들이 커지고 흐려지며 사라진다.Concentric rings expand and fade from a shared center.
Nº 613공전 루프Orbit LoopOrbit Loop
아이콘이나 이미지가 중심 객체 주위를 같은 또는 서로 다른 궤도로 돈다.Objects orbit a central subject while keeping their labels upright.
자막·하단 자막
CAPTIONS자막, 하단 자막, 인용과 출처 표기 · 클립 4Captions, lower thirds, quotes and credits · 4 clips
Nº 626자막 화면 점유Caption TakeoverCaption Takeover
평소 하단 자막이 한 순간 화면 전체를 채우는 큰 타이틀로 바뀌었다가 원래 자막으로 돌아오는 효과The usual caption line swaps for a huge full-frame title for one beat, then returns to the reading rail.
Nº 629카라오케 자막Karaoke CaptionKaraoke Caption
자막 줄은 그대로 두고 발화 중인 단어의 색이나 배경만 이동하는 효과The caption line stays put while only the color or pill background of the spoken word moves.
Nº 632하단 자막 바Lower Third RevealLower Third Reveal
화자 이름과 소속이 하단에서 배경 띠와 함께 나타나 잠시 머문 뒤 사라지는 자막 띠A speaker name and role slide in on a background bar at the lower part of the frame, hold, then leave.
Nº 637단어 팝 자막Word Pop CaptionWord Pop Caption
말하는 단어가 차례로 작게 튀어 오르며 짧은 자막 묶음이 되는 효과Each spoken word pops in turn to form short caption groups.
03
전체 기법All techniques
● 클립 있음 · ○ 정의만(렌더 추가 예정)● clip · ○ definition only, clip coming기본기
PRINCIPLES26개26등장·퇴장
ENTRANCE & EXIT38개38강조·주의
EMPHASIS22개22타이포
TYPOGRAPHY33개33전환·컷
TRANSITIONS98개98가상 카메라
CAMERA22개22데이터
DATA74개74UI 시연
UI DEMO47개47원리 도해
EXPLAINER48개48도형·패스
SHAPE & PATH32개32질감·스타일
TEXTURE & STYLE59개59입자·생성
GENERATIVE47개473D·깊이
3D & DEPTH33개33반복·앰비언트
LOOP & AMBIENT44개44자막·하단 자막
CAPTIONS14개14맞는 효과가 없다. 필터를 하나 풀어 보자.Nothing matches. Try removing a filter.
비교COMPARE