Power Apps의 타이머 컨트롤

일정 시간이 지난 후 앱이 응답하는 방식을 결정할 수 있는 컨트롤입니다.

설명

타이머는 일정 시간이 지난 후 컨트롤이 표시되는 시간이나 컨트롤의 다른 속성 변경 등을 결정할 수 있습니다.

참고

Power Apps Studio에서 타이머는 미리보기 모드에서만 실행됩니다.

주요 속성

Duration – 타이머가 실행되는 시간(밀리초)입니다. 최대 값은 밀리 초로 표시되는 24 시간입니다. 기본값은 30초입니다.

OnTimerEnd – 타이머 실행이 완료될 때 앱이 응답하는 방식입니다.

Repeat – 타이머 실행이 완료되면 타이머를 자동으로 다시 시작할지 여부입니다.

추가 속성

Align - 컨트롤의 가로 가운데를 기준으로 한 텍스트의 위치입니다.

AutoPause – 사용자가 다른 화면으로 이동하는 경우 타이머 컨트롤이 자동으로 일시 중지할지의 여부를 선택합니다.

AutoStart – 사용자가 해당 컨트롤이 포함된 화면으로 이동할 때 타이머 컨트롤이 자동으로 재생할지의 여부를 선택합니다.

BorderColor – 컨트롤의 테두리 색입니다.

BorderStyle – 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.

BorderThickness – 컨트롤의 테두리 굵기입니다.

Color – 컨트롤의 텍스트 색입니다.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.

Fill – 컨트롤의 배경색입니다.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.

FontWeight - 컨트롤의 텍스트 굵기입니다. Bold, Semibold, Normal 또는 Lighter입니다.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.

OnTimerStart – 타이머가 실행을 시작했을 때 앱이 응답하는 방식입니다.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.

Reset – 컨트롤을 기본값으로 되돌릴지 여부를 선택합니다.

Size – 컨트롤에 표시되는 텍스트의 글꼴 크기입니다.

Start – 타이머 시작 여부를 선택합니다.

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.

Text – 컨트롤에 표시되는 텍스트 또는 사용자가 컨트롤에 입력하는 텍스트입니다.

Tooltip – 사용자가 컨트롤을 마우스로 가리킬 때 나타나는 설명 텍스트입니다.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우는 화면)의 왼쪽 가장자리 사이의 거리입니다.

Y – 컨트롤의 상단 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우는 화면)의 상단 가장자리 사이의 거리입니다.

Refresh( DataSource )

예제

카운트다운 표시

  1. 타이머를 추가하고 이름을 Countdown으로 지정합니다.

    컨트롤을 추가, 이름을 지정하고, 구성하는 방법을 모르시나요?

  2. 타이머의 Duration 속성을 10000, RepeatAutostart 속성을 true로 설정합니다.

  3. (선택 사항) 타이머를 더 판독하기 쉽게 Height 속성을 160, Width 속성을 600, Size 속성을 60으로 설정합니다.

  4. 레이블을 추가하고 Text 속성을 다음 수식으로 설정합니다.
    "Number of seconds remaining: " & RoundUp(10-Countdown.Value/1000, 0)

    RoundUp 함수 또는 다른 함수에 대해 더 알고 싶으신가요?

    레이블은 타이머를 다시 시작하기 전까지 남은 시간(초)을 표시합니다.

컨트롤 애니메이션

  1. 타이머를 추가하고 이름을 FadeIn으로 지정합니다.

    컨트롤을 추가, 이름을 지정하고, 구성하는 방법을 모르시나요?

  2. 타이머의 Duration 속성을 5000으로 설정하고, Repeat 속성을 true로 설정하고, Text 속성을 Toggle animation으로 설정합니다.

  3. (선택 사항) 타이머를 더 판독하기 쉽게 Height 속성을 160, Width 속성을 600, Size 속성을 60으로 설정합니다.

  4. 레이블을 추가하고 Text 속성을 Welcome! 을 표시하도록 설정하며 Color 속성을 다음 수식으로 설정합니다.
    ColorFade(Color.BlueViolet, FadeIn.Value/5000)

    ColorFade 함수 또는 다른 함수에 대해 더 알고 싶으신가요?

  5. 타이머 단추를 선택하여 애니메이션을 시작 또는 중지합니다. 레이블의 텍스트가 흰색으로 흐려지며 전체 강도로 돌아가는 프로세스를 반복합니다.

접근성 지침

사용자가 상호 작용할 수 있다면 Button 컨트롤에 대한 동일한 지침이 Timer 컨트롤에 적용됩니다.

백그라운드 타이머

백그라운드 타이머가 자동으로 실행되고 숨겨집니다. 사용자가 경과 시간에 관심이 없는 경우 보조하는 역할로 사용합니다. 예를 들어, 1분마다 데이터를 새로 고치거나 특정 시간 동안만 알림 메시지를 표시할 수 있습니다.

백그라운드 타이머는 모든 사용자에게 감추려면 Visible 속성이 false로 설정되야 합니다.

타이밍 고려 사항

만약 Timer가 자동으로 시작되면 사용자가 콘텐츠를 읽고 사용하기에 충분한 시간이 있는지 고려해야 합니다. 키보드 및 화면 판독기 사용자는 시간 초과 이벤트에 반응하는 데 시간이 더 필요할 수 있습니다.

이러한 전략 중 하나면 충분합니다.

  • 사용자가 시간 초과 이벤트를 취소할 수 있음.
  • 사용자가 시작되기 전에 시간 제한을 조정할 수 있음.
  • 시간 제한이 만료되기 전에 20초 동안 경고하고 제한을 쉽게 연장할 방법 제공.

일부 시나리오는 이러한 요구 사항에서 제외됩니다. WCAG 2.0 guideline for time limits(시간 제한에 대한 WCAG 2.0 지침)에서 자세히 확인할 수 있습니다.

스크린 리더 지원

  • 타이머가 현재 화면에서 변경을 트리거하는 경우 라이브 영역을 사용해 화면 판독기 사용자에게 변경된 내용을 알려줍니다.

    참고

    타이머가 보이고 실행 중이면 화면 판독기가 5초마다 경과 시간을 알려줍니다.

  • 시간에 민감하고 중요한 정보에 대한 컨트롤의 Text 속성을 사용하지 마십시오. 화면 판독기는 Text 의 변경 사항을 알리지 않습니다.

  • 상호 작용식 타이머의 경우:

    • Text 가 있어야 합니다.
    • 경과된 시간을 표시하는 Label 컨트롤을 추가하는 것이 좋습니다. 타이머의 Text 속성을 사용하여 사용자에게 타이머를 시작하거나 중지하도록 지시합니다.