스크롤 녹화에서 마우스 휠 끊김과 고르지 않은 프레임 레이트를 피하는 법

일반적인 마우스 휠은 한 칸씩 걸리며 돌아가고, 한 칸마다 페이지에 정해진 거리만큼 움직이라고 요청합니다. 브라우저는 한 칸마다 짧은 애니메이션으로 부드럽게 처리하기 때문에, 휠을 계속 돌려도 결국 작게 가속했다 멈추는 움직임이 줄줄이 이어집니다. 화면을 볼 때는 눈이 그냥 넘어가 주지만, 큰 화면에서 재생되는 영상에서는 끊김으로 보입니다.

• 가장 좋은 해결책: 휠을 쓰지 마세요. 정해진 속도로 스크립트가 페이지를 스크롤하게 하세요. 자동 스크롤 가이드에 복사해 쓸 스크립트가 있습니다.
• 꼭 손으로 스크롤해야 한다면: 걸림 없이 도는 휠이나 트랙패드를 일정하게 천천히 끄는 편이 걸리는 휠보다 낫습니다. 하지만 20초 동안 속도를 유지할 수 있는 손은 없습니다.

macOS 스크린샷 도구와 QuickTime을 비롯한 많은 기본 녹화 기능은 화면에서 무언가 바뀔 때만 프레임을 기록합니다. 용량은 줄지만 프레임 사이의 간격이 들쭉날쭉해지고, 편집 프로그램과 일부 플레이어는 이를 잘 처리하지 못합니다. 고정된 타임라인에 맞추느라 프레임을 복제하거나 버리게 되고, 스크롤이 덜덜 떨립니다.

• OBS Studio처럼 고정 프레임 레이트로 저장하는 도구를 60 fps로 설정해 녹화하세요.
• 이미 가변 프레임 레이트 파일이 있다면 편집하기 전에 고정 프레임 레이트로 변환하세요. HandBrake의 “Constant Framerate” 옵션으로 할 수 있습니다.

스크롤은 매 프레임 모든 픽셀을 움직입니다. 30 fps에서는 60 fps보다 프레임마다 두 배 멀리 건너뛰고, 글자가 많은 페이지에서는 그 건너뜀이 눈에 보입니다. 24 fps는 영화의 프레임 레이트라 영화에는 맞지만, 어떤 속도로 스크롤되든 웹페이지에서는 셋 중 가장 덜 부드러워 보입니다.

움직임이 핵심이라면 60 fps로 녹화하고 내보내세요. 30 fps는 파일을 작게 해야 할 때만 쓰고, 그럴 때는 스크롤도 느리게 하세요. GIF는 대부분의 도구에서 프레임 레이트 상한이 낮으니, GIF 스크롤은 짧고 완만하게 만드세요.

디스플레이가 120Hz나 144Hz로 새로 고쳐지는데 60 fps로 녹화하면, 녹화 프로그램은 대략 두 프레임에 하나 정도만 남기고, 가변 주사율 디스플레이에서는 그마저도 고르지 않습니다. 녹화하는 동안 디스플레이를 60Hz로 설정하면 녹화와 일대일로 맞아떨어집니다. ProMotion이 있는 Mac에서는 디스플레이 설정의 주사율 항목에서 바꿀 수 있습니다.

• 지연 로딩 이미지는 화면에 들어오는 순간 디코딩되고, 그 작업이 프레임을 잡아먹습니다. 녹화 전에 맨 아래까지 스크롤했다가 돌아와 모두 불러와 두세요.
• 스크롤에 연동된 무거운 스크립트, 영상 배경, WebGL 효과가 있는 페이지는 컴퓨터에 큰 부담을 줍니다. 다른 앱과 브라우저 탭을 닫으세요.
• 녹화와 인코딩을 동시에 하면 페이지와 CPU를 두고 경쟁합니다. 녹화 프로그램에 하드웨어 인코더가 있다면 쓰세요.

위의 원인은 모두 실제 화면에서 움직임을 실시간으로 담기 때문에 생깁니다. 렌더러는 둘 다 하지 않습니다. Website Scroll Video는 페이지를 한 번 읽고, 이미지와 글꼴을 기다린 뒤, 매 프레임마다 페이지가 어디에 있어야 하는지 계산해서 그립니다. 계단식으로 움직이는 휠도, 맞춰야 할 주사율도, 프레임이 놓칠 마감 시간도 없으니, 페이지가 아무리 길거나 무거워도 출력은 24, 30, 60 fps로 고정됩니다.