후원 받은 커피는 더 많은 자료를 만드는 원동력이 됩니다.
목차
썸네일 출처 : 바들바들 동물콘
1. 플로팅 그룹 요소란?
버블에서는 컨테이너 유형의 요소들이 있습니다. 우리가 흔히 사용하는 그룹 요소나 리피팅 그룹 요소도 모두 컨테이너 유형의 요소입니다. 근데 이 중에서는 플로팅 그룹 요소도 존재합니다. 이 놈은 도대체 뭘까요?
전지전능한 chatGPT에게 Floating이 무슨 의미인지 물어본 결과, “떠 있는 상태”라고 합니다. 이 의미만큼 플로팅 그룹의 의미를 잘 담아낸 표현이 없습니다. 플로팅 그룹은 페이지 위에서 떠 있는 그룹 요소라고 보시면 됩니다.
버블에서 플로팅 그룹 요소를 생성하면, 요소 트리에서 페이지와 아예 독립적으로 나오는 걸 볼 수 있습니다. 아래 이미지를 보면 플로팅 그룹 요소는 [Overlays]라는 영역에 있고, 페이지에 존재하는 모든 요소는 [Layers]라는 영역에 존재합니다. 즉, 플로팅 그룹 요소는 페이지 위에 존재하는 독립적인 그룹 요소라고 보시면 됩니다.
2. 플로팅 그룹을 어디에 써먹나요?
자! 플로팅 그룹 요소를 이해했으니, 이제 이 놈을 써먹는 곳을 알아야겠죠? 결론부터 말하자면, “페이지의 스크롤과 관계 없이 계속 보여줘야 하는 요소”를 만드는 데 사용한다고 생각하면 됩니다. 예를 들어봅시다. 아래 영상은 제가 좋아하는 토스의 홈페이지입니다. 보면 페이지를 아무리 스크롤해도, 위에 보이는 헤더가 고정된 위치에서 보여지죠? 이렇게 스크롤과 무관하게 존재하는 요소를 구현하기 위해 플로팅 요소를 사용합니다.
또 다른 예시로 제가 운영하는 노션박스를 보겠습니다. 영상 속의 페이지는 프로젝트 관리를 도와주는 노션 템플릿을 소개하는 페이지입니다. 아무리 스크롤을 해봐도, 하단의 버튼이 계속 보이게 됩니다. 이런 경우도 플로팅 그룹을 사용합니다 ( 프로젝트 템플릿이 궁금하면, 여기를 클릭해주세요 꺠알 홍보 )
여기를 클릭해주세요 꺠알 홍보 ) 혹은 버튼이 아니라 자연스럽게 노출시키는 광고를 위해 플로팅 그룹 요소를 사용할 수 있습니다. 영상의 좌측 하단을 보면, 접근을 유도하는 팝업이 자연스럽게 노출됩니다. 해당 서비스는 제가 만든 서비스라 저작권 문제는 없습니다!
위 예시를 보니 이제 플로팅 그룹을 어떻게 써먹을지 대충 감이 오셨나요? 자! 지금부터 아는 사람만 써먹을 수 있다는 플로팅 그룹을 버블에서 어떻게 써먹는지 알아봅시다.
버블 전문가가 되봅시다! (출처 : 농담곰)
3. 플로팅 그룹으로 헤더 만들기
한 번 플로팅 그룹 요소를 활용해 헤더를 만드는 법을 설명드리겠습니다. 우선 페이지에 플로팅 그룹 요소를 추가합니다. 해당 요소를 생성하면, 다음 이미지처럼 페이지보다 훨씬 작고 귀여운 모습으로 추가됩니다. 사람마다 다르겠지만, 저 같은 경우 플로팅 그룹 요소는 위치를 고정하는 목적으로만 사용하고, 보여주는 내용은 하위 그룹 요소를 사용해 관리합니다.
아래 이미지를 보면 아시겠지만, 플로팅 그룹 요소는 그룹 요소와 설정이 다릅니다. [Vertically float relative to] 선택란에서는 플로팅 그룹 요소를 페이지의 위(top)와 아래(bottom) 중에 어디에 위치시킬지, [Horizontally float relative to]에서는 페이지 왼쪽(Left)와 오른쪽(Right) 중에 어디에 위치시킬지 선택합니다. 다만, 이 선택은 플로팅 그룹 요소의 위치에만 영향을 줍니다. 따라서, 플로팅 그룹 요소를 활용해 위치만 지정하고, 내부에 들어가는 내용은 하위 그룹 요소에서 설정을 합니다.
앞서 말했듯, 이건 개인 취향 차이인 듯 합니다. 제 방식은 참고만 하고, 자신에게 맞는 방법을 사용하세요.
뭐 사람마다 쓰는 방식은 다르니깐요…! (출처 : 무한도전)
아무튼, 제 방식대로 설명을 계속 드리곘습니다. 우선 플로팅 그룹 요소의 [Width]를 100%로 지정해 브라우저 전체 화면을 따라가게 설정합니다. 앞서 말했듯, 플로팅 그룹 요소는 페이지와 독립적으로 존재하는 그룹 요소입니다. 따라서, %로 단위를 지정하면 유저가 접속한 브라우저의 width 크기를 따라갑니다.
플로팅 그룹 요소 안에 하위 그룹 요소를 만듭니다. 그리고 내용이 들어가는 영역이 무분별하게 늘어나는 걸 방지하기 위해 Max width는 1080px, 좌우 패딩은 40px로 적절히 설정하겠습니다. 레이아웃은 하위 요소를 X축으로 배열하기 위해 당연히 Row로 설정해야겠죠? 그리고 Max width를 설정했기에 [Horizontal alignement]에서 [Centered]을 선택해 해당 영역을 페이지 정중앙에서 적용해 보여줘야 합니다. 만약 [Left-aligned]로 선택을 하면, 1080px보다 큰 화면에서 유저가 접속 시에 플로팅 그룹 요소가 왼쪽 끝에서 정렬이 되서 오른쪽에 빈 공간이 발생하게 됩니다.
이제 그룹 요소 안에 이쁘게 로고도 넣고, 네비게이션 버튼도 넣어보겠습니다
자! 적어도 헤더라면 색은 있어야겠죠? 쌈@뽕하게 플로팅 그룹 요소에 배경 색을 칠하게 있습니다. 실수로 위에 작업한 그룹 요소에 배경 색을 칠하면 안 됩니다. 현재 헤더의 전체 영역은 플로팅 그룹 요소로 결정되고, 앞서 작업한 그룹 요소는 최대 1080px까지만 늘어납니다. 만약 그룹 요소에 색을 적용한다면, 유저가 1200px의 화면으로 접속할 경우에 120px(1200-1080)의 영역은 그룹 요소가 채우지 못해서 색이 적용되지 않습니다.
자 한 번 [Responsive] 탭을 클릭하고 확인해보겠습니다. 아래 영상을 보면 화면이 1080px보다 커도 헤더가 페이지 전체를 꽉 채워서 색이 적용되며, 헤더에 들어가는 내용은 1080px 영역 안에서 보여지는 걸 확인할 수 있습니다.
4. 플로팅 그룹으로 CTA 만들기
이번에는 헤더가 아니라 아래 이미지처럼 CTA를 만들어 보겠습니다.
생성한 플로팅 그룹의 [Vertically float realtive to]를 [Bottom]으로 변경합니다. 그러면 페이지 최하단에 위치하게 됩니다.
이제 하위 그룹 요소를 추가합니다. 내용이 들어가는 영역이 무분별하게 늘어나는 걸 방지하기 위해 Max width는 1080px, 좌우 패딩은 40px로 적절히 설정하겠습니다. 그룹 요소 안에는 버튼 요소만 들어갈 거기에 [Container layout]는 [Column]으로 선택합니다. Max width보다 큰 화면에서 접속했을 경우, 해당 그룹 요소가 정중앙에 위치할 수 있도록 [Horizontal alignement]에서 [Centered]을 선택합니다. [Horizontal alignment]는 [Centered]로 설정하고, [Height]는 눈치껏 조정합시다
이제 생성한 그룹 요소 안에 버튼 요소를 추가합니다. 생성한 버튼 요소는 그룹 요소의 정중앙에 오도록 [Horizontal aglinment]를 [Centered]로 선택합니다. 그리고 [width]는 페이지 전체를 채우지 않고, 부분만 채울 수 있도록 80%로 설정하겠습니다.
[Responsive] 탭에서 적용된 결과를 확인하겠습니다. 아래 영상처럼 화면 크기가 1080px를 넘을 경우, 그룹 요소의 max width는 1080px에서 80%가 적용된 크기로 버튼 요소가 있는 걸 볼 수 있습니다. 만약 1080px보다 화면이 작을 경우, 자동적으로 크기가 줄어들게 됩니다.
5. 광고 팝업을 플로팅 그룹으로 구현하기
마지막으로 페이지에서 우측 하단에 보여지는 광고 팝업을 플로팅 그룹으로 구현하겠습니다.
플로팅 그룹 요소의 [Vertically float relative to]를 [Bottom], [Horizontally float relative]를 [Right]로 선택합니다. 그러면 해당 플로팅 그룹 요소는 페이지 하단 우측에 위치하게 됩니다. 이후, [Fit width to content]를 활성화해서 내부에 들어가는 하위 요소에 의해 크기가 정해지도록 설정합니다.
플로팅 그룹 요소 안에 그룹 요소를 추가합니다. 팝업처럼 보여질 수 있도록 관련 설정 값을 적절히 입력합니다. 이때, 페이지 우측 하단에 완전히 붙어있지 않도록 마진 값을 적절히 설정해야 합니다.
이제 그룹 요소 안에 텍스트 요소를 추가하고 광고 팝업에 들어갈 요소를 입력하면 됩니다.
[Responsive] 탭에서 확인해보면, 화면 크기와 상관 없이 페이지 우측 하단에 팝업이 보이게 됩니다. 단, 해당 설정은 PC에서만 적합하기에 모바일에서는 Conditional 설정을 통해 따로 관리를 해야 합니다.
추가적으로 광고 팝업이 상시적으로 나오는 게 싫다면, 워크플로우를 설정하면 됩니다. 우선 플로팅 그룹 요소의 [This element is visible on page load]를 비활성화 해서 페이지가 실행될 때 보이지 않도록 합니다.
[워크플로우] 탭으로 이동한 후, [Do when condition is true]를 선택해 이벤트를 추가합니다.
그리고 이벤트의 [Only when]에 현재 페이지의 스크롤 위치를 조건으로 설정합니다. 아래 설정으로 하면, 유저가 페이지에서 200px 정도 스크롤을 했을 때, 해당 워크플로우가 실행됩니다.
액션에 [show element]를 추가하고, 앞서 숨김 처리한 플로팅 그룹을 보여주도록 설정합니다.
이제 유저가 200px 이상 스크롤을 하면, 숨김 처리한 플로팅 그룹 요소가 보여지게 됩니다. 다음 영상을 보면 처음에 안 보이다가 스크롤을 하니 생성한 팝업 광고가 나왔습니다.
만약 팝업 광고가 부자연스럽게 나온다고 느껴지면, 액션에서 [Animate]를 추가하고 선택한 요소의 애니메이션을 추가할 수 있습니다.
6. 저도 버블 초보자를 벗어나고 싶어요…!
버블박스는 국내 버블이 언급되기도 전인 20년부터 버블을 사용했습니다. 경험이 많다보니 다른 분들보다 아는 것도 많고, 노하우도 상당합니다. 이번에 버블박스에서 책을 냅니다. 해당 책에는 버블에서 서비스를 빌드할 때, 기획부터 환경 설정, 페이지 작업 방식, 워크플로우 설정 등 전반적인 개념과 실습을 다룰 예정입니다. 그 동안 출간 제의는 많이 받았지만, 리소스가 딸리고 애매한 퀄리티의 책이라면 아예 내놓지 않겠다는 방침을 세웠기에 거절했습니다. 다만, 국내 버블 유저가 많아짐에 따라, 책 1권이 큰 도움이 될 것 같아서 몸을 갈아넣어 책을 쓰고 있습니다. 책에 관심이 있다면, 아래서 신청해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
버블박스를 운영하는 페임리가 궁금하다면?
If you're curious about Family?
버블박스 l BubbleBox
