GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

다운로드 진행 상황 표시 9종 — 값이 퍼센트 단위로 갱신되는 아홉 가지 방식

· Godrich · 9종 · 17분 읽기

로딩SCSS바닐라 JS로딩대시보드알림

다운로드 진행 상황 표시는 지금 받아지는 파일이 어느 상태에 있는지를 값 하나로 계산해 화면에 드러내는 인터랙션을 말하는데, 아홉 개 중 하나는 여러 파일이 동시에 받아질 때 각 파일의 진행 값이 목록에서 나란히 오르고, 하나는 검증에 실패할 때마다 재시도 횟수 값이 늘며 진행 값이

아홉 항목 모두 자동 시연 루프가 도는 중에도 버튼(01·02·03·05·06·07·08·09) 또는 드래그(04, pointerdown·pointermove·pointerup) 같은 실사용자 입력에 반응해 값을 다시 계산하는 결정론적 계산입니다 — 01·02는 SIZES·SAMPLES 같은 고정 시드 배열을, 나머지는 결정적 상수만 쓸 뿐 Math.random 은 0이라 같은 순서로 누르면 항상 같은 값이 나옵니다. 화면 속 파일명·크기·전송 속도는 전부 가상 시뮬레이션이라 실제 fetch·File API·Blob 다운로드·navigator.onLine 호출은 하나도 없고, 특정 브랜드·소프트웨어·운영체제 탐색기 이름도 담지 않습니다.

다중 파일 진행 값 병렬 갱신 — 여러 파일이 동시에 받아질 때 각 파일의 진행 값이 목록 안에서 각각 갱신되는 방식01 download-manager-multi-file-list 전송 속도 값 그래프 갱신 — 초당 전송량 값이 그래프 형태로 계속 다시 그려지는 방식02 download-manager-speed-graph 정지·재개 상태 값 전환 — 상태 값이 정지와 진행 사이를 오갈 때마다 값의 변화가 멈췄다 다시 이어지는 방식03 download-manager-pause-resume 대기열 순서 값 재배치 — 아직 시작하지 않은 항목들의 순서 값이 사용자가 정한 차례로 바뀌는 방식04 download-manager-queue-reorder 압축 해제 진행 값과 형태 값 동시 변화 — 압축 해제 진행 값이 차오르는 동안 형태 값도 함께 바뀌는 방식05 download-manager-extract-morph 손상 재시도 횟수 값 — 검증에 실패하면 재시도 횟수 값이 하나씩 늘고 진행 값이 처음으로 되돌아가는 방식06 download-manager-corrupt-retry 완료 값 반짝 표시 — 다운로드가 끝나는 순간 완료 값이 1로 바뀌었다가 일정 시간 뒤 다시 0으로 사라지는 방식07 download-manager-complete-flash 완료 항목 위치 값 이동 — 다운로드가 끝난 항목의 위치 값이 목록의 정해진 영역으로 옮겨가는 방식08 download-manager-folder-reveal 모션 감소 정적 다운로드 표시 — 모션 감소 설정에서 애니메이션 대신 진행 값의 문구만 그대로 바뀌는 방식09 download-manager-reduced-motion

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개의 해부 — 어떤 값이 언제 바뀌는가

아홉 항목 모두 각 데모 화면의 버튼 클릭(04는 드래그) 이벤트로 값을 재설정·전환할 수 있고, 로드 즉시 도는 자동 시연 루프는 값을 미리 보여주는 보조 장치일 뿐 리스너 자체를 대신하지 않습니다.

번호 이름 리스너 누적면적% 강도 움직인 프레임/23
01 다중 파일 진행 값 병렬 갱신 click(일시정지 버튼) 3.93 133.8 16
02 전송 속도 값 그래프 갱신 click(일시정지 버튼) 8.11 108.0 16
03 정지·재개 상태 값 전환 click(일시정지 버튼) 1.80 151.8 18
04 대기열 순서 값 재배치 pointerdown·move·up(드래그) 20.91 144.1 14
05 압축 해제 진행 값과 형태 값 동시 변화 click(일시정지 버튼) 3.35 105.4 23
06 손상 재시도 횟수 값 click(지금 재시도 버튼) 2.19 158.7 16
07 완료 값 반짝 표시 click(다시 보기 버튼) 5.56 57.4 17
08 완료 항목 위치 값 이동 click(다시 보기 버튼) 12.30 137.8 10
09 모션 감소 정적 다운로드 표시 click(모션 감소 전환 버튼) 0.64 131.3 18

