Bubble은 2021년에 새로운 반응형 엔진을 도입했습니다. 이전 버전의 앱을 사용 중이라면 여전히 이전 엔진과 해당 속성을 볼 수 있습니다. 새로운 반응형 엔진으로 앱을 업데이트하는 것이 좋습니다. 이전 반응형 엔진에 대한 문서는 아래 링크에서 확인할 수 있습니다.
The UI builder
UI 빌더는 앱 페이지에서 시각적 구성 요소를 만들고 조절하는 작업 공간입니다.
Bubble의 직관적인 편집기를 사용하여 요소가 앱의 최종 사용자에게 어떻게 나타날지 시각화할 수 있습니다. 디자인을 진행하는 동안 컨테이너 및 시각적 요소와 같은 각 요소는 반응형 디자인을 보장하기 위한 레이아웃 설정이 포함되어 있습니다.
기본적으로 모든 Bubble 앱에는 사용자가 앱에서 존재하지 않는 URL에 액세스할 때 표시되는 404 페이지 및 비밀번호 재설정을 위한 reset_pw 페이지와 같은 특정한 가 포함되어 있습니다. 여러 페이지를 관리하거나 재사용 가능한 구성 요소로 이동하려면 상단 표시줄의 왼쪽 상단에 있는 드롭다운을 사용하세요.
The element tree
요소 트리는 페이지에 있는 모든 구성 요소를 표시합니다. 들여쓰기는 요소가 컨테이너 내에 있는 계층 구조를 나타냅니다. 요소는 여러 번 중첩될 수 있으며, 그룹 내에 그룹 등이 있을 수 있습니다.
요소 트리는 페이지의 모든 요소를 계층 구조로 표시합니다.
The element pallet
요소 팔레트에는 페이지에 배치할 수 있는 모든 요소가 나열되어 있습니다. Bubble은 다양한 종류의 요소 목록을 제공하며 플러그인을 통해 더 많은 요소를 추가할 수 있습니다.
요소 팔레트에는 페이지에 추가할 수 있는 모든 종류의 요소가 포함되어 있습니다.
요소는 쉽게 찾아다니기 위해 카테고리로 나뉩니다.
•
시각적 요소
•
컨테이너
•
입력 양식
•
재사용 가능한 요소
요소를 빠르게 찾기 위해 검색 막대를 사용할 수도 있습니다. 요소를 페이지에 배치하려면 다음을 수행하세요.
•
요소 팔레트에서 요소를 끌어다 놓습니다.
•
요소 팔레트에서 요소를 클릭한 다음 페이지에 "그립니다".
Responsive
디자인 탭을 UI 빌더 모드에서 반응형 모드로 전환할 수 있습니다. 반응형 설정은 페이지가 다양한 화면 너비에서 어떻게 표시되는지에 대한 구성입니다. 다시 말해 레이아웃이 너비의 변화에 '반응하는' 방식입니다. 따라서 Responsive 탭을 사용하면 화면 크기에 따라 페이지 레이아웃이 어떻게 반응하는지 미리보기하지 않고도 쉽게 알 수 있습니다.
디자인 모드와 반응형 모드 사이를 전환하여 페이지의 반응형 동작을 조절할 수 있습니다.
이 하위 탭의 왼쪽에서 가장 위에는 페이지 너비를 일반적인 화면 너비에 맞추는 바로 가기가 있습니다. 예를 들어 모바일 세로, 모바일 가로, 태블릿 및 노트북 등입니다. 또한 화면 위쪽의 자 등을 사용하여 페이지 너비를 임의의 너비로 변경할 수 있습니다.
선택한 요소의 현재 크기와 해당 부모 크기도 표시됩니다.
Other ways to learn
Related articles
Core reference
