본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

왜 영상을 외부에 호스팅해야 할까?

Framer 안에 직접 영상 파일을 넣으면 사이트가 무거워져서 로딩이 느려집니다. 특히 고해상도 영상일수록 로딩 문제가 더 커지게 되는데요, 이렇게 되면 방문자가 페이지를 열 때 답답함을 느낄 수 있습니다.

외부 플랫폼에 영상을 올려두면, 이러한 파일을 효율적으로 처리하여 로딩되는 시간과 전반적인 성능을 향상시킬 수 있습니다. 해당 접근 방식의 이점에 대한 자세한 내용은 해당 문서를 참조하시길 바랍니다. 이러한 방식을 사용했을 때 결과적으로 사이트 속도는 빨라지고, 방문자는 끊김없이 해당 사이트를 둘러볼 수 있게 됩니다.

추천하는 외부 영상 호스팅 툴

Framer 커뮤니티에서 자주 언급되는 서비스들을 소개해드리겠습니다.

Wistia

비즈니스 영상에 특화된 서비스로, 플레이어 커스터마이징과 시청 분석 기능을 제공해요.

사이트 바로가기

Gumlet

영상과 이미지를 자동 최적화해 빠른 전송 속도를 지원하는 서비스에요.

사이트 바로가기

Vidyard

마케팅 도구와 연동 가능한 영상 호스팅 서비스로, 세부 분석이 가능해요.

사이트 바로가기

Google Drive / Dropbox

전용 서비스는 아니지만, 영상 링크를 공유해 Framer에 붙여넣을 수 있어요.

사이트 바로가기

각 서비스는 목적과 예산에 따라 선택하시면 됩니다. 단순 공유 목적이라면 Google Drive도 충분하고, 본격적으로 비즈니스 마케팅을 한다면 Wistia나 Vidyard를 더 추천합니다.

Framer Video 컴포넌트와 연동하기

외부에서 영상을 준비했다면 Framer 안에서는 아주 간단하게 연결할 수 있습니다.

1. Video 컴포넌트 삽입

   Framer 캔버스에 Video 컴포넌트를 드래그 앤 드롭해주세요.

2. 디자인 커스터마이징

   컴포넌트의 크기, 스타일, 위치 등을 원하는 대로 조정해보세요.

3. 영상 URL 붙여넣기

   외부 호스팅 서비스에서 복사한 영상 링크를 Video 컴포넌트의 URL 입력란에 붙여넣으면 완료됩니다.

이 과정을 거치면 영상 파일 자체가 아닌 URL만 불러오기 때문에, 사이트의 성능을 해치지 않고 매끄럽게 영상을 재생할 수 있습니다. 영상이 많은 페이지라면 더욱 큰 효과를 보실 수 있을 겁니다.

만약 문제가 해결되지 않으셨다면, 문의 페이지를 통해 문의하시면 추가적인 도움을 받으실 수 있습니다.

본 글은 Framer 공식 블로그의 ‘How to host videos outside of Framer’를 번역·각색한 콘텐츠입니다.