09는 왼쪽 패널만 값을 움직이고 오른쪽 패널은 문구만 바꾸는 컴포넌트 편이라 면적이 작은 게 정상입니다 — 09는 면적이 아니라 두 판을 나란히 대조하는 정교함으로 재는 항목입니다. 아홉 항목이 값을 계산하는 방식을 겹치는 것끼리 묶으면 아래 여섯 무리로 정리됩니다.

값의 총합을 나누어 계산하는 값 — 01·02

01은 overall() 함수가 세 파일의 받은 바이트 합을 SIZES 세 값의 합으로 나눈 용량 가중 평균이라 큰 파일일수록 전체 진행 값에 더 크게 반영되고, 02는 movingAvg() 함수가 SAMPLES 원시 표본 중 최근 N개(5개)만 골라 그 구간의 평균을 매 표본마다 다시 나눕니다. 둘 다 나눗셈으로 값 하나를 요약하지만, 01은 정해진 세 칸을 한 번에 나누고 02는 흘러가는 표본 창을 계속 옮겨가며 나눈다는 점이 다릅니다.

멈췄다 이어지는 누적 경과시간 값 — 03

03의 elapsed() 함수는 정지 전까지 쌓인 값(pausedElapsed)에 재개 이후 흐른 시간만 더하는 방식이라, 일시정지 버튼을 눌러도 진행 값이 0으로 끊기지 않고 멈춘 자리에서 정확히 이어집니다. 자동 시연 루프는 AUTO_PAUSE_AT([0.28, 0.62]) 값에 닿을 때마다 스스로 정지·재개를 한 번씩 보여줍니다.

매 프레임 목표로 다가가는 보간 값 — 04·05

04의 tickLerp() 함수는 requestAnimationFrame 마다 목표 위치까지 남은 거리의 LERP(0.18) 비율만큼만 다가가 항목이 ROW_H(40px) 칸 사이를 미끄러지듯 움직이고, 05의 lerpPoints() 함수는 진행 값 t 하나로 여덟 개 점 좌표를 매번 직접 선형보간해 다각형을 다시 그립니다. 04는 목표가 바뀔 때마다 남은 거리를 반복해서 줄여가는 재귀적 접근이고, 05는 시작·끝 좌표 사이를 t 값 하나로 즉시 계산한다는 점이 다릅니다.

지수 함수로 늘거나 줄어드는 값 — 06·07

06의 backoffMs() 함수는 BASE_BACKOFF_MS(260ms) × BACKOFF_MULT(2)의 재시도 횟수 제곱으로 대기 값을 매 실패마다 두 배씩 불리고, 07의 sweepOpacity() 함수는 DECAY(0.55)의 회차 제곱으로 광택 세기를 매 회차 절반 가까이 줄입니다. 하나는 값이 지수로 커지는 쪽이고 하나는 지수로 작아지는 쪽이라 방향이 반대입니다.

스프링 방정식으로 오버슈트하는 값 — 08

08의 spring() 함수는 ZETA(0.42)·W(7.5) 두 상수로 질량-스프링 방정식을 매 프레임 계산해, 항목의 위치 값이 보관함 자리를 살짝 지나쳤다가 되돌아와 멈추는 오버슈트를 만듭니다. transition 으로 흉내 낸 감쇠가 아니라 코사인·지수 항이 섞인 값을 직접 계산해 그리는 방식입니다.

같은 값을 두 표현으로 나란히 보여주는 값 — 09

09는 STEP(4)씩 오르는 같은 pct 값 하나를 두 패널이 다르게 그립니다 — 왼쪽은 매 틱 transform 을 갱신해 막대가 실제로 움직이고, 오른쪽은 애초에 transform 을 쓰지 않고 문구(pctB)만 교체하도록 짜여 있어 값은 같아도 눈에 보이는 변화가 다릅니다.

패턴별 코드

