전혀 움직이지 않는 사이트보다 약간이라도 움직임이 있는 사이트가 사용자의 관심을 받기 쉽겠죠? 웹사이트에 적용된 적절한 애니메이션은 사용자의 관심을 유발하고 잘 만든 애니메이션은 웹사이트를 고급스럽게 만들어 줍니다. 그래서 많은 사이트에서 곳곳에 애니메이션을 적용하게 되죠. 워드프레스 사이트도 마찬가지로, 페이지에 애니메이션을 적용하는 여러 가지 방법들이 존재합니다.
최근엔 구텐베르크 기반의 블럭 에디터가 워드프레스의 기본 에디터로 자리잡음에 따라 페이지나 포스트 속에 애니메이션 효과를 적용하기가 훨씬 더 쉬워 졌습니다.
이 글에서는 내 콘텐츠 블럭에 애니메이션 효과를 적용하는 몇 가지 방법을 소개합니다.
애니메이션 대상 블럭 만들기
우선 데모용으로 쓸 새 페이지를 하나 만들고 그 속에 “미디어 및 텍스트” 블럭을 하나 추가해 보겠습니다. 이 블럭에 애니메이션을 적용하려고 합니다. 물론 꼭 “미디어 및 텍스트” 블럭이어야 할 필요 없고, 아무 블럭이나 상관은 없습니다.
블럭을 만들었으면 이 블럭에 애니메이션을 한번 적용해 볼까요?
Animate It! 플러그인
우선 Animate It! 플러그인입니다.
Animate It!은 워드프레스 사이트에 애니메이션을 추가할 때 가장 많이 사용하는 플러그인입니다. 이 플러그인은 워드프레스 포스트나 페이지 그리고 위젯 등에 애니메이션을 적용할 수 있도록 해주죠. 특히 Class Generator라는 도구를 제공하기 때문에, 이 도구에서 애니메이션 효과를 만들어 그 결과값을 CSS 클래스값으로 가져와 내 사이트에 붙여 넣기만 하면 되기 때문에 편리합니다.
여기서는 간단하게 기본으로 제공되는 “Spin” 스타일을 사용했습니다. 이런 저런 설정을 완료하고 “Generate” 버튼을 누르면 다음과 같이 “Animation Class”가 생성됩니다.
이 값을 복사하여 앞서 우리가 애니메이션을 적용할 대상 블럭에 적용시키면 되겠죠?
블록 편집기에서 해당 블럭을 선택하고 “고급” 탭을 열어 “Additional CSS Class(es)” 입력창에 앞서 복사한 클래스값을 입력해 주면 됩니다.
페이지를 업데이트하거나 미리보기를 해보면 애니메이션이 적용된 것을 확인할 수 있습니다.
Blocks Animation 플러그인
앞서 소개한 Animate It! 플러그인이 블럭 편집기에서도 작동은 하지만, 실은 블럭 전용의 플러그인은 아닙니다. 최근엔 블럭에서 애니메이션을 적용할 수 있도록 해주는 다양한 플러그인들도 많이 나와 있습니다.
그 중 하나가 Blocks Animation 플러그인입니다.
이 플러그인을 설치하면 블럭 설정탭에 “Animations” 라는 메뉴가 하나 추가되며, 이 메뉴를 통해 여러가지 애니메이션 효과를 적용할 수 있습니다.
이 밖에도 블럭 기반에 애니메이션 기능을 추가해 주는 플러그인들이 많이 나와 있으니 잘 골라 사용하면 될 듯 싶습니다.(내부적으로 구현 방식이 조금씩 다르지만, 사용자 입장에선 별 차이 없을 듯 합니다)
Animate.css 직접 추가하기
앞서 소개한 Animate It! 이나 기타 블럭 기반 플러그인들은 실은 내부적으로 Animate.css 라이브러리를 사용하여 애니메이션 효과를 구현합니다.
그렇다면 굳이 플러그인 사용할 것 없이, 직접 이 라이브러리만 내 사이트에 추가하면 되지 않을까요?
네, 맞습니다. 맞고요. 이 라이브러리를 직접 추가하면 별도 플러그인 설치 없이도 내 사이트 내 블럭에 다양한 애니메이션 효과를 줄 수가 있습니다.
우선 Animate.css를 설치하면 되겠죠. 여기서는 CDN 방식으로 설치하였지만, 여러분 사이트에 맞게 원하는 방식으로 설치하면 됩니다!
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
설치 방법은 생략합니다. 일반적인 CSS 파일 설치 방법을 따르면 되니까요. 아래 글을 참고하세요!
설치가 완료되었다면, 이제 블록 편집기에서 애니메이션 효과를 적용할 수 있습니다. 적용 방법은 앞서 Animate It! 사용법에서 소개한 것과 동일합니다. 블록 편집기에서 “Additional CSS Class(es)” 입력창에 애니메이션 클래스값을 입력해 주면 됩니다.
예를 들어 페이지가 로드되고 2초 후에 바운스(bounce) 효과를 주려면, 다음과 같이 “animated bounce delay-2s”라고 입력하면 되겠죠. (순서는 상관 없습니다)
다른 다양한 효과들도 클래스값만 알면 적용할 수 있습니다. Animate.css 에서 사용 가능한 다양한 클래스값은 Animate.css 문서에서 확인하면 됩니다.
스크롤 기반 애니메이션
앞서 Animate It! 플러그인의 Class Generator에는 스크롤이 발생했을 때 애니메이션 효과가 생기게끔 하는 옵션이 있었습니다.
실제로 애니메이션은 지금처럼 페이지 로딩 시점에 줄 경우도 있지만, 스크롤(scroll)이나 클릭(click), 마우스 호버(hover)와 같은 경우에 줄 경우도 있습니다.
만약 Animate.css를 직접 적용하고 페이지가 스크롤되어 블럭이 화면에 표시되었을 때 애니메이션 효과가 생기도록 하려면 어떻게 해야 할까요?
그 역시 별로 어려울 건 없습니다. 이미 시중에 스크롤 애니메이션 처리를 위한 많은 좋은 도구들이 나와 있으니까요. 그 중 하나를 골라 사용하면 될 일입니다. 여기선 지면 관계상 더 자세한 설명은 생략합니다. 필요하신 분들은 아래 글을 참고하시면 좋을 듯 싶습니다.
랜딩페이지에 스크롤 애니메이션 적용하기 – Usefulparadigm blog
지금까지 소개한 내용은 어디까지나 워드프레스 블럭 에디터를 기반으로 한 것입니다.
통상적으로는, 블럭 에디터 기반이 아닌 경우, 테마나 페이지 빌더에서 이런 애니메이션 기능을 제공하는 경우가 많죠. 예를 들어, Divi 테마를 쓰면 Divi 테마 내의 Divi 빌더에서 다양한 애니메이션 효과를 제공합니다. Elementor 같은 페이지 빌더에서도 마찬가지구요.
그럴 경우엔, 굳이 여기서 소개한 방법을 쓸 필요는 없습니다. 이 글에서 소개한 내용은 그저 내 테마에서 애니메이션 기능을 제공하지 않을 때 참고하면 좋을 듯 싶네요.
아마 어쩌면 곧 워드프레스 블럭 에디터(구텐베르크)에도 기본 기능으로 애니메이션 기능이 탑재되지 않을까 싶습니다. 그때면 정말로 이 글은 더는 필요 없게 되겠죠? ㅠㅠ
0 thoughts on “워드프레스 블럭에 애니메이션 적용하기”