DLWorker UI/UXPattern 03
2026.10.12.3 · proposed
03

PATTERN · PROGRESS & REFRESH

기다림을 설명하는 진행 상태

조회·업데이트·재시작처럼 시간이 필요한 작업은 대상 범위를 잠그고 현재 단계와 완료 후 갱신을 설명합니다.

proposedContract v12026.10.12.3

01 · PURPOSE

무엇을 해결하는가

조회·업데이트·재시작처럼 시간이 필요한 작업은 대상 범위를 잠그고 현재 단계와 완료 후 갱신을 설명합니다.

02 · USE WHEN

사용 조건

응답까지 400ms 이상 걸리거나 서버 재시작처럼 연결이 일시적으로 끊기는 작업에 사용합니다.

  • 같은 작업은 single-flight로 실행
  • 단계를 모르면 indeterminate로 표시
  • 완료 후 canonical readback으로 자동 갱신

03 · STATUS

표준 상태와 버전

표준
proposed
도입 버전
2026.10.12.3
배포
source-only

04 · LIVE EXAMPLE

실행 예제

Health 확인 중

새 버전 적용 후 canonical 상태를 다시 읽고 있습니다.

Illustrative — 실제 Worker runtime 데이터가 아닙니다.

05 · RESPONSIVE

Desktop · Tablet · Mobile

Desktop

정보 밀도와 보조 설명을 유지합니다.

Tablet

열을 축소하고 조작 순서를 보존합니다.

Mobile

320px에서 page overflow 없이 단일 열로 전환합니다.

06 · STATES

상태 변형

idlepreparingrunningreconnectingsuccessuncertainfailed

07 · STRESS

콘텐츠 스트레스

  • 30초 이상 업데이트
  • 재연결 중 네트워크 단절
  • 백그라운드 조회와 사용자 취소

08 · ACCESSIBILITY

키보드와 보조기술

  • role=status와 단계 텍스트 제공
  • 진행률은 aria-valuenow 제공
  • reduced motion에서 회전 대신 정적 상태 사용

09 · DO / DON'T

선택 기준

Do
  • 무엇을 기다리는지 표시
  • 완료 후 자동 refresh와 시각을 기록
Don't
  • 화면 전체를 이유 없이 차단
  • 실제 근거 없는 퍼센트나 ETA 표시

10 · CODE

구현 예제

<div class="progress" role="progressbar" aria-valuenow="61"><span style="width:61%"></span></div><p role="status">Health 확인 중</p>

11 · VALIDATION

검증 체크리스트

  1. single-flight
  2. success refresh
  3. uncertain recovery
  4. reduced motion

12 · ADOPTION

Worker 채택 상태

채택
not-started
소유
Worker 개발세션
실행 증거
없음