진행 표시기는 사용자 여정의 진행 단계를 표시하는 구성요소입니다. 전체 여정에 걸쳐 현재 어느 단계를 진행하고 있는지를 시각적으로 제공할 때 사용합니다.
Usage
사용자의 과업 진행을 단계별로 나누어 진행 정도를 표시하여 제공합니다.
•
여러 단계에 걸쳐 순차적으로 진행하는 모든 작업에 진행 표시기를 사용합니다.
•
화면에 따라 진행 바(bar) 없이 사용할 수 있습니다.
Variants
전체 단계 표시형
전체 단계와 진행 완료 단계, 현재 진행 단계를 모두 표시하는 형태입니다.
회원가입, 기술협업 요청, 주문 요청 등 한 페이지 내에서 작업의 모든 단계를 진행하는 경우에 사용합니다.
1.
진행 바 컨테이너
2.
단계 마크업, 단계 레이블
3.
이미 진행했거나 현재 진행 중인 단계의 마크업과 레이블은 활성화 스타일로 표시합니다.
4.
이미 진행한 단계의 구간은 활성화 스타일의 라인을 진행 바 위에 표시합니다.
5.
현재 진행 단계에서 입력이 이루어진 경우, 다음 단계까지의 구간 절반을 활성화 라인으로 표시합니다.
현재 상태 표시형
전체 과업의 진행 정도에 따라 부여하는 상태(status)값 중에 현재 상태만 표시하는 형태입니다.
주문, 배송, 기술협업, C&C 등 사용자의 요청에 따라 시작하여 피드백을 주고 받으며 진행하는 주요 서비스에 대한 상태를 표시할 때 사용합니다.
1.
전체 상태의 숫자만큼 바를 분할하여 상태 순서에 해당하는 위치에 표시기를 표시합니다.
(예: 5개의 상태값 중 3번째 상태를 표시하는 경우, 바의 50% 지점에 표시기 위치)
2.
상태 레이블을 표시합니다. 레이블이 길 경우에는 줄임 표시를 하지 않고 표시기 너비를 늘려 표시합니다.
예외 형태
툴팁 안에 텍스트와 단계 현황을 함께 표시하는 경우로, 일부 목록 화면에서 예외적으로 사용합니다.
1.
마우스 오버 트리거로 현재 단계 또는 상태에 대한 설명을 툴팁을 표시합니다.
2.
툴팁 내부에 진행 정도를 도트(dot)로 표시합니다.
Guidelines
•
각 단계나 상태는 의미를 명확히 알 수 있는 명사형으로 최대 7자를 넘지 않게 작성합니다.
•
각 단계나 상태에 대해 추가적인 설명을 하기 위해 각 단계별로 툴팁 사용을 하게 될 경우, 한 화면에 너무 많은 툴팁이 존재하여 사용성에 문제를 초래할 수 있습니다. 연관된 도움말을 모아 팝오버 형태로 제공하는 것을 권장합니다.
•
진행 표시기에는 링크 적용을 하지 않는 것을 원칙으로 합니다.
