brunch

You can make anything
by writing

C.S.Lewis

by Lawn Apr 10. 2024

[HIG] Progress indicators

앱이 작업을 수행 중임을 보여주는 프로그래스 인디케이터

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

진행률 표시기(progress indicator)는 앱이 콘텐츠를 로드하거나 작업을 수행하는 동안 사용자들에게 앱이 멈추지 않았음을 알려줍니다.

진행률 표시기를 사용하면 작업이 완료될 때까지 얼마나 기다려야 하는지 시각적으로 보여줄 수 있습니다. 모든 진행률 표시기는 일시적인 것으로, 작업이 진행 중일 때만 표시되고 완료되면 사라집니다.

해당 작업이 완료되기까지 필요한 시간을 정량화할 수 있는 작업과 없는 작업이 있습니다.

확정(determinate) - 파일 변환과 같이 작업 완료에 필요한 시간이 정의된 작업의 경우

불확정(indeterminate) - 복잡한 데이터 로드 또는 동기화와 같이 정량화할 수 없는 작업에 사용

확정 및 불확정 진행률 표시기는 플랫폼에 따라 다른 스타일을 가질 수 있습니다. 확정 진행률 표시기는 작업이 완료됨에 따라 선형 또는 원형 트랙을 채워 작업의 진행률을 보여줍니다. 진행률 표시줄에는 앞쪽에서 뒤쪽까지 채워지는 트랙이 포함됩니다. 원형 진행률 표시기에는 시계 방향으로 채워지는 트랙이 있습니다.

활동 표시기(activity indicator)라고도 하는 불확정 진행률 표시기는 애니메이션 이미지를 사용하여 진행률을 표시합니다. 모든 플랫폼에서 회전하는 것처럼 보이는 원형 이미지를 지원하지만, macOS에서는 불확정 진행률 표시줄도 지원합니다.

개발자 가이드라인은 ProgressView를 참고하세요.

Best practices

가능하면 확정(determinate) 진행률 표시기를 사용하세요. 불확정 진행률 표시기는 프로세스가 진행 중임을 보여주지만 작업의 소요 시간을 예측하는 데는 도움이 되지 않습니다. 확정 진행률 표시기는 사람들이 작업이 완료될 때까지 기다리는 동안 다른 작업을 할 것인지, 다른 시간에 작업을 다시 시작할 것인지, 아니면 작업을 포기할 것인지 결정하는 데 도움이 될 수 있습니다.

확정(determinate) 진행률 표시기로 진행 상황을 보여줄 때는 가능한 한 정확해야 합니다. 사람들이 작업을 완료하는 데 필요한 시간에 대해 확신을 가질 수 있도록 진행 속도를 고르게 조정하는 것이 좋습니다. 잘못된 진행상황을 보여주게 되면 앱이 제대로 동작하지 않는다는 느낌과, 신뢰를 잃을 수 있습니다.

진행률 표시기(progress indicator)를 계속 움직여서 작업이 계속 진행되고 있음을 사람들이 알 수 있도록 하세요. 사람들은 정지된 표시기를 보면 앱이 멈추거나 작업이 중단되었다고 느낍니다. 만약 작업 및 앱이 멈춘 경우 사람들이 문제와 해결방법에 대해 알 수 있는 피드백을 제공하세요.

불확정(indeterminate) 진행률 표시기에서 확정(determinate) 진행률 표시기로 전환하는 것이 좋습니다. 불확정한 작업이 완료 기간을 알 수 있는 시점에 도달하면 진행률 표시줄을 확정 진행률 표시기로 전환하세요. 사람들은 일반적으로 확정 진행률 표시기를 선호하는데, 이는 무슨 일이 일어나고 있는지, 얼마나 걸릴지 가늠하는 데 도움이 되기 때문입니다.

원형 스타일에서 막대 스타일의 표시기로 전환하지 마세요. 활동 표시기(스피너라고도 함)와 진행률 막대는 모양과 크기가 서로 다르기 때문에 전환 시 인터페이스가 흐트러지고 사람들에게 혼란을 줄 수 있습니다.

도움이 된다면 작업에 대한 추가 컨텍스트를 제공하는 설명을 함께 보여주세요. 정확하고 간결하게 작성하는 것이 좋습니다. 로딩 또는 인증과 같은 용어의 사용은 모호하기 때문에 피하는 것이 좋습니다.