아래 아홉 조각은 각 항목의 index.html 안 계산부를 그대로 옮긴 것으로, 자리표시자 하나 없이 지금 데모에서 실제로 도는 코드입니다.

01다중 파일 진행 값 병렬 갱신 — 여러 파일이 동시에 받아질 때 각 파일의 진행 값이 목록 안에서 각각 갱신되는 방식

일시정지 버튼을 누르면 세 파일이 SPEEDS 배열의 틱별 속도로 동시에 진행 값을 올리다가 셋 다 SIZES 만큼 받아지면 HOLD_MS(700ms) 뒤 done 배열이 [0, 0, 0]으로 되돌아가 처음부터 다시 시작합니다. 여러 파일 다운로드를 한 목록에서 동시에 관리하는 화면일수록 전체 진행 값을 단순 평균이 아니라 overall() 이 구하는 용량 가중 평균으로 잡아야 큰 파일의 지연이 축소되지 않습니다.

  // 시드 고정: 파일별 크기(KB, 가상)와 틱마다 더할 속도 배열(KB/틱). 실 fetch·File API 0
  var SIZES = [420, 980, 640];
  var SPEEDS = [
    [32, 40, 48, 52, 46, 38, 30, 44, 56, 60, 50, 36],
    [58, 64, 60, 52, 44, 38, 46, 54, 62, 58, 48, 40],
    [20, 26, 32, 38, 44, 40, 34, 28, 24, 30, 36, 42]
  ];
  var TICK_MS = 140;
  var HOLD_MS = 700;

  var done = [0, 0, 0];
  var tick = 0;
  var paused = false;
  var timer = null;

  // 계산 겹: 전체 진행 값 = 파일별 다운로드 바이트 합 ÷ 전체 크기 합(용량 가중 평균, 단순 3칸 평균 아님)
  function overall() {
    var d = done[0] + done[1] + done[2];
    var s = SIZES[0] + SIZES[1] + SIZES[2];
    return d / s;
  }
다중 파일 진행 값 병렬 갱신 — 여러 파일이 동시에 받아질 때 각 파일의 진행 값이 목록 안에서 각각 갱신되는 방식
새 창에서 열기

01 · 다중 파일 진행 값 병렬 갱신 — 여러 파일이 동시에 받아질 때 각 파일의 진행 값이 목록 안에서 각각 갱신되는 방식 — 측정 누적면적 3.927% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dmf__row--totalSIZES.dmf__fill

02전송 속도 값 그래프 갱신 — 초당 전송량 값이 그래프 형태로 계속 다시 그려지는 방식

일시정지 버튼을 누르면 SAMPLES 원시 표본이 TICK_MS(160ms)마다 하나씩 흘러 들어오고, movingAvg() 함수가 최근 N개(5개) 표본의 평균을 다시 계산해 dsg__avg 선을 매번 다시 그립니다. 원시선(dsg__raw)과 평균선(dsg__avg)을 나란히 두면 값이 어디까지 실측이고 어디부터 매끈해진 값인지 눈으로 구분됩니다.

  // 계산 겹: 최근 N개 원시 표본의 이동평균 — 그래프 선은 이 평균값을 잇는다(원시값 자체가 아님)
  function movingAvg(arr) {
    var out = [];
    for (var k = 0; k < arr.length; k++) {
      var s = Math.max(0, k - N + 1);
      var sum = 0, c = 0;
      for (var j = s; j <= k; j++) { sum += arr[j]; c++; }
      out.push(sum / c);
    }
    return out;
  }
전송 속도 값 그래프 갱신 — 초당 전송량 값이 그래프 형태로 계속 다시 그려지는 방식
새 창에서 열기

02 · 전송 속도 값 그래프 갱신 — 초당 전송량 값이 그래프 형태로 계속 다시 그려지는 방식 — 측정 누적면적 8.108% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dsg__graphN.dsg__btn

03정지·재개 상태 값 전환 — 상태 값이 정지와 진행 사이를 오갈 때마다 값의 변화가 멈췄다 다시 이어지는 방식

