중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
1. 애니메이션으로 디테일을 더하자
아래 영상을 보면, 페이지를 스크롤하니깐 플로팅 그룹이 나오는 걸 볼 수 있습니다. 혹시 자신이 평소 쓰는 플로팅 그룹가 어딘가 달라보이지 않나요?
잘 모르겠다고요? 천천히 봐보면, 플로팅 그룹이 “팍!”하고 나오는 게 아니라 “스르륵-”하고 나옵니다.
차이를 잘 모르겠다고요? 그러면 한 번 아래 2개의 영상을 비교해보죠! 차이가 확 느껴지시나요? 왼쪽이 “팍!”이고, 오른쪽이 “스르륵-”입니다. 이런 식으로 버블에 애니메이션을 조금만 추가해도, 서비스를 더 멋지게 보여줄 수 있습니다.
버블에서는 요소에 애니메이션을 추가할 수 있습니다. 심지어 애니메이션 숫자도 매우 다양하고, 적용하기도 매우 쉽습니다! 버블박스와 함께 쌈@뽕하게 서비스를 만들어 봅시다!
2. Animation Action이란?
바쁜 한국인을 위해 결론부터 말하자면, 워크플로우에서 [Animate] 액션만 추가하면 됩니다. 액션을 확인해보면, [Element Actions] 카테고리에 [Animate]가 떡하니 존재합니다. 다만, 많은 분이 딱히 신경쓰지 않아서 종종 놓치는 액션입니다.
[Animate] 액션은 특정 요소를 지정해 애니메이션 효과를 추가할 수 있습니다. [Element] 선택란에 효과를 적용할 요소를 선택합니다.
요소를 선택하면 [Animation] 선택란이 생깁니다. 여기에 적용할 애니메이션을 선택하면 됩니다. 애
니메이션이 되게 많은데, 직관적으로 어떤 효과인지 이름을 보고 파악할 수 있습니다. 이름의 구조는 {효과}{시작 방향}{액션 방향} 으로 보면 됩니다. 예를 들어, [Transition SlideLeftIn]은 “Transition Slide” 효과이며, “Left”에서 시작해 “In” 방향으로 액션한다”라고 해석하면 됩니다
3. 스르륵 등장하는 플로팅 그룹 만들기
한 번 아래 같이 스르륵 등장하는 플로팅 그룹을 만들어 보면서 animate 액션을 이해합시다. 해당 플로팅 그룹은 페이지를 일정 기준 스크롤 했을 때, 스르륵 하고 나옵니다.
우선 플로팅 그룹을 만듭니다. 그리고 플로팅 그룹의 [레이아웃] 탭에서 [This element is visible on page load]를 비활성화해 페이지가 실행될 때, 보이지 않도록 설정합니다.
이제 페이지를 특정 기준 이상 스크롤 했을 때, 작동하는 워크플로우를 만들면 됩니다. [워크플로우] 탭에서 새로운 트리거를 추가합니다. 트리거는 [Do when condition is true]를 선택합니다.
그리고 트리거를 작동시킬 조건을 [Only when]에 입력합니다. 페이지를 특정 위치까지 스크롤 했는지 보려면 [current page scrolling position] 동적 표시를 사용하면 됩니다. 이는 브라우저의 현재 Y축 픽셀 값을 뜻합니다. 예를 들어, 아래처럼 설정하면 유저가 브라우저를 480px 이상 스크롤한 순간, 해당 조건은 참(true)가 됩니다.
[Run this]는 [Just once]로 선택합니다. 각 선택지의 의미는 다음과 같으며, 페이지를 스크롤하고 플로팅 그룹을 보여주는 워크플로우를 1번만 동작해도 되기 때문입니다.
•
Just once : 조건을 충족해 트리거가 한 번 작동되면, 그 이후에는 조건을 트리거가 실행되지 않습니다.
•
Every time : 조건을 충족할 때마다, 트리거가 매번 실행됩니다.
이제 액션을 만듭니다. 먼저 [Show element]를 추가해 플로팅 그룹을 페이지에 보이게 만듭니다. 이렇게까지 한다면, 페이지를 480px 이상 스크롤 했을 떄 플로팅 그룹이 나오는 워크플로우가 완성됩니다.
여기서 [Animate] 액션을 추가해 디테일을 살리면 됩니다. 선행 액션으로 이를 추가합니다.
[Animation]에는 [Transition SlideUpIn]을 선탟합니다. 그러면 위 방향으로 스르륵 하고 등장하는 애니메이션 효과가 추가됩니다
이제 테스트를 해보면, 다음처럼 플로팅 그룹이 위 방향으로 스르륵 하고 나옵니다.
사실 Animate 액션은 버블의 워크플로우 액션이 뭐가 있는지 뜯어봐야 눈치챌 수 있는 기능입니다. 사용하기는 되게 쉽지만, 숨겨진 꿀 같은 기능이죠. 이처럼 버블은 알면 좋은 게 많지만, 초보자 입장에서 알아야 하는 게 뭐가 있는지도 몰라서 난감합니다. 이렇게 뉴비 분들이 버블의 기초 개념부터 핵심 기능까지를 차근차근 알려주는 책을 집필하고 있습니다. 아래에서 출판 알림을 신청할 수 있습니다!
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
