topic★★★★★난이도 · 약 12분
Stagger (순차 등장)
여러 요소가 시차를 두고 등장하면 리듬감이 생기고, 정보 위계가 명확해진다.
#stagger#순차#딜레이#리듬#cascade
왜 배우는가
5개의 항목이 동시에 등장하면 시선이 분산된다. 하지만 0.05초 간격으로 순차 등장(stagger)하면 관객의 시선이 자연스럽게 첫 번째 → 마지막으로 흐른다. 인포그래픽, 리스트, 카드 그리드에서 필수적인 패턴이다.
Stagger는 동일한 애니메이션을 여러 요소에 적용하되, 시작 시점을 일정한 간격(delay)으로 어긋나게 하는 기법이다. 도미노가 순서대로 넘어지는 것처럼, 요소들이 물 흐르듯 차례로 등장한다.
| 딜레이 간격 | 체감 | 사용 예시 |
|---|---|---|
| 30~50ms | 물 흐르듯 연속적 | 리스트 아이템, 테이블 행 |
| 50~100ms | 리듬감 있는 순차 | 카드 그리드, 갤러리 |
| 100~200ms | 하나씩 명확히 구분 | 스텝 인디케이터, 프로세스 |
| 200ms+ | 드라마틱, 하나씩 강조 | 키워드 순차 등장, 카운트다운 |
Stagger의 방향이 정보 위계를 만든다. 위→아래 stagger = 시선이 자연스럽게 하향. 좌→우 stagger = 읽기 방향과 일치. 중앙→외곽 stagger = 중심 강조. 방향을 의식적으로 선택하면 정보 전달력이 높아진다.
AE에서 Stagger 구현: ① 모든 레이어를 선택 → ② 키프레임을 설정 → ③ Sequence Layers(레이어 시퀀스)를 사용하거나, 수동으로 각 레이어의 시작점을 2~4프레임씩 밀기. GSAP에서는 `stagger: { each: 0.05, from: 'start' }` 한 줄이면 된다.
실기 드릴 1문항
edit실기 드릴 · 단답형
5개의 카드가 자연스럽게 순차 등장하려면 각 카드 사이의 딜레이 간격으로 적절한 범위는?