Framer, Webflow, Wix 템플릿의 미리보기 영상 만들기. 게시된 사이트를 등장 효과가 재생되는 상태로 담고, 강점이 드러나는 섹션에서 멈추고, 마켓플레이스와 소셜 미디어용으로 내보냅니다.
Aviral Lakhanpaul 업데이트2분 분량
템플릿을 Framer의 무료 주소에 게시하고, 그 URL을 스크롤 영상 도구에 붙여넣은 다음, ‘라이브 캡처’로 바꿔서 Framer의 등장 효과와 스크롤 애니메이션이 방문자가 보는 그대로 재생되게 하세요. 히어로, 기능 그리드, 요금 섹션에서 잠깐씩 멈추고, 인터랙티브 카드에 호버를 넣은 뒤, 마켓플레이스용 16:9 MP4와 소셜 미디어용 4:5 또는 9:16 버전을 내보내면 됩니다.
Framer 템플릿은 움직이도록 만들어집니다. 섹션은 뷰포트에 들어오면서 서서히 나타나거나 미끄러져 들어오고, 요소는 스크롤에 따라 커지거나 패럴랙스로 움직이며, 카드는 포인터에 반응합니다. 화면 녹화는 이 모든 것을 담지만, 고르지 않은 휠 움직임과 애니메이션 세 개가 한꺼번에 실행될 때 컴퓨터가 놓치는 프레임까지 함께 담깁니다. 단순한 전체 페이지 캡처는 이 중 어느 것도 담지 못합니다. 정지 이미지에는 반응할 스크롤이 없기 때문입니다. 미리보기 영상에는 움직임과 고른 스크롤이 동시에 필요합니다.
템플릿이나 그 데모를 .framer.website 주소나 커스텀 도메인에 게시하세요. 비밀번호 없이 시크릿 창에서 열려야 합니다.
홈페이지에 주소를 붙여넣으세요. 엔진에서 ‘라이브 캡처’를 고르세요. 정지 이미지 위를 이동하는 대신 스크롤 위치마다 페이지를 캡처하기 때문에, 등장 효과, 스크롤 변형, 고정 섹션이 브라우저에서와 똑같이 재생됩니다.
대부분의 템플릿 홈페이지에는 12~20초가 알맞습니다. 무난한 움직임은 ‘부드럽게’이고, ‘펄스’는 섹션 단위로 움직이며 하나하나에서 멈추기 때문에 템플릿의 구조가 잘 드러납니다.
히어로, 벤토나 기능 그리드, 고객 후기, 요금표처럼 스크롤이 멈출 곳을 페이지에서 클릭하세요. 멈춤은 최대 6개, 각각 0.5~5초입니다. 영상이 다시 위로 스크롤된다면 ‘양방향’을 켜세요.
커서를 켜고, 호버를 추가한 뒤, 커서가 머물 카드나 버튼을 클릭하세요. 커서가 그곳으로 이동해 호버 효과가 재생되고, 0.5~5초 동안 머문 뒤 다음으로 넘어갑니다. 커서 모양은 macOS 스타일부터 단순한 점까지 여덟 가지입니다.
마켓플레이스용으로 1080p나 1440p의 16:9 MP4를 내보낸 다음, 기기를 ‘모바일’로 바꿔 X, Instagram, TikTok용으로 휴대폰 레이아웃의 9:16이나 4:5 버전을 내보내세요.
‘정적 팬’은 페이지를 한 번 읽고 그 위로 프레임을 내려 보냅니다. 빠르고 완벽하게 고르지만, 스크롤에 맞춰 움직이는 것은 페이지를 읽은 시점의 상태로 멈춰 있습니다. ‘애니메이션 마무리’를 켜면 등장 효과를 먼저 끝난 상태까지 진행시키므로, 반쯤 나타난 상태로 찍히는 것이 없습니다. ‘라이브 캡처’는 효과를 실제로 재생합니다. 렌더링 시간이 훨씬 길고, 내보내기에 13크레딧이 더해집니다.
링크를 붙여넣고 스크롤을 무료로 미리 보세요. 가입하면 무료 크레딧 51개, 카드 등록 없음, 내보내는 영상 어디에도 워터마크가 없습니다.
스크린샷 위를 이동하는 대신 실제 페이지를 스크롤하는 캡처 방식을 쓰세요. Website Scroll Video에서는 ‘라이브 캡처’ 엔진이 그렇습니다. 스크롤 위치마다 페이지를 캡처하므로 등장 효과와 스크롤 변형이 재생됩니다.
URL로는 안 됩니다. 먼저 무료 .framer.website 주소에 게시하세요. 검색에 노출되지 않게 둘 수도 있습니다. 그런 다음 그 링크를 쓰면 됩니다.
정확한 제한은 마켓플레이스의 업로드 안내를 확인하세요. 마켓플레이스에는 1080p의 16:9 MP4가 무난한 기본값이고, 소셜 미디어용으로 4:5나 9:16 버전을 따로 두면 됩니다.
