본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

단계 표시기

단계 표시기는 서비스 이용을 위해 사용자가 거쳐야 하는 일련의 단계를 시각화하여 표현한 것으로 진행 상태에 대한 피드백을 사용자에게 전달한다.

컴포넌트명

단계 표시기 (Step indicator)

단계 표시기 (Step indicator) 스타일 예시

  1. 1.단계 숫자

    단계 제목 옆에 표시되는 작은 텍스트로 각 단계의 번호를 나타냄. 작은 디스플레이에서는 현재 단계, 전체 단계 수를 제외한 정보는 생략할 수 있음(예 - 4단계 중 1단계)

  2. 2.단계 제목

    레이블각 단계에서 사용자가 수행해야 할 작업을 요약한 텍스트

  3. 3.연결선

    단계와 단계 사이를 연결하는 선으로 프로세스의 선형성을 보여줌

  4. 4.완료된 단계 식별자

    완료된 단계를 다른 단계와 구분하는 식별자

  5. 5.현재 단계 식별자

    진행 중인 단계를 다른 단계와 구분하는 식별자

  6. 6.이전 단계 식별자

    진행 전인 단계를 다른 단계와 구분하는 식별자

유형

Step_indicator1

Type전체 너비를 사용할지, 타이틀과 함께 고정된 너비를 사용할지 분류하여 사용한다.

Full

  1. 1단계 단계 제목
  2. 2단계 단계 제목
  3. 현재단계 3단계 단계 제목
  4. 4단계 단계 제목

Fixed

  1. 1단계 단계 제목
  2. 2단계 단계 제목
  3. 현재단계 3단계 단계 제목
  4. 4단계 단계 제목

Mobile

  1. 1단계 단계 제목
  2. 2단계 단계 제목
  3. 현재단계 3단계 단계 제목
  4. 4단계 단계 제목
코드 보기

유형

Step_indicator2

Type단계별로 진행되는 콘텐츠를 나열하여 사용한다.

  1. 01

    단계 제목

    내용

  2. 02

    단계 제목

    내용

  3. 03

    단계 제목

    내용

  4. 04

    단계 제목

    내용

코드 보기

가이드

  • 단계 제목은 해당 프로세스에 대한 간결하고 명확한 내용으로 제공한다. 레이블은 해당 단계/프로세스에서 사용자가 수행해야 하는 작업의 특성을 명확하게 보여줄 수 있는 내용으로 제공해야 한다. 레이블로만 설명을 제공하기 어려운 경우, 보조 텍스트를 인접 영역에 제공할 수 있으나, 레이블 자체는 텍스트가 잘리거나 줄 바꿈이 발생하지 않도록 짧은 단어, 문구로 구성해야 한다.
  • 현재 단계를 명확하게 인지할 수 있도록 표현한다. 사용자가 자신이 거쳐온 단계, 앞으로 거쳐야 할 단계를 확인하고 진행 중인 단계의 과업을 명확하게 인지할 수 있도록 현재 단계를 다른 단계와 구분하여 표현해야 한다.