본문으로 건너뛰기

웹사이트 스크롤 영상 만드는 법

어떤 웹사이트든 부드러운 스크롤 영상으로 바꾸세요. 링크를 붙여넣고 길이와 화면비, 움직임을 정한 뒤 워터마크 없는 MP4, WebM, GIF로 내보내면 됩니다.

Aviral Lakhanpaul 업데이트3분 분량

짧은 답

Website Scroll Video 같은 URL 영상 변환 도구에 페이지 주소를 붙여넣고, 스크롤이 얼마나 걸릴지와 필요한 화면비를 고른 다음, 미리보기를 확인하고 내보내면 됩니다. 페이지는 서버의 실제 브라우저에서 열리고, 쿠키 배너는 제거되며, 스크롤의 모든 프레임이 계산됩니다. 그래서 화면을 녹화하지 않고도 고르게 움직이는 MP4, WebM, GIF를 얻을 수 있습니다.

시작하기 전에

필요한 것은 세 가지입니다. 공개 주소, 내보내기에 쓸 계정, 그리고 5분 정도의 시간.

  • 공개 URL. 비밀번호 없이 시크릿 창에서 열리는 페이지라면 무엇이든 됩니다. 스테이징 링크도 공개되어 있다면 괜찮습니다. 예를 들어 Framer의 .framer.website 주소나 Webflow의 .webflow.io 주소가 그렇습니다. localhost와 로그인이 필요한 페이지는 안 됩니다.
  • 계정. 페이지를 읽고 미리보기를 보는 것은 무료입니다. 내보내기에는 크레딧이 들고, 새 계정에는 카드 등록 없이 51크레딧을 한 번 드립니다.
  • 영상이 쓰일 곳에 대한 대략적인 생각. 릴스인지, 포트폴리오인지, 고객에게 보낼 메일인지. 이것이 화면비와 길이를 정하는데, 이 두 가지는 다시 내보내지 않고는 나중에 고칠 수 없는 유일한 설정입니다.

여섯 단계로 영상 만들기

  1. 링크 붙여넣기

    홈페이지의 입력란에 주소를 붙여넣고 Enter를 누르세요. 저희가 실제 브라우저에서 페이지를 열고, 글꼴과 지연 로딩 이미지를 기다린 뒤, 위에서 아래까지 읽습니다. 사용자의 화면에서 녹화되는 것은 아무것도 없습니다.

  2. 기기와 화면비 고르기

    데스크톱은 데스크톱 너비로 페이지를 읽고 16:9, 4:3, 1:1을 제공합니다. 태블릿과 모바일은 각각 그 너비로 읽기 때문에 사이트가 실제 반응형 레이아웃을 보여 주며, 9:16, 4:5, 1:1을 제공합니다. 정해진 규격에 맞춰야 한다면 정확한 크기를 직접 입력하세요.

  3. 길이 정하기

    길이는 2초부터 90초까지이며, 스크롤 속도도 함께 정합니다. 같은 페이지라도 6초면 티저가 되고, 30초면 둘러보기가 됩니다.

  4. 움직임 고르기

    ‘부드럽게’는 천천히 출발해 천천히 멈추고, ‘글라이드’는 빠르게 출발해 미끄러지듯 멈추며, ‘균일’은 한 가지 속도를 유지하고, ‘펄스’는 한 섹션씩 끊어서 내려갑니다. 영상이 이음매 없이 반복되어야 한다면 재생을 ‘아래로 갔다가 위로’로 설정하세요.

  5. 대기, 멈춤, 호버 추가하기

    선택 사항이지만, 완성도의 대부분이 여기서 나옵니다. 시작이나 끝에서 최대 10초까지 멈춰 있게 하고, 최대 6개 섹션에서 스크롤을 멈추고, 버튼과 카드에 커서를 가져가 호버 효과가 재생되게 할 수 있습니다.

  6. 미리보기 후 내보내기

    미리보기는 브라우저에서 재생되며 몇 번을 다시 보든 비용이 들지 않습니다. 마음에 들면 MP4, WebM, GIF로 내보내세요. 정확한 크레딧 비용은 누르기 전에 내보내기 버튼에 표시됩니다.

중요한 설정

편집기의 설정 대부분은 기본값으로 충분합니다. 다시 한번 볼 만한 것은 다음과 같습니다.

웹사이트 스크롤 영상 권장 설정
설정처음 값바꿀 때
길이페이지 한 화면당 약 2초티저라면(더 짧게), 문구를 읽어야 한다면(더 길게, 또는 멈춤 추가)
초당 프레임60 fps부드러움보다 파일 크기가 중요할 때. 30 fps는 프레임 수가 절반입니다. GIF는 24가 상한입니다
해상도1080p큰 화면에 띄우거나 나중에 잘라 쓸 때(1440p 또는 4K), 빠른 초안일 때(720p)
움직임부드럽게배경용 반복 영상일 때(균일), 섹션마다 멈춰야 하는 제품 소개일 때(펄스)
형식MP4투명 배경이나 더 작은 파일이 필요할 때(WebM), 메일 안에서 바로 재생되어야 할 때(GIF)
엔진정적 팬스크롤에 맞춰 나타나는 효과나 패럴랙스를 살려야 할 때(라이브 캡처)

