Bubble.io에서 읽기 진행 상태 지시기를 어떻게 만들 수 있나요?

답변:

단계 1: 진행 바 플러그인 설치

• Bubble.io 편집기로 이동합니다.
• 플러그인 탭에 접속하여 "Progress Bar" 플러그인을 검색합니다.
• 플러그인을 Bubble 어플리케이션에 설치합니다.

단계 2: 진행 바 요소 추가

• 애플리케이션의 페이지를 구성하는 디자인 탭으로 이동합니다.
• 시각적 요소 섹션을 클릭하고, 플러그인으로부터 제공되는 진행 바 요소를 선택합니다.
• 읽기 진행 상태 표시기를 표시하려는 페이지에 진행 바 요소를 배치합니다.

단계 3: 진행 바 커스터마이징

• 페이지에 배치한 진행 바 요소를 클릭해 그 속성을 엽니다.
• "Percentage" 속성을 설정하여 페이지에서의 읽기 진행 상태를 동적으로 표현합니다. 이것은 사용자가 페이지에서의 스크롤 위치를 전체 콘텐츠 높이에 대해 계산하는 동적 표현식을 사용하여 수행할 수 있습니다.
• 디자인에 맞게 진행 바 표시기의 색상을 선택합니다.
• "Animate progress" 옵션을 활성화하면 진행 바가 업데이트 될 때 마다 부드럽게 애니메이션 처리됩니다.
• 백분율을 명시적으로 표시하려면 텍스트나 아이콘과 같은 다른 요소와 이것을 결합합니다.

단계 4: 진행 상태 추적을 위한 워크플로우 생성

• 진행 바를 업데이트할 상호 작용을 설정하기 위해 Workflow 탭으로 이동합니다.
• 페이지 스크롤 또는 사용자가 읽는 콘텐츠와 상호작용할 때 트리거하는 이벤트를 생성합니다.
• 진행 바의 백분율에 의존하는 사용자 정의 상태나 데이터베이스 필드를 업데이트하기 위해 이 이벤트를 사용합니다.

단계 5: 테스팅과 조정

• 애플리케이션을 미리 보고 읽기 진행 상태 표시기를 테스트합니다. 페이지를 스크롤하며 진행 바가 예상대로 업데이트되는지 확인합니다.
• 읽기 진행 상태 표시기의 정확성을 보장하기 위해 테스트를 바탕으로 동적 표현식이나 워크플로우를 조정합니다.
• 기능에 만족하면, 애플리케이션의 전반적인 모양에 잘 어울리도록 최종 디자인을 조정합니다.

더불어, 읽기 진행 표시기가 다양한 장치 및 화면 크기에서 작동하는지 확인하기 위해 어플리케이션의 반응성을 확인하시고, 조정하세요.