일시정지 버튼을 누르면 setPaused(true) 가 그 순간까지의 경과 값을 pausedElapsed 에 담아 진행 값을 그 자리에서 멈추고, 다시 누르면 elapsed() 함수가 새로 흐른 시간만 더해 멈췄던 값부터 이어서 올립니다. 대용량 설치 파일처럼 다운로드 진행 상황 확인을 자주 멈췄다 이어가야 하는 화면에 맞는 계산입니다.

  // 상수: 전체 소요 시간(ms) · 자동 루프의 정지 구간(ms)
  var TOTAL_MS = 2600;
  var AUTO_PAUSE_AT = [0.28, 0.62];
  var AUTO_PAUSE_MS = 420;

  var paused = false;
  var startedAt = performance.now();
  var pausedElapsed = 0; // 정지되기 전까지 이미 쌓인 경과 값
  var raf = null;
  var autoIdx = 0;

  // 계산 겹: 경과 시간 = 정지 전 누적값(pausedElapsed) + (지금 - 재개 시각). 재개할 때 0으로 안 끊긴다
  function elapsed() {
    if (paused) return pausedElapsed;
    return pausedElapsed + (performance.now() - startedAt);
  }
정지·재개 상태 값 전환 — 상태 값이 정지와 진행 사이를 오갈 때마다 값의 변화가 멈췄다 다시 이어지는 방식
새 창에서 열기

03 · 정지·재개 상태 값 전환 — 상태 값이 정지와 진행 사이를 오갈 때마다 값의 변화가 멈췄다 다시 이어지는 방식 — 측정 누적면적 1.799% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dpr__stateAUTO_PAUSE_AT.dpr__fill

04대기열 순서 값 재배치 — 아직 시작하지 않은 항목들의 순서 값이 사용자가 정한 차례로 바뀌는 방식

항목을 pointerdown 으로 잡아 pointermove 로 끌면 order 배열의 순서 값은 즉시 바뀌지만, 화면 위 위치는 tickLerp() 가 매 프레임 남은 거리의 LERP(0.18) 비율만큼만 다가가게 해 항목이 순간이동하지 않고 칸 사이를 미끄러지듯 이동합니다. pointerup·pointercancel 로 손을 떼면 dragging 이 -1 로 풀리며 나머지 항목도 같은 보간으로 새 자리를 따라갑니다.

  // 계산 겹: 순서 값이 바뀌면 목표 위치로 즉시 점프하지 않고 매 프레임 남은 거리의 LERP 비율만큼 다가간다
  function tickLerp() {
    for (var i = 0; i < items.length; i++) {
      if (i === dragging) continue;
      var t = targetY(i);
      y[i] += (t - y[i]) * LERP;
      items[i].style.transform = 'translateY(' + y[i].toFixed(2) + 'px)';
    }
    requestAnimationFrame(tickLerp);
  }
  requestAnimationFrame(tickLerp);
대기열 순서 값 재배치 — 아직 시작하지 않은 항목들의 순서 값이 사용자가 정한 차례로 바뀌는 방식
새 창에서 열기

04 · 대기열 순서 값 재배치 — 아직 시작하지 않은 항목들의 순서 값이 사용자가 정한 차례로 바뀌는 방식 — 측정 누적면적 20.906% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dqr__itemLERPROW_H

05압축 해제 진행 값과 형태 값 동시 변화 — 압축 해제 진행 값이 차오르는 동안 형태 값도 함께 바뀌는 방식

일시정지 버튼을 누르면 DUR_MS(2400ms) 동안 진행 값이 0에서 1로 차오르고, lerpPoints() 함수가 그 값 t 로 닫힌 상자 8점(BOX)과 펼쳐진 도형 8점(OPEN)의 좌표를 각각 선형보간해 다각형을 프레임마다 다시 그립니다. 두 형태가 겹쳐 페이드되는 게 아니라 점 좌표 자체가 이동하는 방식이라, 진행 값이 60%일 때 다각형은 두 모양의 정확히 중간 좌표에 있습니다.

  var DUR_MS = 2400;

  var start = performance.now();
  var pausedAt = 0;
  var paused = false;
  var btn = document.getElementById('demBtn');

  // 계산 겹: 진행 값(0~1)으로 8개 점 좌표를 각각 선형보간(lerp) — 두 도형을 겹쳐 페이드하지 않는다
  function lerpPoints(t) {
    var out = [];
    for (var i = 0; i < BOX.length; i++) {
      var x = BOX[i][0] + (OPEN[i][0] - BOX[i][0]) * t;
      var y = BOX[i][1] + (OPEN[i][1] - BOX[i][1]) * t;
      out.push(x.toFixed(1) + ',' + y.toFixed(1));
    }
    return out.join(' ');
  }
