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

CMS 페이지에 동영상 추가하는 방법

Framer CMS에서는 유튜브, 비메오, 자체 호스팅, 직접 업로드한 동영상 모두 연동할 수 있습니다. 어떤 영상이든 CMS 데이터에 연결하면, 동적으로 관리하고 페이지마다 다르게 보여줄 수 있어요.

YouTube, Vimeo, 자체 호스팅 영상 추가하는 방법

1. CMS 필드 준비하기

CMS 컬렉션에 Plain text 필드를 추가 후 이름을 Video URL로 지정해주세요

2. 동영상 URL 입력하기

각 CMS 아이템에 맞는 영상 URL을 Video URL 필드에 입력해주세요. (영상이 없는 아이템은 공란)

3. 동영상 컴포넌트 삽입하기

상세 페이지 캔버스 Insert 메뉴에서 YouTube, Vimeo, 또는 Video 컴포넌트를 추가해 주세요.
URL 입력창 옆 + 버튼을 클릭해 Set Variable → Video URL을 선택하면, 각 CMS 아이템의 영상 링크가 자동으로 적용됩니다.

CMS에 직접 영상 파일 업로드하는 방법

1. 파일 업로드 필드 만들기

CMS 컬렉션에 File 필드를 추가해주세요. (mp4 파일 등을 직접 업로드할 수 있습니다.)

2. 영상 파일 업로드하기

각 CMS 아이템에 맞는 영상을 업로드해 주세요.
(단, 프레이머는 파일 용량 제한이 있으니 적절한 파일 크기를 준비해야 합니다.)

3. 동영상 컴포넌트 삽입하기

Insert 메뉴에서 Video 컴포넌트를 추가하고, Source를 Upload로 설정해 주세요.
URL 옆 + 버튼을 눌러 Set Variable → File을 선택하면 CMS에 업로드 된 영상이 자동으로 불러와집니다.

4. 동영상이 없는 경우 빈 공간 숨기기

동영상이 없는 CMS 아이템의 경우, 해당 영역이 빈 공간으로 남지 않도록 조건부 표시(Conditionals)를 설정하는 게 좋습니다.

동영상 컴포넌트를 선택한 후 오른쪽 Visible 항목에서 Set Variable → File → Is set을 설정하면, 영상이 있을 때만 해당 영역이 보이도록 깔끔하게 처리할 수 있어요.

이런 상황에 유용해요

• 블로그 상세 페이지에 영상 리뷰 추가하기

• 제품 상세 페이지에 사용법 영상 삽입하기

• 포트폴리오 페이지에 프로젝트 시연 영상 넣기

여러분이라면, 어떤 페이지에 이 기능을 적용하고 싶으신가요?

본 글은 Framer 공식 블로그의 ‘How to add video components to your CMS pages’ 를 번역·각색한 콘텐츠입니다.