Progress bar

Progress bar (프로그레스 바)

프로그레스 바는 다운로드, 파일 전송, 설치 같은 프로세스의 지속 시간과 진행 상황에 대한 피드백을 제공해, 사용자가 얼마나 기다릴지 알려줘요. 사용자의 요청이 접수되었고 애플리케이션이 요청된 액션 완료를 향해 진행되고 있음을 나타냅니다.

출처: Progress bar

본문

개요 (Overview)

프로그레스 바는 사용자의 요청이 접수되었고 애플리케이션이 요청된 액션 완료를 향해 진행되고 있음을 나타내요. 진행 중인 프로세스의 상태, 프로세스가 걸릴 예상 시간, 요청이 실행 중인지 여부를 사용자에게 알려줍니다.

언제 사용할까요 (When to use)

• 상당하거나 알 수 없는 시간이 걸릴 수 있는 긴 작업이나 프로세스에서.
• 프로세스를 백분율 같은 정량적 정보로 설명할 수 있을 때.
• 다운로드, 업로드, 데이터 로딩, 폼 제출, 업데이트 저장 같은 시스템 작업의 진행을 시각적으로 보여줄 때.
• 데이터가 요청, 전송, 처리되고 있음을 전달할 때.

언제 사용하지 말아야 할까요 (When not to use)

• 로드 시간이 확장된 정보를 표시할 것으로 예상될 때는 스켈레톤 상태를 대신 사용하세요.
• 진행하기 위해 수동 사용자 액션이 필요할 때는 프로그레스 인디케이터(progress indicator)를 대신 사용하세요.
• 진행이 시스템 액션이 아닌, 완료된 튜토리얼이나 저장 공간 같은 사용자 액션에 의해 결정될 때.
• 프로세스가 5초 미만으로 로드된다면 로딩(loading)을 대신 사용하세요.

변형 (Variants)

프로그레스 바는 결정적(determinate) 또는 비결정적(indeterminate)일 수 있어요. 결정적 변형은 진행을 나타내는 바가 왼쪽에서 오른쪽으로 채워지는 트랙으로 시각화됩니다. 비결정적 변형은 일정한 속도로 움직이는 바가 트랙에서 시간에 따라 반복되는 것으로 시각화됩니다.

변형 (Variant)	용도 (Purpose)
Determinate	진행에 대한 명확한 정보가 있을 때 결정적 프로그레스 바를 사용 — 진행에 대한 정확한 정량 정보를 전달함.
Indeterminate	진행에 대한 불명확한 정보가 있을 때 비결정적 프로그레스 바를 사용 — 활동이 얼마나 걸릴지 나타내지 않고 사용자의 요청·액션·데이터가 현재 처리되고 있음을 전달함.

결정적 프로그레스 바는 0에서 100%로 채워집니다.

비결정적 프로그레스 바는 프로세스가 완료될 때까지 고정된 트랙을 따라 계속 움직입니다.

Determinate progress bar (결정적 프로그레스 바)

결정적 프로그레스 바는 로딩 진행을 추적할 수 있고 0%에서 100%로 트랙을 채우며 값이 감소하거나 재설정되지 않는 바 표시로 변환될 수 있을 때 사용돼요.

특정 목표에 대해 진행을 계산할 수 있을 때 결정적 프로그레스 바를 사용하세요. 예를 들어 알려진 크기의 파일을 다운로드할 때입니다.

Indeterminate progress bar (비결정적 프로그레스 바)

비결정적 프로그레스 바는 로딩 진행이 알려지지 않았거나 대기 시간의 양을 계산할 수 없을 때 사용돼요.

트리거되면 바 표시는 로드의 초기 단계에서 데이터가 수집되는 동안 빠르고 반복적으로 왼쪽에서 오른쪽으로 움직입니다(Carbon은 앞뒤 움직임을 스켈레톤(skeletons)에 예약합니다). 이 시나리오에서는 백분율 값이 표시되지 않습니다. 로드 완료를 계산할 만큼 충분한 정보가 수집되면 이 바는 결정적 표시로 바뀔 수 있어요. 로드의 마지막 결정적 단계는 작업 완료를 사용자에게 시각적으로 나타내는 데 사용됩니다.

