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

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

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

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

EditorConfig 생성기

들여쓰기 스타일과 크기, 줄 끝, 문자 인코딩, 공백 규칙을 지정해 .editorconfig 파일을 생성하고 IDE와 편집기 전반의 형식을 일관되게 유지하세요.

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