웹사이트로 영상 만들기: 자동 스크롤하는 법

페이지를 열고 DevTools를 연 다음(F12, Mac에서는 ⌥ ⌘ I), 아래 코드를 Console에 붙여넣고 Enter를 누르세요. 녹화 프로그램을 켤 수 있게 3초를 기다린 뒤, 설정한 시간 동안 ease-in-out 곡선을 따라 위에서 아래까지 스크롤합니다.

const SECONDS = 20;        // 스크롤에 걸리는 시간
const WAIT = 3;            // 녹화 프로그램을 켤 시간

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto'가 중요합니다. 많은 사이트가 scroll-behavior: smooth를 설정해 두는데, 그러면 스크립트가 조금씩 움직일 때마다 각각이 별도의 애니메이션이 되어 끊김이 그대로 돌아옵니다.
• requestAnimationFrame은 화면에 프레임이 표시될 때마다 페이지를 한 번씩 움직이므로, 스크롤이 디스플레이가 허락하는 만큼 고르게 됩니다.
• 실행하기 전에 손으로 맨 아래까지 한 번 스크롤했다가 돌아오세요. 지연 로딩 이미지가 미리 자리를 잡아, 녹화 도중에 페이지 높이가 바뀌지 않습니다.
• Lenis나 Locomotive Scroll 같은 스무스 스크롤 라이브러리로 만든 사이트는 스크롤을 직접 처리하기 때문에 스크립트와 충돌할 수 있습니다. 페이지가 휘청거린다면 그 때문입니다.

스크립트를 써도 프레임 레이트는 여전히 녹화 프로그램과 내 컴퓨터에 달려 있습니다. 렌더러는 둘 다 없앱니다. Website Scroll Video는 페이지 전체를 한 번 읽은 뒤, 24, 30, 60 fps로 고정된 영상의 매 프레임마다 페이지가 어디에 있어야 하는지 계산합니다. 그래서 무거운 페이지라고 프레임이 빠지지 않고, 긴 페이지라고 속도가 흐트러지지 않습니다. 스크립트와 똑같이 시간(초)과 곡선을 정하고, 크레딧을 쓰기 전에 결과를 미리 볼 수 있습니다.

페이지 길이를 화면 수로 재세요. 전체 높이를 창 높이로 나눈 값입니다. 보통의 랜딩 페이지는 5~8화면입니다. 그다음은 이렇습니다.

1초에 한 화면보다 빠르면 글자가 번져 흐릿해집니다. 30 fps나 GIF에서는 더 그렇습니다. 3초보다 느리면 보는 사람의 집중이 흩어집니다. 특히 중요한 섹션이 하나 있다면 페이지 전체를 느리게 하기보다 그곳에서 멈추는 편이 낫습니다. Website Scroll Video에서는 멈춤을 최대 6개, 각각 0.5~5초로 넣을 수 있습니다.

• 부드럽게(ease-in-out). 멈춘 상태에서 출발해 일정하게 가다가 멈춥니다. 기본값으로 알맞습니다. 시작과 끝이 뚝 끊기지 않고 의도한 것처럼 보입니다.
• 글라이드(ease-out). 빠르게 출발해 미끄러지듯 멈춥니다. 트랙패드를 튕긴 것처럼요. 힘 있게 시작해야 하는 짧은 티저에 좋습니다.
• 균일. 처음부터 끝까지 같은 속도. 속도가 조금만 바뀌어도 눈에 띄는 배경용 반복 영상에 가장 좋습니다.
• 펄스. 한 섹션 움직이고, 멈추고, 다시 움직입니다. 누군가 사이트를 한 장씩 넘겨 보는 느낌이라 제품 투어에 어울립니다.

아래로 스크롤한 뒤 맨 위로 뚝 끊겨 돌아가는 영상은 반복될 때 튀는 장면이 보입니다. 대신 같은 곡선을 따라 아래로 내려갔다가 다시 위로 올라오게 하세요. 마지막 프레임이 첫 프레임과 같아져 이음매 없이 반복됩니다. Website Scroll Video에서는 재생의 ‘아래로 갔다가 위로’가 이것이며, 돌아가기 전 아래쪽과 다시 반복이 시작되기 전 위쪽에서 잠시 머물게 할 수도 있습니다.