프로그래스 바, 로딩 바, 스피너의 차이점

프로그레스 인디케이터의 사용방법과 좋은 사례

Mar 3. 2025

프로그래스 인디케이터의 종류

위와 같이 작업의 진행 상태를 시각적으로 인식할 수 있도록 하는 컴포넌트를 프로그래스 바, 로딩 바, 스피너 등의 이름으로 부르곤 합니다. 이러한 이름이 틀린 것은 아니지만 Google의 Material 3와 Apple의 HIG에서는 프로그래스 인디케이터(Progress Indicator)라고 정의하고 있으며, 그 종류는 다음과 같이 구분합니다.

❶ 선형 프로그래스 인디케이터 (Linear progress indicator)

프로그래스 바, 로딩 바 등

❷ 원형 프로그래스 인디케이터 (Circular progress indicator)

스피너, 로딩 스피너, 로딩 휠 등

프로그래스 인디케이터의 구성

프로그래스 인디케이터는 종류와 관계없이 다음과 같이 구성됩니다.

❶ 인디케이터 (Indicator)

❷ 트랙, 경로 (Track)

❸ 정지 인디케이터 (Stop indicator)

정지 인디케이터의 경우 Material 3에서 정의하는 구성요소로, Material의 접근성 기준을 충족하기 위해 인디케이터의 끝을 표시하는 요소입니다. 불확정적이거나 순환적인 인디케이터에는 사용하지 않습니다. (인디케이터가 순차적으로 차지 않으므로 불필요합니다.) 트랙과 컨테이너 또는 컨테이너 뒤쪽 표면의 대비가 3:1 미만인 경우 정지 인디케이터를 권장합니다.

주변 표면과 시각적 대비가 최소 3:1인 경우에만 정지 인디케이터를 제거할 수 있습니다. 다만, 이는 Material 3에서만 권장하는 내용으로, 타 가이드에는 포함되지 않는 내용이니 상황에 따라 사용하면 좋을 것 같습니다.

확정적 · 비확정적 인디케이터

프로그래스 인디케이터는 확정적 프로세스와 불확정적 프로세스가 다르게 작동합니다.

❶ 확정적 인디케이터 (Determinate progress indicators)

확정적 인디케이터는 프로세스가 얼마나 걸리는지 표시합니다. 진행 상황을 알고 있을 때 사용합니다. 인디케이터는 측정하는 프로세스의 진행 상황을 정확하게 나타내야 합니다.

❷ 비확정적 인디케이터 (Indeterminate progress)

비확정적 인디케이터는 진행 중이지만 지정되지 않은 대기 시간이 있음을 보여줍니다. 진행 상황을 알 수 없거나, 로드 시간이 매우 빠르거나, 프로세스에 걸리는 시간을 나타낼 필요가 없는 경우에 사용해야 합니다.

프로그래스 인디케이터의 사용방법

프로그래스 인디케이터의 사용방법을 이어서 알아보도록 하겠습니다.

선형 인디케이터의 배치

화면 상단에 있는 경우, 인디케이터가 모든 페이지 콘텐츠가 로드 중임을 보여줍니다. 카드에 배치된 경우, 인디케이터가 카드 콘텐츠만 로드 중임을 보여줍니다.

원형 인디케이터의 배치

화면 중앙의 인디케이터는 페이지가 로딩 중임을 보여줄 수 있습니다. 콘텐츠 하단의 인디케이터는 페이지에서 새 항목이 나타날 위치를 보여줄 수 있습니다.

원형 인디케이터를 버튼에 배치하면 버튼의 동작이 현재 진행 중임을 나타낼 수 있습니다. 5초 미만의 짧고 불확실한 활동에는 원형 인디케이터를 사용할 수 있습니다. 다만, 리스트의 모든 버튼에 인디케이터를 적용하면 안 됩니다.

최소 3:1의 대비율을 보장하려면 활성 인디케이터 색상을 버튼 아이콘이나 텍스트와 같은 색상으로 변경하고 트랙을 제거합니다.

RTL(Right to Left) 언어에서 선행 프로그래스 인디케이터는 왼쪽으로 이동해야 합니다. 원형 프로그래스 인디케이터는 시계방향으로 계속 이동해야 합니다.

❶ LTR(Left to Right) 언어의 인디케이터

❷ RTL(Right to Left) 언어의 인디케이터

가능하다면 확정적 인디케이터를 권장합니다. 불확정적 인디케이터는 프로세스가 진행 중임을 보여주지만, 사람들이 작업에 얼마나 걸릴지 추정하는 데 도움이 되지 않습니다. 확정적 인디케이터는 사람들이 작업이 완료될 때까지 기다리는 동안 다른 작업을 할지, 다른 시간에 작업을 다시 시작할지, 작업을 포기할지 결정하는 데 도움이 될 수 있습니다.

확정적 진행 지표에서 진행 상황을 표현할 때는 최대한 정확하게 해야 합니다. 작업을 완료하는 데 필요한 시간에 대해 확신할 수 있도록 진행 속도를 고르게 하는 것을 권장합니다. 5초 안에 90% 완료를 보여주고 5분 안에 마지막 10%를 보여주면 사람들은 앱이 여전히 작동하는지 의심하고, 심지어 속이는 것처럼 느낄 수도 있습니다.

가능하다면 인디케이터를 불확정적에서 확정적으로 전환하는 것을 권장합니다. 불확정 프로세스가 지속 시간을 결정할 수 있는 지점에 도달하면 확정 인디케이터로 전환합니다. 사람들은 일반적으로 확정 진행률 표시줄을 선호하는데, 무슨 일이 일어나고 있는지, 얼마나 걸릴지 가늠하는 데 도움이 되기 때문입니다.

프로그래스 인디케이터의 좋은 사례

프로그래스 인디케이터 컴포넌트의 좋은 사례를 선별해 보았으니, 참고하여 활용하면 좋겠습니다.

Microsoft Copilot

로고와 비확정적 프로그래스 인디케이터를 결합하여 스플래시 스크린과 같은 형태로 표현하고 있습니다. 하단에는 곧 완료된다는 텍스트를 통해 이탈을 막고 있습니다.

Cash App

비확정형 프로그래스 인디케이터와 하단 텍스트를 합께 사용하고 있습니다. 비확정형 인디케이터이기 때문에 그라디언트가 적용된 비주얼을 사용할 수 있습니다.

Venmo

비확정적 인디케이터의 크기는 줄이고, 하단에는 텍스트와 일러스트레이션을 배치하여 기다리는 체감 시간을 줄이고자 한 것이 느껴집니다. 당연한 로딩 시간을 송금을 위해 준비하는 시간으로 표현한 점이 인상적입니다.

마치며

프로그래스 인디케이터는 진행 상태를 시각적으로 제공하여 사용자가 기다릴 준비를 할 수 있도록 합니다. 확정적 인디케이터를 사용하면 완료 예상 시간이 보이므로 이탈률을 줄이는데 도움이 되기도 합니다.

그러나 진행률이 실제보다 빠르거나 느리면 신뢰도를 낮출 수 있으며, 불필요하게 남발할 경우 오히려 사용자 경험을 해칠 수 있습니다. 그러므로 너무 오래 지속되지 않은 상황에만 사용하고, 3~5초 이상 걸리는 경우 예상 시간이나 추가 정보 제공을 고려해야 합니다. 또한 오히려 과한 애니메이션은 시각적 피로감을 줄 수 있으므로 지양합니다.