스크롤 부드러움 테스트 – 스크롤 끊김(잰크) 측정

이 스크롤 부드러움 테스트는 다른 어떤 움직임보다 자주 마주치는 종류의 움직임을 측정합니다. 바로 손가락이나 휠 아래에서 움직이는 페이지나 목록이죠. 스크롤은 끊김(잰크)이 가장 먼저 드러나는 곳입니다. 끊임없이 일어나는 데다 우리 눈이 그 움직임을 읽는 데 익숙해져 있기 때문입니다. 움직이다가 걸리는 페이지, 손가락으로 튕길 때 건너뛰는 피드, 한 줄씩 덜컥거리는 문서 — 이 모든 것은 결국 콘텐츠가 움직이는 동안 브라우저가 매 새로 고침마다 새 프레임을 그려낼 수 있느냐로 귀결됩니다. 이 테스트는 번호가 매겨진 행들로 이루어진 긴 띠를 프레임마다 일정한 간격으로 스크롤하며 늦게 도착하는 프레임을 셉니다.

각 행에는 또렷한 숫자와 선명한 경계가 있어 눈으로 부드러움을 직접 판단할 수 있고, 동시에 측정기가 그것을 수치로 보여 줍니다. 덕분에 막연한 인상이 아니라 데이터를 근거로 브라우저, 확장 프로그램, 기기를 비교할 수 있습니다.

스크롤 테스트 사용 방법

페이지가 로드되는 즉시 띠가 저절로 스크롤됩니다. 잘 읽어 내려면 다음과 같이 하세요.

• 행이 움직이는 모습을 보세요. 부드러운 스크롤은 하나로 이어지는 매끄러운 미끄러짐처럼 보이고, 끊김은 행이 지나가면서 툭 튀거나 머뭇거리는 것처럼 보입니다.
• 행의 번호 하나를 눈으로 따라가세요. 행이 위로 올라가는 동안 그 번호를 좇아 보세요. 고르게 미끄러지면 타이밍이 좋은 것이고, 덜컥거리면 프레임이 늦은 것입니다.
• 측정기를 읽으세요. 예상 프레임 시간은 프레임 간의 정상적인 간격이고, 최악의 프레임 간격은 기록된 가장 긴 지연이며, 잰크는 늦게 온 프레임을 모두 센 값입니다.
• 전체 화면으로도 해 보고, 평소 스크롤하는 방식 — 천천히 읽기든 빠른 튕김이든 — 에 맞게 속도를 조절하세요.

측정기 초기화를 눌러 새로 측정을 시작하세요. 배경에서 생기는 걸림은 왔다 갔다 하기 때문에, 테스트를 30초 동안 켜 두면 잠깐 훑어볼 때보다 훨씬 정직한 그림을 얻을 수 있습니다.

스크롤이 버벅이는 이유

부드러운 스크롤은 브라우저가 매 새로 고침마다 — 60 Hz에서는 16.7 밀리초마다, 120 Hz에서는 8.3마다 — 페이지를 실행하면서 동시에 새 프레임을 만들어 내기를 요구합니다. 그 작업을 무언가가 지연시키면 프레임을 놓치고 스크롤이 튀게 됩니다. 흔한 원인은 구체적이며 고칠 수 있는 것들입니다.

무거운 페이지와 스크립트

큰 이미지, 복잡한 레이아웃, 바쁜 스크립트는 스크롤되는 프레임 하나하나를 그리는 데 큰 비용을 치르게 합니다. 스크롤 이벤트마다 코드를 실행하는 페이지는 특히 끊김에 취약합니다. 이것은 기기만큼이나 페이지 자체의 특성이며, 같은 컴퓨터에서도 어떤 사이트는 부드럽게 스크롤되고 어떤 사이트는 그렇지 않은 이유가 여기에 있습니다.

브라우저 확장 프로그램

콘텐츠 차단, 쇼핑, 접근성 확장 프로그램은 페이지가 움직이는 동안 페이지를 검사합니다. 최적화가 부실한 확장 프로그램 하나만으로도 프레임당 작업이 딱 그만큼 늘어나 눈에 띄는 버벅임을 일으킬 수 있습니다. 대부분의 확장 프로그램이 비활성화되는 시크릿 창에서 테스트해 보는 것이 빠르게 확인하는 방법입니다.

합성(컴포지팅)과 하드웨어 가속

브라우저는 페이지가 바쁠 때에도 스크롤이 부드럽게 유지되도록 스크롤 처리를 GPU에 넘기려고 합니다. 하드웨어 가속이 꺼져 있거나 페이지가 작업을 다시 메인 스레드로 몰아넣으면, 스크롤은 더 느린 경로로 되돌아가 끊깁니다. 브라우저 설정에서 하드웨어 가속을 켜면 대개 도움이 됩니다.

