인프런 커뮤니티 질문&답변
작성한 질문수
답변 2
0
안녕하세요 ah young kim님😊
지금 보신 Performance 패널 화면에서 FPS, 즉 초당 프레임 수를 확인하는 방법은 상단의 “Frames” 구간을 보면 됩니다. 이 영역의 녹색 바 하나하나가 브라우저가 한 프레임을 그린 시간을 의미하며, 마우스를 올리면 “33.3 ms Frame”과 같은 표시가 나타납니다. 이 값이 바로 한 프레임을 그리는 데 걸린 시간, 즉 frame time이며, FPS는 이 값을 이용해 계산할 수 있습니다.
계산식은 FPS = 1000 ÷ frame time(ms) 입니다. 예를 들어 한 프레임이 33.3ms 걸린다면 1000 ÷ 33.3 = 약 30fps가 되고, 16.6ms일 경우 1000 ÷ 16.6 = 약 60fps로 계산됩니다.
지금 화면에서는 각 프레임의 시간이 약 33ms 정도로 측정되어 대략 30fps 수준으로 볼 수 있습니다. 이 말은 hover와 같은 사용자 인터랙션이 발생했을 때 브라우저가 한 프레임을 그리는 데 더 오랜 시간이 걸리고 있음을 의미합니다. FPS가 낮아질수록 초당 그릴 수 있는 프레임 수가 줄어들어 화면이 끊기거나 버벅거리는 현상이 나타납니다. 반대로 frame time이 짧아지고 FPS가 높아질수록 브라우저는 더 많은 프레임을 매끄럽게 처리하게 되어 애니메이션과 전환이 부드럽게 느껴집니다.
보통 어느 정도 FPS가 좋은가를 판단할 때는 다음과 같은 기준을 참고합니다. 60fps 이상이면 이상적인 상태로, 대부분의 고급 애니메이션이나 게임이 이 수준을 목표로 합니다. 50fps 근처에서는 체감상 충분히 부드럽고 안정적인 움직임을 보이며, 대부분의 웹 인터페이스에서 이 정도면 만족스러운 사용자 경험을 제공합니다. 그러나 30fps 이하로 떨어지면 hover나 scroll 시 눈에 띄는 버벅임이 생기며, UI 전환이 즉각적으로 반응하지 않는 느낌을 주기 때문에 성능 개선이 필요하다고 판단할 수 있습니다.
FPS 수치만 보는 것보다 중요한 것은 각 프레임의 시간과 함께 어떤 렌더링 단계가 반복적으로 일어나고 있는지를 함께 살펴보는 것입니다. Performance 패널의 아래쪽에는 Rendering, Painting, Composite 단계가 색깔별로 표시되는데, 이를 통해 브라우저가 어떤 자원을 더 많이 사용하고 있는지 파악할 수 있습니다. Paint 단계가 자주 발생한다면 CPU가 매번 픽셀을 다시 계산하고 그려야 하기 때문에 처리 시간이 길어지고 FPS가 떨어질 수 있습니다. 반대로 Composite 단계에서 대부분의 작업이 처리된다면 GPU가 레이어 합성을 담당하기 때문에 훨씬 가볍고 효율적인 렌더링이 이루어집니다. 따라서 Paint 블록의 빈도를 줄이고 Composite 위주로 최적화하는 것이 FPS 안정성과 렌더링 효율을 동시에 높이는 핵심입니다.
실무에서는 단순히 코드 최적화뿐 아니라, CSS, HTML, JS 모두가 렌더링 성능에 영향을 미칩니다. CSS 측면에서는 transform, opacity 등 GPU 가속이 가능한 속성을 활용하고, top, left처럼 layout이나 paint를 유발하는 속성은 애니메이션에 사용하지 않는 것이 좋습니다. box-shadow, filter, border-radius와 같은 시각 효과는 과도하게 사용하면 Paint 비용이 커지므로 주의가 필요합니다. HTML 구조에서는 불필요하게 중첩된 엘리먼트를 줄이고, display 변경이 잦은 요소를 별도의 레이어로 분리하는 것이 도움이 됩니다. JavaScript에서는 연산이 무거운 루프나 동기 처리 로직을 최소화하고, requestAnimationFrame을 이용해 브라우저의 렌더링 타이밍에 맞춰 애니메이션을 수행하면 훨씬 자연스럽고 효율적인 프레임 타이밍을 유지할 수 있습니다.
결국 FPS를 제대로 분석하려면 Performance 패널의 Frames 영역에서 frame time을 확인하고, FPS = 1000 ÷ frame time(ms) 공식을 통해 초당 프레임 수를 계산하며, Paint와 Composite 단계의 분포를 함께 보는 것이 중요합니다. 16.6ms 근처의 frame time, 즉 60fps에 가까운 상태가 가장 이상적이고, 50fps까지는 충분히 부드럽다고 평가할 수 있으며, 30fps 이하에서는 사용자 경험이 급격히 떨어집니다. 이때 렌더링 단계별 부담을 줄이고 CSS·HTML·JS 코드를 GPU 친화적으로 구성하면, 브라우저는 더 가볍고 효율적으로 동작하며 화면 전환이 눈에 띄게 매끄러워집니다. 이런 점을 함께 고려하면 단순히 FPS 수치를 높이는 것을 넘어, 실무 환경에서도 안정적이고 부드러운 사용자 경험을 설계할 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. ah young kim 님.
FPS(Frames Per Second)는 웹 페이지의 성능을 평가하는 데 중요한 지표로 사용됩니다. 브라우저의 개발자 도구(예: 크롬 DevTools)를 활용하여 FPS를 확인할 수 있습니다. 주로 ‘Performance’ 탭을 통해 페이지의 성능을 분석하고, 특정 구간의 FPS를 시각적으로 표시해 줍니다.
FPS 확인 방법:
- Performance 탭 사용: 개발자 도구의 ‘Performance’ 탭을 열어 ‘녹화’ 버튼을 클릭하고 페이지를 사용하면서 성능을 기록합니다.
- 타임라인 상의 FPS 그래프: 기록이 완료된 후 타임라인 그래프에서 페이지의 FPS를 보여주는 섹션이 나타납니다. 여기서 FPS의 변화와 페이지 성능을 눈으로 확인할 수 있습니다.
- 안정된 FPS 라인: 그래프의 일정한 높이에서 FPS가 유지되면 안정적이라고 보고, 급격한 변화가 있는 경우 성능 저하가 있을 수 있습니다.
이미지에서 보이듯이, FPS 안정성 향상과 부드러운 애니메이션, 렌더링 밀도 감소 등이 언급되어 있으며, 이는 모두 페이지의 성능 최적화를 나타내는 지표입니다.
관련하여 페이지 성능 분석 방법에 대한 추가 정보는 다음 URL에서 확인할 수 있습니다:
- 브라우저 렌더링 과정 및 성능 측정 방법
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.