목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Framer의 로딩 최적화 기능
Framer는 웹사이트 속도를 유지하기 위해 동영상의 로딩 최적화(Loading Optimization) 기능을 제공합니다.다만 현재는 동영상 파일 자체를 어떤 방식으로 변환하거나, 용량을 최적화 하지는 않습니다.
1. 로딩 최적화의 원리
동영상을 렌더링 하는 것은 특히 모바일 환경에서 기기 성능에 부담을 줄 수 있습니다. Framer는 동영상 재생을 지연시켜, 웹사이트의 배터리 및 데이터 사용량을 줄일 수 있도록 합니다.
최적화를 활성화 하기 위해서는 아래의 두 단계를 실행해주세요.
모든 동영상에 포스터(Poster)를 추가해주세요.
Note: 이는 SEO에도 긍정적인 영향을 줄 수 있어요.Framer의
Assets탭에서 Video 컴포넌트를 최신 상태로 유지해주세요.
Framer의 동영상 최적화는 아래와 같은 기능을 포함합니다.
포스터를 포함한 동영상의 지연 로딩(Lazy Loading)
포스터가 설정된 동영상은 뷰포트 근처에 도달할 때만 로드되기 때문에, 초기 로드 시간이 단축 됩니다. 예를 들어, 페이지 하단의 동영상은 사용자가 스크롤로 거의 도달했을 때 로드되므로 초기 페이지 속도가 훨씬 빨라질 수 있습니다.뷰포트 밖의 유사 GIF 동영상은 재생 일시정지
컨트롤 없이 음소거, 반복, 자동 재생되는 동영상(실제로 GIF처럼 작동하는 동영상)은 뷰포트를 벗어나면 일시 정지 시킵니다. 이를 통해 불필요한 리소스 낭비를 방지할 수 있습니다.
2. 동영상 파일 자체를 최적화하는 방법
업로드하기 전에 비디오 콘텐츠를 최적화기
Framer는 업로드된 동영상은 변환하지 못하기 때문에, 4K 영상을 올리면 작은 화면에서도 그대로 4K로 재생돼요.권장 파일 형식과 코덱 선택하기
AV1코덱은 일부 이전의 iOS나 MacOS 버전에서는 지원되지 않습니다. 대부분의 브라우저에서 안정적으로 재생하려면H.264코덱과.mp4확장자를 사용하는 것을 권장합니다.
Note: advanced users라면, ffmpeg 실행 시 위의 명령어를 추가해 브라우저 재생 속도를 높일 수 있습니다.
Framer가 동영상 파일을 직접 최적화하지 않는 이유
비디오 최적화는 복잡하고 비용이 많이 드는데요. 따라서 효과적으로 비디오 파일 자체를 최적화하려면, YouTube나 Vimeo처럼 대규모 미디어 처리 인프라가 필요합니다. 하지만 Framer는 이런 비디오 스트리밍 서비스를 구축하기보다, 웹사이트 제작 경험을 최대한 간결하고 빠르게 만드는 것에 집중하고 있습니다.
문서의 단계를 모두 따라도 문제가 계속된다면, Framer의 Contact 페이지를 통해 지원팀에 문의해보세요.
본 글은 Framer 공식 블로그의 ‘How videos are optimized in Framer’를 번역·각색한 콘텐츠입니다.
