모션 원칙

모션 원칙은(는) 무엇을 하나요?

어떤 것이 어떻게 움직여야 올바르게 느껴지는지 결정합니다. 사용하는 도구와 무관합니다. 이 스킬은 타이밍, 이징, 간격, 무게, 리듬을 다룹니다. 기술 스택을 선택하지 않고, 구현에 바로 전달할 수 있는 구체적인 숫자(지속 시간, cubic-bezier 곡선, 스태거 오프셋, 스프링 설정)를 생성합니다.

사용 시점

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

세 가지 기둥 — 숫자를 선택하기 전에 정리할 것

모든 움직임은 지속 시간이나 곡선을 고르기 전에 세 가지 질문에 답해야 합니다. 건너뛰면 기술적으로는 올바르지만 아무것도 느껴지지 않는 움직임이 만들어집니다. 이것들은 나머지 모든 내용이 참조하는 공유 어휘입니다.

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

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

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

• 프라이머리 — 눈이 따라가는 주요 동작 (히어로 무브)
• 세컨더리 — 프라이머리에 반응하는 지원 풍성함 (그림자 이동, 아이콘 미세 조정, 레이블이 늦게 안착)
• 앰비언트 — 절대 주의를 요구하지 않는 배경 생동감 (느린 그라데이션 드리프트, 저대비 펄스)

판단 레이어(motion-art-direction)에서는 이를 Hero / Support / Texture 라고 부릅니다. 동일한 세 레이어이며, 움직임의 가치에 따라 순위가 매겨집니다. Primary≈Hero, Secondary≈Support, Ambient≈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
히어로 / 대형 요소 / 전체 화면	400-800ms
시네마틱 카메라 무브	800-2000ms

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

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

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

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

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

• 거리 — 어떤 요소도 중간 키프레임이나 스케일/불투명도 변경 없이 화면의 약 1/3 이상 이동하지 않아야 합니다. 긴 끊김 없는 슬라이드는 '템플릿이 움직였다'로 읽히지 '무언가 일어났다'로 읽히지 않습니다.
• 동시성 — 3개 이상의 요소가 있을 때, 한 번에 약 1/3 이상을 활성 동작 상태로 두지 마세요. 나머지는 고정되거나 앰비언트로 움직입니다. 모든 것이 함께 움직이면 초점이 없는 노이즈가 됩니다.

앤티시페이션과 후속 동작은 물리적 움직임을 판매합니다

• 앤티시페이션: 주 동작 전의 작은 역방향 움직임 (버튼이 튀어오르기 전에 scale 0.95로 움푹 들어감, 캐릭터가 점프하기 전에 웅크림). 60-120ms면 충분합니다.
• 후속 동작 / 중첩 동작: 주요 본체가 멈춘 후에도 뒤따르는 부분이 계속 움직입니다 (히어로 카드가 착지한 후 그림자와 레이블이 40-80ms 늦게 안착). 모든 것을 같은 프레임에서 멈추지 말고 부착된 요소들의 안착을 지연시키세요.
• 호: 자연스러운 움직임 곡선; 유기적 객체의 순수 직선 이동은 기계적으로 보입니다. 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 — 정확한 값, 스프링 설정(Framer/react-spring/iOS), 요소 유형별 지속 시간 가이드를 포함한 명명된 cubic-bezier 라이브러리.
• references/easing-graph-editor.md — After Effects 그래프 에디터 제작: 속도 그래프 vs 값 그래프, 이징 핸들 및 영향도/속도 숫자, 단계별 스냅, 오버슈트, 앤티시페이션, 바운스 레시피.
• references/twelve-principles.md — 12가지 디즈니 원칙 모두, 각각 구체적인 숫자 기반 모션 그래픽 예제 포함.