coastdigitalgroup/coastai-skills

단계 및 진행 시스템

목적

단계 및 진행 시스템(Step & Progress System) 스킬은 사용자가 다단계 프로세스를 이동하거나 백그라운드 작업을 기다릴 때 진행 상황을 설계하고 문서화하는 방법론을 제공합니다. 체크아웃이나 온보딩과 같은 복잡한 워크플로우를 관리 가능한 덩어리로 분해하여 사용자의 현재 위치, 완료된 작업, 남은 작업을 명확히 전달함으로써 인지 부하를 줄입니다.

사용 사례

• 전자상거래 체크아웃: 배송, 결제, 검토 단계를 통해 사용자를 안내합니다.
• 다단계 양식: 긴 데이터 입력 작업을 논리적인 섹션으로 나눕니다.
• 사용자 온보딩: 새 계정 설정 과정을 시각화합니다.
• 로딩/업로드 상태: 장기 실행 작업의 상태를 전달합니다.
• 학습 경로: 강좌나 커리큘럼의 진행 상황을 보여줍니다.

사용하지 말아야 할 경우

• 단일 뷰 작업: 작업이 컨텍스트 전환 없이 하나의 뷰에서 완료될 수 있는 경우, 진행 시스템은 불필요한 잡음만 추가합니다.
• 무한 피드: 정의된 '끝'이 없는 콘텐츠를 스크롤하는 경우.
• 중요한 고속 상호작용: 진행 표시기를 표시하는 지연이 시간에 민감한 작업(예: 실시간 게임 UI)을 방해하는 경우.

입력

1. 단계 목록: 작업을 완료하는 데 필요한 개별 단계 목록.
2. 작업 유형: 사용자 주도 시퀀스(스테퍼)인지 시스템 주도 프로세스(진행 막대)인지.
3. 선형성: 단계를 순서대로 완료해야 하는지, 아니면 사용자가 단계 사이를 자유롭게 이동할 수 있는지.
4. 콘텐츠 제약 조건: 각 단계의 레이블, 설명, 아이콘.

출력

1. 진행 프레임워크: 구성 요소 유형(가로, 세로, 원형) 정의.
2. 상태 매트릭스: 대기 중, 활성, 완료, 오류 상태에 대한 시각적 사양.
3. 반응형 전략: 표시기가 모바일 뷰포트에 적응하는 방식(예: 레이블 숨기기, 숫자로 전환).
4. 접근성 사양: ARIA 역할, 라이브 리전, 키보드 상호작용 규칙.

워크플로우

1. 진행 유형 분류

가장 적절한 시각적 패턴 결정:

• 가로 스테퍼: 데스크톱에서 3~5단계의 선형 프로세스에 가장 적합.
• 세로 스테퍼: 비선형 프로세스, 다양한 콘텐츠 길이의 단계, 또는 모바일 우선 흐름에 가장 적합.
• 연속 진행 막대: 시스템 주도 작업(업로드, 로딩) 또는 많은 마이크로 단계가 있는 프로세스에 가장 적합.
• 원형 진행률: 대시보드 위젯 또는 공간이 매우 제한된 경우에 가장 적합.

2. 단계 계층 및 레이블 정의

• 기본 레이블: 단계의 간결한 이름(예: "배송").
• 보조 레이블(선택 사항): 짧은 설명 또는 상태(예: "진행 중").
• 시각적 표시기: 숫자(순서), 아이콘(컨텍스트), 점(미니멀리스트 디자인).

3. 상태 시각화 설정

각 상태에 대한 명확한 시각적 구분 정의:

• 대기 중: 낮은 대비, 일반적으로 회색 처리.
• 활성: 높은 대비, 주로 기본 브랜드 색상 또는 '글로우' 효과 사용.
• 완료: '체크' 아이콘과 별개의 색상(종종 녹색 또는 활성 색상의 음소거 버전) 사용.
• 오류: '경고' 아이콘과 의미론적 오류 색상(빨간색) 사용.

