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

오늘 수업은 Design 화면 구성에 필요한 Elements들에 대해 배움.

이후에 어떻게 객체(elements)들이 역할을 하게 될지 가늠해볼 수 있는 수업이었음.

 

6. Understanding the different element types

디자인 화면 상의 모든 요소들이 element이며, element inspector를 통해 속성 값을 수정할 수 있음.

(Text, Style, Size, etc.)

 

1) Visual elements

   - Static value: 하드코딩. 개발자가 추가한 내용이 정적으로 그대로 보여지는 것 I텍스트, 이미지 등)

   - Dynamic data: Text 상에서 동적 값을 드롭다운 (이미지도 다이나믹으로 노출 가능. 예: 사용자의 프로필 이미지)

   ㄴ (중요) 플러그인 다운로드를 통해서 visual element 를 추가할 수 있음

        ㄴ Element에 따라서 값을 계산하여 보여지도록 할 수 있음

2) Container Elements

   - 독립적으로 이용할 수 있음 (group, repeating group 등)

   - 페이지를 몇 가지 섹션으로 나눌 때 사용할 수 있음

  ㄴ This element is visible on page load 체크박스를 통해서 Live 뷰에서 보여줄지 여부를 결정할 수 있음

    - Repeating Group 중요하고 사용성이 높은 컨테이너임

       ㄴ DB와 연동하여 값들을 반복적으로 보여주는걸 할 수 있음

       ㄴ Appearance 에서 content 타입을 선택할 수 있음

3) Input form element

   - Input form 제목 설정 가능 (상단 더블클릭)

   - 사용자 가입창 등에서 필요

       ㄴ Appreance - Placeholder 를 통해 미리 보여줄 문구 등을 설정할 수 있음

       ㄴ Appreance - Initail content 를 통해 초기값을 보여줄 수 있음 (동적으로 보여줌)

       ㄴ Content format (Email, Integer, Password, Data 등 설정 가능함)

   - 사용자가 입력한 값들을 DB 상에 저장하도록 할 수 있음

4) Reusable elements

    - footer, header 처럼 계속 사용하게 될 영역을 설정

    - Appearance를 통해 버튼 디자인 등 속성 값 편집 가능함

 

그 외

팁! 왼쪽 상단 클릭하여 개별 페이지들을 독립적으로 보면서 각각 편집할 수 있음

 

피터's 코멘트

노코드를 배우고 만들어보고 싶었던 서비스가 있어서 간략히 기록해봄.

혼자 사용해볼 생산성 관리 서비스인데 기회가 되면 별도로 다루어 봐야겠다.

(내용을 공개할까 하다가 아직 조심스러워 최소한의 blur를 함.)