페이드인, 등장 효과, 패럴랙스, 고정 섹션은 페이지가 실제로 스크롤될 때만 나타납니다. 이것들을 영상에 담는 법과, 대부분의 전체 페이지 캡처 도구가 놓치는 이유.
Aviral Lakhanpaul 업데이트2분 분량
스크롤 애니메이션은 페이지가 실제로 스크롤되는 동안에만 실행되므로, 전체 페이지 스크린샷 한 장 위를 이동하는 도구로는 보여 줄 수 없습니다. 스크립트로 페이지를 스크롤하면서 화면을 녹화하거나, Website Scroll Video의 ‘라이브 캡처’ 엔진처럼 스크롤 위치마다 페이지를 실시간으로 캡처하는 렌더러를 쓰세요. 움직임 없이 더 빠르게 얻고 싶다면, 캡처하기 전에 등장 애니메이션을 끝난 상태까지 진행시키면 됩니다.
대부분의 URL 영상 변환 도구는 두 단계로 작동합니다. 페이지의 아주 긴 스크린샷을 한 장 찍은 뒤, 그 위로 프레임을 내려 보냅니다. 빠르고 완벽하게 부드럽지만, 스크린샷은 한순간일 뿐입니다. 뷰포트에 들어오면서 서서히 나타나는 제목, 패럴랙스 이미지, 스크롤하는 동안 고정된 채 바뀌는 섹션, 올라가는 숫자 카운터처럼 스크롤 위치에 따라 움직이는 것은 모두 그 순간의 상태로 멈춰 있습니다.
페이지를 어떻게 만들었느냐에 따라 그 상태는 셋 중 하나입니다.
| 방식 | 애니메이션 | 스크롤 | 속도 |
|---|---|---|---|
| 등장 효과를 마무리한 정지 이미지 이동 | 끝난 상태로 보임 | 계산으로, 완벽하게 고름 | 빠름 |
| 스크롤 위치마다 실시간 캡처 | 방문자가 보는 그대로 재생 | 계산으로, 프레임 고정 | 훨씬 느림 |
| 스크롤 스크립트와 함께 화면 녹화 | 실시간으로 재생 | 내 컴퓨터가 허락하는 만큼 고름 | 실시간, 그리고 편집 |
애니메이션이 콘텐츠를 제자리로 데려오는 페이드나 슬라이드 같은 등장 효과뿐이라면, 대개 끝난 상태에서 페이지가 제대로 보입니다. Website Scroll Video에서는 빠른 ‘정적 팬’ 엔진과 함께 쓰는 ‘애니메이션 마무리’ 스위치가 이것입니다. 페이지를 읽기 전에 등장 애니메이션을 끝까지 진행시키므로, 보이지 않거나 반쯤 나타난 상태로 찍히는 것이 없고, 스크롤도 다른 영상처럼 부드럽고 렌더링도 빠릅니다.
대부분의 Framer와 Webflow 템플릿, 에이전시 사이트, 제품 출시 페이지처럼 움직임이 핵심이라면 엔진을 라이브 캡처로 바꾸세요. 이미지 한 장 위를 이동하는 대신 실제 브라우저를 위치마다 스크롤해 그 자리에서 캡처하기 때문에, 등장 효과, 패럴랙스, 고정 섹션, 스크롤 연동 변형이 모두 페이지에서와 똑같이 영상에서 재생됩니다.
렌더러가 접근할 수 없는 페이지라면 스크립트로 스크롤하면서 화면을 녹화하세요. 스크립트는 자동 스크롤 가이드에 있습니다. 주의할 점은 두 가지입니다.
window.scrollTo를 호출하는 스크립트로는 애니메이션을 건너뛸 수 있습니다. 사이트가 기대하는 방식으로 스크롤하거나, 라이브러리를 끄고 녹화한 뒤 그 차이를 감수하세요.링크를 붙여넣고 스크롤을 무료로 미리 보세요. 가입하면 무료 크레딧 51개, 카드 등록 없음, 내보내는 영상 어디에도 워터마크가 없습니다.
스크롤로 실행되는 등장 효과를 기다리던 요소인데, 도구가 페이지의 정지 이미지를 캡처하는 바람에 그 효과가 끝내 실행되지 않은 것입니다. 캡처 전에 애니메이션을 마무리시키거나, 실제 페이지를 스크롤하는 라이브 캡처 엔진을 쓰세요.
네. 페이지를 실제로 스크롤하는 방법이면 됩니다. 스크립트로 움직이는 화면 녹화나, Website Scroll Video의 ‘라이브 캡처’처럼 스크롤 위치마다 캡처하는 렌더러입니다.
영상 길이 내내 실제 브라우저를 실행해 두기 때문에 내보내기에 13크레딧이 더해집니다. 그 밖의 가격은 모두 같습니다.
