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.

참고

PowerApps Studio 타이머 미리 보기 모드에만 실행합니다.In PowerApps Studio, timers run only in Preview mode.

주요 속성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 – 컨트롤의 텍스트의 가중치: 굵게, Semibold, 정상, 또는 밝은.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 – 타이머 시작 여부를 선택합니다.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 the Button control apply to the Timer control if users can interact with it.

백그라운드 타이머Background timers

백그라운드 타이머는 자동으로 실행하고 숨겨집니다.Background timers run automatically and are hidden. 경과된 시간에 관심이 있는 경우 지원 역할로 백그라운드 타이머를 이용합니다.Use them in a supporting role where the elapsed time is of little interest to the user. 예를 들어, 1분마다 데이터를 새로 고칠 수도 있고 특정 기간 동안만 알림 메시지를 표시할 수 있습니다.For example, you can refresh data every minute or show a notification message only for a certain amount of time.

백그라운드 타이머는 모든 사용자에게 숨기려면 Visible 속성을 false로 설정해야 합니다.Background timers should have their Visible property set to false so that they are hidden from all users.

타이밍 고려 사항Timing considerations

타이머가 자동으로 실행되는 경우라면, 사용자가 콘텐츠를 읽고 사용하기에 충분한 시간이 있는지를 고려해야 합니다.If a Timer runs automatically, consider whether users have enough time to read and use content. 키보드 및 화면 읽기 프로그램 사용자는 시간 제한 이벤트에 반응하는 데 시간이 더 필요할 수 있습니다.Keyboard and screen-reader users may need more time to react to a timed event.

이러한 전략 중 하나라도 충분 합니다.Any 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 an easy way to extend the limit.

일부 시나리오는 이러한 요구 사항에서 제외됩니다.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

  • 타이머 트리거가 현재 화면에서 변경되면, 화면 읽기 프로그램 사용자에게 변경 내용을 알려주기 위해 라이브 영역을 사용하세요.If a timer triggers changes on the current screen, use a live region to tell screen-reader users what changed.

    참고

    타이머가 표시 및 실행되는 경우, 화면 읽기 프로그램은 5초마다 경과된 시간을 알려줍니다.If the timer is visible and running, screen readers will announce the elapsed time every five seconds.

  • 시간에 민감하고 중요 정보에 대해서는 컨트롤의 Text 속성을 사용하지 않습니다.Don't use the Text property of a control for time-sensitive and important information. 화면 읽기 프로그램은 Text 속성의 변경 내용을 알리지 않습니다.Screen readers won't announce changes to Text.

  • 대화형 타이머:For interactive timers:

    • Text 가 있어야 합니다.Text must be present.
    • 경과된 시간을 표시하기 위해서는 레이블 컨트롤을 추가하는 것이 좋습니다.Consider adding a Label control to show the elapsed time. 사용자에게 타이머를 시작하거나 중지하도록 알려주기 위해 타이머의 Text 속성을 이용합니다.Use the timer's Text property to instruct the user to start or stop the timer.