Play

진행 상태 (Progress status)

사용자에게 프로세스에 대한 투명성을 주는 것이 가장 좋으며, 이는 보통 소프트웨어나 플랫폼에 대한 신뢰를 높입니다. 그러나 어떤 경우에는 진행 예측을 제공할 수 없을 수도 있어요. 진행 데이터를 사용할 수 없으면 비결정적 프로그레스 바를 사용할 수 있습니다.

더 구체적인 예시 세트로, 일반적으로 시스템 작업의 세 가지 주요 진행이 있습니다: 다운로드, 업로드, 로컬 처리.

다운로드 (Downloading)

다운로드 액션의 경우 결정적 프로그레스 바의 진행 값을 얻고 실시간으로 업데이트하는 것이 보통 가능해요. 데이터 소스에서 보고되는 정보에 따라, 지금까지 다운로드된 양을 기간에 걸쳐 기준으로 남은 시간을 추정할 수 있습니다.

업로드 (Uploading)

업로드 액션은 데이터 소스와 API 구성에 따라 실시간 진행 상태를 보고하지 못할 수 있어요. 그러나 프로세스를 사용자에게 알릴 수 있을 때마다 항상 결정적 값을 제공하도록 노력하세요.

데이터 처리 (Data processing)

데이터 처리는 의미 있는 정보를 만들기 위한 데이터 조작을 의미해요. 여기에는 통화 환전, 파일 생성, 데이터 재포맷 또는 유사한 작업이 포함될 수 있습니다. 작업에 따라 처리 완료를 위한 추정 시간이나 주기를 사용해 결정적 프로그레스 바를 채울 수 있어요.

포맷 (Formatting)

구조 (Anatomy)

• 라벨(Label): 프로그레스 바가 가리키는 프로세스를 설명하는 텍스트. 라벨은 시각적으로 숨길 수 있지만 접근 가능하려면 정의되어야 해요.
• 헬퍼 텍스트(Helper text, 오류 제외 선택): 진행 중인 프로세스에 대한 추가 정보를 보여주는 보조 텍스트. 결정적의 경우 보통 진행을 보여주는 백분율, 분수, 비율 또는 숫자 값입니다. 프로그레스 바가 비결정적일 때는 그러한 값이 적용되지 않아요. 오류 상태를 받는 프로그레스 바는 오류 헬퍼 텍스트로 문제를 전달해야 합니다.
• 트랙(Track): 바 표시가 그 위에서 움직이는 정적 영역으로, 프로세스의 총 길이와 지속 시간이 무엇인지에 대한 고정된 시각적 참조 역할을 해요.
• 바 표시(Bar indicator): 프로세스가 얼마나 진행되었는지 나타내요.
• 상태 아이콘(Status icon): 프로그레스 바의 상태(오류 또는 성공)를 나타냅니다.

크기 (Sizing)

높이 (Height)

프로그레스 바는 작은(4px)과 큰(8px)의 두 가지 크기로 제공돼요. 큰 프로그레스 바 높이는 페이지에 많은 공간이 있을 때 주로 사용됩니다. 작은 프로그레스 바 높이는 공간이 제한될 때 주로 사용되며 카드, 데이터 테이블, 사이드 패널 안에 배치할 수 있어요.

너비 (Width)

프로그레스 바의 너비는 콘텐츠에 따라 달라질 수 있어요. 프로그레스 바의 최소 너비는 48px이며, 가능하면 너비를 최대 6컬럼으로 유지하세요. 프로그레스 바 너비가 너무 길면 가독성이 떨어질 수 있어요. 창이나 애플리케이션의 전체 너비를 채우도록 프로그레스 바 길이를 늘리지 마세요.

너비를 6컬럼 이내로 유지하세요.

6컬럼 너비를 초과하지 마세요.

텍스트 정렬 (Text alignment)