압축 해제 진행 값과 형태 값 동시 변화 — 압축 해제 진행 값이 차오르는 동안 형태 값도 함께 바뀌는 방식
새 창에서 열기

05 · 압축 해제 진행 값과 형태 값 동시 변화 — 압축 해제 진행 값이 차오르는 동안 형태 값도 함께 바뀌는 방식 — 측정 누적면적 3.347% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dem__polyDUR_MS.dem__shape

06손상 재시도 횟수 값 — 검증에 실패하면 재시도 횟수 값이 하나씩 늘고 진행 값이 처음으로 되돌아가는 방식

지금 재시도 버튼을 누르면 verify() 함수가 VERIFY_SEED 배열에서 그 회차의 결과를 읽어(0·1회차는 손상, 2회차부터 통과) 실패하면 retry 값이 하나 늘고 진행 값이 0으로 돌아가며, backoffMs() 가 BASE_BACKOFF_MS(260ms) × BACKOFF_MULT(2)의 재시도 제곱으로 다음 시도까지 대기 시간을 지수로 늘립니다. 불안정한 네트워크에서 다운로드 완료 알림이 늦어지는 이유를 이 계산으로 눈에 보이게 만든 셈입니다.

  // 시드 고정: 회차별 검증 결과(참=검증 통과). 0·1회차는 손상, 2회차부터 통과
  var VERIFY_SEED = [false, false, true, true, true];
  // 상수: 틱 간격 · 기저 대기(ms) · 지수 배수 — 재시도할 때마다 대기 시간이 늘어난다
  var TICK_MS = 90;
  var BASE_BACKOFF_MS = 260;
  var BACKOFF_MULT = 2;
  var MAX_PCT = 100;

  var pct = 0;
  var retry = 0;
  var timer = null;
  var btnDisabled = false;

  // 계산 겹: 재시도 대기 = 기저값 × 배수^재시도횟수(지수 백오프) — 매 실패마다 대기가 길어진다
  function backoffMs() {
    return BASE_BACKOFF_MS * Math.pow(BACKOFF_MULT, Math.min(retry, 4));
  }
손상 재시도 횟수 값 — 검증에 실패하면 재시도 횟수 값이 하나씩 늘고 진행 값이 처음으로 되돌아가는 방식
새 창에서 열기

06 · 손상 재시도 횟수 값 — 검증에 실패하면 재시도 횟수 값이 하나씩 늘고 진행 값이 처음으로 되돌아가는 방식 — 측정 누적면적 2.188% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dcr__retryBACKOFF_MULTVERIFY_SEED

07완료 값 반짝 표시 — 다운로드가 끝나는 순간 완료 값이 1로 바뀌었다가 일정 시간 뒤 다시 0으로 사라지는 방식

다시 보기 버튼을 누르면 완료 배지가 나타나는 순간 sweepOpacity() 함수가 DECAY(0.55)의 회차 제곱으로 광택 sweep 세기를 계산해 SWEEP_COUNT(3)회 반복하는 동안 매 회차 옅어지다 사라지고, VISIBLE_MS(1500ms) 가 지나면 배지 값 자체도 사라집니다. 세 번째 sweep 은 첫 번째의 약 17%(0.55의 세제곱) 세기로만 지나갑니다.

  // 상수: 완료 표시 유지 시간(ms) · 광택 sweep 1회 길이(ms) · 반복 횟수 · 감쇠율
  var VISIBLE_MS = 1500;
  var SWEEP_MS = 420;
  var SWEEP_COUNT = 3;
  var DECAY = 0.55; // 회차마다 강도(불투명도)가 이 비율로 줄어든다
  var CYCLE_MS = 2400;

  var start = performance.now();
  var raf = null;

  // 계산 겹: 광택 sweep 의 세기 = 초기값 × DECAY^회차(지수 감쇠) — 매 회차 옅어지다 사라진다
  function sweepOpacity(passIndex) {
    return Math.pow(DECAY, passIndex);
  }
