상호 작용 속도 및 대기 시간 UI

1) 인터페이스 속도는 무엇입니까?

속도는 페이지로드 만이 아닙니다. 이것은 네 가지 지연의 합입니다

1. 입력 대기 시간-제스처에서 이벤트 처리기까지.
2. 네트워크 대기 시간-백엔드/캐시 응답 전에.
3. 렌더 대기 시간-메인 스트림 처리 (JS/CSS/레이아웃/페인트).
4. 애니메이션 대기 시간-프레임의 부드러움과 안정성.

목적: 사용자는 조치가 시작되었고 프로세스가 어디로 이동하고 있는지 즉시 확인합니다. 실제 결과는 예측 가능합니다.

2) 인간 인식의 임계 값

소 50ms - "번개 빠름" (프린트 에코, 키 프레스).
100 ms - "즉시" (→ 시각적 응답을 클릭하십시오).
200ms-대부분의 UI 반응에 적합합니다.
180ms - 명확한 진행/골격으로 견딜 수 있습니다.

💡 10 초-사용자가 컨텍스트를 잃고 에스컬레이션이 필요합니다 (저장, 연기, 알림).

3) RAIL 모델 및 목표 예산

R (응답): 입력 응답

클릭/탭 → 시각적 응답은 100 ms입니다.
초점/호버링 → λ80-120 ms.

A (애니메이션): 부드러움

60 FPS 꿀 프레임 16. 7ms; 프레임에서 꺼내는 무거운 작업.
우리는 '변환 '/' 불투명도' 만 애니메이션합니다.

I (유휴): 배경 작업

슬롯으로 나누고 유휴 창을 사용하십시오.

L (로드): 로딩

TTFB 지정 200ms, LCP 지정 2입니다. 5 초, INP 1.

4) KPI 및 속도 경고

INP (다음 페인트와의 상호 작용): p75 <200 ms (양호), 200-500 (개선).
긴 작업 (> 50ms): LT <5% 의 프레임 비율.
TTFB p75 <200 ms (캐시/에지), LCP p75 <2. 5 p.

첫 번째 사용자 피드백 (FUF): 동작의 첫 번째 시각적 확인까지의 시간

첫 번째 필드가 입력되기 전에 양식에 대해 사용할 수있는 시간

5) UX 인스턴트 응답 패턴

1. 낙관적 인 업데이트: UI를 즉시 변경하고 (밸런스/베팅/유사) 오류를 롤백하십시오.
2. 구조가 알려진 경우 스피너 대신 스켈 레톤.
3. 진행/단계: 프로세스 길이가 알려진 경우 결정 론적 프로그레시브 막대.
4. 지역 팁: 인스턴트 토스트/상태 "보내기"...
5. 의도적 인 프리로드: 호버/가시성 → '프리 페치 '/' 프리로드'.

6) 지연 완화 기술

6. 1 입력 → 렌더

모바일에서 300ms 지연을 촬영하십시오: '<meta 네임 = "viewport" 컨텐츠 = "width = 장치 너비, 초기 스케일 = 1">'.
스크롤/타치에 대한 수동 청취자: 'addEventListener (' 터치 스타트 ', 핸들러, {수동: 참})'.
처리를 클릭하십시오-마이크로 작업 또는 '요청 애니메이션 프레임' 에서 빠르게 확인하십시오.
레이아웃 스래쉬: 읽기/쓰기 레이아웃-부치를 피하십시오.

6. 2 JS 및 메인 스트림

별도의 번들 (코드 분할) 이 경로를 따라로드됩니다.
헤비 컴퓨팅 → 웹 워커.
'스케줄러 사용. 배경 작업에 대한 포스트 작업 '/' 요청 Idlecalls '.
중요한 CSS - 인라인; JS "연기 '/' async '.
목록 가상화, '컨텐츠 가시성: 자동', '포함: 컨텐츠'.