텍스트 정렬은 컨텍스트와 주어진 영역에 따라 달라져요. 프로그레스 바는 기본(default), 인라인(inline), 들여쓰기(indent)의 세 가지 텍스트 정렬 방식을 가질 수 있습니다. Indent 정렬은 프로그레스 바가 가장자리까지 확장되는 컨테이너, 타일, 사이드 패널 안에서만 사용해야 해요.

프로그레스 바의 텍스트 정렬 몇 가지 흔한 예시

텍스트 정렬 (Text alignment)	사용 사례 (Use case)
Default	Full page, cards, dialogs
Inline	Data table
Indent	Side panels, cards (usually on dashboard)

텍스트 배치 (Text placement)

가독성을 위해 라벨은 항상 프로그레스 바 위에, 헬퍼 텍스트는 아래나 옆에 배치해야 해요. 프로그레스 바 표시나 트랙 안에 텍스트를 배치하는 것을 피하세요. 이 시각은 텍스트 정렬에 어수선함과 불일치를 일으킬 수 있어요. 한편 텍스트를 프로그레스 바에서 멀리 배치하면 컨텍스트에 혼란을 일으킬 수 있습니다.

텍스트를 프로그레스 바 가까이에 배치하세요.

프로그레스 바에 텍스트를 임베드하지 마세요.

텍스트를 프로그레스 바 가까이에 배치하세요.

프로그레스 바에서 멀리 텍스트를 배치하지 마세요.

국제화 (RTL)

RTL(오른쪽에서 왼쪽) 언어의 경우 결정적·비결정적 옵션 모두 프로그레스 바의 레이아웃이 반전됩니다. 라벨은 오른쪽 정렬되고, 값은 왼쪽 정렬되며, 채움은 오른쪽에서 왼쪽으로 진행됩니다. 백분율 기호의 배치는 로케일에 따라 다르다는 점을 유의하세요.

Play

콘텐츠 (Content)

결정적과 비결정적 프로그레스 바 모두 라벨과 선택적 헬퍼 텍스트가 있어요. 그러나 비결정적은 선택적 헬퍼 텍스트에서 진행에 대한 정확한 정량 정보를 제공할 수 없습니다.

라벨 (Labels)

• 라벨은 사용자에게 프로그레스 바가 무엇을 처리하고 있는지 알려줘요.
• 라벨을 몇 단어나 한 줄의 텍스트로 제한해 짧고 간결하게 유지하세요.
• 라벨 텍스트는 프로그레스 바가 로딩되는 동안 절대 바뀌면 안 됩니다. 성공이나 오류 정보는 바 표시 색상과 아이콘, 및 헬퍼 텍스트로 제공되므로 프로세스가 끝날 때 업데이트할 필요도 없습니다.

헬퍼 텍스트 (Helper text)

• 헬퍼 텍스트는 진행 중인 프로세스에 대한 추가 정보를 보여주는 데 사용됩니다.
• 프로그레스 바 헬퍼 텍스트의 흔한 사용 사례는 "Fetching assets…" 같은 일반적인 문구이거나, "42/256 items"처럼 완료할 정확한 양을 나타낼 수 있어요.
• 로딩 백분율을 나타낼 때 백분율 숫자는 바가 진행됨에 따라 세어 올라가야 합니다.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

공통 동작 (Universal behaviors)

상태 (Statuses)

프로그레스 바에는 active, success, error의 세 가지 상태가 있어요. 이 상태는 비결정적·결정적 프로그레스 바 모두에 적용됩니다. 프로세스가 성공적이거나 성공적이지 않게 완료된 후, 프로그레스 바는 사용 사례에 가장 적합한 것에 따라 확인(confirmation)이나 검증으로 지속적으로 남을 수도 있고 자동으로 닫힐 수도 있어요.

활성 (Active)

활성 상태는 애니메이션 처리된 파란 바 표시로 표현되며, 액션이 여전히 진행 중임을 전달합니다.

성공 (Success)

성공 상태는 전체 너비의 녹색 프로그레스 바와 체크마크 아이콘으로 전달되며, 액션이 성공적으로 완료되었음을 나타냅니다.

오류 (Error)

