디자인 아틀라스↝모션
이징, 스태거, 패럴랙스처럼 움직임에 붙은 이름들. 애니메이터와 개발자가 같은 말을 쓰게 해줍니다. — 57개 항목
타임라인 시퀀싱Timeline sequencing
위치·스케일·투명도 같은 여러 트랙을 하나의 재생 헤드(playhead)가 동시에 관통하며 값을 읽어내는 구조. 트랙마다 구간이 달라도 하나의 시간 축으로 동기화됩니다.
스크롤 스크럽Scroll scrub
애니메이션의 진행률을 시간이 아니라 스크롤 위치 그 자체에 1:1로 묶는 기법. 스크롤을 멈추면 애니메이션도 멈추고, 위로 되돌리면 애니메이션도 거꾸로 재생됩니다.
피닝Pinning
한 섹션을 화면에 고정해두고, 사용자가 계속 스크롤하는 동안 그 안의 콘텐츠만 진행시키는 기법. 스크롤텔링에서 "한 화면에 머물며 여러 단계를 보여줄 때" 씁니다.
관성·모멘텀Inertia & momentum
손을 떼는 순간의 속도를 그대로 이어받아 움직이다가, 마찰로 서서히 느려지며 멈추는 동작. 스크롤·드래그를 놓았을 때 뚝 멈추지 않고 "던진 만큼" 미끄러지는 느낌을 만듭니다.
스프링 체인Spring chain
노드들이 한 줄로 연결되어, 각 노드가 앞 노드를 스프링으로 뒤쫓는 구조. 리더가 움직이면 뒤로 갈수록 지연과 출렁임이 누적돼 꼬리·로프 같은 움직임이 됩니다.
일래스틱 스트링Elastic string
양 끝이 고정된 줄이 튕겨진 뒤 기타줄처럼 진동하다가 감쇠하며 멈추는 효과. 스프링 체인과 달리 노드 하나가 아니라 줄 전체가 하나의 파동으로 출렁입니다.
페이지 컬Page curl
종이책의 모서리를 들추듯, 페이지 한쪽 귀퉁이가 말려 올라가며 뒷면이 살짝 비치는 전환 효과. 전자책·매거진 앱이 "다음 페이지가 있다"는 것을 암시할 때 씁니다.
페이퍼 폴드Paper fold
평면이 부채·아코디언처럼 접히고 펼쳐지는 전환 효과. 페이지 컬이 "모서리 한 점"을 말아 올린다면, 페이퍼 폴드는 면 전체를 여러 구간으로 나눠 경첩(hinge)처럼 접습니다.
커버플로Coverflow
가운데 카드는 정면으로 크게, 양옆 카드는 원근감 있게 기울어져 작아지는 갤러리 레이아웃. 옛 iTunes의 앨범 커버 넘기기 UI로 유명해졌습니다.
3D 캐러셀3D carousel
카드들을 원기둥 둘레에 고르게 배치하고 그룹 전체를 회전시켜, 카드가 앞에서 뒤로 계속 돌아가는 회전목마 같은 레이아웃. 커버플로와 달리 "인덱스 전환"이 아니라 "계속 도는 링" 자체가 움직입니다.
인피니트 줌Infinite zoom
같은 패턴이 계속 확대되며 끝없이 줌인하는 것처럼 보이는 착시 애니메이션. 실제로는 레이어 몇 개가 크기를 순환하며 이어달리기를 하는 것뿐입니다.
스플릿 플랩Split-flap display
공항·기차역 전광판처럼 각 칸의 글자판이 위아래로 탈칵거리며 넘어가 목표 글자에 도달하는 효과. 칸마다 넘어가는 속도가 조금씩 달라 도착 시점이 물결처럼 엇갈립니다.
오도미터Odometer
자동차 계기판처럼 숫자 자릿수마다 세로로 감긴 릴이 돌아가며 값이 바뀌는 카운터. 텍스트가 순간적으로 바뀌는 게 아니라 다음 숫자가 위(또는 아래)에서 밀려 올라오는 것처럼 보입니다.
커서 모프Cursor morph
기본 커서를 숨기고 그 자리를 대신하는 요소가, 지금 가리키고 있는 대상에 따라 크기·모양·라벨을 바꾸는 기법. 링크 위에서는 커지고, 텍스트 위에서는 얇은 막대가 되는 식입니다.
리퀴드 버튼Liquid button
버튼 주변에 물방울이 맺혔다가 버튼 표면에 스며들듯 합쳐지는 효과. 두 도형이 가까워지면 경계가 매끄럽게 녹아 붙는 "구이(gooey)" 필터로 만듭니다.
스태거드 그리드 웨이브Staggered grid wave
그리드의 각 셀이 인덱스 순서가 아니라 중심점으로부터의 거리에 비례해 지연되며 움직이는 기법. 연못에 돌을 던진 것처럼 한 지점에서 물결이 바깥으로 퍼져나갑니다.
패스 팔로우 텍스트Path-follow text
텍스트가 직선 기준선이 아니라 SVG로 그린 곡선을 따라 배치되고, 그 곡선 위를 이동하는 효과. 원형 로고 뱃지, 곡선 헤드라인에 흔합니다.
구이 메뉴Gooey menu
플로팅 버튼을 누르면 하위 메뉴 항목들이 방울처럼 갈라져 나오는 메뉴. 항목들이 처음엔 메인 버튼과 한 덩어리로 붙어 있다가 거리가 벌어지며 매끄럽게 떨어져 나갑니다.
애니메이션 12원칙The 12 principles of animation
디즈니 애니메이터 올리 존스턴과 프랭크 토마스가 1981년 저서 《The Illusion of Life》에서 정리한, 그림이 살아있는 것처럼 보이게 만드는 12가지 원칙. 오늘날 UI 모션 어휘의 상당수가 여기서 나왔습니다.
스테이징Staging
한 순간에 한 가지만 명확하게 읽히도록 연출하는 원칙. 실루엣·카메라·타이밍으로 시선이 갈 곳을 정해줍니다 — 무대 연출과 같은 어원입니다.
스트레이트 어헤드 vs 포즈 투 포즈Straight ahead vs pose to pose
애니메이션을 만드는 두 가지 상반된 작업 방식. 스트레이트 어헤드는 첫 장면부터 순서대로 그려나가고, 포즈 투 포즈는 핵심 포즈부터 정해놓고 사이를 채웁니다.
슬로우 인 슬로우 아웃Slow in and slow out
동작의 시작과 끝 부근에는 그림을 촘촘히, 중간에는 성기게 배치해 가속·감속을 표현하는 원칙. CSS ease-in-out의 직계 조상입니다.
아크Arcs
살아있는 대부분의 움직임은 완전한 직선이 아니라 살짝 휜 곡선을 그린다는 원칙. 팔은 어깨를, 던진 공은 중력을 축으로 돌기 때문입니다.
타이밍과 스페이싱Timing and spacing
한 동작에 몇 장의 그림(타이밍)을, 그 사이를 얼마나 촘촘하게(스페이싱) 쓰느냐가 속도뿐 아니라 무게감·성격까지 결정한다는 원칙.
이그재저레이션Exaggeration
동작이나 표정을 현실 그대로보다 살짝(또는 크게) 과장해야 오히려 더 진짜처럼, 더 명확하게 읽힌다는 원칙.
솔리드 드로잉Solid drawing
2D 그림이라도 실제 무게와 부피, 균형을 가진 3차원 형태처럼 그려야 한다는 원칙. 평평한 실루엣이 아니라 돌아가는 입체로 보이게 만듭니다.
어필Appeal
캐릭터의 실루엣과 디자인이 한눈에 읽히고 눈길을 끄는 정도. "귀엽다"는 뜻이 아니라 — 악당도 어필이 있을 수 있습니다 — 단순하고 명료한 디자인을 말합니다.
스미어 프레임Smear frame
너무 빨라서 카메라가 못 담을 동작을, 그 순간 하나를 길게 늘리거나 여러 형체가 겹친 모습으로 그려 넣어 속도감을 표현하는 전통 애니메이션 기법.
홀드Holds
동작 중간에 일부러 완전히 멈춰서 그 포즈나 상태를 눈에 각인시키는 기법. 쉬지 않고 계속 움직이기만 하면 오히려 아무것도 눈에 안 남습니다.
무빙 홀드Moving hold
포즈는 그대로 유지하되 완전히 얼어붙지 않고 숨 쉬듯 아주 미세하게 계속 움직이는 홀드. 완벽히 정지한 프레임은 오히려 죽은 것처럼 보이기 때문입니다.
리드 앤 래그Lead and lag
연결된 여러 부위가 완전히 같은 타이밍으로 움직이지 않고, 한 부위가 앞장서고(lead) 나머지가 조금씩 뒤처지며(lag) 따라가는 원칙. 걸을 때 골반이 어깨보다 먼저 도는 것이 예입니다.
드래그 앤 세틀Drag and settle
드래그 중에는 커서를 살짝 고무줄처럼 지연되어 따라가고, 손을 떼면 관성으로 더 나아갔다가 스프링으로 제자리에 안착하는 인터랙션. 팔로우 스루·오버래핑 액션을 실시간 포인터 입력으로 확장한 버전입니다.
이징Easing
애니메이션의 속도가 시간에 따라 어떻게 변하는지를 정하는 곡선. 같은 구간이라도 linear·ease-in·ease-out·back이 완전히 다른 느낌을 만듭니다.
큐빅 베지어Cubic bezier
두 제어점(P1, P2)의 위치로 이징 곡선의 모양을 정의하는 함수. cubic-bezier(x1,y1,x2,y2) 형태로 씁니다.
스프링 애니메이션Spring animation
정해진 시간표 대신 강성(stiffness)·감쇠(damping) 같은 물리량으로 움직임을 계산하는 애니메이션. 목표를 살짝 지나쳤다 튕기며 멈춥니다.
스태거Stagger
여러 요소가 동시에 움직이지 않고 순서대로 약간씩 지연되며 움직이는 기법. 리스트나 그리드가 한 번에 나타나는 대신 물결처럼 나타납니다.
패럴랙스Parallax
가까운 레이어는 빠르게, 먼 레이어는 느리게 움직여 화면에 깊이감을 만드는 기법. 배경·중경·전경의 속도를 다르게 줍니다.
스크롤 리빌Scroll reveal
요소가 뷰포트에 들어오는 순간 페이드인·슬라이드업 같은 등장 애니메이션을 트리거하는 패턴. IntersectionObserver로 구현합니다.
스크롤 기반 애니메이션Scroll-driven animation
JS 없이 CSS만으로 스크롤 진행률을 애니메이션의 타임라인으로 직접 연결하는 최신 기능. animation-timeline이 핵심입니다.
마퀴Marquee
텍스트나 로고가 화면을 가로질러 끊임없이 흘러가는 효과. 옛 <marquee> 태그의 이름을 물려받았지만 지금은 CSS 애니메이션으로 만듭니다.
타이프라이터Typewriter
글자가 타자기처럼 한 자씩 나타나고, 깜빡이는 커서가 끝에 따라붙는 텍스트 등장 효과.
모핑Morphing
한 도형이 다른 도형으로 형태 자체가 매끄럽게 변하는 애니메이션. 색이나 위치가 아니라 윤곽선의 점들이 움직입니다.
플립 기법FLIP technique
레이아웃이 바뀌기 전(First)과 후(Last)의 위치 차이를 계산해, 바뀐 직후 요소를 원래 자리로 되돌려놓고(Invert) transform으로 자연스럽게 되돌리는(Play) 기법.
뷰 트랜지션View Transition
전환 전과 후의 화면을 자동으로 크로스페이드·모핑해주는 브라우저 네이티브 API. document.startViewTransition()으로 씁니다.
키프레임Keyframes
애니메이션의 시작과 끝뿐 아니라 중간 지점들(0%, 50%, 100%…)에서 값을 지정해 여러 단계를 하나의 애니메이션으로 엮는 CSS 문법.
스쿼시 앤 스트레치Squash and stretch
물체가 빠르게 움직이거나 충돌할 때 부피는 유지한 채 눌리고(squash) 늘어나는(stretch) 원칙. 디즈니 "애니메이션 12원칙" 중 첫 번째입니다.
애니티시페이션Anticipation
본동작을 하기 전에 반대 방향으로 살짝 움츠러드는 준비 동작. 골프 스윙의 백스윙처럼, 다음에 무슨 일이 일어날지 미리 예고합니다.
팔로우 스루Follow-through
몸통이 멈춘 뒤에도 머리카락·옷자락·꼬리 같은 부속물은 관성으로 계속 움직이다 뒤늦게 따라붙는 원칙. "오버래핑 액션"과 짝을 이룹니다.
모션 패스Motion path
요소가 직선이 아니라 SVG로 그린 임의의 경로(곡선, 나선 등)를 따라 움직이는 CSS 기능. offset-path와 offset-distance로 만듭니다.
스플릿 텍스트 리빌Split text reveal
문장을 글자·단어 단위로 쪼갠 뒤 각각을 개별 요소로 만들어 스태거로 하나씩 등장시키는 기법. SplitType, GSAP SplitText 같은 라이브러리가 이 작업을 대신해줍니다.
카운트업Count-up
숫자가 0(또는 이전 값)에서 목표값까지 빠르게 올라가며 변하는 애니메이션. 대시보드의 통계·KPI 카드에서 흔합니다.
시머Shimmer
스켈레톤 화면 위로 밝은 빛줄기가 대각선으로 스쳐 지나가며 "로딩 중"임을 알리는 효과.
펄스Pulse
크기나 투명도가 커졌다 작아졌다를 부드럽게 반복하며 "살아있다"는 느낌을 주는 애니메이션. 알림 점, 녹화 표시등에 흔합니다.
셰이크Shake
요소가 좌우로 짧게 여러 번 흔들리는 애니메이션. 잘못된 입력이나 실패한 동작에 대한 즉각적인 피드백으로 씁니다.
바운스Bounce
목표 지점에 도착한 뒤에도 몇 번 더 튕기며 잦아드는 애니메이션. 물리적으로 통통 튀는 공을 흉내 냅니다.
카드 플립Card flip
카드가 Y축으로 180도 회전하며 앞면에서 뒷면으로 뒤집히는 3D 효과. perspective와 transform-style: preserve-3d로 만듭니다.
블러 인Blur-in
요소가 흐릿한 상태에서 선명하게 초점이 맞아가며 나타나는 등장 효과. filter: blur()와 opacity를 함께 애니메이션합니다.