6. 3 렌더링 및 애니메이션

애니메이션 '변환/불투명도'; 수백 개의 요소에서 '높이/왼쪽/상자 그림자' 를 애니메이션하지 마십시오.
애니메이션 전에 일시적으로 '의지 변경'; 나중에 청소하십시오.
거대한 PNG 대신 스프라이트/벡터; 무거운 흐림을 피하십시오.

6. 4 네트워크 및 캐시

가장자리-치즈 (CNC), '캐시 제어', '오래된 동안 수정'.
중요한 도메인에 사전 연결; 초기 힌트 (103), TH/2/3.
의도에 따라 미리 가져옵니다 (호버/뷰 포트).
스트리밍/SSR + 프로그레시브 수화/제도.

7) 도난/스로틀 링 및 대기열

토론-입력 중 검색 (150-300ms).
스크롤/크기 조절 (100-200ms) 용 스로틀링.

빈번한 이벤트 (실시간 데이터) 에 대한 대기열/버칭 UI 업데이트

js const debounce = (fn, ms=200)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}
const throttle = (fn, ms=120)=>{let t=0; return (...a)=>{const n=Date. now(); if(n-t>ms){t=n; fn(...a)}}}

8) 로딩 및 피드백 패턴

해골 → 내용 (조정, 고정 높이 없음).
Shimmer 1200-1600 ms, 진폭은 20% 입니다.
낙관적 인 카드: 회색 미리보기 + 텍스트-데이터가 도착하면 교체합니다.
오류: 짧은 재 시도 배너, 반복을위한 demempotency 키.

9) 신속한 대응을위한 네트워크 전략

중요한 조치 (요금/지불):

UI의 확인 즉시 (낙관적), 백엔드-demempotent;
시간 초과 (3-5 초) 인 경우 "수신, 처리 된" 상태 + 배경 배상을 표시합니다.
상태에 대한 웹 소켓/SSE, 백오프 1-2-4-8 초.

사전 데이터: 일정에 따른 예열 캐시, 인기있는 경로의 사전 가져 오기.

에지 기능: 사용자에게 더 가까운 유효성 검사/집계.

10) 빠른 UI 스 니펫 코드

클릭 즉시 응답 (네트워크 응답 전 피드백):

js btn. addEventListener('click', () => {
btn. classList. add ('is-busy') ;//requestAnimationFrame instant visual response (async () => {
try {
const res = await fetch('/api/action', { method: 'POST', body: payload });
if (!res.ok) throw new Error('fail');
btn. classList. add('is-done');
} catch {
btn. classList. remove('is-busy'); btn. classList. add('is-error');
}
});
});

의도적 인 접두사 (호버/뷰 포트):

js const prefetch = url => fetch(url, { credentials:'include', priority:'low' }). catch(()=>{});
document. querySelectorAll('a[data-prefetch]'). forEach(a=>{
a. addEventListener('mouseenter', () => prefetch(a. href), { once:true });
const io=new IntersectionObserver(e=>{ if(e[0].isIntersecting){prefetch(a. href); io. disconnect();} });
io. observe(a);
});

"저렴한" 애니메이션 및 스켈레톤 용 CSS:

css
.btn. is-busy { pointer-events:none; }
.skeleton { position:relative; background: var(--bg-elevated); overflow:hidden; }
.skeleton::after {
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 1. 4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

11) 진단 및 모니터링

필드: 국가/네트워크/장치 별 RUM (필드 메트릭) p75.

트레이스 '입력 → 핸들러 → 네트워크 → 페인트' 를 클릭하십

레드 존 마크 업: 긴 작업 마커, 차단 시간, 느린 경로 목록.
INP/LCP/TTFB 분해 경고.
시나리오 테스트: 참조 시간 기록 "클릭 → 변경 DOM".

12) iGaming의 세부 사항

입찰/구매:

