이 섹션은 앱의 사용자 인터페이스를 구성하는 빌딩 블록인 엘리먼트에 관한 내용입니다.
앱의 사용자 인터페이스의 모든 부분은 계층 구조로 구성된 엘리먼트로 이루어져 있습니다. 각 엘리먼트에는 일련의 스타일 속성과 반응형 속성이 포함되어 있습니다. 계층 구조, 스타일 속성 및 반응형 속성이 함께 브라우저에게 페이지를 올바르게 렌더링하는 지침을 제공합니다.
생각해보세요. 브라우저는 엘리먼트가 어떻게 보이고 어떻게 동작해야 하는지 뿐만 아니라 다양한 화면 크기에서 어떻게 동작해야 하는지도 알아야 합니다. 또한 페이지에 표시, 숨김 및 애니메이션되는 방식도 이해해야 합니다.
What is the element hierarchy?
Using elements to build a user interface
화려한 이미지와 애니메이션으로 가득 찬 프레젠테이션 페이지를 만들든 간단한 가입 양식을 만들든, 이 모든 것은 서로 다른 요소를 유용하고 시각적으로 매력적인 방식으로 결합하여 수행됩니다.
Bubble은 서로 다른 목적을 위한 다양한 요소를 제공합니다.
이 섹션에서는 페이지에 배치할 수 있는 다양한 요소 카테고리를 다룰 것입니다.
플러그인은 때로는 페이지에 배치할 수 있는 새로운 요소를 추가하여 매우 간단한 것부터 매우 고급 기능까지 제공할 수 있습니다.
플러그인 스토어 바로가기 →
플러그인 스토어 바로가기 →
요소는 페이지에 배치할 수 있는 다양한 것들을 다루며 이는 세 가지 다른 카테고리로 나뉩니다.
Visual elements
시각적 요소는 주로 심미적인 목적이나 정보 표시를 위해 페이지에 배치하는 요소입니다. 이들은 데이터 입력을 허용하지 않지만 클릭을 받아들이며, 버튼과 같은 일부 요소는 일반적으로 워크플로우와 연결됩니다.
예시로
•
버튼
•
이미지
•
텍스트
•
아이콘
•
비디오
•
지도
•
링크
•
모양
Containers
그룹은 다른 요소를 포함하는 요소입니다. 그룹은 두 가지 목적을 제공합니다:
•
그룹 내부의 다른 요소(다른 그룹 포함)를 하나의 컨테이너에 모읍니다. 모든 요소는 페이지 계층구조의 동일한 수준에 속하며, 그룹이 이동되거나 삭제되면 모든 요소가 따라갑니다.
•
그룹은 내부의 요소와 관련된 데이터를 보유하는 데 사용될 수 있습니다. 예를 들어, 한 그룹은 사용자의 세부 정보를 편집하는 다양한 요소를 포함한 Edit user 폼을 포함할 수 있습니다. 이 경우, 그룹의 데이터 유형은 사용자가 되어 내부의 모든 요소가 해당 사용자를 참조할 수 있습니다.
Bubble은 다양한 목적을 제공하는 여러 그룹 유형을 제공합니다.
Container Type | Purpose |
Group | 요소와 데이터를 페이지 어디서나 보유 |
Repeating Group | 카드, 목록 및 메이슨리 그리드와 같은 유연한 디자인으로 항목 목록 표시 |
Table element | 행/열 및 헤더와 함께 항목 목록 표시 |
Popup | 경고 메시지와 같이 모든 것 위에 요소 표시 |
Floating group | 기타 요소 위에 떠다니게 하고 화면 가장자리 중 하나에 고정, 상단 내비게이션 바와 같이 화면을 떠나지 않게 유지 |
Group focus | 드롭다운 메뉴와 같이 다른 곳을 클릭하면 즉시 사라지는 그룹 표시 |
컨테이너에 대한 자세한 내용은 아래의 전체 기사에서 확인하세요.
Input forms
입력 양식은 사용자가 애플리케이션에 데이터를 제공할 수 있는 요소로, 다음과 같은 것들을 포함합니다:
Container Type | Purpose |
Text input | 이름, 댓글, 기타 짧은 정보 |
Multiline text | 설명 및 다른 긴 텍스트. 줄 바꿈 허용. |
checkbox | 예를 들어 약관 및 조건 수락 같이 “예/아니오” 값을 보유하기 위한 확인란 |
Rich text | 블로그 글 및 제품 설명과 같은 서식이 있는 텍스트 |
Dropdowns | 드롭다운 목록에서 정적 또는 데이터베이스에서 선택 옵션 |
Search box | 데이터베이스에서 타이핑하는 동안 검색 |
Radio buttons | 여러 옵션 중 하나를 선택 |
Slider input | 시각적이고 드래그할 수 있는 슬라이더를 사용하여 숫자 값을 선택 |
Date/time picker | 생일, 마감일 등과 같은 날짜 선택 |
Picture uploader | 프로필 사진과 같은 이미지를 업로드하고 미리보기 |
File uploader | 다양한 유형의 파일을 업로드 |
입력 양식에 대한 자세한 내용은 아래의 전체 기사에서 확인하세요.
Element behavior
요소는 특정 상황이나 사용자의 조치에 따라 다르게 작동하도록 설정할 수 있습니다. 요소가 상호 작용적이 되는 두 가지 방법이 있습니다.
Conditions
조건은 각 요소에 대한 규칙을 설정하여 규칙이 예 또는 아니오를 반환하는지에 따라 요소의 모양을 변경할 수 있게 합니다. 이러한 규칙을 사용하여 사용자에게 세심한 힌트에서 페이지의 전체 섹션을 숨기고 표시하는 강력한 방법까지 다양한 방식으로 사용자와 소통할 수 있습니다.
이를 다양한 시나리오에서 어떻게 사용할 수 있는지 보기 위해 몇 가지 예를 살펴보겠습니다.
•
버튼에 조건을 설정하여 양식이 올바르게 작성되었는지 확인하고, 그렇지 않은 경우 버튼을 회색으로 표시하고 클릭할 수 없게 만들 수 있습니다.
•
그룹에 조건을 설정하여 현재 사용자가 로그인되어 있는지 확인할 수 있습니다. 그렇지 않으면 그룹이 보이지 않습니다.
•
그룹에 대한 조건을 설정하여 브라우저 URL의 매개변수를 확인할 수 있습니다. 매개변수가 있으면 그룹이 표시됩니다.
Workflows
페이지의 요소를 상호 작용적으로 만드는 두 번째 방법은 그것들을 워크플로우에 연결하는 것입니다. 워크플로우는 버튼 클릭과 같은 이벤트에 대한 우산 용어로, 하나 이상의 작업(데이터베이스에 무언가를 쓰는 것과 같은)으로 이어집니다.
작업을 사용하면 앱이 특정 작업을 수행하도록 할 수 있습니다. 예를 들어:
•
데이터베이스에서 무언가를 생성, 편집 또는 삭제하기
•
사용자를 로그인 및 로그아웃하기
•
화면에 무언가를 표시, 숨기고 애니메이션 적용하기
•
다른 페이지나 외부 링크로 이동하기
이는 어떤 면에서든 완전한 목록이 아니지만, 사용자가 앱을 클릭하고 입력하는 동안 수행할 수 있는 많은 다양한 작업이 있음을 알 수 있습니다.
워크플로우는 여러 작업으로 이어진 여러 작업으로 구성될 수 있습니다. 예를 들어 데이터베이스에 무언가를 저장한 후에 사용자에게 확인 메시지를 표시하려고 할 수 있습니다.
Naming elements
요소의 이름은 Property Editor 상단에서 해당 이름을 선택하고 입력을 시작하여 편집할 수 있습니다. 요소의 이름을 지정하는 규칙은 전적으로 사용자에게 달려 있습니다. 예를 들어 각 요소의 이름을 간소화하고 그 다음에 요소가 하는 일을 작성할 수 있습니다. "btn submit"과 같이 또는 첫 번째 단어를 대문자로 통일하거나 밑줄을 사용할 수 있습니다. 어떤 규칙을 선택하든 응용 프로그램 전체에서 일관되게 사용하십시오. 이러한 일관성은 요소를 찾고 응용 프로그램이 성장함에 따라 디자인을 디버그하는 데 도움이 될 것입니다.
Video lesson
데이터 유형에 대해서는 항상 단수 이름을 사용하십시오. 예를 들어, Products 대신 Product를 사용하십시오. Bubble에는 단어 변화에 대한 내장 기능이 있습니다. 이는 단수 명사가 자동으로 인식되고 그 명사의 여러 인스턴스를 나타낼 때 해당 단어의 적절한 복수형으로 표시됩니다.
다시 말하면, Product는 그것이 의미가 있는 경우에만 Products로 표시됩니다.
기본적으로 Bubble은 새로운 요소의 이름을 해당 유형으로 지정합니다. 버튼을 추가하면 페이지에 다른 버튼이 없는 경우 "Button A"라고 이름 지어지거나 이미 버튼이 있는 경우 "Button B"로 지정됩니다. 그 요소의 내용을 텍스트로 변경하면 Bubble이 해당 텍스트를 가져와 요소의 이름을 자동으로 업데이트합니다. 예를 들어 이 버튼의 텍스트를 "Submit"으로 변경하면 이름이 "Button Submit"으로 업데이트됩니다. 응용 프로그램 전체에서 여러 "Submit" 버튼이 있을 수 있으므로 계속해서 요소에 이름을 지정하는 것이 좋습니다.
Finding elements
페이지에 많은 요소가 있다면 편집을 위해 요소를 찾기가 어려울 수 있습니다. 다음은 쉽게 찾을 수 있는 몇 가지 방법입니다.
The element picker
툴바에 있는 Element picker를 사용하세요. 페이지의 모든 요소가 알파벳 순서로 나열되어 있습니다. 이름을 입력하면 다른 요소가 표시됩니다.
드롭다운에서 항목 위로 마우스를 올리면 해당 요소가 맞는지 확인할 수 있는 섬네일이 표시되며, 클릭하면 해당 요소가 표시 및 선택됩니다. 이를 최대한 활용하려면 요소의 이름을 신중하게 지정하는 습관을 가져야 합니다.
Using mouse clicks
두 요소가 겹쳐 있을 때 CMD (MacOS) 또는 Ctrl (Windows) 키를 누르고 클릭하면 다른 요소를 하나씩 선택할 수 있습니다. 하나가 다른 요소 전체 아래에 있더라도 해당 요소를 선택할 수 있습니다.
이를 사용하면 페이지 레이아웃을 수정하지 않고도 다른 모든 요소 아래에 있는 요소를 선택할 수 있습니다.
Using the X-Ray feature
'X-Ray' 아이콘을 클릭하면 요소가 반투명해지며, 위에서 설명한 CMD+클릭 (MacOS) 또는 Ctrl+클릭 (Windows) 작업과 결합하여 사용할 수 있습니다.
Using the element tree
Element Tree를 사용하면 페이지의 모든 요소를 명확한 계층 구조로 볼 수 있으며 필요한 요소를 선택하고 이동할 수 있는 간단한 방법입니다.
The App search Tool
앱 검색 도구는 고급 검색 매개변수 및 페이지 간 검색을 위해 사용할 수 있습니다. Bubble 편집기의 오른쪽 상단에 있습니다.
검색 도구에 대한 자세한 내용은 아래 기사에서 확인할 수 있습니다
Video lesson
Locking elements
만일 이동해서는 안 되는 몇몇 요소를 이동하게 된다면, 편집기에서 Lock this element (not draggable in editor)란 확인란을 체크하여 편집기에서 드래그할 수 없도록 보호할 수 있습니다.
Using the Inspector to find Element connections
요소는 여러 가지 방법으로 앱의 다른 부분에 연결될 수 있습니다. 사용자 정의 상태를 가질 수 있고, 부모 컨테이너에 속할 수 있으며, 워크플로에 사용될 수 있거나 표현식이나 조건에서 참조될 수 있습니다.
요소가 어떻게 다른 요소에 연결되어 있는지 추적하려면 Element Inspector를 사용할 수 있습니다. 이는 다음과 같이 요소 연결을 범주별로 보여줍니다.
•
Custom states: 요소에 대한 사용자 정의 상태를 생성, 편집 및 삭제
•
Events: 이벤트
•
Actions: 작업
•
Other elements: 다른 요소
Element Inspector를 표시하려면 속성 편집기의 타이틀 바에 있는 정보 아이콘을 클릭하세요.
Element Security
비록 Bubble이 노코드 플랫폼이지만, 최종 응용 프로그램은 브라우저가 페이지를 어떻게 보고 작동해야 하는지 알 수 있도록 코드로 구성됩니다. 페이지에 배치하는 요소들은 이 코드의 일부가 되어 페이지를 로드하는 모든 사용자의 장치로 다운로드됩니다.
이것은 기술에 능통한 사용자가 코드 파일을 열어 요소를 살펴볼 수 있다는 것을 의미합니다. 보안 관점에서 보면 요소에 민감한 정보를 넣어서는 안 됩니다. 앱에서 보이지 않더라도 코드에서는 그 정보를 확인할 수 있습니다.
이를 고려해야 하는 장소는 요소 이름, 텍스트 콘텐츠 및 기본 값입니다.
요소 보안에 대한 좋은 규칙은 페이지에 추가하는 모든 정보(요소나 워크플로를 통해)를 사용자가 코드에서 볼 수 있다고 가정하는 것입니다. 따라서 페이지에 민감한 정보를 넣지 않는 것이 좋습니다.
Other ways to learn
Video lessons
