본문으로 건너뛰기
Dot Design System
v0.3.1

다단계 작업

현재 단계, 완료 조건과 다음 행동을 순서대로 연결합니다.

목표

복잡한 작업을 사용자가 지금 답할 수 있는 단계로 나누고, 현재 위치, 완료된 내용, 남은 조건과 다음 행동을 항상 알게 한다. 한 단계를 마치면 그 결과가 다음 단계와 연결되어 작업의 고리가 끊기지 않아야 한다.

선택 기준

  • 순서 의존성이 있고 한 화면에 모두 보여주면 판단 부담이 커질 때 사용한다.
  • 단계가 서로 독립적이면 tabs나 여러 Section이 더 적절할 수 있다.
  • 단순한 두세 field를 불필요하게 여러 페이지로 나누지 않는다.
  • backend 처리 단계와 사용자가 결정할 단계를 혼동하지 않는다.

단계 설계

각 단계는 다음 질문에 답해야 한다.

  1. 지금 무엇을 끝내는가?
  2. 사용자가 이미 가진 정보로 답할 수 있는가?
  3. 이 단계에서 꼭 필요한 입력은 무엇인가?
  4. 완료되면 무엇이 저장되는가?
  5. 다음 단계로 가면 무엇이 바뀌는가?
  6. 이전 단계로 돌아가도 안전한가?
  • 단계 이름은 내부 처리명이 아니라 사용자 결과를 말한다.
  • 한 단계에는 하나의 주 행동만 둔다.
  • 조건 분기는 구현 경로를 고르게 하기보다 사용자의 현재 상태를 묻는다.
  • 가능한 경우 시스템이 상태를 추론하고 사용자는 확인·수정한다.

진행 정보

  • 현재 단계와 전체 흐름의 관계를 표시한다.
  • 단계 수가 동적으로 바뀌면 부정확한 2/4를 고정 표시하지 않는다. 완료한 것과 다음 행동 중심으로 설명한다.
  • 완료 단계는 다시 확인·편집할 수 있는지 명시한다.
  • 긴 workflow는 나중에 이어 할 수 있는 저장 지점과 마지막 저장 시각을 제공한다.
  • 진행률을 완료 시간처럼 오해하게 만들지 않는다.

다음 행동

  • 다음만 쓰지 말고 가능하면 질문 검토로 이동, 검증 실행처럼 결과를 말한다.
  • 마지막 단계는 완료보다 실제 결과인 운영 기준본 발행을 사용한다.
  • 조건이 충족되지 않아 disabled라면 가장 가까운 blocker와 해결 위치를 설명한다.
  • 보조 행동은 이전 단계, 임시 저장, 미리보기처럼 현재 진행을 방해하지 않는 범위로 제한한다.

상태와 복구

  • current: 현재 입력 가능 단계
  • completed: 저장된 완료 단계
  • optional: 건너뛸 수 있으며 결과를 설명한 단계
  • blocked: 선행 조건과 해결 행동 제공
  • saving: 입력 유지, 중복 실행 방지
  • validation error: 현재 단계 안에서 해결
  • cross-step error: 관련 단계로 이동할 수 있는 오류 summary
  • interrupted: 저장 지점과 재개 위치 제공
  • stale/conflict: 다른 변경과 충돌, 최신 상태 비교
  • final processing: 완료 요청 접수와 background 진행을 구분
  • final success: 결과 위치와 다음 관리 행동 제공

WorkflowBar 사용

  • 페이지에 분산된 행동 대신 WorkflowBar에서 상태와 다음 행동 하나를 제안할 수 있다.
  • 상태 label, description, primaryAction이 같은 전이를 설명해야 한다.
  • 같은 primary action을 PageHeader와 WorkflowBar에 중복하지 않는다.
  • 실패 시 description과 primaryAction을 원인 확인·재시도 흐름에 맞게 갱신한다.

좁은 화면

  • 단계 navigation과 편집 영역을 동시에 좁게 압축하지 않는다.
  • 현재 단계 콘텐츠를 먼저 보여주고 전체 단계는 요약 또는 별도 sheet로 제공한다.
  • 하단 고정 행동이 field, error, 브라우저 safe area를 가리지 않게 한다.
  • 이전·다음 행동의 시각 순서와 DOM 순서를 일치시킨다.

접근성

  • 단계 목록은 순서 있는 list와 현재 단계의 aria-current="step" semantics를 사용한다.
  • 완료 여부를 아이콘과 색만으로 표현하지 않는다.
  • 단계 변경 후 새 단계 heading으로 focus를 이동한다.
  • validation 실패 시 단계가 바뀌지 않았음을 알리고 첫 오류로 이동한다.
  • 진행 상태 변경은 polite live region으로 전달한다.
  • browser back과 제품의 이전 단계가 충돌하지 않도록 route 전략을 정의한다.

예제 상태 모델

사용 코드 · TypeScript
type WorkflowState =
  | { step: 'outline'; status: 'editing' | 'saving' | 'error' }
  | { step: 'questions'; status: 'editing' | 'saving' | 'error' }
  | { step: 'validation'; status: 'ready' | 'running' | 'failed' | 'passed' }
  | { step: 'publish'; status: 'ready' | 'publishing' | 'failed' | 'published' };
사용 코드 · TSX
<WorkflowBar
  ariaLabel="커리큘럼 작업 상태"
  title="질문 검토 완료"
  status="검증 준비"
  statusTone="primary"
  description="7개의 질문이 저장됐어요. 순서와 기준 답안을 검증할 수 있어요."
  primaryAction={{ label: '검증 실행', onClick: validate }}
/>

피해야 할 사용

  • 간단한 form을 인위적으로 여러 단계로 분리
  • 사용자가 결과를 모르는 처리 방식을 첫 질문으로 제시
  • 모든 단계의 입력을 마지막에만 저장
  • 오류가 난 단계를 알려주지 않고 마지막 화면에 메시지만 표시
  • 실제 단계 수가 변하는데 고정 progress 사용
  • browser back으로 전체 workflow가 갑자기 사라짐
  • 마지막 행동을 완료처럼 모호하게 표시

검토 체크

  • 각 단계가 하나의 명확한 결과를 가진다.
  • 사용자가 지금 아는 정보로 질문에 답할 수 있다.
  • 시스템이 추론·기본값으로 대신할 입력을 제거했다.
  • 현재 위치, 완료, blocker, 다음 행동이 보인다.
  • 단계별 저장과 전체 재개 전략이 있다.
  • cross-step validation이 해결 위치로 연결된다.
  • 마지막 요청과 background 완료를 구분한다.
  • 단계 변경 focus와 back navigation이 정의돼 있다.
  • 좁은 화면에서 현재 단계가 가장 높은 우선순위를 가진다.

관련 항목