1. 스피너(Spinner)
특정 화면을 로딩 할 때에 현재 '로드 중' 임을 사용자에게 시각적으로 알려주는 Object이다.
보통 4초 이하일 때 사용하는 간단한 git이미지나 애니메이션으로 표현한다.
4초 이상이 걸릴 때에는 '로딩바' Progress Bar를 사용한다.
4초 이하의 상황에만 스피너를 사용하는 이유는, 4초 이상의 로드 시간에 스피너와 같은 무한 로딩형태를 표시할 경우, 유저의 불만 또는 불안이 생길 수 있다고 한다.
2. 피커(Picker)
Date 피커, Time 피커 등 날짜, 시간에 관련된 것을 주로 사용한다.
휠(Wheel) 또는 Select 또는 선택형 Type 이 있다.
3. 스테퍼(Stepper)
**Stepper (스테퍼)**는 사용자가 단계적으로 진행하는 작업을 쉽게 이해하고 수행할 수 있도록 돕는 UI 컴포넌트입니다.
회원가입, 결제 프로세스, 설정 마법사 등에서 순차적인 단계를 시각적으로 표현하는 데 사용됩니다.
[ A - 정의 ]
➲ 단계별 진행을 시각적으로 표시하는 UI 요소이다.
➲ 사용자가 한 단계씩 순서대로 이동하며 작업을 완료하도록 돕는 역할을 한다.
➲ 복잡한 프로세스를 쉽게 안내할 수 있도록 도와주는 UI/UX 디자인 패턴
[ B - 타입별 정리 ]
선형(Step-by-Step)과 비선형(None-Linear) 두가지 유형으로 구분된다.
1. Linear Stepper(선형 스테퍼)
➲ 각 단계가 순서대로 진행되어야 하는 경우
➲ 이전 단계를 완료해야 다음 단계로 이동이 가능
➲ 사용 예시 : 회원가입 단계, 온라인 결제 프로세스
☆ 예 : Step 1 ⇒ Step 2 ⇒ Step 3 ⇒ 완료
2. Non-Linear Stepper(비선형 스테퍼)
➲ 사용자가 자유롭게 원하는 단계로 이동이 가능
➲ 필수 단계를 완료하지 않아도 다른 단계로 이동이 가능
➲ 사용 예시 : 설정 마법사, 설문조사
☆ 예 : Step 1 ⇔ Step 2 ⇔ Step 3
[ C - 주요구성요소 ]
스테퍼의 주요 핵심 요소는 아래와 같다.
| Step Indicator (스텝 표시기) | 현재 사용자가 어느 단계에 있는지 시각적으로 표시 |
| Step Title (스텝 제목) | 각 단계에서 수행해야 할 작업을 설명 |
| Step Content (스텝 내용) | 해당 단계에서 사용자가 입력하거나 확인해야 할 UI |
| Navigation Controls (네비게이션 버튼) | 이전/다음 단계로 이동하는 버튼 (Next, Previous) |
[ D - UI 디자인 패턴 ]
스테퍼의 디자인형태는 가로형과 세로형이 있을 수 있다.
1. Horizontal Stepper(가로형 스테퍼)
➲ 가로 방향으로 단계가 진행됨
➲ 화면 너비가 충분한 경우에 적합
➲ 사용 예시 : 데스크톱 환경의 결제 프로세스
☆ 예 :
2. Vertical Stepper(세로형 스테퍼)
➲ 세로 방향으로 단계가 진행됨
➲ 모바일 환경에서 많이 사용됨
➲ 사용 예시 : 모바일 회원가입, 배송 정보 입력
☆ 예 :
[ E - 사용 사례 ]
스테퍼의 사용사례를 몇가지 살펴보자
| 회원가입 프로세스 | 이메일 입력 → 비밀번호 설정 → 계정 확인 |
| 결제 프로세스 | 배송 정보 → 결제 정보 → 주문 확인 |
| 설정 마법사 (Wizard UI) | 소프트웨어 초기 설정 과정 |
| 설문조사 / 신청 폼 | 다단계 설문조사, 신청서 작성 |
'Global UX_UI Design' 카테고리의 다른 글
| [UI Design] - 다크모드 디자인시 알아두어야 할 9가지 테크닉 (0) | 2023.02.16 |
|---|
