topic★★★★★난이도 · 약 10분
루프 & 펄스
반복 모션으로 주목을 유도하고 생동감을 유지한다 — 무한 루프의 기술.
#루프#펄스#반복#loopOut#주목
왜 배우는가
정지된 화면은 죽은 화면이다. 미세한 반복 모션(루프/펄스)은 화면에 생기를 불어넣고, 특정 요소에 지속적으로 주의를 끈다. CTA 버튼의 미세 펄스, 로딩 인디케이터의 회전, 배경 파티클의 부유 — 모두 루프의 응용이다.
루프(Loop)는 동일한 애니메이션을 무한 반복하는 것이고, 펄스(Pulse)는 미세한 크기/밝기 변화를 반복하여 '숨 쉬는' 효과를 만드는 것이다. 둘 다 끊임없이 시선을 유도하지만, 펄스가 더 미묘하고 세련되다.
| 패턴 | AE 구현 | CSS 구현 | 사용 예시 |
|---|---|---|---|
| 회전 루프 | loopOut('cycle') on Rotation | `animation: spin 2s linear infinite` | 로딩 스피너 |
| 펄스 | loopOut('cycle') on Scale 98%↔102% | `animation: pulse 2s ease-in-out infinite` | CTA 버튼, 알림 뱃지 |
| 부유 | loopOut('cycle') on Position Y ±5px | `animation: float 3s ease-in-out infinite` | 배경 파티클, 아이콘 |
| 깜빡임 | loopOut('cycle') on Opacity | `animation: blink 1s step-end infinite` | 커서, 경고 |
| 흔들림 | wiggle(2, 5) Expression | — | 손글씨 느낌, 불안정 |
루프의 황금률: 미세하게, 느리게. 루프 모션이 너무 크거나 빠르면 산만하다. Scale 펄스는 ±2% 이내, 부유는 ±3~5px, 주기는 2~4초가 적절하다. 사용자가 의식하지 못하지만 '화면이 살아 있다'고 느끼는 수준이 최적이다.
AE 표현식: `loopOut('cycle')` — 마지막 키프레임 이후 처음으로 돌아가 무한 반복. `loopOut('pingpong')` — 정방향 재생 후 역방향 재생을 반복(더 부드러움). `wiggle(freq, amp)` — 무작위 흔들림 생성. 예: `wiggle(2, 5)` = 초당 2번, ±5 범위.
실기 드릴 2문항
edit실기 드릴 · 단답형
AE에서 키프레임 애니메이션을 정방향→역방향 교대로 무한 반복하는 loopOut 모드는?
check_circle실기 드릴 · OX
CTA 버튼의 펄스 효과로 Scale을 ±10% 변화시키면 적절한 주목 효과가 된다.