노코드 솔루션 버블(Bubble)에서 상/하단 고정 바 (Floating group) 설정하기

나는 개발자도 디자이너도 아니지만, 노코드(No-code) 솔루션 Bubble로 2개의 프로젝트를 운영중이고 1개는 제작중이다.이전에 비해 버블(Bubble)에 대한 한글 가이드나 블로그 자료들이 많아졌지만, 여전히 혼자 해결하기 어려웠거나 기록으로 남겨두면 좋은 정보들을 이렇게 기록해둔다. 

 

버블은 디자인이나 코드에 대한 전문적인 지식이 없어도 아이디어를 실행해보기 좋은 노코드 솔루션으로, 이전에 소개한 적이 있다. 아래 글 참고.

Solo SaaS를 위한 버블(Bubble.io) 탐색

 

버블은 앱보다는 웹 서비스를 구현하기에 더 좋다. 물론 플러그인을 통해 프로그레시브 웹앱(PWA)으로 낼수 있다고 하니, 나중에 기회가 되면 시도해보고 싶다. 버블로 앱을 만드는것이 이전보다는 나아졌다고 하지만, 여전히 사용자들 사이에 의견이 분분하고 디테일한 설정은 복잡하다고 한다.

 

나 역시 버블로 운영중이거나 만드는 프로젝트 3개 외에, 새로운 1개 프로젝트는 모바일 알림 기능이 중요한지라 FlutterFlow로 만들고 있다. 확실히 버블(Bubble)보다는 공부해야할 내용이 많고 아직 어렵게 느껴진다. Flutterflow는 노코드(nocode)라기보다 로우코드(low code)에 가깝다. 몇 가지 공유할만한 내용들이 정리되면 FlutterFlow에 대해서도 글을 작성해볼 예정.

 

이 글에서 다룰 내용은 Floating Group인데, 플로팅 그룹은 상단이나 하단에 설정할 수 있다. 필요하다면 화면 가운데 특정한 시점에 나타나도록 하는 것도 가능하다. Floating Group은 사용자가 페이지를 스크롤해도 화면 상단이나 하단에 특정 요소가 고정되어 계속 따라오도록 설정할 수 있기 때문에, 고정된 위치에서 원하는 메시지가 계속 나타나게 하는 데 유용하고, CSS 코드를 사용해 더 세밀한 조정이 가능하다. 

 

방법 1: Floating Group 설정하기

버블 디자인 탭에서 컨테이너에 있는 플로팅 그룹을 선택해서 위쪽의 Element Tree라고 된곳으로 끌어온다. 레이어쪽에 끌어와도 자동으로 오버레이 영역에 들어가게 된다. 

버블- 디자인 탭- 컨테이너- 플로팅 그룹

 

오버레이에 플로팅 그룹이 생겼다.

 

 

이렇게 플로팅 그룹이 오버레이에 들어가면 투명한 박스가 생기고 Property Editor(위 이미지에서 오른쪽 다크 그레이 박스)가 나타난다.

지금은 플로팅 그룹 박스가 왼쪽 상단에 고정되어있는데, 아래 영상처럼 Vertically, Horizontally float 설정을 바꾸면 상단에 간단한 메시지를 넣을 수 있는 고정 바가 만들어진다. 텍스트나 링크 element를 가져와서 내용을 입력하면 상단 고정되는 Header Sticky 완성.

 

버블(Bubble)에 플로팅 그룹 설정하는 영상

 

**위의 영상이 플레이되지않는다면, 아래 영상으로 확인해주세요 (티스토리 자체 동영상 삽입하니 안나오는 경우가 있네요)

버블(Bubble)에 플로팅 그룹 설정하는 영상

 

 

 

이렇게 간단하게 플로팅 그룹을 활용할 수 있지만, 버블(Bubble)에서 기본 제공되는 HTML Element로도 Sticky Header를 만들고 세밀한 설정이 가능하다.

 

방법 2: CSS를 활용한 Sticky Header

1. Bubble에서 기본 제공되는 HTML Element 추가
    
2. Appearance 탭에서 아래의 HTML/CSS 코드 입력

<style> .sticky-header {
position: -webkit-sticky; 
position: sticky; 
top: 0;       
z-index: 1000;    
} </style>

이 코드는 헤더를 스크롤할 때 화면 상단에 고정되도록 만든다.
    
3. Header Group의 ID Attribute를 sticky-header로 지정

 

4. Property Editor에서 ID Attribute 설정 활성화한 후, ID를 sticky-header로 입력

이렇게 해도 스크롤을 내릴 때 헤더가 화면 상단에 고정되어 표시되지만, 방법 1의 플로팅 그룹 설정이 더 간단하다.

 

 

궁금한 점이 있다면 댓글로 알려주세요-