topic★★★★★난이도 · 약 20분
프로세스 플로우: 단계별 화살표 연결 애니메이션
단계 아이콘이 순서대로 나타나고 화살표가 연결되는 프로세스 다이어그램 모션.
#프로세스 플로우#화살표#워크플로우#다이어그램
왜 배우는가
프로세스 플로우는 절차, 워크플로우, 비교를 설명할 때 가장 직관적인 형식이다. 정적 다이어그램을 애니메이션으로 바꾸면 단계별 이해도가 극적으로 올라간다.
프로세스 플로우 애니메이션은 3가지 요소로 구성된다: ① 노드(단계를 나타내는 도형/아이콘) ② 커넥터(화살표/연결선) ③ 라벨(단계 설명 텍스트). 이 세 요소가 순서대로 등장하면서 전체 흐름을 보여준다.
| 요소 | 애니메이션 기법 | 타이밍 |
|---|---|---|
| 노드 | Scale 0→100% (Pop) 또는 Opacity 페이드 | 각 노드 0.3초 |
| 커넥터 | Trim Paths End 0→100% | 노드 등장 후 0.2초 뒤 시작, 0.4초 |
| 화살표 머리 | 커넥터 End가 80% 넘으면 Opacity 100% | 커넥터 종료 직전 |
| 라벨 | Opacity 0→100% + Y +5px→0px | 노드와 동시 또는 0.1초 뒤 |
순차 리듬 — 노드1 등장(0.3s) → 커넥터1 그려짐(0.4s) → 노드2 등장(0.3s) → 커넥터2 그려짐(0.4s) → ... 이 리듬이 일정하면 시청자가 흐름을 자연스럽게 따라간다. 마지막 노드만 약간 크게(Scale 110→100%) 만들어 '결론 강조' 효과를 준다.
레이아웃 패턴 — 수평 흐름(좌→우)이 가장 보편적이지만, 단계가 5개를 넘으면 U자형(좌→우→아래→좌)이나 지그재그로 전환한다. 원형 순환 프로세스는 원 위에 노드를 배치하고 Trim Paths로 원형 커넥터를 그린다.
실기 드릴 2문항
edit실기 드릴 · 단답형
프로세스 플로우에서 단계와 단계를 잇는 화살표/연결선이 그려지는 애니메이션은 어떤 Shape Layer 기능으로 구현하는가?
check_circle실기 드릴 · OX
프로세스 플로우에서 노드가 5개를 넘으면 수평(좌→우) 레이아웃보다 U자형이나 지그재그가 적합하다. (O/X)