Bubble.io 노코드 툴 -4일차-

오늘이 Design 파트 마지막 강의.

내일부터는 Workflow에 대해 배운다.

 

9. Understanding container elements

 

Containers

1. Group

  하나의 그룹 container 안에 버튼 2개를 추가

  버튼 2개를 포함한 container를 중앙 정렬함 > 한번에 정렬 > container 안에서 한번에 조정하는 것이 편리함.

  container 밖에 있는 버튼 2개를 중앙 정렬함 > 각각 별도로 정렬해야함

  container layout

  위 이미지에서 open group 클릭 시에, 숨겨진 container가 toggle 형태로 보여지도록 workflow 설정

2. Repeating groups

  dynamic display 가능함

  노출되는 User들 중 job-title이 developer 인 경우에만 보이도록 설정하는 방법

  set fixed number of rows / columns (데이터 크기에 따라 동적으로 크기 변경)

  min. width / height 와 max. width / height 설정

  style 제거한 후 repeating group 의 boarder 설정 가능

  min. height of row, min width of column 설정

 

팁! layout 설정할 때 최대한 정렬과 마진설정, container layout 설정 등으로 UI 조정하기 (c.f. 일일이 드래그하면서 layout 설정)

Repeating group 장점은 셀 하나만 수정해도 다른 반복 셀에 자동 적용된다는 점 > 업무 효율 매우 향상될 수 있음.

이미지를 processed 하여 보이도록 할 수 있음. (cropping, resizing 등의 process 가능함)

3. Popups

  popup 창의 경우 일시적으로 보이는 창이기 때문에 평소 작업시에는 보이지 않으며,  왼쪽 상단 'Elements tree' 하단에서 노출되도록 설정해야함.

10. Building demo: User registration page

유저등록 페이지를 만들어본다.

horizontal alignment로 container 내에서의 수직 순서를 변경할 수 있음

피터's 코멘트

- 툴을 익히는 가장 빠르고 쉬운 방법은 몸에 숙달될 때까지 많이 반복하는 것이다.

- 머릿 속으로 어떤 페이지가 있을 때 이것을 얼마나 빠르게 구현할 수 있는지는 반복된 노력에 달려있다.