절전 모드와 배경 부하

다른 모든 움직임과 마찬가지로, 배터리 절전 모드의 노트북, 스스로 성능을 제한하는 뜨거운 기기, CPU 시간을 가로채는 배경 작업은 모두 프레임을 늦게 도착하게 만듭니다. 스크롤 테스트는 다른 모든 종류의 움직임을 좌우하는 것과 똑같은 시스템 상태를 반영합니다.

좋은 결과란 어떤 모습인가

건강한 스크롤은 높고 안정적인 프레임 속도에 잰크 수가 0에 가깝고 최악의 프레임 간격이 예상 프레임 시간에 근접한 상태입니다. 아래 표는 흔한 새로 고침 빈도별 목표 프레임 시간 — 스크롤하는 동안 테스트가 그 주변을 맴돌아야 하는 값 — 을 보여 줍니다.

새로 고침 빈도가 높으면 스크롤이 눈에 띄게 부드러워 보이지만, 이는 브라우저가 그 더 빠듯한 예산을 계속 채울 수 있을 때에만 그렇습니다. 실제로 어떤 새로 고침 빈도로 돌아가고 있는지는 새로 고침 빈도 가이드에서 확인하고, 순수 프레임 속도는 메인 FPS 테스트에서 측정하세요.

스크롤을 더 부드럽게 만드는 방법

• 스크롤이 GPU에서 처리되도록 브라우저 설정에서 하드웨어 가속을 켜세요.
• 원인을 찾기 위해 무거운 확장 프로그램을 하나씩 비활성화하거나 시크릿 창에서 테스트하세요.
• 배경 부하를 닫고 기기를 시원하게 유지하며 전원에 연결해 두세요.
• 디스플레이가 지원한다면 새로 고침 빈도를 높이고, 다시 테스트하여 브라우저가 이를 따라가는지 확인하세요.
• 흔히 합성기와 스크롤 개선을 함께 가져오는 브라우저와 그래픽 드라이버를 업데이트하세요.

여기서는 스크롤이 끊기는데 게임은 부드럽게 돌아간다면, 원인은 대개 하드웨어가 아니라 브라우저나 페이지입니다. 어디서나 움직임이 거칠다면, 스크롤 콘텐츠 없이 동일한 프레임 시간 측정기를 사용하는 버벅임 테스트로 그 문제를 따로 떼어 측정해 보세요.

자주 묻는 질문

여기서는 스크롤이 부드러운데 일부 웹사이트에서는 끊깁니다. 왜 그런가요?

부드러움이 기기뿐 아니라 페이지에도 달려 있기 때문입니다. 무거운 스크립트, 큰 이미지, 스크롤 이벤트 핸들러는 어떤 사이트를 스크롤하는 데 큰 비용이 들게 합니다. 여기서 깔끔한 결과가 나온다면 여러분의 브라우저와 하드웨어는 충분한 성능을 갖춘 것이고, 병목은 그 바쁜 사이트입니다.

새로 고침 빈도가 높으면 스크롤이 더 부드러워지나요?

브라우저가 매 새로 고침마다 프레임을 그려낼 수 있다면 그렇습니다. 120 Hz 화면은 60 Hz 화면보다 더 매끄럽게 미끄러지지만, 이는 페이지가 그 짧아진 프레임 예산을 계속 채우는 동안에만 그렇습니다. 그렇지 못하면 끊김을 그저 더 일찍 보게 될 뿐입니다.

같은 페이지가 왜 두 브라우저에서 다르게 스크롤되나요?

브라우저마다 화면을 합성하고 스크롤을 GPU에 넘기는 방식이 다르며, 확장 프로그램이 페이지에 연결되는 방식도 다릅니다. 동일한 하드웨어에서 한 브라우저는 페이지를 부드럽게 스크롤하는데 다른 브라우저는 끊기는 일은 흔합니다.

이것은 버벅임 테스트와 같은 건가요?

둘은 프레임 시간 측정기를 공유하지만, 이 테스트는 실제 스크롤 콘텐츠를 브라우저의 합성기를 통해 움직입니다. 이것이 대부분의 사람들이 신경 쓰는 일상적인 경우입니다. 버벅임 테스트는 스크롤 계층 없이 순수한 프레임 타이밍만 따로 떼어 측정합니다.

이 테스트는 제 모니터를 검사하나요, 브라우저를 검사하나요?