일관된 위치에 진행률 표시기(progress indicator)를 표시하세요. 일관된 위치에서 진행률 표시기가 표시되면, 사람들이 앱 내 또는 앱 간에 작업 상태를 손쉽게 확인할 수 있습니다.

사람들이 작업을 중단할 수 있도록 하는 것이 좋습니다. 작업을 중단시키면서 문제가 생기지 않는다면, 작업 취소 버튼을 함께 제공하세요. 작업을 중단하면 파일의 다운로드된 부분이 손실되는 등의 문제가 발생할 수 있는 경우에는 취소 버튼과 함께 일시 중지 버튼을 함께 제공하는 것이 좋습니다.

작업을 중단하면 부정적인 결과가 발생하는 경우 사용자에게 알립니다. 작업을 취소하면 진행 상황이 손실되는 경우 취소를 확인하거나 프로세스를 다시 시작할 수 있는 옵션이 포함된 알림(alert)을 제공하는 것이 도움이 됩니다.

Platform considerations

No additional considerations for tvOS or visionOS.

iOS, iPadOS

탐색(navigation bars)과 도구(toolbar) 모음에서 트랙의 채워지지 않은 부분을 숨깁니다.. 기본적으로 진행률 표시줄의 트랙에는 채워진 부분과 채워지지 않은 부분이 존재합니다. 탐색이나 도구 모음에서 진행률 표시줄을 사용하는 경우(예: 페이지 로딩 표시) 트랙의 채워지지 않은 부분을 숨기도록 디자인하세요.

Refresh content controls

새로 고침 컨트롤(refresh control)을 사용하면 콘텐츠 업데이트를 기다릴 필요 없이 테이블 뷰에서 콘텐츠를 로드할 수 있습니다. 새로 고침 컨트롤은 기본적으로 숨겨져 있는 특수한 유형의 활동 표시기(activity indicator)로, 사람들이 다시 로드하려는 화면을 아래로 끌면 나타납니다. 예를 들어 메일에서는 받은 편지함 메시지 목록을 아래로 끌어서 새 메시지를 확인할 수 있습니다.

자동 콘텐츠 업데이트 수행. 사람들은 콘텐츠를 원할 때 새로고침하는 것뿐 아니라 콘텐츠가 주기적으로 자동 업데이트 되기를 원합니다. 모든 업데이트를 사람이 직접 해야 하도록 하지 마세요. 정기적으로 업데이트하여 데이터를 최신 상태로 유지해야 합니다.

필요한 경우에만 짧은 제목을 제공하세요. 필요하다면 새로 고침 컨트롤(refresh control)에 제목을 표시할 수 있습니다. 대부분의 경우 컨트롤의 애니메이션은 콘텐츠가 로드 중임을 보여주기 때문에 제목이 필요하지 않습니다. 새로 고침을 수행하는 방법을 설명하는 제목을 사용하지 마세요. 대신 새로 고침 되는 콘텐츠에 대한 사용자들에게 필요한 가치 있는 정보를 제공하는 것이 좋습니다. 예를 들어 팟캐스트의 새로 고침 컨트롤은 제목을 사용하여 사람들에게 마지막 팟캐스트 업데이트가 언제 발생했는지 알려줍니다.

개발자 가이드라인은 UIRefreshControl을 참고하세요.

macOS

macOS에서 불확정(indeterminate) 진행률 표시기는 막대 또는 원형 스타일이 있습니다. 두 버전 모두 애니메이션을 사용하여 앱이 작업을 수행 중임을 나타냅니다.

백그라운드의 작업의 상태를 알리거나 공간이 제한되어 있을 때는 활동 표시기(스피너)를 사용하는 것이 좋습니다. 스피너는 크기가 작고 눈에 잘 띄지 않으므로 서버에서 메시지를 검색하는 등의 비동기 백그라운드 작업에 유용합니다. 스피너는 텍스트 필드 안이나 버튼과 같은 특정 컨트롤 옆과 같이 작은 영역 내에서 진행 상황을 알리는 데도 유용합니다.

회전하는 진행률 표시기에 라벨을 붙이지 마세요. 스피너는 일반적으로 사람들이 프로세스를 시작할 때 나타나기 때문에 라벨이 필요하지 않습니다.