애니메이션 원리

모션 원리

무언가가 어떻게 움직여야 '옳게' 느껴지는지 결정합니다. 어떤 도구를 사용하든 상관없습니다. 이 스킬은 타이밍, 이징, 간격, 무게, 리듬에 대한 답을 제시합니다. 기술 스택을 고르는 것이 아니라, 어떤 구현 환경에든 바로 전달할 수 있는 구체적인 숫자(지속 시간, cubic-bezier 곡선, 스태거 오프셋, 스프링 설정)를 생성합니다.

사용 시기

• 모션이 뻣뻣하거나, 둥둥 떠 있거나, 기계적이거나, 로봇 같거나, 저렴해 보여서 진단이 필요할 때.
• 클립이나 트랜지션의 지속 시간, 이징 곡선, 스태거 오프셋을 선택할 때.
• 모션이 물리 직관(무게, 후속 동작, 호)을 존중하는지 검토할 때.
• 키프레임을 음악 비트나 편집 강조점에 동기화할 때.

세 가지 기둥 — 숫자를 정하기 전에 먼저 결정하세요

모든 모션은 지속 시간이나 곡선을 고르기 전에 세 가지 질문에 답해야 합니다. 이를 건너뛰면 기술적으로는 올바르지만 아무 느낌도 들지 않는 모션이 탄생합니다. 이것들은 이 컬렉션의 나머지 부분이 참조하는 공유 어휘입니다.

기둥	질문	결정하는 것
감정적 의도	시청자가 무엇을 느껴야 하는가? (기쁨, 평온, 긴박감, 신뢰, 우아함)	이징, 지속 시간, 진폭/오버슈트
시각적 내러티브	마이크로 스토리는 무엇인가? 설정 → 동작 → 해소	순서, 스테이징, 무엇이 언제 등장하는지
모션 크래프트	어떻게 믿을 수 있게 만들 것인가?	물리, 보조 동작, 호, 후속 동작

세 가지 모션 레이어 — 평면이 아닌 깊이

평면적인 모션 = 주 동작만 움직입니다. 믿을 수 있는 모션은 세 가지 레이어를 동시에 실행합니다.

• 주요(Primary) — 눈이 따라가는 주요 동작(주인공 움직임).
• 보조(Secondary) — 주요 동작에 반응하는 풍부한 지원 동작(그림자 이동, 아이콘 살짝 움직임, 늦게 정착하는 레이블).
• 주변(Ambient) — 결코 주의를 끌지 않는 배경의 생동감(느린 그라데이션 드리프트, 저대비 펄스).

판단 레이어(motion-art-direction)는 이를 Hero / Support / Texture라고 부릅니다. 동일한 세 가지 레이어이며, 무엇이 모션을 받을 자격이 있는지에 따라 순위가 매겨집니다. 주요≈Hero, 보조≈Support, 주변≈Texture입니다.

핵심 원리

이징은 가장 강력한 단일 레버입니다

선형 모션은 로봇처럼 읽힙니다. linear는 연속 루프(스피너, 마키, 무한 스크롤)에만 사용하세요. 눈이 개별 이벤트로 인식하는 모든 것은 가속이 필요합니다.

곡선을 동작에 맞추세요:

• 등장 / 나타남 -> ease-out (빠른 시작, 부드러운 정착). 물체가 에너지를 가지고 도착하여 제자리에 감속하며 안착합니다. cubic-bezier(0.16, 1, 0.3, 1).
• 퇴장 / 사라짐 -> ease-in (부드러운 시작, 빠른 끝). 물체가 가속하며 사라집니다. cubic-bezier(0.7, 0, 0.84, 0).
• 이동 / 재배치 (화면에 머무름) -> ease-in-out (대칭). cubic-bezier(0.65, 0, 0.35, 1).
• 장난기 / 브랜드 -> 약간의 오버슈트. cubic-bezier(0.34, 1.56, 0.64, 1) (1.56은 1.0을 초과하여 "무게"로 읽히는 오버슈트-후-정착을 만듭니다).

경험 법칙: 눈은 느린 시작보다 느린 끝을 훨씬 덜 용서합니다. 확실하지 않으면 정지 상태로 감속하세요.

수동 이징 적용 (After Effects). 곡선을 제공하는 대신 수동으로 키프레임을 잡는 경우, 동일한 원리가 그래프 에디터에 적용됩니다. 스피드 그래프의 끝을 0에 가깝게 평평하게 만들고, 감속 영향을 80-90%로 밀어 스냅한 런칭과 부드러운 정착을 만드세요. F9 (Easy Ease)는 33% 대칭 시작점일 뿐입니다. 비대칭으로 만드세요. 그래프 에디터 읽기, 핸들/영향 기법, 단계별 오버슈트, 반동, 바운스 레시피(감쇠 바운스 표현식 포함)는 references/easing-graph-editor.md를 참조하세요.

타이밍은 무게와 중요성을 전달합니다

요소	지속 시간
마이크로 인터랙션 (호버, 토글, 탭 피드백)	100-200ms
UI 트랜지션 (패널, 모달, 페이지 영역)	200-400ms
Hero / 큰 요소 / 전체 화면	400-800ms
영화 같은 카메라 무브	800-2000ms