4. 이동 및 피드백을 위한 디자인

• 전환: 단계 간 이동 시 미묘한 애니메이션을 사용하여 진행 강화.
• 클릭 가능성: 사용자가 이전 단계를 클릭하여 돌아갈 수 있는지 결정.
• 유효성 검사: 진행 전에 단계가 유효/완료되었음을 시각화.

5. 반응형 적응 계획

다단계 표시기는 모바일에서 깨지기로 유명합니다:

• 레이블 축소: 모바일에서는 텍스트 레이블을 숨기고 숫자나 아이콘만 표시.
• 'X/ Y 단계'로 전환: 전체 시각적 막대를 간단한 텍스트 또는 숫자 요약으로 대체.
• 세로 전환: 작은 화면에서 가로 막대를 세로 목록으로 변환.

의사 결정 규칙

• 5단계 규칙: 가로 스테퍼에 5단계 이상이 있는 경우, 복잡성을 피하기 위해 세로 스테퍼나 간단한 'X / Y 단계' 텍스트 표시기로 전환.
• 아이콘 vs 숫자: 시퀀스 순서가 중요한 경우 숫자를 사용하고, 즉각적인 의미적 가치를 제공하는 경우에만 아이콘을 사용(예: 결제를 위한 '신용 카드' 아이콘).
• 선형성: 사용자가 단계를 순서대로 완료해야 하는 경우 '미래' 단계에 대한 클릭을 비활성화. 유연한 설정인 경우 이동을 허용.
• 컨텍스트 보존: 항상 현재, 이전, 다음 단계의 레이블을 표시. 다른 단계는 필요한 경우 잘라낼 수 있음.

제약 조건

• 접근성:
  • 연속 막대의 경우 aria-valuenow, aria-valuemin, aria-valuemax 및 사람이 읽을 수 있는 aria-valuetext(예: "2/4 단계: 결제")와 함께 role="progressbar"를 사용.
  • 시퀀스에서 활성 단계를 식별하려면 aria-current="step"을 사용.
  • 활성 단계와 비활성 단계의 대비 비율이 WCAG AA(4.5:1)를 충족하는지 확인.
  • 단계를 클릭할 수 있는 경우, 해당 대상은 WCAG 2.2 SC 2.5.8(최소 24x24px, 44px 권장)을 충족하고 가시적인 :focus-visible 상태를 노출해야 함.
• 계층: 진행 표시기는 안내 역할이지 주요 초점이 되어서는 안 됩니다. 일반적으로 콘텐츠의 상단(가로) 또는 왼쪽(세로)에 위치.
• 반응성: 가로 오버플로를 발생시키지 않아야 함.

일반적인 실패 패턴

• '미스터리 진행': 레이블이나 백분율 없이 막대를 표시하여 사용자가 "얼마나 더 걸리지?"라고 궁금해하게 만듦.
• 접근 불가능한 상태: 아이콘이나 텍스트 없이 색상(예: 녹색 vs 회색)만 사용하여 완료를 나타냄.
• 혼잡한 가로 레이아웃: 가로 레이아웃에 너무 많은 단계를 강제하여 모바일에서 텍스트가 겹치거나 터치 대상이 작아짐.
• 지속성 부족: 다단계 흐름의 일부 페이지에서 진행 표시기를 숨겨 사용자가 현재 위치를 잃게 만듦.

검증 기준

• 현재 단계가 완료된 단계 및 이후 단계와 명확히 구분됨.
• 완료된 단계는 체크 표시와 같은 비색상 표시기를 사용함.
• 모바일 뷰가 작동하고 오버플로나 혼잡이 발생하지 않음.
• ARIA 역할과 aria-current가 올바르게 적용됨.
• 시스템이 개별 단계의 '오류' 상태를 처리함.
• 표시기가 흐름의 모든 단계에서 일관되게 배치됨.