완료 값 반짝 표시 — 다운로드가 끝나는 순간 완료 값이 1로 바뀌었다가 일정 시간 뒤 다시 0으로 사라지는 방식
새 창에서 열기

07 · 완료 값 반짝 표시 — 다운로드가 끝나는 순간 완료 값이 1로 바뀌었다가 일정 시간 뒤 다시 0으로 사라지는 방식 — 측정 누적면적 5.561% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dcf__sweepDECAYSWEEP_COUNT

08완료 항목 위치 값 이동 — 다운로드가 끝난 항목의 위치 값이 목록의 정해진 영역으로 옮겨가는 방식

다시 보기 버튼을 누르면 두 항목이 START_DELAY([0, 1100]ms)만큼 시차를 두고 spring() 이 계산한 진행도를 따라 보관함(dfr__zoneSlot)으로 이동하는데, ZETA(0.42)가 1보다 작아 위치 값이 목표를 살짝 지나쳤다가 되돌아오는 오버슈트를 만듭니다. 완료된 자료를 따로 모아 다운로드 완료 알림처럼 눈에 띄게 보여주는 화면에 어울리는 움직임입니다.

  // 상수: 스프링 감쇠비(zeta) · 각진동수(w) · 항목별 시작 지연(ms) · 이동 소요(ms)
  var ZETA = 0.42;
  var W = 7.5;
  var START_DELAY = [0, 1100];
  var MOVE_MS = 850;
  var CYCLE_MS = 2900;

  // 계산 겹: 위치 진행도를 질량-스프링 방정식으로 매 프레임 계산(목표를 넘었다가 되돌아와 멈춘다) — CSS 트랜지션이 아니다
  function spring(u) {
    var wd = W * Math.sqrt(1 - ZETA * ZETA);
    var e = Math.exp(-ZETA * W * u);
    return 1 - e * (Math.cos(wd * u) + (ZETA * W / wd) * Math.sin(wd * u));
  }
완료 항목 위치 값 이동 — 다운로드가 끝난 항목의 위치 값이 목록의 정해진 영역으로 옮겨가는 방식
새 창에서 열기

08 · 완료 항목 위치 값 이동 — 다운로드가 끝난 항목의 위치 값이 목록의 정해진 영역으로 옮겨가는 방식 — 측정 누적면적 12.302% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.dfr__zoneSlotZETAW

09모션 감소 정적 다운로드 표시 — 모션 감소 설정에서 애니메이션 대신 진행 값의 문구만 그대로 바뀌는 방식

모션 감소 전환 버튼을 누르면 root 에 drm--force-reduce 클래스가 토글되지만, tick() 함수 자체는 STEP(4)씩 같은 pct 값을 계속 올리고 있어 왼쪽 패널(drmFillA)은 매 틱 transform 으로 채워지는 반면 오른쪽 패널은 애초에 transform 대신 문구(pctB)만 교체하도록 짜여 있습니다. 여러 파일 다운로드 허용 화면이라도 접근성 설정을 지키려면 값 자체는 그대로 두고 표현만 바꾸면 된다는 걸 왼쪽·오른쪽 대조로 보여줍니다.

  // 상수: 진행 속도(%/틱) · 틱 간격(ms)
  var STEP = 4;
  var TICK_MS = 130;
  var forcedReduce = false;

  var pct = 0;

  // 계산 겹: 같은 진행 값 하나를 두 판이 다르게 그린다 — 왼쪽은 매 틱 transform 갱신, 오른쪽은 문구만 교체(레이아웃·트랜지션 0)
  function paint() {
    fillA.style.transform = 'scaleX(' + (pct / 100).toFixed(3) + ')';
    pctA.textContent = pct + '%';
    pctB.textContent = pct + '%';
  }

  function tick() {
    pct = (pct + STEP) % 101;
    paint();
    setTimeout(tick, TICK_MS);
  }
  tick();
모션 감소 정적 다운로드 표시 — 모션 감소 설정에서 애니메이션 대신 진행 값의 문구만 그대로 바뀌는 방식
새 창에서 열기

