버블 에디터 튜토리얼 1. 디자인 탭(Design Tab)

버블(bubble.io)

by 하희철 2023. 2. 24. 15:31

버블에서 내 프로덕트를 만들려면 에디터와 친해져야 합니다. 뭔가 기능이 많아서 어려워 보이지만 하나씩 차근차근 설명해 드릴게요!

가장 먼저 여러분이 가장 많은 시간을 보내야 할 공간이죠. 바로 '디자인 탭'입니다.

1) 툴바(Tool Bar)

제작 과정에서의 주된 설정을 지정할 수 있는 영역입니다. 구체적인 설정 내용은 다음과 같습니다. (왼쪽부터)

페이지 이동 : 앱의 페이지를 생성, 삭제하거나 이동할 수 있습니다. 재사용 요소도 페이지와 마찬가지로 관리 가능하고, 백엔드워크플로우 이동도 할 수 있습니다.
요소 선택 : 요소의 이름을 검색해서 선택할 수 있습니다. 페이지 내 요소가 많아져 선택이 어려워질 경우 유용하게 활용할 수 있습니다.
Edit : 요소의 일부 설정을 조정할 수 있는 메뉴를 선택할 수 있습니다. 이 영역은 마우스 우클릭과 동일하고, 실제로는 마우스 우클릭을 더 많이 쓰기 때문에 거의 쓰지 않습니다.
Save : 제작 시 에디터의 설정 동작의 저장 상태를 표시합니다. (모든 작업은 자동 저장됩니다)
Grid&borders : 디자인 작업창을 내가 원하는 제작 환경으로 설정할 수 있습니다. (예 : 요소의 테두리 표시하기)
Arranges : 요소끼리의 순서나 정렬 등 요소의 배치 상태를 설정할 수 있습니다.
Components : 버블에서 제공하는 컴포넌트(영역 단위의 미리 준비된 모듈) 선택창을 열 수 있습니다.
Undo&Redo : 제작 시 에디터의 설정 동작을 취소하거나 되돌릴 수 있습니다. (단축키 ctrl+z, y로도 가능)
설정 검색창 : 요소, 컨테이너, API 등 페이지 내에 설정된 모든 내역을 검색해서 찾을 수 있습니다.
배포 : 제작한 앱을 라이브 버전으로 배포할 수 있습니다. (퍼스널 플랜 이상에서만 가능)
프리뷰 : 페이지 제작 상황을 라이브 버전으로 미리 점검할 수 있습니다. 새 탭에서 프리뷰 페이지가 열리고, 여기서 디버깅도 할 수 있습니다.
헬프 : 버블 매뉴얼을 확인할 수 있습니다.
내 프로필 : 유저 프로필, 정보를 확인할 수 있습니다.

2) 에디터 탭(Editor Tab)

최초 접속 시 디자인 탭으로 들어가게 됩니다. 데이터나 워크플로우 탭으로 이동하려면 이쪽에서 원하시는 탭 버튼을 눌러 이동할 수 있습니다.

3) 요소 트리(Elements Tree)

디자인 작업창에 요소가 많이 쌓이게 되면 원하는 요소를 찾거나 어떤 컨테이너로 감싸져 있는지 확인하기 어려워집니다. 그럴 때는 여기 '요소 트리'를 활용하시면 됩니다.

UI빌더(UI Builder) : 페이지 내 요소가 어떤 식으로 배치되어 있는지 트리(부모, 자식 관계 시각 구조) 구조로 확인할 수 있습니다. 요소를 숨기거나 숨은 요소를 보이게 할 수도 있고, 드래그&드롭으로 요소를 이동하거나 복사, 삭제, 붙여 넣기 등을 할 수 있어 편리합니다.
반응형 설정(Responive) : 기기별 가로폭에 대응하도록 요소나 레이아웃의 크기를 조절하는 데 있어 좀 더 편리한 기능을 제공합니다. 가로폭을 줄이면서 UI를 확인하고 요소에 가로폭 조건식(예 : Current page width < 1200)을 걸어 반응형 디자인을 설정할 수 있습니다.

4) 요소 선택창

페이지의 UI를 디자인하는 요소들을 종류별로 구분, 여기서 원하는 요소를 선택해 디자인 작업창에 배치하면서 페이지의 UI를 디자인할 수 있습니다.

시각 요소(Visual Elements) : 텍스트, 버튼, 이미지 등 시각적으로 UI를 구성하는 요소
컨테이너(Containers) : 그룹, 리피팅 그룹 등 다른 요소를 감싸서 부모가 될 수 있는 요소
인풋 폼(Input Forms) : 인풋, 드롭다운, 라디오 버튼 등 유저가 데이터를 입력할 수 있는 요소
재사용 요소(Reusable Elements) : 컴포넌트처럼 미리 제작해 놓은 모듈화 된 요소
요소 템플릿(Element Templates) : 탭, 회원가입/로그인 템플릿(거의 쓰지 않음)

5) 디자인 작업창

유저에게 보이고 이용하는 공간입니다. 요소 선택창에서 요소를 드래그&드롭으로 배치하고 레이아웃을 조절하면서 UI를 완성할 수 있습니다.

에디터에서 보이는 디자인 작업창은 말 그대로 제작을 위한 공간이기 때문에 유저에게 보여지는 화면과 상이합니다. 그래서 수시로 프리뷰 화면으로 실제 유저에게 어떻게 보이는지 확인하시는 것이 좋습니다.

6) 요소 설정창

디자인 작업창에서 요소를 선택하거나 더블클릭하면 나오는 요소 설정창입니다.

외모(Appearance) : 말 그대로 요소의 외형을 편집할 수 있습니다. (예 : 텍스트 요소의 경우 폰트, 폰트 크기, 폰트 색상, 자간 등 편집 가능)
레이아웃(Layout) : 요소가 영역에서 어떤 식으로 자리를 차지하고 배치되는지 레이아웃을 설정할 수 있습니다.
조건식(Conditional) : 특정 조건일 경우 요소가 숨겨지거나 다른 데이터를 보여주거나 하는 등의 조건식을 설정할 수 있습니다.