PowerApps의 타이머 컨트롤Timer control in PowerApps

일정 시간이 지난 후 앱이 응답하는 방식을 결정할 수 있는 컨트롤입니다.A control that can determine how your app responds after a certain amount of time passes.

설명Description

타이머는 일정 시간이 지난 후 컨트롤이 표시되는 시간이나 컨트롤의 다른 속성 변경 등을 결정할 수 있습니다.Timers can, for example, determine how long a control appears or change other properties of a control after a certain amount of time has passed.

타이머가 디자이너에서 실행되려면 앱을 미리 보아야 합니다.Note that you need to preview the app in order for Timer to run in the designer. 이렇게 하면 사용자가 시간 제한 없이 디자이너에서 타이머를 구성할 수 있습니다.This allows user to configure the timer in the designer without any time restrictions.

주요 속성Key properties

Duration – 타이머가 실행되는 시간(밀리초)입니다.Duration – How long a timer runs in milliseconds. 최대 값이 없습니다.There is no maximum value.

OnTimerEnd - 타이머 실행이 완료될 때 앱이 응답하는 방식입니다.OnTimerEnd – How an app responds when a timer finishes running.

Repeat – 타이머 실행 완료 후 자동으로 다시 시작할지 여부입니다.Repeat – Whether a timer automatically restarts when it finishes running.

추가 속성Additional properties

Align - 컨트롤의 가로 가운데를 기준으로 한 텍스트의 위치입니다.Align – The location of text in relation to the horizontal center of its control.

AutoPause – 사용자가 다른 화면으로 이동하는 경우 타이머 컨트롤이 자동으로 일시 중지할지의 여부를 선택합니다.AutoPause – Whether the timer control automatically pauses if the user navigates to a different screen.

AutoStart - 사용자가 해당 컨트롤이 포함된 화면으로 이동할 때 타이머 컨트롤이 자동으로 재생할지의 여부를 선택합니다.AutoStart – Whether the timer control automatically starts to play when the user navigates to the screen that contains that control.

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

Color – 컨트롤의 텍스트 색입니다.Color – The color of text in a control.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.Font – The name of the family of fonts in which text appears.

FontWeight - 컨트롤의 텍스트 굵기입니다. Bold, Semibold, Normal 또는 Lighter로 설정합니다.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.Italic – Whether the text in a control is italic.

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

OnTimerStart - 타이머가 실행을 시작했을 때 앱이 응답하는 방식입니다.OnTimerStart – How an app responds when a timer starts to run.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user taps or clicks that control.

Reset – 컨트롤이 기본값으로 되돌아가는지 여부입니다.Reset – Whether a control reverts to its default value.

Size -컨트롤에 표시되는 텍스트의 글꼴 크기입니다.Size – The font size of the text that appears on a control.

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

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Text – 컨트롤에 표시되는 텍스트 또는 사용자가 컨트롤에 입력하는 텍스트입니다.Text – Text that appears on a control or that the user types into a control.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.Underline – Whether a line appears under the text that appears on a control.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Refresh( DataSource )Refresh( DataSource )

Examples

카운트다운 표시Show a countdown

  1. 타이머를 추가하고 이름을 Countdown으로 지정합니다.Add a timer, and name it Countdown.

    컨트롤을 추가, 이름을 지정하고, 구성하는 방법을 모르시나요?Don't know how to add, name, and configure a control?

  2. 타이머의 Duration 속성을 10000, RepeatAutostart 속성을 true로 설정합니다.Set the timer's Duration property to 10000 and its Repeat and Autostart properties to true.

  3. (선택 사항) 타이머를 더 판독하기 쉽게 Height 속성을 160, Width 속성을 600, Size 속성을 60으로 설정합니다.(optional) Make the timer easier to read by setting its Height property to 160, its Width property to 600, and its Size property to 60.

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

    RoundUp 함수 또는 다른 함수에 대해 더 알고 싶으신가요?Want more information about the RoundUp function or other functions?

    레이블은 타이머를 다시 시작하기 전까지 남은 시간(초)을 표시합니다.The label shows how many seconds remain before the timer restarts.