09 · 모션 감소 정적 다운로드 표시 — 모션 감소 설정에서 애니메이션 대신 진행 값의 문구만 그대로 바뀌는 방식 — 측정 누적면적 0.643% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

.drm__staticBoxSTEP.drm--force-reduce

값이 패턴을 바꾸는 곳 — 갱신 주기·재시도 기준·색상 단계의 기준

갱신 주기 값은 항목마다 다른 TICK_MS 가 정합니다 — 01은 140ms 마다 SPEEDS 값을 더하고, 02는 160ms 마다 새 표본을 흘리며, 06은 90ms 마다 pct 를 올리고 09는 130ms 마다 STEP(4)씩 값을 갱신합니다. 04·05·08처럼 requestAnimationFrame 으로 매 프레임 계산하는 항목은 고정 TICK_MS 없이 LERP(0.18)·ZETA(0.42) 같은 비율 상수가 갱신 폭을 정합니다.

재시도 기준은 06의 VERIFY_SEED 배열이 정합니다 — [false, false, true, true, true] 순서라 0·1회차는 반드시 손상되고 2회차부터 통과하며, 대기 시간은 backoffMs() 가 BASE_BACKOFF_MS(260ms) × BACKOFF_MULT(2)의 재시도 제곱으로 계산해 실패할 때마다 두 배씩 늘어납니다.

색상 단계의 기준은 06에서만 나타납니다 — verify() 가 실패를 반환하면 root 에 dcr--bad 클래스가 붙어 상태 문구 색이 $error 로 바뀌고, 통과하면 dcr--ok 로 바뀌어 원래 잉크색으로 돌아옵니다. 나머지 여덟 항목은 진행 값에 따라 색이 단계적으로 바뀌지 않고 한 가지 강조색을 그대로 유지합니다.

어디서 깨지는가 — 오프라인 복귀 순간·다중 탭 동시 다운로드·모션 감소

이 아홉 항목은 가상 시뮬레이션이라 오프라인 복귀 순간을 재현하지 않지만, 이 계산을 실제 다운로드 매니저 위에 얹을 때 가장 먼저 깨지는 지점이 여기입니다 — 06처럼 진행 값을 0으로 되돌리는 재시도 로직을 실제 fetch 위에 그대로 두면, 연결이 끊겼다 돌아온 순간 이미 받은 바이트까지 버리고 처음부터 다시 받게 될 수 있어 Range 헤더로 이어받기를 따로 설계해야 합니다. 아홉 항목의 html·scss·js 원본은 비번 cb2aueyy 으로 열리는 압축 파일 안에 그대로 들어 있어, 이 지점을 코드로 직접 맞춰볼 수 있습니다.

다중 탭 동시 다운로드도 마찬가지입니다. 아홉 항목 모두 진행·재시도·순서 값을 그 페이지의 JS 변수 하나에만 담아 두므로, 같은 데모를 탭 두 개로 열어 각각 버튼을 눌러도 두 탭은 서로의 값을 전혀 모른 채 따로 계산합니다 — 04의 order 배열이나 01의 done 배열을 실제 다중 탭 다운로드에 옮기려면 BroadcastChannel 이나 서버 쪽 상태 하나로 합쳐야 탭마다 진행 값이 따로 노는 문제가 사라집니다.

모션 감소는 아홉 항목 모두 style.scss 의 prefers-reduced-motion 규칙으로만 걸려 있고 index.html 안에 matchMedia 로 분기하는 JS 코드는 없는데, 규칙이 실제로 값을 조용하게 만드는지는 항목마다 다릅니다. 01·06·07·09는 fill·badge 요소 자체에 transition 이 걸려 있어 규칙이 켜지면 계산되는 값은 그대로인 채 화면 표시만 계단식으로 바뀌지만, 02·03·04·05·08은 그래프·다각형·위치 값을 그리는 요소 자체엔 애초에 transition 이 걸려 있지 않아 값 계산도 화면 표시도 reduce 여부와 무관하게 그대로 돌아갑니다.

변형 세 가지와 접근성