거리와 크기는 지속 시간을 확장합니다. 20px 움직이는 작은 아이콘과 800px 움직이는 전체 패널은 동일한 지속 시간을 공유해서는 안 됩니다. 패널은 더 많은 시간이 필요하며, 그렇지 않으면 무게가 없어 보입니다. 실용적인 스케일링: 거리나 면적이 대략 두 배가 될 때 지속 시간을 약 30-50% 추가하여 인지 속도를 거의 일정하게 유지하세요. 무거운 물체는 천천히 시작하고 덜 오버슈트하며, 가벼운 물체는 스냅하고 바운스할 수 있습니다.

간격과 스태거는 리듬을 만듭니다

리스트, 그리드 또는 그룹을 한 번에 모두 드러내지 마세요. 하나의 평평한 이벤트로 읽힙니다. 각 자식의 시작을 스태거하세요.

• 리스트 / 순차 항목: 항목 간 40-80ms.
• 밀집 그리드: 20-40ms (항목이 많을수록 항목당 지연 시간이 줄어듭니다. 그렇지 않으면 꼬리가 너무 길어집니다).
• 그룹의 총 공개 시간은 대략 600-800ms로 제한하세요. count * offset이 이를 초과하면 오프셋을 줄이거나 거리 기반 스태거(원점에서 멀리 떨어진 항목이 나중에 시작)로 전환하세요.
• 스태거 방향은 눈의 움직임을 따라야 합니다. 위에서 아래로, 또는 초점에서 방사형으로.

1/3 법칙 (두 가지 형태, 모두 보편적):

• 거리 — 어떤 요소도 중간 키프레임이나 축소/투명도 변경 없이 화면의 약 1/3 이상을 이동하지 않아야 합니다. 긴 끊김 없는 슬라이드는 "템플릿이 움직였다"로 읽히지 "무언가 발생했다"로 읽히지 않습니다.
• 동시성 — 3개 이상의 요소가 있을 때, 한 번에 약 1/3 이하만 활성 모션 상태로 유지하세요. 나머지는 고정되거나 주변 모션으로 움직입니다. 모든 것이 함께 움직이면 초점이 없는 소음이 됩니다.

반동과 후속 동작은 물리적 움직임을 판매합니다

• 반동(Anticipation): 주요 동작 전에 작은 반대 움직임(버튼이 scale 0.95로 살짝 눌렸다가 튀어오르는 것, 캐릭터가 점프 전에 웅크리는 것). 60-120ms면 충분합니다.
• 후속 동작 / 오버래핑 액션(Follow-through / overlapping action): 뒤따르는 부분이 주요 몸체가 멈춘 후에도 계속 움직입니다(히어로 카드가 착지한 후 그림자와 레이블이 40-80ms 늦게 정착). 모든 것을 같은 프레임에서 멈추지 말고 부착된 요소의 정착을 스태거하세요.
• 호(Arcs): 자연스러운 움직임 곡선입니다. 유기적인 물체의 순수 직선 변환은 기계적으로 보입니다. x/y에 약간의 호를 추가하거나 경로를 따라 애니메이션하세요.

비트 동기화와 리듬

모션이 오디오와 함께할 때, 영향 키프레임(타격, 컷, 공개)을 비트 위에, 비트 사이가 아니라 비트 위에 배치하세요. 120 BPM에서 비트는 500ms이고, 8분 음표 그리드는 250ms입니다. 주요 순간을 해당 그리드에 양자화하세요. 음악이 없는 편집의 경우, 시각적 펄스(예: 약 500-800ms마다 하나의 주요 이벤트)를 설정하여 작품이 일관되게 숨 쉬도록 하세요.

스프링 기반 vs 지속 시간 기반 모션

스프링(질량 / 강성 / 감쇠)은 자체적으로 지속 시간을 결정하며, 상호작용적이고 중단 가능한 모션(드래그 릴리즈, 제스처)에 대해 더 물리적으로 느껴집니다. 지속 시간+이징은 정확한 동기화가 중요한 안무되고 타임라인에 고정된 시퀀스(비디오, 스크롤 연동 공개)에 더 좋습니다. 스냅한 기본 스프링: stiffness 300, damping 30, mass 1. 전체 스프링 표는 references/easing-curves.md를 참조하세요.

일반적인 실패 진단

• 뻣뻣함 / 로봇 같음 -> 등장에 linear 또는 대칭 이징 사용. ease-out으로 전환.
• 둥둥 뜸 / 느림 -> 지속 시간이 너무 길거나 ease-out이 너무 부드러움. 지속 시간 30% 줄이고 곡선을 날카롭게.
• 저렴함 / 어색함 -> 모든 것이 한 번에 나타남(스태거 없음), 또는 모든 요소가 크기에 관계없이 하나의 지속 시간을 공유함.
• 이징에도 불구하고 기계적임 -> 반동, 후속 동작, 직선 경로 없음. 호와 오버랩 추가.

빠른 참조

필요	사용
등장	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
퇴장	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
이동	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
브랜드 팝	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
리스트 스태거	항목당 40-80ms, 총 ~700ms 제한
루프 전용	linear

참조 파일

• references/easing-curves.md — 정확한 값이 있는 명명된 cubic-bezier 라이브러리, 스프링 설정(Framer/react-spring/iOS), 요소 유형별 지속 시간 가이드.
• references/easing-graph-editor.md — After Effects 그래프 에디터 크래프트: 속도 그래프 대 값 그래프, 이징 핸들 및 영향/속도 숫자, 단계별 스냅, 오버슈트, 반동, 바운스 레시피.
• references/twelve-principles.md — 12가지 디즈니 원칙 모두, 각각 구체적이고 숫자화된 모션 그래픽 예제 포함.