Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations.
진행 표시기는 앱이 콘텐츠를 로드하거나 긴 작업을 수행하는 동안 멈춰 있지 않음을 사용자에게 알려주는 요소입니다.
Some progress indicators also give people a way to estimate how long they have to wait for something to complete. All progress indicators are transient, appearing only while an operation is ongoing and disappearing after it completes.
일부 진행 표시기는 사람들에게 어떤 작업이 완료되기까지 얼마나 기다려야 하는지 추정할 수 있는 방법을 제공하기도 합니다. 모든 진행 표시기는 일시적인 것으로, 작업이 진행 중일 때만 나타나며 작업이 완료된 후에는 사라집니다.
Because the duration of an operation is either known or unknown, there are two types of progress indicators:
작업의 기간이 알려져 있거나 알려져 있지 않기 때문에 진행 표시기에는 두 가지 유형이 있습니다:
•
Determinate, for a task with a well-defined duration, such as a file conversion
결정적 진행 표시기는 파일 변환과 같이 기간이 명확하게 정의된 작업에 사용됩니다.
•
Indeterminate, for unquantifiable tasks, such as loading or synchronizing complex data
불확정적 진행 표시기는 로딩이나 복잡한 데이터 동기화와 같이 양을 정량화하기 어려운 작업에 사용됩니다.
Both determinate and indeterminate progress indicators can have different appearances depending on the platform. A determinate progress indicator shows the progress of a task by filling a linear or circular track as the task completes. Progress bars include a track that fills from the leading side to the trailing side. Circular progress indicators have a track that fills in a clockwise direction.
결정적 진행 표시기와 불확정적 진행 표시기 모두 플랫폼에 따라 다른 외관을 가질 수 있습니다. 결정적 진행 표시기는 작업이 완료됨에 따라 선형 또는 원형 트랙을 채워 작업의 진행 상황을 나타냅니다. 진행 막대는 선행면에서 후행면으로 채워지는 트랙을 포함합니다. 원형 진행 표시기는 시계 방향으로 트랙이 채워지는 형태를 가지고 있습니다.
Progress bar
프로그레스 바
Circular progress indicator
원형 진행 표시기
An indeterminate progress indicator — also called an activity indicator — uses an animated image to indicate progress. All platforms support a circular image that appears to spin; however, macOS also supports an indeterminate progress bar.
불확정적 진행 표시기, 또는 활동 표시기라고 불리는 것은 애니메이션 이미지를 사용하여 진행 상태를 나타내는 것을 말합니다. 모든 플랫폼은 회전하는 것처럼 보이는 원형 이미지를 지원하지만 macOS는 불확정적 진행 막대도 지원합니다.
macOS
watchOS
When possible, use a determinate progress indicator. An indeterminate progress indicator shows that a process is occurring, but it doesn’t help people estimate how long a task will take. A determinate progress indicator can help people decide whether to do something else while waiting for the task to complete, restart the task at a different time, or abandon the task.
가능한 경우 결정적 진행 표시기를 사 셍하요 .적불정 적행진 시표기는 프로세스가 진행 중임을 나타내지만 작업이 얼마나 오랜 시간이 걸릴지를 사용자가 추정하는 데 도움이 되지 않습니다. 결정적 진행 표시기는 작업이 완료될 때까지 기다리는 동안 다른 작업을 수행할지, 작업을 다른 시간에 다시 시작할지, 아니면 작업을 포기할지를 사용자가 결정하는 데 도움이 될 수 있습니다.
Be as accurate as possible when reporting advancement in a determinate progress indicator. Consider evening out the pace of advancement to help people feel confident about the time needed for the task to complete. Showing 90 percent completion in five seconds and the last 10 percent in 5 minutes can make people wonder if your app is still working and can even feel deceptive.
결정적 진행 표시기에서 진행 상황을 보고할 때 가능한 한 정확하게 하세요. 작업이 완료되기까지 필요한 시간에 대한 사용자의 확신을 높이기 위해 진행 속도를 조절하는 것을 고려하십시오. 5초 동안 90% 완료를 표시하고 나머지 10%를 5분 동안 표시하면 사용자들이 여전히 앱이 작동 중인지 의문을 품을 수 있으며 심지어 속임수적으로 느껴질 수 있습니다.
Keep progress indicators moving so people know something is continuing to happen. People tend to associate a stationary indicator with a stalled process or a frozen app. If a process stalls for some reason, provide feedback that helps people understand the problem and what they can do about it.
진행 표시기를 계속 움직이도록 유지하여 사용자가 무엇인가 계속 일어나고 있다는 것을 알 수 있게 하세요. 정지된 표시기는 멈춘 프로세스나 멈춘 앱과 연관시키는 경향이 있습니다. 프로세스가 어떤 이유로 멈추면 사용자에게 문제를 이해하고 해결할 수 있는 도움말을 제공하세요.
When possible, switch a progress bar from indeterminate to determinate. If an indeterminate process reaches a point where you can determine its duration, switch to a determinate progress bar. People generally prefer a determinate progress indicator, because it helps them gauge what’s happening and how long it will take.
가능한 경우, 불확정적 진행 표시기를 결정적 진행 표시기로 전환하세요. 불확정적인 프로세스가 그 기간을 결정할 수 있는 지점에 도달하면 결정적 진행 표시기로 전환하세요. 일반적으로 사용자는 결정적 진행 표시기를 선호하는 경향이 있습니다. 왜냐하면 이것은 사용자들이 어떤 일이 벌어지고 얼마나 걸릴지를 파악하는 데 도움이 되기 때문입니다.
Don’t switch from the circular style to the bar style. Activity indicators (also called spinners) and progress bars are different shapes and sizes, so transitioning between them can disrupt your interface and confuse people.
원형 스타일에서 막대 스타일로 전환하지 마세요. 활동 표시기(스피너라고도 함)와 진행 막대는 서로 다른 모양과 크기를 가지고 있으므로 이들 간의 전환은 인터페이스를 방해하고 사용자를 혼란스럽게 할 수 있습니다.
If it’s helpful, display a description that provides additional context for the task. Be accurate and succinct. Avoid vague terms like loading or authenticating because they seldom add value.
도움이 된다면, 작업에 대한 추가적인 맥락을 제공하는 설명을 표시하세요. 정확하고 간결하게 작성하세요. "로딩"이나 "인증"과 같이 모호한 용어는 거의 가치를 추가하지 않으므로 피하세요.
Display a progress indicator in a consistent location. Choosing a consistent location for a progress indicator helps people reliably find the status of an operation across platforms or within or between apps.
진행 표시기를 일관된 위치에 표시하세요. 진행 표시기에 일관된 위치를 선택하면 사람들이 플랫폼 간이나 앱 내외에서 작업 상태를 신뢰할 수 있게 찾을 수 있습니다.
When it’s feasible, let people halt processing. If people can interrupt a process without causing negative side effects, include a Cancel button. If interrupting the process might cause negative side effects — such as losing the downloaded portion of a file — it can be useful to provide a Pause button in addition to a Cancel button.
실현 가능하다면 작업을 중지할 수 있게 해주세요. 작업을 중지해도 부정적인 부작용이 발생하지 않는 경우, 취소 버튼을 포함하세요. 작업을 중지하면 다운로드한 파일의 일부가 손실될 수 있는 등 부정적인 부작용이 발생할 수 있는 경우, 취소 버튼 외에 일시 중지 버튼을 제공하는 것이 유용할 수 있습니다.
Let people know when halting a process has a negative consequence. When canceling a process results in lost progress, it’s helpful to provide an alert that includes an option to confirm the cancellation or resume the process.
작업을 중지하는 것이 부정적인 결과를 초래하는 경우 사용자에게 알려주세요. 작업을 취소하면 진행 상태가 손실될 때는 취소를 확인하거나 작업을 재개할 수 있는 옵션이 포함된 알림을 제공하는 것이 도움이 됩니다.
No additional considerations for tvOS or visionOS.
tvOS나 visionOS에 대한 추가적인 고려사항은 없습니다.
Hide the unfilled portion of the track in navigation bars and toolbars. By default, a progress bar’s track includes both filled and unfilled portions. When you use a progress bar in a navigation bar or toolbar — for example, to show a page loading — configure it to hide the unfilled portion of the track.
내비게이션 바와 툴바에서는 진행 막대의 채워지지 않은 부분을 숨기세요. 기본적으로 진행 막대의 트랙은 채워진 부분과 채워지지 않은 부분을 모두 포함합니다. 예를 들어 페이지 로딩을 표시할 때 내비게이션 바나 툴바에서 진행 막대를 사용하는 경우, 트랙의 채워지지 않은 부분을 숨기도록 구성하세요.
A refresh control lets people immediately reload content, typically in a table view, without waiting for the next automatic content update to occur. A refresh control is a specialized type of activity indicator that’s hidden by default, becoming visible when people drag down the view they want to reload. In Mail, for example, people can drag down the list of Inbox messages to check for new messages.
새로 고침 컨트롤은 사용자가 다음 자동 콘텐츠 업데이트를 기다리지 않고 즉시 내용을 다시 로드할 수 있게 해주는 것으로, 일반적으로 테이블 뷰에서 사용됩니다. 새로 고침 컨트롤은 기본적으로 숨겨져 있으며, 사용자가 다시 로드하려는 뷰를 아래로 드래그하면 나타납니다. 예를 들어 메일 앱에서는 사용자가 받은 편지 목록을 아래로 드래그하여 새로운 편지를 확인할 수 있습니다.
Perform automatic content updates. Although people appreciate being able to do an immediate content refresh, they also expect automatic refreshes to occur periodically. Don’t make people responsible for initiating every update. Keep data fresh by updating it regularly.
자동 콘텐츠 업데이트를 수행하세요. 사용자가 즉시 콘텐츠를 새로 고치는 기능을 감사히 받지만, 주기적으로 자동 새로 고침이 발생하는 것도 기대합니다. 사용자에게 매번 업데이트를 시작하도록 책임을 지우지 마세요. 데이터를 정기적으로 업데이트하여 정보를 신선하게 유지하세요.
Supply a short title only if it adds value. Optionally, a refresh control can include a title. In most cases, this is unnecessary, as the animation of the control indicates that content is loading. If you do include a title, don’t use it to explain how to perform a refresh. Instead, provide information of value about the content being refreshed. A refresh control in Podcasts, for example, uses a title to tell people when the last podcast update occurred.
값을 추가하는 경우에만 간단한 제목을 제공하세요. 선택적으로, 새로 고침 컨트롤에는 제목을 포함할 수 있습니다. 대부분의 경우 이는 불필요하며, 컨트롤의 애니메이션으로 콘텐츠가 로드되고 있음을 나타냅니다. 제목을 포함하는 경우 새로 고침 방법을 설명하는 데 사용하지 마세요. 대신에 새로 고쳐지는 콘텐츠에 관한 가치 있는 정보를 제공하세요. 예를 들어, 팟캐스트 앱의 새로 고침 컨트롤은 제목을 사용하여 마지막 팟캐스트 업데이트가 언제 발생했는지 알려줍니다.
In macOS, an indeterminate progress indicator can have a bar or circular appearance. Both versions use an animated image to indicate that the app is performing a task.
macOS에서 불확정적 진행 표시기는 막대 또는 원형 모양을 가질 수 있습니다. 양쪽 모두에서 애니메이션 이미지를 사용하여 앱이 작업을 수행하고 있음을 나타냅니다.
Indeterminate progress bar
불확정적 프로그레스바
Indeterminate circular progress indicator
불확정적 원형 진행 표시기
Prefer an activity indicator (spinner) to communicate the status of a background operation or when space is constrained. Spinners are small and unobtrusive, so they’re useful for asynchronous background tasks, like retrieving messages from a server. Spinners are also good for communicating progress within a small area, such as within a text field or next to a specific control, such as a button.
백그라운드 작업의 상태를 전달하거나 공간이 제한적인 경우에는 활동 표시기(스피너)를 사용하는 것이 좋습니다. 스피너는 작고 주목받지 않게 표시되기 때문에 서버에서 메시지를 검색하는 등의 비동기 백그라운드 작업에 유용합니다. 또한 스피너는 텍스트 필드 내부 또는 버튼과 같은 특정 컨트롤 옆과 같이 작은 공간 내에서 진행 상황을 전달하는 데 적합합니다.
Avoid labeling a spinning progress indicator. Because a spinner typically appears when people initiate a process, a label is usually unnecessary.
스핀하는 진행 표시기에 레이블을 붙이지 마세요. 일반적으로 스피너는 사용자가 프로세스를 시작할 때 나타나기 때문에 레이블이 필요하지 않습니다.
By default the system displays the progress indicators in white over the scene’s background color. You can change the color of the progress indicator by setting its tint color.
기본적으로 시스템은 씬의 배경 색상 위에 흰색으로 진행 표시기를 표시합니다. 진행 표시기의 색상을 변경하려면 틴트 색상을 설정할 수 있습니다.
Progress bar
프로그레스바
Circular progress indicator
원형 진행 표시기
Activity indicator
활동 표시기
ProgressView — SwiftUI
UIProgressView — UIKit
UIActivityIndicatorView — UIKit
UIRefreshControl — UIKit
NSProgressIndicator — AppKit
작성 날짜 | 작성자 | 수정사항 |
2023/11/30 | 시즈 | 초기 번역 |
2023/12/22 | 시즈 | 배포 |