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로 전송하지 않습니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

HEX → ASCII 변환기

16진 바이트 시퀀스를 ASCII 텍스트로 변환합니다. 프로토콜 디버깅, 리버스 엔지니어링, CTF 챌린지에 좋습니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

이 도구는 다른 언어로도 제공됩니다