Step
Step
Step은 프로세스의 진행 단계를 보여주는 요소예요. 배송·결제·확인 같은 다단계 흐름을 시각적으로 표현할 때 사용하며, 원형(circular), 수직, 정렬 등 다양한 형태를 제공해요.
출처: Step
본문
Types
Step
단일 단계예요
Shipping
Circular Step
단일 원형 단계예요
Shipping
Groups
Steps
일련의 단계들의 집합이에요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Circular Steps
원형 단계는 각 단계 사이에 연결선이 있는 일련의 단계를 보여줘요.
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Ordered
단계는 순서가 있는 단계들의 시퀀스를 보여줄 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Vertical
단계는 수직으로 쌓여 표시될 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
오른쪽 수직 단계는 활성 화살표를 왼쪽에 보여줄 거예요.
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Vertical Circular
수직 원형 단계는 각 단계의 제목과 설명 옆에 수직으로 연결선이 있는 일련의 단계를 보여줘요. Connected Feed와 비슷하죠.
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Content
Description
단계는 설명을 포함할 수 있어요
Shipping
Choose your shipping options
원형 단계는 항상 콘텐츠 래퍼가 필요해요
Shipping
Choose your shipping options
Center Aligned
가로 원형 단계는 연결선 옆에 제목을 중앙 정렬로 보여줄 수 있어요. 마지막 단계는 더 이상 연결선을 보여주지 않아요
Shipping
Billing
Bottom Aligned
가로 원형 단계는 제목 및/또는 설명을 연결선 아래에 보여줄 수도 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Icon
단계는 아이콘을 포함할 수 있어요
Shipping
Choose your shipping options
원형 단계의 아이콘은 제목 또는 설명 노드의 일부예요
Shipping
Choose your shipping options
Link
단계는 anchor 태그를 사용하거나 link 클래스를 추가해 링크를 달 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
States
Active
단계는 활성 상태로 강조될 수 있어요
Billing
Enter billing information
Billing
Enter billing information
Completed
단계는 사용자가 완료했음을 보여줄 수 있어요
Billing
Enter billing information
Billing
Enter billing information
Disabled
단계는 선택할 수 없음을 보여줄 수 있어요
Billing
Billing
Variations
Stackable
단계는 작은 화면에서만 수직으로 쌓일 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Fluid
유동(fluid) 단계는 컨테이너의 너비를 차지해요
Shipping
Choose your shipping options
Billing
Enter billing information
Unstackable
단계는 모바일에서 쌓이는 것을 방지할 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Attached
단계는 다른 요소에 붙일 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Evenly Divided
단계는 부모 안에서 균등하게 나뉠 수 있어요
Shipping
Billing
Confirm Order
Billing
Confirm Order
가로 원형 단계는 항상 균등하게 나뉘어요
Shipping
Billing
Confirm Order
Size
단계는 다양한 크기를 가질 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Inverted
단계의 색은 반전될 수 있어요
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Color
원형 단계는 전체 단계 그룹의 활성 및 완료 단계에 대해 다른 색으로 표시될 수 있어요
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
원형 단계 그룹의 개별 단계는 별도의 색을 가질 수 있어요.
더 알아보기
Step은 체크아웃이나 가입 절차 같은 다단계 프로세스를 시각화할 때 써요. 원형 단계, 수직 배치, 활성·완료·비활성 상태를 조합하면 진행 상황을 한눈에 보여주는 UI를 만들 수 있어요.