Bubble.io에서 진행 상황 추적기를 어떻게 만들 수 있나요?

Bubble.io에서 진행 상태 트래커를 생성하면 작업 완료 상태에 대한 시각적인 피드백을 제공하여 사용자 경험을 향상시킬 수 있습니다. 진행 상태 트래커를 만들기 위해 다음과 같은 간단한 단계를 따르세요:

1단계: Bubble.io 편집기를 열고 진행 상태 트래커를 표시하려는 페이지로 이동합니다.

2단계: 페이지에 새 그룹 요소를 삽입합니다. 이것은 진행 상태 트래커의 컨테이너 역할을 합니다.

3단계: 그룹 내에 진행 표시 줄의 배경을 나타낼 'Shape' 요소를 추가합니다. 그룹의 길이를 늘려 미완성 진행상태를 나타내는 색상, 일반적으로 가벼운 색조를 선택합니다.

4단계: 배경 모양 위에 또 다른 ‘Shape’ 요소를 추가합니다. 이것은 진행 상태 표시 줄의 채우기 역할을 합니다. 진행 상태의 완료된 부분을 나타낼 대조색을 선택하세요.

5단계: 진행 상태를 결정할 데이터 소스를 정의합니다. 이것은 진행상태를 표시하는 백분율이나 단계 수가 될 수 있습니다.

6단계: 진행 데이터 소스를 기반으로 채우기 모양의 너비를 동적으로 조정합니다. 요소의 너비에 대한 속성 편집기에서 동적 표현식을 사용하여 이를 수행할 수 있습니다. 예를 들면, 배경 모양의 너비 * (현재 사용자의 진행상황 / 총 진행상황).

7단계: 필요하다면 실제 진행 데이터를 표시하는 텍스트 요소를 추가합니다. 이 텍스트는 진행 상태 표시 줄 자체나 명확하게 볼 수 있도록 근처에 위치시킵니다.

8단계: 일부 상호 작용을 추가하려면, 진행 데이터 소스를 업데이트하는 워크플로우를 생성할 수 있습니다. 예를 들어, 사용자가 작업이나 과정의 한 단계를 완료하면 워크플로우가 진행 상태를 증가시킬 수 있습니다.

9단계: 진행 표시 줄을 테스트합니다. 미리보기 모드를 사용하여 앱과 상호 작용하고, 데이터 소스가 변경됨에 따라 진행 표시 줄이 올바르게 업데이트되는지 확인합니다.

10단계: 기능에 만족하면 진행 상태 트래커의 스타일을 앱의 디자인에 맞게 조정합니다. 이에는 모양의 모서리를 둥글게 하거나 그라데이션을 추가하거나 앱의 미학에 맞는 기타 디자인 요소를 추가하는 것이 포함될 수 있습니다.

이로써 성공적으로 Bubble.io에서 맞춤형 진행 상태 트래커를 만들었습니다! 작업을 지속적으로 미리보고 트래커를 테스트하여 제대로 작동하는지 확인하는 것을 잊지 마세요.