이름 값 느낌
이동평균 창 02 N 5 → 10 창을 5로 두면 그래프가 최근 표본의 튐에 민감하게 반응해 들쭉날쭉 움직이고, 10으로 늘리면 값이 매끄럽게 이어지는 대신 급격한 변화에 대한 반응이 한 박자 늦어집니다
지수 백오프 배수 06 BACKOFF_MULT 2 → 1.6 배수를 2로 두면 재시도할 때마다 대기 시간이 급격히 늘어 정지가 눈에 띄게 길어지고, 1.6으로 낮추면 대기가 완만하게 늘어 재시도가 더 잦게 이어집니다
스프링 감쇠비 08 ZETA 0.42 → 0.65 감쇠비를 0.42로 두면 항목이 보관함 자리를 지나쳤다 되돌아오는 오버슈트가 뚜렷하고, 0.65로 올리면 오버슈트가 줄어 더 차분하게 자리에 안착합니다

접근성은 항목마다 남기는 값이 다릅니다. 01·06·07은 reduce 가 켜지면 값 갱신 자체는 그대로 두고 화면에 그려지는 시각 표현(transition·transform)만 줄이거나 없애고, 02·03·05·08은 애초에 값을 그리는 요소 자체에 transition 이 걸려 있지 않아 reduce 여부와 무관하게 표현이 그대로 유지되며, 04는 순서 값이 바뀌는 즉시 위치가 따라가되 LERP 보간만 남고, 09는 왼쪽·오른쪽 두 판을 나란히 두어 값은 같아도 표현이 달라지는 것을 직접 비교하도록 설계했습니다.

FAQ

01에서 전체 진행 값은 왜 세 파일의 평균이 아닌가요?

세 칸을 단순히 3으로 나누면 크기가 다른 파일들의 실제 무게를 반영하지 못하기 때문입니다. overall() 함수는 done 배열의 합을 SIZES 배열의 합으로 나누는 용량 가중 평균을 쓰므로, SIZES[1] 980처럼 큰 파일의 진행이 늦어지면 전체 진행 값도 그만큼 더 크게 늦어져야 실제 남은 바이트와 어긋나지 않습니다.

04의 순서 재배치와 08의 완료 이동은 같은 방식으로 움직이나요?

아니요. 04의 tickLerp() 은 남은 거리의 LERP(0.18) 비율만큼만 매 프레임 다가가는 방식이라 목표를 지나치는 일이 없고, 08의 spring() 은 ZETA(0.42) 값 때문에 목표를 살짝 지나쳤다가 되돌아오는 오버슈트가 생깁니다. 하나는 항상 목표 쪽으로만 움직이고, 하나는 한 번 더 넘어갔다가 돌아온다는 방향성 차이가 있습니다.

06의 지수 백오프 배수를 다른 항목의 대기 시간에도 그대로 써도 되나요?

상수를 그대로 복사할 수는 있지만 결과 체감까지 같지는 않습니다. 06의 BASE_BACKOFF_MS 260·BACKOFF_MULT 2는 재시도 4회 안팎을 가정하고 맞춘 값이라, 예를 들어 훨씬 잦은 재시도가 예상되는 화면에 그대로 옮기면 대기 시간이 너무 빨리 치솟아 사용자가 오래 기다리는 것처럼 보일 수 있습니다.

더 읽을거리

여러 파일을 한 번에 올리는 업로드 진행 표시는 파일 하나가 서버로 올라가는 단일 진행 값을 계산하는 데 비해, 이 편은 여러 파일이 동시에 받아지는 동안 각각의 바이트·속도·순서·상태 값을 따로 계산한다는 점에서 축이 다릅니다. 목록 끝에서 다음 묶음을 불러오는 무한 스크롤은 스크롤 위치가 끝에 닿을 때마다 다음 묶음을 이어붙이는 값을 계산하는 반면, 이 편은 이미 정해진 파일들의 진행·재시도·순서 값이 전이되는 계산을 다룹니다. 당겨서 새로고침하는 로딩 표시는 당긴 거리 값이 문턱을 넘는 순간 새로고침을 트리거하는 계산인데, 이 편은 트리거 이후 오래 이어지는 진행 상태 자체의 값 변화를 다룬다는 점에서 다릅니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.