Enter/Exit 패턴
fade, slide, scale, flip — 요소의 등장과 퇴장을 설계하는 4가지 기본 패턴.
모든 화면 요소는 나타나고(enter) 사라진다(exit). 이 두 순간을 어떻게 처리하느냐가 모션 디자인의 기본이다. 4가지 기본 패턴만 익히면 로워서드, 타이틀, 인포그래픽 등 대부분의 등퇴장을 커버할 수 있다.
요소의 등장/퇴장은 4가지 기본 패턴의 조합이다. 단독으로 쓰거나 2~3가지를 결합하여 다양한 변주를 만들 수 있다. 예: Fade + Slide = 페이드인하면서 위에서 아래로 슬라이드. Scale + Fade = 작은 크기에서 커지면서 투명도가 올라감.
| 패턴 | Enter | Exit | AE 속성 | 체감 |
|---|---|---|---|---|
| Fade | opacity 0→100 | opacity 100→0 | Opacity | 부드러움, 은은함 |
| Slide | 화면 밖→제자리 | 제자리→화면 밖 | Position | 방향성, 에너지 |
| Scale | 0%→100% | 100%→0% | Scale | 팝업, 주목 |
| Flip | Y회전 90°→0° | Y회전 0°→90° | Rotation Y | 카드 뒤집기, 전환 |
조합 공식: Fade는 거의 모든 패턴에 기본 깔개로 사용한다. Slide만 쓰면 갑자기 잘린 느낌이지만, Fade + Slide를 결합하면 부드러워진다. Scale + Fade도 마찬가지. Fade를 항상 깔고, 위에 방향성을 더한다 — 이것이 실전 공식이다.
Enter/Exit 타이밍 규칙: ① Enter는 200~300ms, Exit은 150~250ms (Exit이 약간 빠르게). ② Enter에는 ease-out, Exit에는 ease-in. ③ 여러 요소가 있으면 Enter는 순차(stagger), Exit은 동시 또는 역순. ④ Exit 완료 후 다음 화면 Enter 시작 — 절대 겹치지 않게.
Slide 패턴으로 텍스트를 등장시킬 때, 부드러움을 더하기 위해 항상 결합하는 기본 패턴은?
Enter와 Exit의 duration은 동일하게 설정하는 것이 가장 자연스럽다.