Divi 애니메이션은 별도 플러그인이나 코드 없이도 페이지 요소에 등장 효과를 입히는 기능이다. 섹션·행·모듈 어디에든 적용할 수 있고, 페이드·슬라이드·바운스 같은 효과로 정적인 화면에 움직임과 시선 유도를 더한다. 이 글에서는 Divi에서 애니메이션이 어디에 있는지, 어떤 효과와 세부 옵션을 제공하는지를 개념 중심으로 정리한다. (이 글은 과거 이미지가 모두 유실되어 텍스트 기준으로 다시 정리한 보존용 문서다.)
Divi 애니메이션은 어디에 있나
Divi의 애니메이션 옵션은 모듈·행·섹션 설정 창의 Design(디자인) 탭 → Animation(애니메이션) 그룹에 들어 있다. 즉 특정 모듈 하나뿐 아니라 행 전체, 섹션 전체에도 동일하게 효과를 줄 수 있다는 뜻이다. 기본값은 “애니메이션 없음”이며, 원하는 효과를 고르는 순간부터 세부 옵션이 펼쳐진다.
애니메이션은 해당 요소가 화면에 스크롤되어 들어올 때 한 번 재생되는 방식이 기본이다. 그래서 사용자가 페이지를 내려 읽을 때 요소가 자연스럽게 “등장”하는 인상을 준다.
제공되는 Divi 애니메이션 효과
Divi는 공식적으로 다음 7가지 애니메이션 스타일을 제공한다.
| 효과 | 동작 |
|---|---|
| Fade(페이드) | 투명도 0%에서 시작해 100%로 서서히 나타난다 |
| Slide(슬라이드) | 지정한 방향에서 요소가 미끄러지듯 들어온다 |
| Bounce(바운스) | 요소가 위아래·좌우로 튀듯이 들어온다 |
| Zoom(줌) | 작게 시작해 100% 크기로 커지며 확대되는 느낌을 준다 |
| Flip(플립) | 등장하면서 3D로 기울어지는 효과를 준다 |
| Fold(폴드) | 접혀 있던 요소가 펼쳐지듯 나타난다 |
| Roll(롤) | 요소가 굴러 들어오는 듯한 효과를 준다 |
효과를 선택하면 그에 맞는 세부 옵션만 활성화된다. 예를 들어 슬라이드·바운스·줌·플립처럼 방향이 있는 효과는 방향 옵션이 함께 노출된다.
Divi 애니메이션 세부 컨트롤
효과를 고른 뒤에는 다음 컨트롤로 움직임의 결을 다듬는다. 같은 페이드라도 지속 시간과 속도 곡선을 어떻게 잡느냐에 따라 인상이 크게 달라진다.
- Direction(방향) — 효과가 시작·끝나는 위치를 결정한다. 효과에 따라 최대 다섯 가지 방향(위·아래·좌·우·중앙)에서 고른다.
- Duration(지속 시간) — 애니메이션 한 주기가 걸리는 시간을 밀리초(ms) 단위로 설정한다. 기본 지속 시간은 1초(1000ms)다.
- Delay(지연) — 요소가 화면에 들어온 뒤 애니메이션이 시작되기까지의 대기 시간이다. 여러 요소의 등장 순서를 어긋나게(스태거) 연출할 때 쓴다.
- Intensity(강도) — 움직임이 얼마나 크고 과감한지를 조절한다. 값을 키우면 더 스냅 있고, 줄이면 더 은은해진다.
- Starting Opacity(시작 투명도) — 기본적으로 모든 애니메이션은 투명도 0에서 페이드되며 들어온다. 이 값을 올리면 페이드 느낌을 줄이거나 없앨 수 있다.
- Speed Curve(속도 곡선) — 이징(easing) 방식을 골라 움직임의 가속·감속 느낌을 바꾼다.
- Animation Repeat(반복) — 기본은 1회 재생이다. Loop(루프)를 선택하면 효과가 계속 반복된다.
실무에서 애니메이션을 쓸 때 주의할 점
애니메이션은 양념 같은 요소다. 모든 모듈에 효과를 걸면 페이지가 산만해지고 가독성이 떨어진다. 헤드라인, 핵심 CTA 버튼, 통계 숫자처럼 시선을 끌어야 하는 소수 요소에만 절제해서 쓰는 편이 효과적이다.
- 지속 시간은 너무 길지 않게(대개 0.3~1초) 잡아야 답답하지 않다.
- Loop(반복)는 주의 환기용 작은 아이콘 정도에만 쓰고, 본문 요소에는 피하는 편이 좋다. 끊임없이 움직이면 피로감을 준다.
- 여러 요소를 순차 등장시키려면 Delay를 단계적으로 늘려 스태거 효과를 만든다.
- 편집 화면(Visual Builder)에서는 효과가 그대로 보이지 않을 수 있으므로, 저장 후 실제 페이지에서 스크롤하며 확인한다.
고급: 코드 모듈과 외부 애니메이션
Divi 기본 애니메이션으로 부족하다면, Code 모듈에 직접 코드를 넣어 외부 애니메이션을 삽입하는 방법도 있다. 대표적으로 Lottie 형식의 벡터 애니메이션은 LottieFiles 같은 서비스에서 원하는 모션을 골라 임베드 코드를 복사한 뒤, Divi의 Code 모듈에 붙여 넣어 사용할 수 있다. 다만 이 방식은 외부 스크립트·리소스에 의존하므로, 기본 애니메이션으로 해결되는 등장 효과라면 굳이 코드 모듈까지 갈 필요는 없다.
참고: 누스쿨은 현재 Elementor를 쓴다
이 글은 Divi 테마를 쓰던 시기에 작성한 자료이며, 현재 누스쿨 사이트는 Elementor로 운영한다. Divi의 Animation 옵션에 해당하는 기능은 Elementor에도 있다. Elementor에서는 위젯의 Advanced(고급) 탭 → Motion Effects에서 진입 애니메이션(Entrance Animation), 스크롤 효과, 마우스 효과 등을 설정한다. 개념은 동일하다 — 요소가 화면에 들어올 때 효과를 한 번 재생하고, 지속 시간과 지연으로 타이밍을 다듬는다. 따라서 아래 정리한 사고방식(어디에 효과를 줄지, 얼마나 절제할지)은 빌더가 바뀌어도 그대로 통한다.
정리
Divi 애니메이션의 핵심은 간단하다. 효과를 줄 요소(모듈·행·섹션)를 고르고, Design 탭의 Animation에서 7가지 효과 중 하나를 선택한 뒤, 방향·지속 시간·지연·강도·시작 투명도·속도 곡선·반복으로 세부를 다듬으면 된다. 가장 중요한 것은 기능 자체보다 절제다. 꼭 필요한 곳에만 짧고 분명하게 쓰는 것이 좋은 모션 디자인의 기본이다.
💬 댓글 0