홍라이프 계산기프레임 예산 계산기 쉽게 이해하기 — 개념과 원리
부드러운 애니메이션, 스크롤, 게임 화면을 만들려면 디스플레이가 화면을 새로 그릴 때마다 새 프레임을 준비해야 합니다. 프레임 예산은 목표 프레임률에서 한 프레임을 만드는 데 쓸 수 있는 시간입니다. 이 계산기는 그 예산과, 현재 한 프레임 작업 시간을 뺀 여유 시간, 그 작업량으로 낼 수 있는 프레임률을 보여 줍니다. 버벅임이나 프레임 드롭을 분석하는 프런트엔드·게임·그래픽 개발자가 주로 씁니다.
계산 방법
- 프레임당 예산(ms) = 1000 ÷ 목표 fps입니다.
- 여유 시간(ms) = 예산 − 프레임 작업 시간입니다. 음수이면 예산을 넘었다는 뜻입니다.
- 가능한 fps = 목표 fps와 1000 ÷ 작업 시간 중 작은 값입니다. 목표 주사율보다 빠르게 화면에 보여 줄 수는 없기 때문입니다.
원리
1초는 1000ms이므로 60fps에서는 한 프레임에 1000 ÷ 60 ≈ 16.67ms가 주어집니다. 90fps는 11.11ms, 120fps는 8.33ms, 144fps는 약 6.94ms입니다. 한 프레임의 작업이 이보다 길어지면 디스플레이는 이전 프레임을 한 번 더 보여 주고, 움직임이 끊겨 보입니다. 브라우저에서는 자바스크립트 외에도 스타일 계산, 레이아웃, 페인트, 합성에 시간이 들기 때문에, 60fps 기준 16.7ms 중 4~6ms 정도는 브라우저 몫으로 남겨 두라는 것이 일반적인 권장입니다. 주사율이 높아질수록 예산이 줄어들어, 60Hz에서 부드럽던 코드가 120Hz 화면에서는 프레임을 놓칠 수 있습니다.
예제 풀이
- 입력값은 목표 60fps, 프레임 작업 시간 12ms입니다.
- 예산은 1000 ÷ 60 = 16.67ms(16.666…)입니다.
- 여유 시간은 16.67 − 12 = 4.67ms입니다.
- 작업 시간만으로는 1000 ÷ 12 = 83.3fps까지 가능하지만 목표보다 높으므로 가능한 fps는 60입니다.
| 목표 fps | 프레임당 예산 (ms) |
|---|---|
| 15 | 66.66666667 |
| 30 | 33.33333333 |
| 45 | 22.22222222 |
| 60 | 16.66666667 |
| 75 | 13.33333333 |
| 90 | 11.11111111 |
| 120 | 8.333333333 |
결과 해석
여유 시간이 양수이면 작업이 예산 안에 들어온다는 뜻이지만, 브라우저 렌더링 몫을 생각하면 60fps에서 12ms는 무난하고 15ms는 위험합니다. 음수라면 프레임이 떨어지므로 긴 작업을 쪼개거나, 메인 스레드 밖으로 옮기거나, transform과 opacity만 애니메이션해 합성 단계에서 처리되게 하십시오. 측정은 개발용 고성능 PC가 아니라 가장 느린 대상 기기에서 해야 합니다.
흔한 실수
- 평균 프레임 시간만 보는 경우입니다. 가끔 생기는 긴 프레임이 눈에 띄는 끊김을 만듭니다.
- 브라우저 렌더링 시간을 빼지 않고 예산 전체를 스크립트에 쓰는 경우입니다.
- 수직 동기화가 켜져 있으면 프레임은 화면 갱신 시점에 맞춰 표시되므로, 60Hz에서 20ms 프레임은 50fps가 아니라 보통 30fps로 보입니다.
자주 묻는 질문
왜 16.7ms가 기준인가요?
대부분의 디스플레이가 1초에 60번 갱신되고, 1000 ÷ 60 ≈ 16.7ms이기 때문입니다.
120Hz 화면에서는 예산이 얼마인가요?
프레임당 약 8.33ms로, 60Hz의 절반입니다.
출처: web.dev, "Measure performance with the RAIL model" (Google) · developer.chrome.com, "Rendering performance" 문서