이징

등장은 감속(Ease Out), 퇴장은 가속(Ease In), 화면 안에서 이동할 때는 In-Out이 기본입니다. After Effects 기본 Easy Ease(영향도 33%)는 밋밋해서, 그래프 에디터에서 영향도를 70~90%까지 당긴 커브를 많이 씁니다.

CSS 값은 AE 영향도를 cubic-bezier로 옮긴 근사치입니다.

애니메이션 원칙

12원칙 중 타이밍·스페이싱, 예비동작, 팔로스루·오버래핑이 핵심입니다. 그리고 요소마다 2~4프레임씩 출발을 어긋나게 하는 오프셋이 특히 중요합니다. 그다음이 스쿼시 앤 스트레치와 아크입니다.

모션 성격

IBM Carbon 디자인 시스템은 모션을 둘로 나눕니다. Productive는 짧고 절제된 기능형, Expressive는 크고 극적인 강조형입니다. 금융·정보 서비스는 Productive 위주로 가고, 강조할 순간에만 Expressive를 씁니다.

커브·길이 값 출처: IBM Carbon Design System · Motion

길이 감각

경험칙으로 UI 모션은 150~400ms, 로고 스팅은 2~5초입니다. 화면 텍스트는 직접 소리 내어 읽은 시간의 약 1.5배 동안 보여 줍니다.

프레임레이트

같은 움직임도 초당 프레임 수에 따라 느낌이 달라집니다. 국내 방송 29.97/59.94, 영화 23.976/24, 손그림 느낌 12fps(on twos), 숏폼 30/60을 씁니다.

이 화면은 모니터 주사율(보통 60Hz)을 넘어서 보여 줄 수 없습니다.

납품 포맷

투명 배경이 필요하면 ProRes 4444, 웹·앱은 Lottie(JSON)나 dotLottie, 일반 영상은 H.264/H.265 MP4입니다. 비율은 16:9, 9:16, 1:1, 4:5를 주로 씁니다.

툴 지도

2D는 After Effects, 3D는 Cinema 4D·Blender·Houdini, 실시간은 Unreal·TouchDesigner, UI는 Rive·Lottie가 기본입니다. 오른쪽 표의 항목을 누르면 도감으로 이동합니다.