topic★★★★★난이도 · 약 12분
속성 간 시차(Offset)
위치 먼저 → 스케일·투명도 나중. 시차 하나로 모션의 격이 달라진다.
#Offset#Stagger#시차#다중 속성
왜 배우는가
모든 속성이 동시에 시작하고 동시에 끝나면 '뭉뚝한' 느낌이 난다. Position이 2프레임 먼저 출발하고, Scale이 뒤따르고, Opacity가 마지막으로 합류하면 — 같은 요소인데 유기적이고 살아있는 느낌이 된다. 이 기법을 Offset(시차) 또는 Stagger(시차 배치)라고 한다.
속성 간 Offset은 한 레이어 내에서 Position, Scale, Rotation, Opacity 키프레임의 시작/끝 시점을 의도적으로 어긋나게 배치하는 기법이다. 보통 2~4프레임(약 0.08~0.17초 at 24fps) 간격이면 충분하다.
| 순서 패턴 | 느낌 | 대표 사용처 |
|---|---|---|
| Position → Scale → Opacity | 물리적 이동 후 크기·존재감 등장 | 슬라이드인 타이틀 |
| Opacity → Position → Scale | 서서히 나타나면서 이동 | 부드러운 카드 등장 |
| Scale → Position | 팡! 터지면서 이동 | 팝업, 알림 |
| 동시 시작, 다른 종료 | 각 속성이 다른 타이밍에 안착 | 고급 로워서드 |
2-4-2 법칙: 시작 Offset 2프레임 + 메인 모션 4프레임(이상) + 종료 Offset 2프레임. 시작과 끝에서 속성들이 '겹치는' 구간이 생기면서 움직임에 두께감이 생긴다. 모든 속성이 정확히 같은 프레임에 시작/끝나면 아마추어 티가 난다.
요소 간 Stagger는 여러 레이어가 순차적으로 등장하는 패턴이다. 5개의 리스트 항목이 위에서 아래로 0.05초 간격으로 떨어지면 '캐스케이드' 효과가 된다. 속성 간 Offset(한 레이어 내부)과 요소 간 Stagger(여러 레이어)를 조합하면 매우 정교한 모션 시퀀스가 완성된다.
실기 드릴 1문항
check_circle실기 드릴 · OX
모든 속성(Position, Scale, Opacity)의 키프레임이 같은 시점에 시작하고 같은 시점에 끝나면 가장 자연스러운 모션이 만들어진다.