반응속도 테스트의 기기 지연

클릭 결과가 만들어지는 다섯 구간

1. 1

   브라우저가 색상 변경을 예약
   코드가 준비돼도 화면은 다음 그리기 시점에 바뀝니다.

2. 2

   디스플레이가 새 프레임 표시
   주사율과 현재 프레임 위치에 따라 자극이 눈에 보이는 시점이 달라집니다.

3. 3

   사용자가 색상 변화를 인지
   시각 처리와 판단을 거쳐 손가락 움직임이 시작됩니다.

4. 4

   마우스 또는 터치가 입력 전달
   장치 스캔, 무선 연결, 운영체제 입력 처리가 포함됩니다.

5. 5

   브라우저가 이벤트 처리
   클릭 이벤트가 실행되고 고정밀 타이머 값의 차이를 계산합니다.

주사율별 한 프레임 시간

한 프레임 시간은 1,000ms를 주사율로 나눈 계산값입니다. 60Hz의 16.7ms가 매번 그대로 오차에 더해진다는 뜻은 아닙니다. 색상 변경 요청이 프레임 주기의 어느 지점에 들어왔는지에 따라 대기 시간이 달라질 수 있다는 뜻입니다.

마우스와 터치 기록을 직접 비교하면 안 되는 이유

마우스는 버튼의 물리 입력을 포인터 이벤트로 전달하고, 터치는 손가락 접촉과 해제, 제스처 판정 과정을 거칩니다. 기기와 브라우저마다 처리 방식이 달라 ‘터치는 항상 몇 ms 느리다’는 하나의 숫자로 일반화할 수 없습니다. 입력 방식이 바뀌면 새로운 기준선을 만들고 별도 추세로 관리하세요.

내 기기의 지연 영향을 비교하는 실험

1. PC 마우스로 준비 2회 후 본 측정 5회를 진행합니다.
2. 5분 쉬고 같은 PC의 트랙패드로 같은 절차를 반복합니다.
3. 스마트폰에서도 화면 방향과 주사율 설정을 기록한 뒤 5회를 측정합니다.
4. 각 환경의 평균보다 중앙값과 기록 범위를 먼저 비교합니다.
5. 다음 날 같은 순서로 반복해 차이가 유지되는지 확인합니다.

한 번만 비교하면 순서에 따른 연습 효과나 피로가 섞일 수 있습니다. 둘째 날에는 기기 순서를 반대로 바꾸면 순서 효과를 줄이는 데 도움이 됩니다.

참고 자료

• MDN, Window.requestAnimationFrame()
• MDN, High precision timing
• W3C, Pointer Events Level 3