Softonic

FPS 카운터

단계 1 / 3 현재 FPS
초
프레임
FPS
다음

이 FPS 카운터로 현재 페이지가 브라우저에서 얼마나 부드럽게 렌더링되는지 측정해 보세요. requestAnimationFrame으로 프레임을 샘플링해 현재, 평균, 최소, 최대 FPS를 알려주고, 짧은 그래프도 그려 줍니다. 무거운 탭, 애니메이션, 확장 프로그램, 스로틀링, 디스플레이 설정 때문에 생기는 하락 구간을 바로 찾을 수 있습니다.

브라우저 FPS 측정 방법

  1. 1

    측정 시간 선택

    5초가 무난한 기본값입니다. 주기적인 끊김이나 백그라운드 부하 변화를 잡으려면 측정 시간을 더 길게 잡으세요.

  2. 2

    스무딩과 경고 임계값 설정

    스무딩 창은 최근 프레임의 평균을 내고, 임계값은 테스트 기기에서 허용 가능하다고 보는 FPS 수준을 지정합니다.

  3. 3

    카운터 실행 후 편차 확인

    현재 FPS는 최근 렌더링 속도를 보여 줍니다. 평균, 최저, 최고 값을 보면 측정 내내 부드러웠는지, 눈에 띄는 하락이 있었는지 알 수 있습니다.

FPS 카운터가 측정하는 것

이 도구는 브라우저의 렌더링 주기를 측정하며, 그래픽카드의 벤치마크 성능을 재는 것이 아닙니다. 브라우저가 다음 프레임을 그릴 준비가 될 때마다 requestAnimationFrame이 샘플러를 호출합니다. 두 콜백 사이의 시간에서 순간 프레임레이트가 나옵니다.

FPS = 1000 / frame_time_in_ms

화면에 표시되는 현재 FPS는 스무딩 창을 기준으로 한 이동 평균입니다. 60프레임 창은 일반적인 60Hz 디스플레이에 잘 맞습니다. 한 프레임짜리 스파이크는 눌러 주면서도 지속적인 하락은 감추지 않기 때문입니다. 창이 작을수록 반응이 빠르고, 클수록 안정적으로 보입니다.

예시로 보기

5초 측정에서 다음과 같이 단순화한 프레임 간격이 기록됐다고 가정해 봅시다.

프레임 간격 순간 FPS 의미
16.7ms 59.9 FPS 60Hz의 일반적인 렌더링
8.3ms 120.5 FPS 120Hz의 일반적인 렌더링
25.0ms 40.0 FPS 많은 디스플레이에서 체감되는 느려짐
33.3ms 30.0 FPS 높은 부하 또는 스로틀링

경고 임계값이 50 FPS인데 측정된 이동 평균이 47 FPS로 끝났다면, 일부 프레임이 더 빨랐더라도 결과는 목표에 미치지 못합니다. 반대로 60 FPS 근처에서 끝나면서 가끔 45 FPS까지 떨어졌다면 평균은 양호하지만, 최저값은 살펴볼 만한 끊김이 있었음을 알려 줍니다.

결과 해석하기

결과 형태 예상 원인 다음 점검
평균이 주사율에 가깝고 하락이 드묾 렌더링이 정상 필요할 때만 다른 브라우저와 비교
평균은 좋지만 최저값이 훨씬 낮음 주기적인 끊김 무거운 탭을 닫거나 애니메이션 점검
평균이 임계값 아래 렌더링 부하가 지속됨 CPU 사용률, 확장 프로그램, 페이지 스크립트 확인
FPS가 30 부근에서 제한됨 절전 모드 또는 스로틀링 배터리 모드와 디스플레이 설정 확인

브라우저 FPS는 디스플레이 주사율, 운영체제 컴포지터, 배터리 모드, 발열로 인한 스로틀링, 열려 있는 탭, 그리고 페이지 자체의 영향을 받습니다. 먼저 아무것도 돌지 않는 탭에서 측정한 뒤, 진단하려는 페이지나 앱이 실행 중인 상태에서 다시 측정해 보세요.

자주 묻는 질문

아닙니다. 이 카운터는 브라우저가 requestAnimationFrame 콜백을 얼마나 자주 받는지 측정합니다. 웹 애니메이션과 페이지의 부드러움을 점검할 때 유용하지만, 네이티브 게임을 위한 본격적인 GPU 벤치마크는 아닙니다.

대부분의 브라우저는 애니메이션 프레임을 디스플레이 주사율에 맞춥니다. 60Hz 모니터는 보통 60 FPS 안팎을 보여 주고, 120Hz나 144Hz 디스플레이는 브라우저와 운영체제가 허용하면 더 높은 값을 낼 수 있습니다.

60Hz에서 일반적인 부드러움을 확인하려면 50 FPS를 쓰세요. 고주사율 모니터라면 기대하는 체감에 맞춰 90 FPS나 120 FPS처럼 더 높게 설정하면 됩니다.

없습니다. 측정은 로컬 타이밍 API를 이용해 브라우저 안에서만 이루어집니다. 프레임 데이터, 스크린숏, 기기 정보를 외부 API로 전송하지 않습니다.

관련 도구

HEX 색상 선택기

색상을 눈으로 선택하고 HEX, RGB, HSL, HSV, CMYK 값과 흰색·검정 대비를 바로 확인하세요.

JSON 포매터

JSON을 붙여넣어 2칸 또는 4칸 들여쓰기로 읽기 좋게 만들고, compact 출력으로 압축하거나 결과를 복사하기 전에 구문을 빠르게 확인하세요.

색상 팔레트 생성기

기준 HEX 색상에서 단색, 유사색, 보색, 삼색 또는 사색 팔레트를 만들고 바로 복사할 수 있는 CSS 변수를 내보냅니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

랜덤 색상 생성기

1개부터 50개까지 랜덤 HEX 색상을 만들고, 색상 견본을 확인한 뒤 CSS, 테스트 또는 팔레트 탐색에 쓸 코드를 복사하세요.