2-2. Bubble Key tools (기초): 버블의 핵심 도구, 버블의 특별한 도구 이해하기

Key tools

(1) Property Editor

• 요소(element)를 두 번 클릭하거나 이벤트 또는 액션을 한 번 클릭하면 나타납니다.
• 속성 편집기는 각 페이지의 다양한 요소를 디자인하고 이벤트 및 액션을 사용자 정의하는 데 사용하는 주요 패널입니다.
• 이것은 요소, 액션 또는 이벤트에 대해 채워야 하는 다양한 필드를 보여주는 이동 가능한 팝업창입니다.
• 최상단 표시 줄(사진 1 Text Name)에서 현재 편집 중인 요소/액션/이벤트의 이름을 바로 바꿀 수 있습니다.

상단 오른쪽 아이콘 툴

• 오른쪽에 있는 아이콘을 사용하여 비디오 강의, 요소 추적기, 코멘트 패널을 이용할 수 있습니다.

• 요소 추적기 안에는 state와 해당 element 가 어느부분과 연관되어 있는지 추적된 정보가 표시됩니다.
• state는 미니 정보 저장소라고 생각하면 쉽게 이해가 가능합니다. 프런트엔드 개발을 할 때 element의 state를 통해서 data들을 주고받을 수 있습니다.

 

(2) Property Editor 안의 Tabs

1. Appearance

• 요소의 전반적인 외관과 관련된 컨트롤입니다.
• 데이터 유형, 데이터 원본, 스타일 및 전환 설정을 포함합니다.

 

2.Layout

• 요소를 페이지에서 전체적으로 배치하는 데 관련된 컨트롤입니다.
• 너비, 높이, 컨테이너 레이아웃 유형, 페이지 가시성 및 여백을 포함합니다.

 

 

3. Conditional

조건부식을 사용하여 특정 상황에서 페이지 요소의 동작과 모습을 제어할 수 있습니다.

 

 

(3) 상단 바의 tools :상단 오른쪽에 위치

 

상단 오른쪽 바의 모습

1. App Search Tool

 

 

• 복잡한 요소들로 여러 페이지가 구성되어 있는 경우, 특정 스타일을 가진 요소를 찾고자 할 때 돋보기 아이콘을 클릭하면 검색 도구가 나타납니다.
• 분류별로 구성되어 요소, 액션 등을 검색할 수 있습니다. 각 항목을 클릭하면 원하는 페이지/탭으로 이동합니다.

 

 

• '텍스트 포함' 옵션은 검색 대상 텍스트의 일부가 포함된 요소와 일치하는 것을 검색합니다.
• 예를 들어, 필드의 이름을 바꿀 때, 해당 필드의 모든 메타데이터의 이름을 바꾸지 않습니다.
• 왜냐하면 이렇게 하면 매우 느리기 때문에 새 표시 이름을 표시해야 할 위치에만 새 표시 이름을 표시합니다.

 

 

 

2. Issue Checker

Issue Checker

 

• Bubble은 매우 개방적인 특성을 가지고 있기 때문에 설계 과정에서 실수를 할 수 있습니다.
• 이러한 실수는 필드명의 누락이나 일관성이 없는 데이터type과 같은 문제일 수 있습니다.
• 예를 들어 '현재 사용자에게 청구' 동작에서 텍스트 필드 유형을 사용하는 경우, 가격을 나타내는 숫자 필드 유형을 사용해야 합니다.
• 문제 검사기는 앱을 실시간으로 확인하고 수정해야 할 문제 목록을 나열합니다.

 

• 문제가 발생하면 상단 바에 빨간색 경고 아이콘이 나타나며, 해당 경고 아이콘을 클릭하면 목록이 표시됩니다.
• 검색 도구와 유사하게 각 항목을 클릭하면 해당 문제가 발생한 위치로 이동하여 강조 표시됩니다.

 

• 문제 목록을 항상 가능한 한 적게 유지하는 것이 중요합니다.(가능하면 항목 수를 0개로 유지).
• 문제가 있으면 앱을 실행할 수 없으므로 사용자가 접하는 실제 앱 버전으로 배포할 수 없습니다.

 

3. Preview

• Bubble에서 새 앱을 생성하면 앱을 실행할 준비가 된 상태입니다.
• 언제든지 미리 보기를 클릭하면 현재 편집 중인 페이지에서 애플리케이션을 실행해 볼 수 있습니다.

 

4. Version Control

• 버전 관리를 통해 라이브 앱에 영향을 주지 않고 개발 환경에서 앱 작업을 할 수 있으며, 앱이 완전히 준비되었을 때 배포할 수 있는 안전한 프로세스를 제공합니다. 버전 관리에 대해 더 알아보세요.