UI: 버튼 상태의 즉각적인 고정 (눌림 → 바쁜), 이중 - 토스트 "허용".
백엔드: 요율별로 dempotent 키; 상태-WebSocket을 통해; 타임 아웃 → 투명한 "보류 중".
UI 예산: FUF

스핀/공개:

가속 및 200 ms, 균일 한 회전, 감쇠 300-500 ms; 무한주기없이.
스터브 승리-스트로브 없음, 텍스트/양을 읽을 수 있음 (AAA).

라이브 계수:

델타 패치는 250-1000 ms마다 한 번씩 패치됩니다.
레이아웃 점프가없는 시각적 diff (화살표/색상/두께);
호버/포커스에 대한 바운스 방지 업데이트.

토너먼트/랭킹:

배치 40-60ms, 표 자릿수 씩 증가;
끈적 끈적한 헤더, 문자열 가상화.

13) 반 패턴

클릭에 대한 즉각적인 응답이 없습니다 (네트워크 대기).
수백 가지 요소에 대한 무거운 '필터/박스 섀도우' 애니메이션.
임계 경로 당 하나의 거대한 JS 번들> 1-2MB.
공허의 스피너는 진행/해골없이 1-2 이상입니다.
하나의 틱으로 레이아웃을 읽거나 쓰기 (레이아웃 스 래싱).
모바일의 호버 전용 기능.

14) 스피드 토큰 (디자인 시스템)

json
{
"latencyBudget": {
"tapFeedbackMs": 100,
"keyEchoMs": 50,
"hoverMs": 120,
"pressMs": 90,
"modalInMs": 240,
"toastInMs": 200
},
"webVitalsTargets": { "INP": 200, "LCP": 2500, "CLS": 0. 1, "TTFB": 200 },
"animation": {
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"duration": { "hover": 160, "active": 90, "overlay": 240 }
}
}

15) QA 속도 점검표

응답

클릭/탭 → 시각적 응답
모바일에서 300ms 지연이 없습니다.
INP p75 λ200ms; 작업이 길어지면 5% 를 공유합니다.

로딩

TTFB λ200ms; LCP 방식 2. 5 초; CLS 지정 0. 1.
"매달린" 스피너 대신 해골/진행.

렌더

애니메이션에서 '변환/불투명도' 만; 배열에는 "무거운" 그림자가 없습니다.
긴 목록의 내용 가시성/가상화.

네트워크

가장자리 캐시, 사전 연결, 의도 접두사.
비판적 행동에 대한 이념과 후퇴.

A11y

'감소 운동 선호' 가 지원됩니다.
호버 컨텐츠는 초점/키보드로 제공됩니다.

16) 설계 시스템 문서

"대기 시간 예산": 임계 값 표 (탭, 호버, 모달, 토스트, 양식).
"즉석 피드백": 낙관적 인 행동 패턴 + 풀백.
"의도에 의한 예방": 가이드 및 유틸리티.
"성능 플레이 북": 프로파일 링 체크리스트 및 RUM 경고.
"Do/Do n 't": 숫자가있는 빠른/느린 스크립트의 예.

간략한 요약

상호 작용 속도는 결과의 즉각적인 응답 + 예측 가능한 전달입니다. 첫 번째 피드백을위한 신성한 예산으로 100ms를 유지하고, 네트워크 (가장자리/캐시/접두사) 를 최적화하고, 기본 스트림을 오프로드하고, 저렴한 속성 만 애니메이션하고 낙관적 인 패턴을 적용하십시오. 그런 다음 인터페이스는 특히 스테이크가 많고 실시간 iGaming 시나리오에서 활기차고 이해하기 쉽고 탄력적입니다.

상호 작용 속도 및 대기 시간 UI

로딩

렌더

네트워크

A11y

간략한 요약

문의하기

빠른 연결

영상이 곧 업데이트됩니다

현재 프로젝트로 매우 바쁜 상태입니다