• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
부모-자식 관계
우리가 Bubble 요소에 대해 탐색했던 섹션(Elements )에서 본 것처럼, 앱의 디자인은 부모-자식 관계의 계층 구조로 구성됩니다. 페이지 자체는 모든 다른 요소의 부모이며, 그 페이지에 컨테이너를 배치할 수 있으며, 그 컨테이너는 내부의 요소들의 부모가 됩니다.
컨테이너는 또한 컨테이너를 포함할 수 있어, 전자가 후자의 부모가 되며, 필요한 만큼 이러한 부모-자식 관계의 레벨을 구축할 수 있습니다. 이것은 반응형 페이지를 구축하는 기초를 형성합니다.
이 가이드에서는 아래 예시와 같이 부모 컨테이너를 점선 테두리로 표시할 것입니다:
부모 설정과 요소 설정
주어진 요소의 반응형 행동을 설정하는 것은 부모 컨테이너의 설정과 요소 자체의 설정을 혼합함으로써 이루어집니다. 요소가 페이지에 직접 배치되면, 그 페이지가 부모 컨테이너가 되지만, 요소를 컨테이너 요소 안에 배치하면, 그 요소의 설정이 모든 자식 요소에 영향을 미칩니다.
부모 컨테이너의 설정은 요소들이 컨테이너 및 서로 대비하여 어디에 위치하는지 결정합니다. 예를 들어, 수직(행으로) 또는 수평(열로)으로 배치될 수 있습니다. 컨테이너의 설정은 또한 전체 레이아웃의 정렬(예를 들어, 행이 컨테이너의 왼쪽이나 오른쪽에서 시작되어야 하는지 결정하는 등)과 모든 콘텐츠의 총 차원 및 행과 열 사이의 간격을 결정하는 데 사용됩니다.
자식 요소의 설정은 그 요소에 특히 레이아웃 설정을 결정합니다
: 얼마나 높고 넓어야 하나요? 요소가 부모 요소와 형제 요소에 대비하여 주변과 내부에 얼마나 많은 공간을 유지해야 하나요(패딩 및 마진)?
컨테이너 레이아웃 설정
각 컨테이너 요소(페이지 자체 포함)는 레이아웃 설정을 가지고 있으며, 이 설정은 그 안에 있는 모든 요소들의 행동을 제어합니다. 다양한 레이아웃을 요소들이 자신을 어떻게 위치시킬지 알려주는 일련의 규칙으로 볼 수 있습니다.
그들의 위치는 세 가지 요소에 기반합니다:
•
부모 컨테이너의 레이아웃 설정
•
요소 자체의 레이아웃 설정
•
형제 요소들의 설정 및 위치(동일한 컨테이너 안의 다른 요소들)
컨테이너 요소에는 네 가지 유형의 레이아웃이 있습니다:
•
고정
•
부모에 맞춤
•
열
•
행
고정 레이아웃
고정 레이아웃을 사용하면 부모 컨테이너 내에서 요소를 자유롭게 이동하여 배치할 수 있으며, 해당 지점에 자리 잡게 됩니다. 위치는 절대 X와 Y 픽셀 값으로 설정되며, 요소의 크기는 너비(W)와 높이(H) 값으로 설정됩니다.
위치는 부모 요소에 상대적입니다. 즉, 요소는 부모 컨테이너의 왼쪽 상단 모서리로부터 정확히 X와 Y 픽셀 떨어진 곳에 배치됩니다.
아래 애니메이션에서는 버튼이 부모 요소 내에서 자유롭게 배치될 수 있음을 볼 수 있습니다. 부모 그룹 컨테이너에 빨간색 윤곽선은 요소가 해당 그룹의 자식이 될 것임을(이 경우에는 남아 있을 것임을) 나타냅니다.
고정 레이아웃은 특정 시나리오에서 유용할 수 있지만 다양한 화면 크기와 해상도에서 관리하기가 좀 더 어려울 수 있습니다.
부모 및 자식 레이아웃 설정 (고정 레이아웃)
•
부모 레이아웃 컨트롤
◦
없음
•
자식 레이아웃 컨트롤
◦
너비 및 높이
부모에 맞춤 레이아웃
부모에 맞춤은 부모 요소를 9개의 셀 그리드로 나누고 자식 요소를 그리드의 어느 셀에든지 맞출 수 있게 합니다. 아래 그림에서는 사각형 그룹이 왼쪽 상단, 중앙 상단, 오른쪽 상단 등으로 나누어진 것을 볼 수 있습니다.
새로운 자식 요소를 생성하거나 끌어다 놓으면 가장 가까운 셀에 자동으로 맞춰집니다:
자식 요소의 위치를 제어하려면 자식 요소의 속성 편집기를 열어 아래 화살표 각각이 부모 컨테이너의 다른 셀을 나타내는 것을 볼 수 있습니다:
여러 요소
왼쪽 상단과 같은 같은 셀에 여러 요소를 배치하려면 요소들이 서로 겹칠 수 있습니다. 요소들이 서로에 대해 상대적으로 정렬되도록 하려면 다른 레이아웃을 설정한 두 번째 그룹 내에 배치할 수 있습니다.
부모 및 자식 레이아웃 설정 (부모에 맞춤 레이아웃)
•
부모 레이아웃 컨트롤
◦
없음
•
자식 레이아웃 컨트롤
◦
특정 셀에 고정
◦
너비 및 높이
행 레이아웃
행 컨테이너 내의 자식 요소들은 수평으로 하나 이후에 다른 하나가 배치됩니다. 화면 크기가 조정되거나 요소들의 총 너비가 부모 컨테이너의 너비를 초과하면 자식 요소들은 줄바꿈됩니다.
컨테이너 내부에 새로 그린 자식 요소는 기본적으로 리스트의 끝에 추가되지만, 순서 컨트롤을 사용하거나 드래그 앤 드롭으로 재정렬할 수 있습니다.
부모 및 자식 레이아웃 설정 (행 레이아웃)
•
부모 레이아웃 컨트롤
◦
컨테이너 정렬
◦
행 간격
◦
열 간격
•
자식 레이아웃 컨트롤
◦
수직 정렬
◦
순서 선택
◦
너비 및 높이
열 레이아웃
열 레이아웃에서 자식 요소들은 상관없이 서로 위에 배치됩니다:
위 예에서, 부모 그룹은 그 내용이 확장됨에 따라 늘어나도록 설정되어 있습니다. 점점 더 많은 요소들이 보이게 되면서 그룹의 높이가 자동으로 증가합니다:
부모 및 자식 레이아웃 설정 (열 레이아웃)
•
부모 컨트롤
◦
행 간격
•
자식 컨트롤
◦
수평 정렬
◦
순서 선택
◦
너비 및 높이
정렬
행과 열 레이아웃에서 자식 요소들의 정렬을 설정할 수 있습니다: 행 또는 열이 어디서 시작해야 할까요? 예를 들어, 열 레이아웃에서 자식 요소들이 서로 위에 쌓이는 경우, 그 쌓임은 컨테이너 요소의 어느 부분에서 시작해야 할까요?
정렬은 요소의 시작 위치와 부모 컨테이너 전반에 걸쳐 어떻게 퍼져야 하는지를 결정하는 데 모두 사용됩니다.
요소 레이아웃 설정
위 섹션에서는 컨테이너의 레이아웃 설정이 자식 요소에 어떤 영향을 미치는지에 대해 다루었습니다. 이 부분에서는 각각의 개별 자식 요소에 설정된 설정이 어떻게 사용되는지 살펴보겠습니다.
간단히 말해서, 요소 설정은 그 특정 요소의 동작을 제어하는 데 사용되며, 모든 자식 요소에 영향을 미치는 컨테이너 레이아웃 설정과는 대조적입니다. 요소에서는 다음과 같은 사항을 설정할 수 있습니다:
•
요소의 너비는 얼마나 되어야 하나요?
◦
제한 없음
◦
고정 너비
◦
최소/최대 너비
◦
내용에 따라 늘어남
•
요소의 높이는 얼마나 되어야 하나요?
◦
제한 없음
◦
고정 높이
◦
최소/최대 높이
◦
내용에 따라 늘어남
•
요소는 부모 컨테이너의 레이아웃에 대해 어떻게 정렬되어야 하나요?
•
요소가 숨겨졌을 때 너비/높이를 접어야 하나요?
•
마진/패딩
설정에서 볼 수 있듯이, 이는 부모 컨테이너에 설정한 제약 조건 내에서 개별 요소가 어떻게 동작하는지 제어할 수 있는 자유를 제공합니다.
반응형 뷰어 사용하기
새 요소 팔레트 위의 탭에서 UI 빌더 뷰, 즉 요소를 수정하고, 새로운 요소를 드래그하고, 일부를 삭제할 수 있는 뷰와 반응형 뷰어 사이를 전환할 수 있습니다. 반응형 뷰어는 화면 너비, 즉 브레이크포인트를 관리하고 브레이크포인트가 변경됨에 따라 페이지가 어떻게 동작하는지 테스트할 수 있게 해줍니다. 이 뷰에서 페이지 영역 상단의 자 ruler는 현재 페이지 너비를 정의합니다. 자 위를 클릭하거나 드래그하여 페이지 크기를 조정하고 페이지가 동적으로 어떻게 동작하는지 확인할 수 있습니다.
화면 왼쪽에 있는 사전 설정 너비 아이콘을 사용하여 모바일 세로 모드, 가로 모드, 태블릿, 랩탑 또는 데스크탑에서 페이지가 어떻게 보이는지 확인할 수도 있습니다.
요소를 클릭하면 속성 편집기의 레이아웃 탭에 그 동작을 변경할 수 있는 다양한 매개변수가 표시됩니다.
브레이크포인트 관리
Bubble 앱에는 기본 브레이크포인트, 네 개의 사전 설정된 브레이크포인트, 그리고 사용자 정의 브레이크포인트를 추가할 수 있는 기능이 포함되어 있습니다. 기본 브레이크포인트는 해당 페이지에 대해 설정된 기본 빌더 너비 값과 같습니다.
네 가지 사전 설정은 다음과 같습니다:
•
모바일 (320 px)
•
모바일 가로 (768 px)
•
태블릿 (992 px)
•
데스크탑 (1200 px)
앱의 브레이크포인트를 사용하여 반응형 뷰어 탭에서 페이지 동작을 테스트하고, 어떤 요소에도 "현재 페이지 너비" 조건을 설정하는 데이터 소스로 사용할 수 있습니다.
브레이크포인트 보기
모든 Bubble 사전 설정 브레이크포인트는 사용 편의를 위해 처음에는 페이지의 툴바에 추가됩니다. 페이지에서 조건부로 데이터 소스로 사용되는 다른 브레이크포인트는 툴바에 추가됩니다.
브레이크포인트 드롭다운에 나열된 브레이크포인트는 앱에 있는 모든 사전 설정 및 사용자 정의 브레이크포인트입니다.
새 사용자 정의 브레이크포인트 생성
브레이크포인트 드롭다운 내에서 "사용자 정의 추가"를 클릭하여 새 사용자 정의 브레이크포인트를 생성할 수 있습니다.
브레이크포인트 편집
툴바 또는 브레이크포인트 드롭다운에서 어떤 브레이크포인트든 편집할 수 있습니다.
사용자 정의 브레이크포인트를 편집하면 데이터 소스가 편집되고 앱에서 참조하는 모든 곳에서 브레이크포인트가 업데이트됩니다.
사전 설정된 브레이크포인트를 편집하면 새 사용자 정의 브레이크포인트가 생성되고 브레이크포인트에 대한 모든 참조가 새 사용자 정의 브레이크포인트로 업데이트됩니다.
예: 사전 설정된 브레이크포인트 모바일을 320 px에서 325 px로 변경하면 모바일 (사용자 정의) (325 px)라는 새 사용자 정의 브레이크포인트가 생성되고 모든 모바일 참조가 이제 모바일 (사용자 정의) (325 px)을 참조하게 됩니다.
브레이크포인트 제거 및 삭제
툴바에서 브레이크포인트를 제거할 수 있지만, 이는 사용 가능한 데이터 소스로서 삭제되지 않습니다.
브레이크포인트 드롭다운에서 브레이크포인트를 삭제할 수 있습니다. 드롭다운에서 브레이크포인트를 삭제하면 그것을 사용하는 페이지에서 제거되며, 참조된 조건부에서 연결이 해제되고 조건부를 수정하기 위해 문제 점검기에서 문제가 표시됩니다.
다른 학습 방법
비디오 강의
