Progress indicator
Progress indicator (프로그레스 인디케이터)
프로그레스 인디케이터는 사용자의 완료된 단계, 현재 단계, 예정 단계를 보여줌으로써 선형의 다단계 작업을 안내하는 컴포넌트예요. 다단계 프로세스를 완료할 때 사용자의 기대를 관리하는 데 도움을 줍니다.
본문
개요 (Overview)
프로그레스 인디케이터는 다단계 프로세스를 완료할 때 사용자의 기대를 관리하도록 도와줘요. 사용자가 현재 어느 단계에 있는지, 총 단계 수, 작업 완료의 전체 진행 상황을 보여줍니다.
결제 UI에서 사용된 프로그레스 인디케이터 예시.
언제 사용할까요 (When to use)
- 사용자가 세 개 이상의 단계로 구성할 수 있는 선형 프로세스를 진행하고 있을 때.
- eCommerce 체크아웃, 온보딩, 비자 신청 같은 긴 폼에서 사용자가 자신의 진행 상황을 이해하는 것이 도움이 될 때.
- 다음 단계로 진행하기 전에 사용자 입력을 검증해야 할 때.
- 선형 시퀀스에서 표준 이전/다음 내비게이션을 보완할 때.
언제 사용하지 말아야 할까요 (When not to use)
- 프로세스나 폼의 단계가 세 개 미만일 때.
- 프로세스를 어떤 순서로든 완료할 수 있을 때.
- 조건부 로직에 따라 단계 수가 바뀔 수 있을 때.
포맷 (Formatting)
구조 (Anatomy)
- 상태 표시(Status indicator): 단계가 완료됨, 현재, 시작 안 됨, 비활성, 오류 중 하나인지 전달해요. 지침은 상태 표시 패턴을 참고하세요.
- 활성 단계 선(Active step line): 완료된 단계와 사용자가 현재 있는 단계를 나타내요.
- 라벨(Label): 각 단계에서 사용자가 무엇을 달성할지 전달해요. 각 단계에 번호를 매기면 진행이 더 명확해지기도 합니다.
- 비활성 단계 선(Inactive step line): 시작되지 않은 단계와 오류, 비활성, 스켈레톤 상태의 단계를 나타내요.
- 헬퍼 텍스트(Helper text): 단계를 선택 사항 또는 오류 상태로 라벨링해요.
정렬 (Alignment)
프로그레스 인디케이터는 사용 사례와 UI 구조에 따라 세로 또는 가로 위치일 수 있어요. 가능하면 읽기 쉽도록 프로그레스 인디케이터를 세로로 배치하세요.
세로 정렬을 사용한 프로그레스 인디케이터 예시.
배치 (Placement)
프로그레스 인디케이터 컴포넌트는 전체 페이지, 모달, 사이드 패널에 배치할 수 있어요. 또한 Carbon for IBM Products가 제공하는 티어시트(tearsheet)에서 프로그레스 인디케이터를 사용하는 것도 흔합니다.
전체 페이지, 티어시트, 사이드 패널의 프로그레스 인디케이터 예시.
콘텐츠 (Content)
주요 요소 (Main elements)
라벨 (Label)
라벨은 각 단계에서 사용자가 무엇을 달성할지 한두 단어로 전달해야 해요. 단계의 액션을 명확히 나타내는 한 가지 방법은 {verb} + {noun} 콘텐츠 공식을 사용하는 것입니다. 예를 들어 "Configure IdP" 또는 "Define endpoints"입니다. "Cart", "Shipping", "Payment"처럼 보편적으로 이해되는 단어라면 한 단어 라벨을 사용할 수 있어요. "Processing" 같은 모호한 용어는 피하세요. 또한 각 단계에 번호를 매겨 진행을 더 명확하게 할 수 있습니다.
헬퍼 텍스트 (Helper text)
단계가 선택 사항이거나 오류 상태임을 나타내려면 헬퍼 텍스트를 사용하세요.
넘침 콘텐츠 (Overflow content)
라벨 (Label)
공간이 충분하지 않을 때는 라벨을 다시 표현하거나 생략 부호로 잘라내고 추가 정보를 전달할 툴팁을 제공하는 것을 고려하세요.
헬퍼 텍스트 (Helper text)
긴 헬퍼 텍스트는 두 번째 줄로 줄바꿈될 수 있으며, 이는 잘라내기보다 낫습니다. 라벨 아래에서 헬퍼 텍스트를 줄바꿈해 둘 다 왼쪽 정렬을 유지하세요.
라벨과 함께 왼쪽 정렬을 유지하며 두 번째 줄로 줄바꿈되는 헬퍼 텍스트 예시.
추가 가이드 (Further guidance)
더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.
동작 (Behaviors)
상태 (States)
프로그레스 인디케이터에는 completed, current, not started, error, disabled, hover, focus의 일곱 가지 상태가 있어요. 각 상태의 시각적 스펙은 스타일(Style) 탭을, 추가 지침은 상태 표시 패턴(status indicator pattern)을 참고하세요.
| 상태 (State) | 설명 (Description) |
|---|---|
| Completed | 사용자가 단계 안의 필수 정보를 채우고 다음 단계로 진행했을 때 완료됨. 가능하면 사용자가 계속하기 전에 검증으로 단계 완료를 확인하세요. 완료된 모든 단계는 체크마크가 있는 외곽선 원과 파란 활성 선으로 표시됨. |
| Current | 사용자가 그 단계 안의 정보와 상호작용하고 있을 때 현재 단계임. 사용자가 있는 현재 단계는 반쯤 채워진 원과 파란 활성 선으로 표시됨. |
| Not started | 사용자가 아직 그 단계와 상호작용하지 않았을 때 시작 안 됨. 사용자가 아직 만나지 못한 단계, 또는 예정 단계는 외곽선 원과 회색 활성 선으로 표시됨. |
| Error | 사용자가 유효하지 않거나 불완전한 정보를 입력했을 때 단계가 오류일 수 있음. 서버 측 오류일 수도 있음. 오류에 대한 명확한 정보와 문제 해결 방법 안내를 제공하세요. |
| Disabled | 모든 인터랙티브 기능이 제거되었을 때 단계가 비활성화됨. 읽기 전용 상태와 달리 비활성 상태는 포커스할 수 없고, 화면 판독기로 읽히지 않으며, 시각 대비를 통과할 필요가 없어 해석이 필요하면 접근성이 떨어짐. |
| Hover | 사용자의 마우스 커서가 프로그레스 인디케이터의 단계 위에 있을 때 호버 상태를 사용. |
| Focus | 사용자가 프로그레스 인디케이터의 단계에 탭하거나 클릭하면 단계가 포커스되어, 사용자가 컴포넌트로 성공적으로 이동했음을 나타냄. |
인터랙션 (Interactions)
기본적으로 프로그레스 인디케이터는 인터랙티브하지 않으며 사용자 진행의 시각적 업데이트만 제공해요. 사용자가 각 단계로 이동할 수 있게 하는 인터랙티브 프로그레스 인디케이터 옵션도 있습니다.
마우스 (Mouse)
프로그레스 인디케이터가 인터랙티브하다면 사용자는 단계 라벨 컨테이너 안 아무 곳이나 클릭해 단계로 이동할 수 있어요.
키보드 (Keyboard)
첫 번째 단계가 기본으로 선택되어야 해요. 사용자는 Right 또는 Left 화살표 키를 눌러 단계 사이를 이동할 수 있습니다. 추가 키보드 인터랙션은 접근성(Accessibility) 탭을 참고하세요.
검증 (Validation)
가능하면 사용자가 계속하기 전에 검증으로 단계가 완료되었는지 확인하세요. 입력이 유효하지 않으면 프로그레스 인디케이터가 오류 상태를 표시해야 합니다. 또한 유효하지 않은 입력은 오류 상태로 표시되고, 사용자가 문제를 이해하고 고치는 데 도움이 되는 인라인 오류 메시지를 포함해야 해요. 이런 종류의 인라인 검증(또는 클라이언트 측 검증)은 필드가 포커스를 잃는 즉시 일어나야 합니다.
서버 측 문제로 사용자가 진행할 수 없다면 인라인 알림(inline notification)이 나타나야 해요.
검증을 사용한 프로그레스 인디케이터 예시.
관련 컴포넌트 (Related)
- 프로그레스 인디케이터 컴포넌트는 다이얼로그(dialog)나 폼에서 흔히 사용됩니다.
- 또한 Carbon for IBM Products가 제공하는 티어시트(tearsheet)에서 프로그레스 인디케이터를 사용하는 것도 흔합니다.
더 알아보기 (Learn more)
프로그레스 인디케이터는 선형의 다단계 작업을 안내하는 컴포넌트예요. 완료·현재·예정 단계를 상태 표시와 활성/비활성 선으로 보여주고, 단계 라벨은 간결하게 유지하세요. 단계가 별도로 상호작용 가능해야 할 때만 인터랙티브하게 만들고, 다음 단계 진행 전에는 검증으로 완료를 확인하는 것이 좋습니다.