끊김, 팝업, 잘린 페이지 없이 웹사이트 스크롤을 화면 녹화하는 법. 페이지를 준비하고, 녹화 프로그램을 설정하고, 스크롤을 자동화한 뒤 앞뒤를 다듬습니다.
Aviral Lakhanpaul 업데이트3분 분량
먼저 페이지를 정리하고(쿠키 배너를 닫고 채팅 위젯을 끄고), 브라우저 창을 원하는 프레임 크기에 정확히 맞추고, 고정 프레임 레이트로 저장하는 녹화 프로그램으로 60 fps로 녹화하고, 스크롤은 손이 아니라 스크립트에 맡기세요. 아니면 녹화 프로그램을 건너뛰고, 스크롤을 대신 계산해 주는 렌더러에 URL을 넘기면 됩니다.
페이지를 녹화할 수 있습니다. 페이지가 스크롤되는 동안 화면 녹화 프로그램이 모니터에 보이는 것을 그대로 담는 방식입니다. 아니면 렌더링할 수 있습니다. 도구가 자체 브라우저에서 페이지를 열고 영상을 한 프레임씩 만들어 내는 방식입니다. 이 가이드는 첫 번째 방법을 다룹니다. 그쪽이 맞는 경우도 있기 때문입니다. 페이지가 공개되어 있고 스크롤만 필요하다면 링크로 만드는 단계별 가이드가 더 빠릅니다.
직접 녹화하는 것이 맞는 경우는 이렇습니다.
localhost에 있거나, 나만 접근할 수 있는 네트워크에 있을 때.망친 테이크 대부분은 녹화 버튼을 누르기 전에 이미 정해집니다. 다음을 한 번 해 두면 모든 테이크가 나아집니다.
html { scrollbar-width: none; }을 추가하면 됩니다.출력 화면비를 먼저 정하고, 브라우저 창을 그 비율로 만드세요. 16:10 화면 전체를 녹화한 뒤 9:16으로 잘라 내면 픽셀 대부분을 버리게 되고 흐릿한 결과가 남습니다.
레티나나 고해상도(High-DPI) 디스플레이는 창의 두 배 픽셀 크기로 녹화되는데, 이건 좋은 일입니다. 1080p로 줄여도 글자가 선명하게 유지됩니다.
| 설정 | 값 | 이유 |
|---|---|---|
| 프레임 레이트 | 60 fps | 스크롤은 끊임없는 움직임입니다. 30 fps에서는 프레임마다 두 배 멀리 건너뛰어 덜덜 떨리는 것처럼 보입니다 |
| 프레임 레이트 방식 | 고정(CFR) | 가변 프레임 레이트 파일은 편집 프로그램과 일부 플레이어에서 끊깁니다 |
| 캡처 영역 | 전체 화면이 아니라 브라우저 창이나 지정 영역 | 나중에 잘라 낼 일이 없으니 해상도를 잃지 않습니다 |
| 커서 | 무언가를 가리킬 때가 아니면 숨김 | 스크롤 중간에 멈춰 있는 커서는 실수처럼 보입니다 |
| 화질 | 높은 비트레이트, 편집할 거라면 무손실 | 스크롤되는 글자는 인코더에게 가장 어려운 대상입니다. 매 프레임 모든 픽셀이 움직입니다 |
Mac의 기본 녹화 기능(Shift ⌘ 5)과 QuickTime은 가변 프레임 레이트 파일로 저장합니다. macOS, Windows, Linux에서 무료인 OBS Studio는 원하는 고정 프레임 레이트로 녹화합니다. Windows에서는 캡처 도구와 Xbox Game Bar로도 녹화할 수 있지만, 가장 세밀하게 제어할 수 있는 것은 OBS입니다.
영상이 전문적으로 보일지 여부가 이 단계에서 갈립니다. 마우스 휠은 한 칸씩 끊어서 움직이고, 트랙패드는 튕기듯 밀렸다가 관성으로 미끄러지며, 둘 다 20초 동안 일정한 속도를 유지하지 못합니다. 원인은 스크롤 녹화가 끊기는 이유에서 자세히 다룹니다.
확실한 해결책은 브라우저가 스스로 스크롤하게 하는 것입니다. DevTools 콘솔에 붙여넣는 짧은 스크립트가 정해진 시간 동안 이징 곡선을 따라 페이지 전체를 스크롤합니다. 전체 코드와 속도 조절 방법은 영상용으로 웹사이트 자동 스크롤하는 법에 있습니다.
스크립트 안의 시간을 스크롤에 걸렸으면 하는 길이로 설정하세요.
맨 위에서 1~2초 정도 가만히 있는 구간을 두세요. 나중에 잘라 낼 수 있고, 멈춰 있는 첫 프레임은 더 좋은 썸네일이 됩니다.
페이지가 멈출 때까지 마우스나 트랙패드를 건드리지 마세요. 어떤 입력이든 스크립트와 충돌합니다.
움직임이 시작되는 첫 프레임과 끝나는 마지막 프레임에 맞춰 자르고, 원하는 만큼 앞뒤로 정지 구간을 남기세요.
제대로 하면 위 과정은 테이크 하나에 15분이 걸리고, 화면비가 다르면 또 한 번 찍어야 합니다. 페이지가 공개되어 있다면 렌더러가 URL 하나로 이 모든 것을 해 줍니다. 데스크톱, 태블릿, 휴대폰 너비로 페이지를 열고, 팝업을 없애고, 두 배 밀도로 페이지를 읽고, 24, 30, 60 fps로 고정해 움직임을 계산합니다. 다시 녹화하는 대신 설정 하나를 바꾸고 다시 내보내면 됩니다.
링크를 붙여넣고 스크롤을 무료로 미리 보세요. 가입하면 무료 크레딧 51개, 카드 등록 없음, 내보내는 영상 어디에도 워터마크가 없습니다.
OBS Studio입니다. macOS, Windows, Linux에서 무료이고, 고정 프레임 레이트로 녹화하며, 창 하나만 캡처할 수 있습니다. macOS와 Windows의 기본 녹화 기능도 쓸 수는 있지만, 프레임 레이트와 화질을 제어할 수 있는 폭이 좁습니다.
대개 가변 프레임 레이트 파일이거나, 30 fps로 녹화했거나, 매 프레임 움직이는 글자에 비해 비트레이트가 너무 낮기 때문입니다. 높은 비트레이트의 고정 60 fps로 녹화하고, 스크롤은 휠 대신 스크립트에 맡기세요.
녹화하면서 스크롤하세요. 속도가 일정하도록 스크립트를 쓰는 것이 가장 좋습니다. 화면 녹화 프로그램은 매 순간 창 안에 있는 것만 담을 수 있으므로, 영상의 길이는 페이지가 얼마나 빨리 움직이느냐로 정해집니다.