주로 여러분의 브라우저와 그것이 돌아가는 기기입니다. 행들은 브라우저의 렌더링 및 합성 경로를 거쳐 움직이므로, 결과가 나쁘면 대개 패널이 아니라 브라우저, 확장 프로그램, 시스템 부하를 가리킵니다. 물론 디스플레이가 상한선을 정합니다 — 60 Hz 화면은 120 Hz 화면만큼 부드럽게 스크롤할 수 없습니다 — 하지만 새로 고침 빈도가 충분하다고 가정하면, 이 테스트는 소프트웨어가 얼마나 잘 따라가는지를 판단하는 것입니다.

부드러운 스크롤 설정과 고주사율 스크롤

대부분의 브라우저와 운영 체제는 각 스크롤 단계를 툭 건너뛰지 않고 애니메이션으로 처리하는 부드러운 스크롤 옵션을 제공합니다. 이것은 움직임을 더 부드러워 보이게 하지만, 브라우저가 그릴 수 없는 프레임을 만들어 내지는 못합니다 — 페이지가 무거우면 부드러운 스크롤은 그저 끊김을 애니메이션으로 보여 줄 뿐입니다. 진짜 이득은 높은 새로 고침 빈도와, 그것을 따라갈 만큼 가벼운 페이지가 짝을 이룰 때 나옵니다. 120 Hz 화면에서는 같은 움직임을 두 배 많은 프레임으로 표현하기 때문에, 단순한 페이지를 스크롤하는 것이 60 Hz보다 눈에 띄게 부드럽습니다. 이 테스트는 여러분의 브라우저가 그 프레임들을 절반씩 떨어뜨리지 않고 실제로 온전히 그려내고 있는지 확인할 수 있게 해 줍니다.

모바일, 트랙패드, 휠 스크롤

어떻게 스크롤하느냐에 따라 느껴지는 것이 달라집니다. 마우스 휠은 이산적인 단계로 움직이므로, 부드러움은 브라우저가 그 단계 사이를 얼마나 잘 애니메이션하느냐에 달려 있습니다. 트랙패드나 터치스크린은 연속적으로 스크롤되며 합성기로 넘겨지는데, 이는 대개 가장 부드러운 경로입니다 — 하지만 프레임이 하나 떨어졌을 때 가장 확연히 드러나기도 합니다. 손가락이 화면이 맞춰야 할 기대치를 정해 놓기 때문입니다. 스크롤이 모든 것을 훑고 다니는 기본 방식인 만큼, 휴대폰과 태블릿은 여기에 특히 민감합니다. 페이지가 휠에서는 괜찮은데 손가락에서는 끊긴다면, 합성기가 메인 스레드를 기다리도록 강요당하고 있는 것입니다.

끊김 없는 스크롤이 좌우되는 요소

부드러운 스크롤은 하나의 사슬이며, 가장 약한 고리가 결과를 결정합니다. 페이지는 제때 그릴 수 있을 만큼 가벼워야 하고, 브라우저는 스크롤을 GPU에 넘겨야 하며, 시스템은 바쁘거나 성능을 제한하고 있지 않아야 하고, 디스플레이는 그 프레임들을 보여 줄 새로 고침 여유가 있어야 합니다. 이 테스트는 그 사슬 전체를 한 번에 작동시킵니다. 수치가 좋으면 모든 고리가 버티고 있는 것이고, 수치가 나쁘면 위의 섹션들이 어느 고리부터 살펴봐야 할지 좁혀 줍니다. 스크롤은 너무나 흔한 일이기에 작은 개선도 어디서나 값어치를 합니다 — 브라우저 업데이트, 확장 프로그램 비활성화, 하드웨어 가속 전환 하나만으로도 끊기던 결과를 깔끔하게 끌어올릴 수 있으며, 그 이후 방문하는 모든 사이트에서 그 차이를 느끼게 됩니다.

관련 디스플레이 및 움직임 테스트

스크롤은 움직임 성능의 한 가지 일상적인 단면일 뿐입니다. 다음의 짝을 이루는 도구들로 이어 가세요.

• 프레임 속도 테스트 (FPS 테스트) — 실시간 프레임 속도와 새로 고침 빈도를 측정합니다.
• 모션 블러 테스트 — 화면이 움직이는 디테일을 얼마나 번지게 하는지 확인합니다.
• 프레임 건너뜀 테스트 — 패널이 모든 프레임을 그리는지 확인합니다.
• 화면 찢김 테스트 — 프레임이 새로 고침에 정렬되어 있는지 확인합니다.
• 버벅임 테스트 — 소프트웨어에서 프레임 시간의 일관성을 측정합니다.