(1) Parent-child relationships : 부모 자식 관계
: 앱 디자인은 Parent-child(부모-자식) 관계의 계층 구조로 구성됩니다.
- page(페이지) 자체는 다른 모든 element(요소)의 부모이며 해당 페이지에는 그 안에 있는 요소의 부모가 되는 컨테이너를 배치할 수 있습니다.
*컨테이너: 다른 요소를 포함할 수 있는 Bubble의 element(요소)들을 지칭합니다.
예를 들어 Group 요소 내부의 등록 양식에 여러 개의 input(입력) 필드를 배치할 수 있고 해당 입력 요소의 부모가 될 Group을 배치할 수 있습니다. 다양한 용도로 사용되는 여러 유형의 컨테이너가 있습니다. 이 예시에서 다른 모든 요소를 포함하는 그룹은 부모이고 입력 필드와 버튼은 모두 해당 그룹의 자식입니다.
- 컨테이너는 또한 컨테이너를 포함할 수 있으며 전자를 후자의 부모로 만들고 이처럼 부모-자식 관계를 필요한 만큼 여러 단계로 구축할 수 있습니다. 이것은 반응형 페이지 구축의 기초를 구성합니다.
(2) 부모 설정 및 요소 설정 : Parent settings and element settings
: 지정된 요소의 반응형 동작 설정은 상위 컨테이너의 설정과 요소 자체의 설정을 혼합하여 수행됩니다.
요소가 페이지에 직접 배치되면 해당 페이지는 상위 컨테이너이지만 컨테이너 요소에 배치하면 해당 요소의 설정이 모든 하위 요소에 영향을 미칩니다.
1. 상위 - 컨테이너 설정 parent container setting
: 요소가 컨테이너 및 서로를 기준으로 배치되는 위치를 결정합니다.
- 예를 들어 column세로(행) 기준 또는 row가로(열) 기준으로 배치할 수 있습니다.
- 컨테이너의 설정은 전체 레이아웃의 정렬(예: 행이 컨테이너의 왼쪽에서 시작해야 하는지 오른쪽에서 시작해야 하는지 결정), 모든 콘텐츠의 전체 크기 및 행과 열 사이의 간격을 결정하는 데에도 사용됩니다.
2. 하위 - element(요소) 설정 child elements setting
: 해당 elemnet(요소)에 대한 레이아웃 설정을 결정합니다.
- 높이와 너비는 얼마나 되어야 합니까? 요소가 부모 요소와 형제 요소에 비해 해당 요소 자체(padding패딩 및 margin여백) 주위와 내부에 어느 정도의 공간을 유지해야 합니까?
padding: 요소(element) 내부의 여백, 즉 요소의 경계선과 내부의 다른 요소와의 여백
margin: 요소(element) 외부의 여백, 즉 다른 요소 간의 여백
(3) 컨테이너 레이아웃 설정 : Container layout settings
: 각 컨테이너 요소(페이지 자체 포함)에는 레이아웃 설정이 있으며 이 설정은 그 안에 있는 모든 요소의 동작을 제어합니다.
- 다양한 레이아웃을 내부의 자식에게 위치 지정 방법을 알려주는 일련의 규칙으로 볼 수 있습니다.
컨테이너 레이아웃은 컨테이너(상위) 요소에 대한 속성 편집기의 Layout (레이아웃) 탭에 있습니다.
1. 레이아웃에 영향을 주는 세 가지 설정
1) 상위 컨테이너의 레이아웃 설정
2) 요소 자체의 레이아웃 설정
3) 형제 요소(동일한 컨테이너 내부의 다른 요소)의 설정 및 위치
2. 컨테이너의 네 가지 유형의 레이아웃
1) Fixed (고정)
2) Align to Parent (부모에 정렬)
3) Column (세로) 열 정렬
4) Row (가로) 행 정렬
3. 고정 레이아웃 : Fixed
:고정 레이아웃을 사용하면 상위 컨테이너 내에서 요소를 자유롭게 이동하고 배치할 수 있으며 배치한 해당 위치에 고정됩니다. 위치는 절대 X 및 Y 픽셀 값으로 설정되고 요소의 크기는 W(idth) 및 H(eight) 값으로 설정됩니다.
- 위치는 상위 요소를 기준으로 합니다. 즉, 요소는 상위 컨테이너의 왼쪽 상단 모서리에서 정확히 X 및 Y 픽셀에 배치됩니다.
- 고정 레이아웃을 사용하면 드래그 앤 드롭을 사용하여 절대적 위치인 X 및 Y 위치를 설정할 수 있습니다.
- 고정 레이아웃을 사용하면 특정 시나리오에서 유용할 수 있지만 다양한 화면 크기 및 해상도에서 관리하기에는 조금 더 어려울 수 있습니다.
* 레이아웃에 영향을 주는 고려사항들
- 상위 및 하위 레이아웃 설정(고정 레이아웃)
- 상위 레이아웃 컨트롤: 없음
- 자식 레이아웃 컨트롤: 너비와 높이
4. 부모(상위 레이아웃)에 정렬 : Align to Parent
:부모에 정렬은 부모 요소를 9셀 그리드(가로세로 칸)로 나누고 자식 요소를 임의의 셀에 맞출 수 있습니다.
- 직사각형 그룹이 왼쪽 상단, 중간 상단, 오른쪽 상단 등으로 어떻게 나누어지는지 볼 수 있습니다. 상위 레이아웃에 정렬을 사용하면 하위 요소를 9셀 그리드의 셀 중 하나에 정렬할 수 있습니다. 새 하위 요소를 만들거나 요소를 끌어다 놓으면 가장 가까운 셀에 자동으로 맞춰집니다.
- 하위 요소에 대한 속성 편집기를 열어 요소의 위치를 제어할 수도 있습니다. 각 화살표는 상위 컨테이너의 다른 셀을 나타냅니다.
- 여러 요소 배치: 예를 들어 왼쪽 상단과 같이 인기 있는 위치는 동일한 셀에 여러 요소를 배치하려는 경우 요소가 겹칠 수 있습니다. 서로 상대적으로 정렬되도록 하려면 두 번째 그룹에 배치하고 해당 그룹에 대해 다른 레이아웃을 설정할 수 있습니다.
* 레이아웃에 영향을 주는 고려사항들
- 상위 및 하위 레이아웃 설정(상위 레이아웃에 정렬)
- 상위 레이아웃 컨트롤:없음
- 자식 레이아웃 컨트롤:특정 셀에 고정, 폭과 높이
5. 행 레이아웃 : row layout
:행 컨테이너의 하위 요소는 수평으로 차례로 정렬됩니다.
- 행 레이아웃에 추가된 각 하위 요소는 행의 끝에 배치되며 자식 요소의 총너비가 부모 컨테이너의 너비를 초과하거나 화면의 크기가 조정되면 래핑 됩니다. (위의 그림에서 4번 요소의 가로 길이가 부모요소의 가로를 초과하여 다음 줄로 밀립니다.)
- 컨테이너 내부에 그려진 새 자식 요소는 기본적으로 목록 끝에 추가되지만 순서 컨트롤을 사용하거나 드래그 앤 드롭을 사용하여 다시 정렬할 수 있습니다. 또는 속성 편집기의 버튼을 사용하여 요소를 재정렬할 수 있습니다.
* 레이아웃에 영향을 주는 고려사항들
- 부모와 자식 레이아웃 설정(행 레이아웃)
- 상위 레이아웃 컨트롤: 컨테이너 정렬, 행 간격, 열 간격
- 자식 레이아웃 컨트롤: 수직 정렬, order selection, 폭과 높이
6. 열 레이아웃 : Column layout
:열 레이아웃의 하위 요소는 차지하는 너비에 관계없이 서로 위에 배치됩니다.
- 추가되는 각 요소는 열의 맨 아래에 배치됩니다.
- 위의 예에서 상위 그룹은 내용이 확장됨에 따라 늘어나도록 설정되어 있습니다. 이때 점점 더 많은 요소가 추가되면 그룹의 높이가 자동으로 증가합니다.
- 이런 이유로 콘텐츠에 높이가 예상대로 작동하려면 그에 따라 최소 및 최대 높이를 설정해야 합니다.
* 레이아웃에 영향을 주는 고려사항들
- 상위 및 하위 레이아웃 설정(열 레이아웃)
- 부모 통제: 행 간격
- 자식 컨트롤: 수평 정렬, order selection, 너비와 높이
7. 정렬 Alignment
- 행 및 열 레이아웃에서 하위 요소의 정렬을 설정할 수 있습니다.
- 행 또는 열은 어디에서 시작해야 합니까? 예를 들어, 열 레이아웃에서 자식 요소는 서로의 위에 쌓입니다. 요소의 쌓이는 위치가 컨테이너 요소의 맨 아래에서 시작해야 할까요 아니면 맨 위에서 시작해야 할까요?
- 정렬은 요소의 시작 위치와 상위 컨테이너 전체에 걸쳐 배치되는 방법을 결정하는 데 모두 사용됩니다.
(4) Element (요소) 레이아웃 설정 : Element layout settings
:위 섹션에서 우리는 컨테이너의 레이아웃 설정이 자식 요소에 어떤 영향을 미치는지 다루었습니다. 이 부분에서는 각 개별 하위 요소의 설정이 사용되는 방법을 살펴보겠습니다.
- 요소의 정렬 속성은 부모 컨테이너가 설정한 제약 조건 내에서 요소를 배치하는 방법을 결정합니다.
- 요컨대 요소 설정은 모든 하위 요소에 영향을 미치는 컨테이너 레이아웃 설정과 달리 특정 요소의 동작을 제어하는 데 사용됩니다.
[ 요소에서 다음과 같은 항목을 설정할 수 있습니다. ]
1. 요소의 너비
- 제한 없음
- 고정 (Fixed width)
- 폭 최소 / 최대 너비 (Minimum/maximum width)
- 콘텐츠 너비로 늘리기 (Stretch with content)
2. 요소의 높이
- 제한 없음
- 고정 높이
- 최소 / 최대 높이
- 콘텐츠로 늘기
3. 상위 컨테이너 레이아웃을 기준으로 요소를 정렬하는 방법
4. 요소가 숨겨져 있을 때 너비/높이를 축소 여부
5. 여백/패딩
설정에서 볼 수 있듯이 이렇게 하면 부모 컨테이너에 설정한 제약 조건 내에서 개별 요소가 동작하는 방식을 자유롭게 제어할 수 있습니다.
(5) 반응형 뷰어 사용 : Using the Responsive Viewer
:편집 화면에는 첫 번째로 element(요소)를 수정하고, 새 요소를 드래그하고, 일부를 삭제할 수 있는 UI 빌더(UI Builder) 뷰어가 있고 두 번째로는 반응형 (Responsive) 뷰어가 있습니다. (메인 panel의 좌측 상단, 탭으로 전환)
편집 팔레트의 반응형 뷰어와 UI빌더 뷰어는 탭으로 전환할 수 있습니다.
- 반응형 뷰어는 페이지가 화면 너비에 따라 어떻게 작동하는지 즉각적으로 테스트할 수 있습니다.
- 반응형 뷰어의 상단 눈금자는 현재 페이지 너비를 정의합니다. 눈금자를 클릭하거나 드래그하여 페이지 크기를 조정하고 페이지가 어떻게 동적으로 작동하는지 확인하십시오.
- 또한 화면 위쪽에 있는 미리 설정된 너비 아이콘을 사용하여 페이지가 iPhone의 세로 모드, 가로 모드, iPad, 노트북 또는 데스크톱에서 어떻게 보이는지 확인할 수 있습니다.
요소를 클릭하면 속성 편집기의 레이아웃 탭에 해당 동작에 영향을 미치기 위해 수정할 수 있는 다양한 매개변수가 표시됩니다.
* 아래는 반응형 페이지 디자인을 쉽게 하기 위한 설명 3
Responsive Pages 3 (중급) : 버블의 반응형 디자인 만들기, 디자인 팁, element Inspector, Align, Arrange > 바로가기
'버블 개발 > 중급' 카테고리의 다른 글
| 17. Bubble Files (중급) - 버블 파일, 사진 업로드, 삭제, 보호 규칙 (0) | 2023.06.20 |
|---|---|
| 16. The database (중급) : 데이터베이스 기본지식, 버블 데이터의 특징, Dynamic data 기본지식 (0) | 2023.06.19 |
| 14. Bubble Component Library (중급) : 컴포넌트 라이브러리, 쉽고 빠르게 가입/로그인 구현해보기 (0) | 2023.06.16 |
| 10. Bubble Styling (중급) : 버블 스타일링, 노코드 앱 버블 빠른 사용자 스타일 저장 (0) | 2023.06.13 |
| 9. Bubble element (중급) : 노코드 버블 앱의 element 구성 요소 (0) | 2023.06.12 |
