PatternsP4 본문

Background Task Monitor

업로드·내보내기·AI 생성·동기화처럼 오래 걸리는 작업을 큐, 진행률, 재시도, 알림 복귀로 관리하는 패턴입니다.

마지막 업데이트 2026-06-28

쓰는 곳#

파일 업로드, 보고서 생성, 데이터 동기화, 대량 내보내기, AI 에이전트 실행, 배포 작업처럼 사용자가 화면을 떠나도 작업이 계속될 수 있는 흐름에 씁니다.

Task queue

백그라운드 작업

여러 작업을 상태별로 묶고, 실패 작업은 큐 안에 남겨 재시도할 수 있게 합니다.

진행 중1대기1완료1실패1
Current task

월간 리포트 내보내기

CSV와 PDF를 동시에 생성하고 링크를 보존합니다.

진행 중
64%

64% 진행 중이며 완료 후 결과 링크가 작업 안에 남습니다.

화면 이탈 가능

이 작업은 다른 화면으로 이동해도 큐와 알림 진입점에서 계속 확인할 수 있습니다.
단계
PDF 렌더링
예상
약 2분 남음
소유
데이터팀
Background Task Monitor — 큐·현재 작업·복구 기록

적용 현황#

기준서
완료
포털 적용
이 문서의 작업 큐 조합 데모에 1차 적용
재사용 구현
포털 전용 조합 데모 있음 — 패키지 API는 아직 없음
배포 패키지
미포함
다음 조치
FileUpload·ChartExport·AI 작업 흐름에 반복 적용 가능성 검토

구조#

작업 큐
진행 중·대기·완료·실패 작업 목록
현재 작업
단계, 진행률, 예상 시간, 중단 가능 여부
결과
완료된 파일, 링크, 로그, 다음 행동
복구
재시도, 이어서 실행, 실패 원인
알림
화면 이탈 후 복귀 지점

웹 규칙#

위치
전역 Shell의 task tray 또는 화면 우측 보조 pane
배치
작업 큐와 현재 작업은 같은 row 높이를 맞추고, 기록·복구 영역은 전체 폭으로 분리
진행률
단계형이면 Stepper, 수치형이면 Progress, 불확실하면 상태 메시지
여러 작업을 접힌 목록으로 관리하고 실패 작업을 상단에 올림
로그
개발자/운영자 표면에서는 로그 Drawer, 일반 사용자 표면에서는 요약 오류
완료
결과 링크와 후속 행동을 작업 항목 안에 보존

모바일 규칙#

위치
하단 compact status bar 또는 알림 진입점
표면
좁은 화면에서는 데스크탑 pane 테두리를 없애고 큐·현재 작업·기록을 순차 흐름으로 쌓음
상세
탭하면 BottomSheet로 큐와 상세를 표시
이탈
사용자가 다른 화면으로 이동해도 작업 상태 접근점을 유지
실패
실패 토스트만 띄우지 않고 큐 안에 재시도 항목 유지
배터리/네트워크
백그라운드 제한 가능성을 문구로 알리고 재개 동작을 제공

상태#

대기
큐 순서와 시작 조건
진행 중
단계명, 진행률, 중단 가능 여부
일시중지
네트워크·권한·사용자 중단 원인
완료
결과 링크, 다운로드, 열기
실패
원인, 재시도, 로그 또는 지원 링크

접근성#

  • 진행률은 aria-valuenow가 있는 Progress 또는 aria-live="polite" 상태 텍스트로 전달합니다.
  • 완료·실패는 Toast만으로 끝내지 않고 큐 항목에도 남깁니다.
  • 자동 업데이트는 너무 자주 낭독하지 않도록 단계 전환 중심으로 알립니다.
  • 중단 버튼은 destructive 여부를 명확히 하고, 되돌릴 수 없는 중단은 확인을 둡니다.
  • 모바일 compact bar는 44px 이상 터치 타깃과 명확한 상태 라벨을 갖습니다.

사용 컴포넌트#

Progress · Badge · Tag · Alert · Button · Toast · Drawer · BottomSheet · FormMessage

검수 기준#

이탈
다른 화면으로 이동해도 작업 상태를 다시 찾을 수 있음
실패
실패 원인과 재시도가 큐에 남음
진행
수치가 없으면 가짜 퍼센트를 만들지 않음
모바일
compact 상태가 콘텐츠를 가리지 않음
완료
결과 링크가 토스트 소멸 뒤에도 남음

참고 기준#