이 섹션에서는 재사용 가능한 요소에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
재사용 가능한 요소는 여러 위치에서 사용할 수 있는 요소 그룹을 만드는 방법입니다.
예를 들어 내비게이션 툴바를 만들었다면 해당 툴바를 여러 페이지에서 표시하고 한 번만 변경하여 모든 페이지를 업데이트하고 싶을 것입니다.
www.bubble.io의 내비게이션 툴바(빨간색으로 표시)는 재사용 가능한 요소의 전형적인 사용 사례입니다. 이 툴바와 해당 버튼 및 워크플로우는 필요한 만큼 많은 장소에서 재사용할 수 있습니다. 재사용 가능한 요소는 요소, 및 포함하며 재사용 가능한 요소의 각 인스턴스는 격리되어 있습니다. 다른 말로 하면 한 재사용 가능한 요소에서 발생하는 사항이 동일한 재사용 가능한 요소의 다른 복사본에 영향을 미치지 않습니다. 심지어 동일한 페이지에 있는 경우에도 말이죠.
Examples of reusable elements
재사용 가능한 요소는 앱 전체에서 재사용하려는 요소/워크플로우의 모음에 사용할 수 있습니다. 재사용 가능한 요소가 어떤 용도로 자주 사용되는지 자세히 알아보기 위해 몇 가지 예시를 살펴보겠습니다.
1.
내비게이션 바: 이것은 일반적으로 각 페이지 상단에 배치되어 앱의 주요 섹션에 대한 링크를 제공합니다.
2.
푸터: 내비게이션 바와 마찬가지로 각 페이지 하단에 일관된 요소로, 저작권 고지, 연락처 정보 및 추가 링크와 같은 정보를 포함합니다.
3.
로그인/가입 양식: 사용자 인증을 위해 다른 페이지에서 재사용되는 양식입니다.
4.
검색 바: 앱에 검색 기능이 포함된 경우 여러 페이지에서 해당 기능이 존재하도록 할 수 있습니다.
5.
버튼: "가입", "지금 구매", "자세히 알아보기"와 같은 CTA(호출 대상) 버튼은 표준화되어 응용 프로그램 전체에서 사용될 수 있습니다.
6.
사이드바 메뉴: 내비게이션을 위해 여러 페이지에서 사이드바 메뉴가 존재할 수 있습니다.
7.
팝업 모달: 확인 메시지 또는 사용자 프롬프트와 같은 것들을 위한 재사용 가능한 팝업 창.
8.
연락처 양식: 사용자 문의를 위한 표준화된 양식.
9.
데이터 카드: 사용자 프로필, 전자 상거래 제품 및 여행지와 같은 것을 보여주는 카드 목록.
10.
오류 메시지: 표준화된 오류 메시지는 다양한 시나리오 및 페이지에서 사용될 수 있습니다.
Why use reusable elements?
이러한 이유로 사용할 수 있습니다.
Speeding up development and maintenance
재사용 가능한 요소에 대한 변경 사항은 해당 요소의 모든 인스턴스에서 즉시 볼 수 있습니다. 앱 전체의 여러 위치에서 변경 사항을 수행하는 대신 핵심 기능을 한 요소로 중앙 집중화할 수 있습니다.
Maintaining consistency
자주 사용되는 디자인에 재사용 가능한 요소를 사용함으로써 앱에 일관된 모양을 제공하고 유지 관리할 작업을 줄일 수 있습니다.
Isolating work in the Bubble editor
페이지에 많은 요소 및 워크플로우가 있는 경우 일부 부분을 재사용 가능한 요소에 넣으면 포커스하기가 더 쉬워집니다. 이렇게하면 화면에서 추적해야 할 항목이 줄어듭니다.
Performance
재사용 가능한 요소는 앱을 가볍게 유지하고 성능을 유지하므로 해당 내용을 로드해야 하는 횟수가 단 한 번뿐입니다.
Reusing workflows
재사용 가능한 요소를 사용하여 앱 전체에서 여러 위치에서 사용하는 워크플로우를 저장할 수도 있습니다. 사실, 재사용 가능한 요소에는 가시적인 요소가 포함되지 않아도 됩니다.
Reusable element types
재사용 가능한 요소는 다음과 같은 컨테이너 유형 중 하나로 생성할 수 있습니다.
•
Group: 다른 요소를 포함하는 데 사용됨
•
Popup: 다른 요소를 포함하고 페이지의 모든 내용 위에 중앙에 떠있는 데 사용됨
•
Floating group: 다른 요소를 포함하고 화면 가장자리에 떠 있는 데 사용됨 (예: 내비게이션 툴바)
Creating reusable elements
새로운 재사용 가능한 요소를 만드는 여러 가지 방법이 있습니다.
The page menu
빈 재사용 가능한 요소를 만들려면 다음 단계를 따릅니다.
1.
Bubble 편집기의 왼쪽 상단에 있는 페이지 네비게이션 메뉴를 엽니다
2.
.재사용 가능한 요소 섹션까지 스크롤합니다.
3.
"새로운 재사용 가능한 요소 추가"를 클릭합니다.
The element tree
디자인 탭으로 이동하여 빈 재사용 가능한 요소를 만들 수 있습니다.
1.
Bubble 편집기의 디자인 탭으로 이동합니다.
2.
요소 트리에서 재사용 가능한 요소 섹션까지 스크롤합니다.
3.
"새로운 재사용 가능한 요소"를 클릭합니다.
Converting existing element(s)
페이지의 하나 이상의 요소를 재사용 가능한 요소로 변환할 수도 있습니다.
•
컨테이너 요소를 선택하면 해당 컨테이너 내부의 자식 요소를 포함한 새로운 재사용 가능한 요소가 만들어집니다.
•
하나 이상의 요소를 선택하면 해당 요소를 포함하는 새로운 재사용 가능한 요소가 만들어집니다.
•
원래 페이지의 원본 요소는 삭제되지 않으며 새로 만들어진 재사용 가능한 요소로 대체되지 않습니다.
•
선택한 요소와 관련된 모든 워크플로우는 새로운 재사용 가능한 요소로 복사되지만 원래 참조에 대한 액세스를 잃으면 깨질 수 있습니다.
기존 컨테이너 또는 요소를 재사용 가능한 요소로 변환하려면 다음 단계를 따릅니다.
1.
페이지에서 하나 이상의 요소를 선택합니다.
2.
마우스 오른쪽 단추로 선택한 요소 중 하나에 클릭하거나 화면 상단의 편집 메뉴를 클릭합니다.
3.
"재사용 가능한 요소로 변환"을 선택합니다.
새로운 재사용 가능한 요소가 만들어지고 편집기에서 해당 요소로 이동됩니다. 당사의 아카데미 강좌에는 어떻게 그룹을 재사용 가능한 요소로 변환하는지에 대한 정보가 포함되어 있습니다.
Passing data to and from a reusable element
대부분의 경우 재사용 가능한 요소로 데이터를 전송해야 할 필요가 있습니다. 이를 수행하는 몇 가지 다양한 방법이 있습니다.
Using the data source
재사용 가능한 요소에 내용 유형이 설정되었고 페이지에 배치되었다면 해당 요소에 데이터 소스를 설정할 수 있습니다. 예를 들어 재사용 가능한 요소가 내용 유형으로 "Product"라는 데이터 유형을 가지고 있다면 해당 요소가 배치된 페이지에서 데이터 소스로 사용할 수 있는 모든 제품을 설정할 수 있습니다.
이 방법은 한 방향으로만 작동하며 부모에서 재사용 가능한 요소로 데이터를 전달합니다.
The Display data action
Display data 작업을 사용하여 모든 유형의 데이터를 재사용 가능한 요소로 보낼 수 있습니다. 작업에서 설정한 내용 유형과 일치하면 됩니다. 예를 들어 누군가의 사용자 프로필을 편집하는 양식이 있다면 해당 사용자 데이터를 display data 작업을 사용하여 재사용 가능한 요소로 전송할 수 있습니다.
이 방법은 부모에서 재사용 가능한 요소로 데이터를 전달하거나 그 반대로 데이터를 전달합니다.
Custom states
부모 페이지에서 재사용 가능한 요소로 데이터를 전달하려면 Set state of an element 작업을 사용할 수 있습니다.
1.
재사용 가능한 요소에 올바른 데이터 유형을 가진 관련 사용자 지정 상태를 설정합니다. 사용자 지정 상태는 부모 재사용 가능한 요소에 만들어져야 합니다.
2.
Set state of an element 작업을 사용하여 사용자 지정 상태를 데이터로 채웁니다.
이 방법은 부모에서 재사용 가능한 요소로 데이터를 전달하거나 그 반대로 데이터를 전달합니다.
URL parameters
URL 매개변수는 직접적으로 재사용 가능한 요소로 데이터를 전달하지는 않지만 페이지 및 해당 페이지 내에서 재사용 가능한 요소에서 읽고 조작할 수 있으므로 두 요소 간에 정보를 공유하는 유용한 방법일 수 있습니다.
이 방법은 부모에서 재사용 가능한 요소로 데이터를 전달하거나 그 반대로 데이터를 전달합니다.
Reusable element properties
재사용 가능한 요소에는 해당 요소와 부모 페이지와의 동적 데이터 공유를 위해 사용자 지정할 수 있는 속성이 있습니다.
속성은 기본적으로 재사용 가능한 요소 자체에 할당된 기본값 또는 부모에서 할당된 데이터로 채워질 수 있습니다. 추가하는 각 새로운 속성은 페이지에 배치된 해당 재사용 가능한 요소의 각 인스턴스에 대한 필드가 할당됩니다. 그리고 이 필드에는 데이터가 개별적으로 할당될 수 있습니다.
필드에 채워진 데이터는 1) 부모에서 할당된 데이터 및 2) 기본 데이터의 순서로 우선 순위가 지정되어 부모 요소의 데이터가 우선합니다.
사용자 지정 상태와 달리(값을 할당하려면 작업이 필요함), 재사용 가능한 요소 속성은 동적 데이터를 사용할 수 있습니다. 모든 재사용 가능한 요소에는 사용자 지정 상태 필드보다 더 많은 다양한 속성을 설정할 수 있으며 각각에 대해 다양한 데이터 유형을 설정할 수 있습니다.
Reusable element property types
새로운 속성에 대해 세 가지 유형 중 하나를 선택할 수 있습니다.
1.
동적 값: 동적 표현식을 사용하여 기본 데이터 타입 또는 커스텀 데이터 타입 할당이 가능하며 데이터를 동적으로 전달하고 받는 데 사용할 수 있습니다. 데이터베이스 검색, 옵션 세트 또는 기타 표현식을 사용하여 동적 표현식을 채울 수 있습니다. 이는 재사용 가능한 요소로 데이터를 동적으로 전달하고 받기 위한 용도로 유용합니다.
2.
컬러 피커: 헥사 코드 또는 저장된 컬러 피커를 할당할 수 있습니다. 이를 사용하여 재사용 가능한 요소로 색상 값을 동적으로 전달하고 해당 색상을 사용하여 사용자에게 무언가를 전달할 수 있습니다. 예를 들어 다른 배경, 버튼 또는 텍스트 색상과 같은 것입니다.
3.
체크박스: 재사용 가능한 요소와 부모 간에 참/거짓 값을 간단하게 전달하거나 전달할 수 있습니다.
이 방법은 부모에서 재사용 가능한 요소로 데이터를 전달하거나 그 반대로 데이터를 전달합니다.
Passing data both ways
재사용 가능한 요소 속성이 데이터를 재사용 가능한 요소로만 전달하는 것이 아니라 해당 요소에서 부모로도 데이터를 전송할 수 있다는 점을 다시 살펴보겠습니다. 이 값은 그런 다음 부모에서 읽을 수 있으며 페이지의 다른 요소에 대한 동적 데이터를 사용하지 않고도 해당 페이지에서 동적 값을 다른 요소로 전달할 수 있는 시나리오를 열어줍니다.
재사용 가능한 요소와 부모 간에 동적 값을 자동으로 업데이트할 수 있으므로 재사용 가능한 요소를 사용하여 페이지의 다른 위치에서 관리하고 사용할 수 있는 변수를 저장할 수 있는 시나리오가 열립니다.
Adding an existing reusable element to a page
기존의 재사용 가능한 요소를 페이지에 추가하려면 요소 트리의 Reusable elements 섹션으로 이동하여 추가할 요소를 클릭한 후 페이지에 추가하려는 위치를 클릭합니다. 만든 모든 재사용 가능한 요소는 요소 트리의 Reusable element 섹션에 추가됩니다.
Modifying dimensions
재사용 가능한 요소의 크기는 요소 자체를 편집할 때 정의됩니다. 그러나 이러한 요소는 반응형이며 (고정 너비를 만들지 않은 경우) 대상 페이지에서 크기를 조정할 수 있으며 내부 요소의 반응형 설정에 따라 콘텐츠가 조정됩니다.
Other ways to learn
Video lessons
