버블(Bubble.io) 학습 전 기본 구조 살펴보기!

버블(bubble.io)기본 구조 이미지

버블(Bubble.io) 기본 구조

본격적인 버블 강의를 진행하기에 앞서 우리가 알아야 할 것은 버블의 기본 구조이다. 버블은 주요 기능이 정리되어 있는 탭(1)과 각 탭의 기능을 사용할 수 있는 하위 탭(2)으로나누어져있고, 각 기능을 시각화 할 수 있는 페이지(3)로 구성되어 있다. 

 

디자인 탭 이미지

디자인 탭

디자인 탭에는 페이지를 디자인할 수 있는 요소들이 들어 있는데, 크게 5가지로 구성되어 있다. 

 

첫 번째는 Visual elements다. Visual elements는 화면에 표시되는 모든 요소들이 모여 있는 곳이며, 보여지는 화면을 꾸밀 사용하는 모든 요소라고 생각하면 쉽다.

 

두 번째는 Containers이다. Containers는 모든 elememnts를 담아내는 그릇이라 할 수 있다. 하나의 요소가 아닌 여러개의 요소를 묶어서 보여줄 수도 있고, 디자인 적으로 구성할 때 유용하게 사용할 수 있다.

 

세 번째는 Input forms이다. Input forms은 도메인에서 활동하는 유저들의 정보와 데이터를 저장할 수 있게 해주는 요소이다. 회원가입할 때 사용하는 폼을 사용하면 딱이다.

 

네 번째는 Reusable elements이다. Reusable elements는 반복적으로 사용되는 elements를 미리 만들어 놓고 사용하는 것을 의미한다. 홈페이지 상단에 있는 헤더와 메뉴 바 등이 대표적이라 할 수 있다.

 

마지막 다섯 번째는 Elements templates이다. Elements templates은 버블이 제공하는 대표적인 elements로 버블 유저들이 가장 많이 사용하는 Tab elements와 signup login form을 제공한다. 최근 버블에서 컴포넌트를 제공하기 시작하면서, 엘리먼트 템플릿을 잘 사용하지 않는다. 컴포넌트는 우측 상단에서 확인해 볼 수 있다.

 

워크플로우 탭 이미지

워크플로우 탭

다음은 워크 플로우 탭이다. 디자인 탭이 유저들에게 보여지는 디플레이를 디자인하는 공간이었다면, 워크플로우는 유저들에게 보여지지 않는 기능을 디자인하는 공간이라고 보면 된다. 예를 들어 유저들이 회원 가입 폼을 작성하고 “가입하기”버튼을 눌렀을 때 회원으로 등록하고, 정보를 저장하는 기능을 수행한다고 보면 된다. 뿐만 아니라, 홈페이지에서 제품 페이지로 이동을 시켜준다거나, 장바구니에 물건을 담게 하는 기능을 구현할 때도 워크플로우를 활용한다. 

 

워크플로우는 깊게 들어가면 들어갈수록 복잡해지고 어려워지지만, 또 배울수록 활용할 수 있는 기능들이 많아서 신이나는 공간이기도 하다. 조급한 마음으로 버리고 한 스탭씩 나아가면 정말 재미있는 서비스를 만들어 볼 수 있을 것이다.

 

데이터 탭 이미지

데이터 탭

데이터 탭은 유저들의 정보 뿐 아니라, 제품 정보와 프로젝트 정보 등 데이터 베이스 저장해 둔 뒤 정보를 제공해 주는 역할을 하는 공간이다. 앞서 소개했던 비주얼 엘리먼트에 보여지는 데이터도 이 공간에 저장된 정보들을 불러와 보여주는 거라고 생각하면 된다. 버블에서는 데이터를 타입(Type)으로 분류하고 있고, 타입 안에는 포함되는 요소는 필드(Field)라고 명칭하고 있다. 

 

스타일 탭 이미지

스타일 탭

스타일탭에는 버블에서 제공하는 기본 스타일 구성을 확인해 볼 수 있다. 기본 스타일이 마음에 들지 않는다면 새로운 만들 수도 있고, 기존 스타일을 변경해서 사용할 수도 있다. 

 

플러그인 탭 이미지

플러그인 탭

플러그인 탭은 버블 자체에서 제공하지 않는 기능을 제공해주는 공간이라고 생각하면 된다. 가장 대표적인 플러그인 API Connector인데, API Connector를 활용하면 공공기관 데이터를 불러와 서비스를 개발할 수도 있고, 결제 서비스를 연결해 사용할 수도 있다. 이처럼 버블 자체에서 제공하지 않는 기능을 무료/유료로 활용할 수 있는 공간이라고 생각하면 된다.

 

세팅 탭 이미지

세팅 탭

세팅 탭에서는 자신이 사용하고 있는 요금제가 무엇인지 확인할 수 있을 뿐 아니라, 웹/앱에 필요한 기본적인 요소들을 세팅하는 곳이다. 가령 자신만의 서비스를 완성하고 런칭할 때 필요한 도메인 연결을 비롯해서 검색 최적화를 위한 SEO 세팅 등 서비스에 필요한 모든 기본 요소들을 설정하는 공간이라고 생각하면 된다.

 

로그 탭 이미지

로그 탭

마지막으로 살펴볼 것은 로그 탭이다. 로그 탭은 서비스의 현황을 살펴볼 수 있는 공간이다. 버블 같은 경우 플랜별로 제공되는 용량이 다른데, 서비스로 유입되는 유저가 많아진다면 수시로 로그를 확인하여 서버 용량에는 문제가 없는 파악을 해줘야 한다. 그렇지 않으면 서버 과부하로 서비스가 느려지거나 동작하지 않을 수 있다.