📸 60 FPS

📸 60fps

브라우저는 60개의 사진을 1000ms동안 보여준다. 티비를 사진기로 찍으면 티비가 검정색 화면을 띄운다. 그리고 순식간에 원래의 화면을 보여주고 다시 검정색 화면, 다시 원래의 화면을 디스플레이한다.

이는 카메라의 셔터 속도가 티비의 주사속도보다 빠르기 때문이다.

영상은 사실 사진이 연속적으로 보여지는 것이다. 사진이 연속적으로 바뀌는 속도가 사람의 눈으로 캐치를 하지 못할 정도로 빠르기 때문에 부드러운 영상처럼 보일 뿐이다. 이 차이를 느껴보고 싶다면 아래의 영상을 보는 것을 추천한다.

fps는 frames per second의 약자이다. 즉 1초의 몇 프레임을 보여주는지를 나타낸다.

📎 MDN 에서는 애니메이션의 프레임 수를 60프레임으로 유지하는 것이 UI(User Interface)적으로 중요하다고 말한다. 또한 일반적으로 초당 60프레임은 애니메이션이 부드럽게 나타나는 속도라고 말한다.

그러나 이 말은 스타일이나 위치 등을 새로 계산해서 화면에 보여지는 걸 16.7초 마다 완료해야 한다는 뜻인데 값 비싼 스크립트나 CSS 요소의 애니메이션은 모든 계산을 16.7초 마다 완료할 수 있다고 보장할 수 없다. 그렇게 되면 버벅이거나 느릿한 애니메이션의 문제가 생길 수 있다.

📎 참조

📎 Animation performance and frame rate

🎬 30 FPS vs. 60 FPS Gaming