컨트롤 애니메이션Animate a control

  1. 타이머를 추가하고 이름을 FadeIn으로 지정합니다.Add a timer, and name it FadeIn.

    컨트롤을 추가, 이름을 지정하고, 구성하는 방법을 모르시나요?Don't know how to add, name, and configure a control?

  2. 타이머의 Duration 속성을 5000으로 설정하고, Repeat 속성을 true로 설정하고, Text 속성을 Toggle animation으로 설정합니다.Set the timer's Duration property to 5000, its Repeat property to true, and its Text property to Toggle animation.

  3. (선택 사항) 타이머를 더 판독하기 쉽게 Height 속성을 160, Width 속성을 600, Size 속성을 60으로 설정합니다.(optional) Make the timer easier to read by setting its Height property to 160, its Width property to 600, and its Size property to 60.

  4. 레이블을 추가하고 Text 속성을 Welcome! 을 표시하도록 설정하며Add a label, set its Text property to show Welcome! Color 속성을 다음 수식으로 설정합니다.and set its Color property to this formula:
    ColorFade(Color.BlueViolet, FadeIn.Value/5000)ColorFade(Color.BlueViolet, FadeIn.Value/5000)

    ColorFade 함수 또는 다른 함수에 대해 더 알고 싶으신가요?Want more information about the ColorFade function or other functions?

  5. 타이머 단추를 선택하여 애니메이션을 시작 또는 중지합니다.Select the timer button to start or stop the animation. 레이블의 텍스트가 흰색으로 흐려지며 전체 강도로 돌아가는 프로세스를 반복합니다.The text in the label fades to white, returns to full intensity, and repeats the process.

접근성 지침Accessibility guidelines

타이머는 특수화된 단추이므로 단추 에 대한 동일한 지침이 적용됩니다.The same guidelines for Button apply because Timer is just a specialized button.

중요

직접적인 사용자 개입 없이 타이머를 제어하는 기능은 접근성을 위해 지원되지 않습니다.Controlling the Timer without direct user intervention is not supported for accessibility. 예를 들어 위의 다른 컨트롤을 배치하거나 Visible 속성을 false로 설정하여 타이머를 시각적으로 숨길 수 있습니다.For example, a timer can be visually hidden by positioning other controls above it or setting its Visible property to false. 타이머는 화면이 표시되면 자동으로 시작되고 몇 시간 후에 일부 작업이 자동으로 실행됩니다.The timer automatically starts when a screen is shown, and after some time, executes some action automatically. 현재 이 시나리오에 액세스할 수 있는 일반적인 방법은 없습니다.Currently, there is no general way to make this scenario accessible.

기타 접근성 지침은 다음과 같습니다.Other accessibility guidelines are as follows.

타이밍Timing

타이머가 자동으로 시작되거나 중지될 경우 사용자에게 콘텐츠를 읽고 사용할 충분한 시간이 있는지를 고려하세요.If a Timer is started or stopped automatically, consider if users have sufficient time to read and use content. 키보드 및 화면 읽기 프로그램 사용자는 시간 초과 이벤트에 반응하는 데 시간이 더 필요할 수 있습니다.Keyboard and screen reader users may require more time to react to a timed event.

이러한 전략 중 하나면 충분합니다.Any one of these strategies is sufficient:

  • 사용자가 시간 초과 이벤트를 취소할 수 있음Allow users to cancel the timed event
  • 사용자가 시작되기 전에 시간 제한을 조정할 수 있음Allow users to adjust the time limit before it begins
  • 시간 제한이 만료되기 전에 20초 동안 경고하고 제한을 쉽게 연장할 방법 제공Warn 20 seconds before the time limit expires and provide a way to extend the limit easily

일부 시나리오는 이러한 요구 사항에서 제외됩니다.Some scenarios are exempt from these requirements. WCAG 2.0 guideline for time limits(시간 제한에 대한 WCAG 2.0 지침)에서 자세히 알아보세요.Learn more in the WCAG 2.0 guideline for time limits.

화면 판독기 지원Screen reader support

  • Text 가 있어야 합니다.Text must be present.

  • 시간에 민감한 중요 정보에는 Text 를 사용하지 마세요.Do not use Text for time-sensitive and important information. 화면 읽기 프로그램 사용자는 Text 변경 내용의 알림을 받지 않습니다.Screen reader users will not be alerted to changes to Text.

    참고

    화면 읽기 프로그램은 5초마다 경과된 시간을 알립니다.Screen readers will announce the elapsed time every 5 seconds. 그러나 타이머 Text 는 알림에 포함되지 않습니다.However, the timer Text will not be included in the announcement.

  • 경과된 시간을 표시하는 레이블 을 추가하는 것이 좋습니다.Consider adding a Label to show the elapsed time. 타이머의 Text 를 사용하여 사용자에게 타이머를 시작하거나 중지하도록 지시합니다.Use the timer's Text to instruct the user to start or stop the timer.