2-1. Bubble 인터페이스 이해 (기초): 버블 플랫폼 시작하기

버블 화면

 

이 장에서는 Bubble인터페이스와 이를 탐색하는 방법을 다룹니다.

 

에디터는 7개의 Main tab들로 이루어져있습니다.
핵심 툴(key Tools)과 핵심기능(Core Features)들로 구성되어 애플리케이션을 만들 수 있게 도와줍니다.

아래에는 그것들의 이름과 기능들을 소개하겠습니다.

 

 

(1) Main tabs

1. Design tab

이곳에서는 앱의 시각적인 외관을 디자인합니다.

 

• 페이지에 요소(element)를 그리고 드래그하며 크기를 조정하고 속성과 외관을 조정할 수 있습니다. 새로운 사용자들은 여기서부터 시작하는 것을 권장합니다.

 

• 새로운 요소를 추가하려면 왼쪽 팔레트에서 요소(element) 유형을 클릭한 다음 페이지에 삽입하기 위해 클릭하고 드래그하십시오.
• 요소(element)를 더블 클릭하면 속성 편집기가 자동으로 표시되어 요소의 외관과 동작을 사용자 정의할 수 있습니다.
• 요소(element)를 마우스 오른쪽 버튼으로 클릭하면 추가 편집 옵션이 있는 드롭다운 메뉴가 표시됩니다.

 

2. Workflow tab

워크플로우 탭은 페이지를 프로그래밍하는 워크플로우를 정의하는 곳입니다.

 

• 서로 다른 워크플로우는 하나의 이벤트를 나타내는 하나의 개별 상자로 표시됩니다.
  • Event(이벤트) -  상자 안에는 When 으로 시작하는 이벤트를 정의할 수 있습니다.
  • Action(액션) - 해당 이벤트가 발생할때 실행되는 행동입니다.

 

• 이벤트나 액션을 클릭하면 속성 편집기와 유사한 패널이 표시됩니다.
  • 이곳에서 액션에 필요한 다양한 필드를 정의할 수 있습니다.
  • 예를 들어 '이메일 보내기' 액션은 '수신자'라는 필드가 있는 패널을 열어 이메일을 보낼 주소를 정의할 수 있습니다.
  • 이 정보가 동적인 경우에는 코드 없이 동적 식을 구축할 수 있는 조합을 구성하여 추가할 수 있습니다.

 

3. Data tab

데이터 탭은 데이터 구조를 보고 수정할 수 있는 곳입니다.

 

• 애플리케이션에서 사용되는 다양한 데이터 유형과 각각의 필드를 볼 수 있습니다. 'App data' 섹션에서는 실제 데이터를 확인할 수 있습니다.
• 엑셀 형식(스프레드시트 형식)의 보기에서 생성된 항목을 확인하고 생성하고 내보내고 수정하고 삭제할 수 있습니다.
• ‘Privacy’ 섹션에서는 응용 프로그램의 데이터가 올바른 사용자에게 표시되도록 개인 정보 규칙을 정의할 수 있습니다. 이것은 고급 기능이지만, 응용 프로그램을 실제로 사용할 때 설정해야 할 사항입니다.

 

4. Styles tab

스타일 탭은 인터페이스에서 요소(element)가 가질 수 있는 사용자 스타일을 정의하는 곳입니다.

 

• 스타일은 (예: 배경 색상, 글꼴 크기 등) 요소 유형 (예: 텍스트 요소)에 적용할 수 있는 공유된 속성의 집합입니다.
• 스타일을 사용하면 일관된 인터페이스를 유지할 수 있으며 테마를 빠르게 변경할 수 있습니다.
• 시간절약을 위한 개발이 필요하다면 가능한 경우 스타일을 사용을 권장합니다.

 

5. Plugins tab

플러그인은 Bubble의 핵심 기능을 확장하는 방법입니다.

 

• 예시) 커뮤니티에서 구축한 요소를 사용하려면 플러그인을 응용 프로그램에 설치해야 합니다. Stripe를 사용하여 신용 카드를 청구하거나 사용자가 Facebook으로 가입할 수 있도록 제공하려면 플러그인을 설치해야 합니다.

 

• 플러그인 탭에서 플러그인을 설치할 수 있습니다.
  • 플러그인이 설치되면 필요한 경우 각 플러그인에 매개변수를 입력할 수 있습니다.
  • 예시) Stripe 플러그인을 사용하려면 Stripe에서 가져온 API 키를 입력해야 합니다.
• 플러그인 탭은 플러그인을 검토하고 평가할 수 있는 곳이기도 합니다.
  • 많은 경우 플러그인은 커뮤니티의 요청에의해 제작되므로 평가와 리뷰는 Bubble 생태계를 건강하게 유지하고 플러그인 제작자가 플러그인을 개선하는 데 도움이 됩니다.

 

6. Settings tab

이 탭에서는 애플리케이션의 구독과 유료 plugin 등 을 제어할 수 있습니다.

 

• 설정 탭에서는 애플리케이션을 시작하기 전에 정의해야 하는 일부 애플리케이션 general setting도 찾을 수 있습니다.
• 이러한 설정에는 색 팔레트 정의, 사용자 정의 폰트 추가, 비밀번호 정책 설정, 앱 비공개 설정 등이 포함됩니다.

 

7. Logs tab

이 탭은 앱이 실행 중인 경우나 Run 모드에서 테스트하는 경우 유용합니다.

 

• 서버 로그를 사용하여 지난 이벤트 및 워크플로우 문제를 진단하는 데 도움을 받을 수 있으며, 예약된 작업 및 워크플로우 실행 및 업로드 스토리지에 대한 앱 사용량을 확인할 수 있습니다.

 

8. 주의사항

• 동일한 앱에 대해 Bubble 애플리케이션 편집기의 여러 개의 열린 브라우저 탭을 동시에 사용하면 예상치 못한 동작이 발생할 수 있습니다

 

이번 글에서는 Main tabdml 7가지 tab 에 대해 알아봤습니다.

 

다음에는 핵심 툴(key Tools)과 핵심기능(Core Features)들로 에 대해 설명드리겠습니다.