🥷

스르륵- 하고 나오는 애니메이션 창 만들기

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

1. 애니메이션으로 디테일을 더하자

2. Animation Action이란?

3. 스르륵 등장하는 플로팅 그룹 만들기

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 액션은 버블의 워크플로우 액션이 뭐가 있는지 뜯어봐야 눈치챌 수 있는 기능입니다. 사용하기는 되게 쉽지만, 숨겨진 꿀 같은 기능이죠. 이처럼 버블은 알면 좋은 게 많지만, 초보자 입장에서 알아야 하는 게 뭐가 있는지도 몰라서 난감합니다. 이렇게 뉴비 분들이 버블의 기초 개념부터 핵심 기능까지를 차근차근 알려주는 책을 집필하고 있습니다. 아래에서 출판 알림을 신청할 수 있습니다!

중요 공지