Bubble.io에서 이벤트 카운트다운을 어떻게 만드는지?

Bubble.io에서 이벤트 카운트 다운을 생성하는 것은 여러 요소, 워크플로우, 이벤트까지의 남은 시간을 추적하기 위한 동적 데이터를 설정하는 여러 단계가 포함됩니다. 다음은 자신의 카운트다운 타이머를 생성하는데 도움이 될 단계별 가이드입니다:

1단계: 텍스트 요소 추가

• Bubble.io 편집기를 엽니다.
• 페이지에 카운트다운을 보여줄 위치에 텍스트 요소를 추가합니다.
• 이 요소는 폰트, 색상, 크기 등으로 디자인에 맞게 스타일을 지정할 수 있습니다.

2단계: 사용자 정의 상태 설정

• 텍스트 요소를 클릭하고 새로운 사용자 정의 상태를 생성합니다.
• 이 상태명을 “Countdown”와 같이 지정합니다.
• 이 타입은 반드시 “date”로 설정해야 합니다.

3단계: 남은 시간 계산

• 페이지가 로드될 때 실행되는 워크플로우를 생성합니다.
• "Set state" 액션을 사용하여 "Countdown" 상태를 이벤트의 날짜와 시간으로 설정합니다.

4단계: 카운트다운 초기화

• 매 초마다 트리거되는 새로운 워크플로우를 시작합니다.
• "Every X seconds" 워크플로우를 사용하고 1초로 설정합니다.
• 이 워크플로우는 카운트다운을 업데이트하는 데 사용됩니다.

5단계: 매 초마다 카운트다운 업데이트

• "Every X seconds" 워크플로우 내에서 텍스트 요소를 업데이트하는 액션을 추가합니다.
• 텍스트를 현재 날짜/시간과 "Countdown" 상태 값 사이의 남은 시간을 계산하도록 설정합니다.
• 남은 일, 시간, 분, 초를 표시하도록 Bubble의 날짜/시간 계산 함수인 minus를 사용합니다.

6단계: 카운트다운 동적으로 만들기

• 텍스트의 동적 데이터를 다음과 같이 설정합니다:

  “Event starts in:” + (Countdown state’s value:formatted as days) + “days ” + (Countdown state’s value:formatted as hours) + “hours ” + (Countdown state’s value:formatted as minutes) + “minutes ” + (Countdown state’s value:formatted as seconds) + “seconds”
  

• 일, 시간, 분, 초 표시에 대한 서식 옵션을 본인 취향에 맞게 수정합니다.

7단계: 카운트다운 텍스트 스타일링

• 디자인 탭으로 돌아가서 카운트다운 텍스트 요소의 외관을 사용자 지정합니다.
• 리치 텍스트 에디터를 사용하여 숫자를 볼드로 하거나 색상을 변경하여 눈에 띄게 만듭니다.

8단계: 카운트다운 테스트

• 페이지를 미리보기하여 카운트다운이 어떻게 작동하는지 확인합니다.
• 카운트다운이 이벤트까지의 시간을 올바르게 추적하고 매 초마다 업데이트되는지 확인합니다.

이벤트가 카운트다운을 보는 위치와 다른 시간대에 있는 경우 시간대 차이를 확인해야 합니다. 워크플로우와 계산을 조정하여 어디에서 보든 올바른 카운트다운을 반영하도록 합니다.

이 단계들을 따르면, 예정된 이벤트까지 남은 시간을 동적으로 업데이트하여 보여주는 기능적인 이벤트 카운트다운을 Bubble.io 애플리케이션에 생성할 수 있습니다. 행운을 빕니다!