오류 상태는 액션이 성공적으로 완료되지 않았음을 나타냅니다. 오류가 발생하면 인라인 알림이나 폼 안의 오류 처리가 나타나야 해요. 프로세스가 실패하는 즉시 표시 바의 진행이 전체 너비로 확장되고 빨간색으로 변하며 계속 보입니다. 실패 아이콘도 표시됩니다.

Play

예시는 이미지 타일 안에서 오류가 있는 프로그레스 바가 확인으로 지속되는 것을 보여줘요.

Play

예시는 프로그레스 바가 업로드가 완료되면 자동으로 닫히는 것을 보여줘요.

인터랙션 (Interactions)

페이지의 일부 (Part of a page)

프로그레스 바가 페이지의 일부에서 정보를 처리하는 동안, 페이지의 다른 요소와는 여전히 상호작용할 수 있어요. 프로그레스 바가 처리를 마치면 사용 사례에 따라 페이지에 지속적으로 남아 확인을 제공하거나 자동으로 닫힐 수 있습니다.

예시는 프로그레스 바가 활성 상태이고 다른 인터랙티브 요소와 분리된 것을 보여줘요.

컨테이너 안 (Inside a container)

프로그레스 바가 카드 같은 컨테이너 안의 여러 콘텐츠 조각에 영향을 줄 수 있는 정보를 처리하는 동안, 사용 사례에 따라 처리 완료될 때까지 전체 컨테이너가 비활성화되거나, 컨테이너 안에서 처리되는 특정 섹션이 처리 완료될 때까지 비활성화되어야 해요. 사용자는 프로그레스 바의 영향을 받지 않는 컨테이너나 페이지의 나머지 부분과는 상호작용할 수 있어야 합니다.

예시는 'Tasks' 컨테이너 안의 'View task' 액션 버튼이 프로그레스 바가 활성 상태인 동안 비활성화되는 것을 보여줘요.

수정자 (Modifiers)

전환 (Transitions)

로드 애니메이션을 끝낼 만큼 충분한 정보가 수집될 때 비결정적 바는 결정적 표시로(왼쪽에서 오른쪽으로 끝내며) 바뀔 수 있습니다.

Play

접근성 (Accessibility)

• 로딩 컴포넌트는 ARIA 1.1 progressbar 패턴을 사용해 구현됩니다. 결정적 프로그레스 바의 경우 ARIA role="progressbar"를 출력하고 aria-valuemin, aria-valuemax, aria-valuenow를 사용해 화면 판독기 사용자에게 로드된 백분율을 전달합니다.
• 프로그레스 바가 애플리케이션의 특정 부분이나 영역의 로딩을 보여준다면, 관련 요소에 aria-busy="true"와 aria-describedby="[progressbar-id]"를 설정해 보조 기술이 이 관계를 사용자에게 올바르게 전달할 수 있게 하세요.
• 라벨은 프로그레스 바가 나타내는 프로세스가 사용자에게 완전히 명확할 때만 숨기세요. 화면 판독기가 읽을 적절한 라벨을 여전히 전달해야 한다는 점을 유의하세요.

관련 컴포넌트 (Related)

컴포넌트 (Components)

• Loading
• Inline loading
• Progress indicator

패턴 (Pattern)

• Loading: skeleton states

참고 자료 (References)

• Accessible Rich Internet Applications Working Group, "progressbar" role (W3C, 2017)
• Katie Sherwin, Progress Indicators Make a Slow System Less Insufferable (Nielsen Norman Group, 2001)
• Jakob Nielsen, Response Times: The 3 Important Limits (Nielsen Norman Group, 1993)

더 알아보기 (Learn more)

프로그레스 바는 다운로드·업로드·데이터 처리 같은 프로세스의 진행 정도를 보여주는 컴포넌트예요. 진행을 정량적으로 계산할 수 있으면 Determinate, 계산할 수 없으면 Indeterminate를 사용하세요. 라벨은 항상 바 위에 두고, 6컬럼 이내의 너비를 유지하며, 실패 시에는 오류 상태로 사용자에게 명확히 알려줘야 합니다.