아이콘 모션: Trim Path + 색 전환
라인 아이콘이 그려지고 색이 채워지는 2단계 아이콘 애니메이션.
아이콘은 인포그래픽의 핵심 시각 요소다. 정적 아이콘 대신 그려지면서 등장하는 아이콘은 시청자의 시선을 확실하게 잡는다.
아이콘 모션의 가장 대표적인 패턴은 2단계 리빌이다: ① 1단계 — 라인 드로잉: Stroke만 있는 상태에서 Trim Paths로 윤곽선이 그려짐 ② 2단계 — 색 채움: 그려진 윤곽선 위에 Fill이 Opacity 0→100%로 채워짐. 이 조합이 '그려지면서 완성되는' 느낌을 준다.
| 단계 | 속성 | 값 변화 | 시간 |
|---|---|---|---|
| 라인 드로잉 | Trim Paths End | 0% → 100% | 0~0.6초 |
| 색 채움 | Fill Opacity | 0% → 100% | 0.5~0.9초 (드로잉과 겹침) |
| 강조 펄스 | Scale | 100% → 108% → 100% | 0.9~1.2초 (선택) |
색 전환 트릭 — Fill Color를 화이트(배경색)에서 브랜드 컬러로 전환하면, 아이콘이 '잉크가 스며들듯' 색이 차오르는 효과가 된다. 이것을 Trim Paths 드로잉과 약간 겹치게 타이밍하면(드로잉 80% 시점에 색 전환 시작) 매우 유기적으로 보인다.
아이콘 소스 — Illustrator에서 라인 아이콘을 그리거나, Iconify/Feather Icons 등의 SVG를 가져와 사용한다. AE에서 SVG를 임포트하면 자동으로 Shape Layer로 변환된다. 중요한 것은 아이콘이 단일 연속 Path 또는 소수의 Path로 구성되어야 Trim Paths가 깔끔하게 작동한다는 점이다.
세트 아이콘 스태거 — 3~5개 아이콘을 나란히 배치하고 0.15초 간격으로 순차 등장시키면 인포그래픽의 핵심 메시지를 리듬감 있게 전달할 수 있다. 모든 아이콘의 Stroke Width와 색상을 통일해야 세트로 읽힌다.
아이콘 모션의 2단계 리빌에서 라인 드로잉이 완전히 끝난 후에 색 채움을 시작해야 자연스럽다. (O/X)
Trim Paths로 아이콘 드로잉 애니메이션을 깔끔하게 만들려면 아이콘이 어떤 구조로 되어 있어야 하는가?