페이지가 길고 위쪽 절반만 보여 주면 된다면, 미리보기 아래의 트림 핸들을 끌어 스크롤이 시작하고 끝나는 지점을 정하세요. 같은 길이에 더 짧은 구간을 스크롤하면 더 느리고 읽기 쉬운 스크롤이 됩니다.

비용

길이는 완성 영상 2초마다 1크레딧이 들고, 몇몇 설정은 고정 크레딧이 더해집니다. 더 높은 해상도, 더 높은 프레임 레이트, 라이브 캡처, 태블릿 또는 휴대폰 너비, 멈춤, 호버가 그렇습니다. 데스크톱 너비로 읽은 1080p, 60 fps의 10초 영상은 21크레딧이므로, 가입할 때 받는 51크레딧으로 두 번 내보낼 수 있습니다.

그다음부터는 크레딧을 팩으로 구매하며(5달러에 100크레딧, 12달러에 400크레딧 및 19달러에 900크레딧), 크레딧은 만료되지 않습니다. 구독은 없고, 어떤 영상에도 워터마크가 붙지 않습니다. 전체 표는 크레딧 사용 방식에 있습니다.

결과가 이상할 때

  • 등장 애니메이션이 빠졌거나 섹션이 비어 보입니다. 빠른 엔진은 페이지의 정지 이미지 위를 이동하기 때문에, 스크롤에 맞춰 실행되는 효과는 재생되지 않습니다. 엔진을 ‘라이브 캡처’로 바꾸거나, ‘애니메이션 마무리’를 켜서 애니메이션을 끝난 상태까지 진행시키세요. 스크롤 애니메이션 담기를 참고하세요.
  • 쿠키 배너나 채팅 버블이 남아 있습니다. ‘쿠키 배너와 팝업 제거’를 켜 두고, 놓친 것은 ‘요소 숨기기’에 CSS 선택자로 추가하세요. 자세한 내용은 녹화에서 팝업 없애기에 있습니다.
  • 페이지에 로그인 화면이나 오류가 나옵니다. 페이지는 공개되어 있어야 합니다. 저희가 대신 로그인할 수는 없고, 어떤 사이트는 자동화된 브라우저를 아예 거부합니다.
  • 모바일 영상이 찌그러진 데스크톱 페이지처럼 보입니다. 데스크톱에서 세로로 긴 화면비를 고르는 대신 기기를 ‘모바일’로 고르세요. 그래야 사이트가 휴대폰용 레이아웃을 보여 줍니다. 모바일 버전 녹화하기를 참고하세요.

내 사이트로 직접 해 보세요

링크를 붙여넣고 스크롤을 무료로 미리 보세요. 가입하면 무료 크레딧 51개, 카드 등록 없음, 내보내는 영상 어디에도 워터마크가 없습니다.

최근 검색

    자주 묻는 질문

    이어서 자주 묻는 것들에 짧게 답합니다.

    문의하기
    웹사이트 스크롤 영상을 무료로 만들 수 있나요?

    네. 새 계정에는 카드 등록 없이 무료 크레딧 51개를 한 번 드리며, 짧은 1080p 영상을 두어 번 내보내기에 충분합니다. 미리보기는 언제나 무료이고, 어떤 크레딧으로 결제했든 워터마크가 붙는 영상은 없습니다.

    무언가를 설치해야 하나요?

    아니요. 앱도 브라우저 확장 프로그램도 없습니다. 페이지는 저희 서버에서 열리고 캡처되므로, 노트북에서든 태블릿이나 휴대폰에서든 똑같이 작동합니다.

    아직 공개되지 않은 사이트로도 스크롤 영상을 만들 수 있나요?

    공개 주소가 있을 때만 가능합니다. 비밀번호 없이 열리는 미리보기나 스테이징 URL에 게시한 뒤 그 주소를 붙여넣으세요. 로컬 주소와 사설 네트워크에는 접근할 수 없습니다.

    웹사이트 스크롤 영상은 얼마나 길어야 하나요?

    2초부터 90초까지 만들 수 있습니다. 대부분의 랜딩 페이지는 8~15초가 보기 좋고, 소셜 미디어 티저는 6~10초가 적당하며, 포트폴리오 전체를 둘러보는 영상은 멈춤 몇 개를 넣어 30초까지 늘려도 됩니다.

    Website Scroll Video 로고. 브라우저 창 속 웹페이지 위에 놓인 재생 버튼.

    녹화에 쓰는 시간은 줄이고, 만드는 시간은 늘리세요.

    맞춤형 움직임과 똑똑한 컨트롤, 그리고 요즘 창작자를 위한 내보내기 옵션으로 사이트 녹화를 자동화하세요.