Bubble.io 앱에 빵 부스러기를 추가하는 것은 간단한 작업입니다. 빵 부스러기는 사용자가 앱 내에서 자신의 위치를 표시하고 계층 구조를 쉽게 이동할 수 있도록 돕는 탐색 도움말입니다. 다음은 자신만의 빵 부스러기 탐색을 만드는 방법입니다:
단계 1: 빵 부스러기 요소 설계
- 먼저 빵 부스러기가 나타나기를 원하는 페이지에서 새 그룹을 생성합니다. 이것은 빵 부스러기 링크를 포함할 것입니다.
- 이 그룹 내에서 빵 부스러기의 각 레벨에 대한 텍스트 요소를 추가합니다. 예를 들어, "홈 > 카테고리 > 하위 카테고리 > 항목".
- 앱의 디자인과 일치하도록 각 텍스트 요소를 스타일링합니다. "홈" 에 대해서는 아이콘을 추가하는 것을 원할 수 있습니다.
단계 2: 동적 데이터 설정
- 빵 부스러기의 각 레벨을 나타내는 각 텍스트 요소는 사용자의 앱 내 탐색을 반영하는 동적이어야 합니다.
- Bubble의 동적 데이터 식을 사용하여 데이터베이스에서의 데이터로 빵 부스러기의 각 부분을 채웁니다. 예를 들어, 카테고리의 이름이 사용자 데이터 유형의 필드에 저장되어 있다면 "현재 사용자의 카테고리"를 사용하십시오.
단계 3: 사용자가 빵 부스러기를 사용하여 탐색하도록 허용
- "링크"나 "페이지로 이동" 워크플로우 동작을 사용하여 빵 부스러기의 각 텍스트 요소를 클릭할 수 있게 합니다.
- 각 텍스트 요소에 대해 요소가 클릭될 때 해당 페이지로 이동하는 워크플로우를 추가합니다. URL 매개변수 또는 데이터베이스 쿼리를 사용하여 페이지에 필요한 데이터를 전달해야 합니다.
단계 4: 가시성 및 배치 관리
- 사용자가 앱에서 어디에 있는지에 따라 빵 부스러기의 여러 부분을 표시하거나 숨기는 데 조건을 사용합니다. 예를 들어, 사용자가 홈페이지에 있다면 빵 부스러기에서 "홈" 부분만 표시되어야 합니다.
- 빵 부스러기를 포함하는 그룹이 빵 부스러기 요소가 숨겨질 때 축소되도록 하여 불필요하게 공간을 차지하지 않게 해야 합니다. 이것은 그룹의 속성에서 "이 요소의 높이를 숨겼을 때 축소" 옵션을 체크함으로써 수행할 수 있습니다.
단계 5: 빵 부스러기 테스트
- 빵 부스러기 설정을 마친 후, 앱을 통해 이동하며 테스트합니다. 각 페이지에 대해 올바른 빵 부스러기가 표시되고 이를 클릭하면 올바른 위치로 이동하는지 확인해야 합니다.
단계 6: 디자인 세밀하게 조정
- 빵 부스러기 기능이 작동하면 디자인을 세밀하게 조정하는 시간을 할애할 수 있습니다. 호버 효과를 추가하거나, 활성 빵 부스러기에 따라 색상을 변경하거나, 빵 부스러기 레벨 사이에 구분 아이콘을 추가하여 사용성을 높일 수 있습니다.
빵 부스러기는 사용자의 경험을 향상시켜야 하며, 그들이 탐색을 쉽게 하고 앱 내에서 자신이 어디에 있는지 이해하는 데 도움이 되어야 합니다. 앱에서 페이지를 추가하거나 제거할 때마다 빵 부스러기를 업데이트하여 일관성과 사용자 친화적인 탐색을 보장해야 합니다.
.png)
.png)
