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

비디오 컴포넌트를 추가하는 방법

1. 상단 메뉴에서 [+] Insert 버튼을 클릭

2. Media 섹션으로 이동

3. 원하는 비디오 컴포넌트를 캔버스로 드래그

사용 가능한 컴포넌트에는 기본 Video 컴포넌트, YouTube 컴포넌트,Vimeo 컴포넌트가 있습니다. 어떤 컴포넌트를 선택하느냐에 따라 설정할 수 있는 옵션이 달라집니다.

Video 컴포넌트 상세 설정

Framer에서 비디오를 삽입한 후, 오른쪽 패널에서는 다양한 속성을 조절해 원하는 형태로 구성할 수 있습니다. 각 항목은 실제 사용자 경험에 직접적인 영향을 주는 요소들이므로, 어떤 설정이 무엇을 의미하는지 정확히 알고 사용해야 합니다.

• Source (소스)

  Upload탭을 선택 후 Choose File 버튼을 클릭하면 로컬 파일에서 직접 영상을 업로드할 수 있습니다, .mp4, .webm 형식이 주로 사용됩니다. 외부 URL을 사용하고 싶다면 URL 탭을 선택하세요. YouTube 또는 Vimeo 영상 URL을 입력하면, 코드 작성 없이도 자동으로 영상이 임베드됩니다. 미리보기 썸네일도 자동 생성되므로 간편하게 사용할 수 있습니다.
  
  

• Playing (재생 상태)

  Yes로 설정하면 컴포넌트가 렌더링 되자마자 영상이 자동으로 재생되고, No로 설정하면 사용자가 플레이 버튼을 누르기 전까지 재생되지 않습니다.
  Note : 자동 재생 시에는 음소거 설정이 필수입니다.
  
  

• Radius (테두리 반경)

  영상의 모서리를 둥글게 처리할 수 있는 옵션입니다.
  숫자 입력 또는 가장 우측 아이콘을 눌러 전체 모서리 혹은 특정 모서리만 둥글릴 수 있습니다.
  
  

• Poster (썸네일)

  Yes를 선택하면 영상이 재생되기 전 보여줄 썸네일을 추가할 수 있습니다. Image > Upload 버튼을 통해 원하는 이미지를 삽입하세요, 포스터 이미지는 최소 60 x 30픽셀 이상이어야 합니다.
  Note : 썸네일은 검색 엔진 최적화(SEO)에 도움이 됩니다.
  
  

• Background (배경색)

  영상 주변의 빈 공간에 표시될 배경 색상을 지정합니다.
  
  

• Start Time (시작 지점)

  영상이 시작되는 시점을 퍼센트로 지정할 수 있습니다.
  (예: 10%로 설정하면 영상의 10% 지점부터 재생됩니다.)

  
  

• Loop (루프 재생)

  Yes로 설정하면 영상이 끝난 후 자동으로 다시 시작됩니다.
  짧은 데모 영상이나 반복적인 효과의 영상 소스에 사용할 수 있습니다.

  
  

• Fit (화면 비율 조정)

  영상이 컴포넌트 영역에 맞춰지는 방식을 지정합니다.
  
  

• Controls (재생 컨트롤)

  Show를 선택하면 재생/정지 버튼, 타임라인 등의 컨트롤이 표시됩니다.
  Hide를 선택하면 영상 컨트롤 인터페이스가 표시되지 않고, 사용자가 영상을 조작할 수 없게 됩니다.

  
  

• Muted (음소거)

  자동 재생을 사용하려면 Muted가 반드시 ‘Yes’로 설정되어야 하기 때문에 음성이 필요한 경우에는 영상 컨트롤러를 ‘Show’로 설정하여 사용자들이 직접 선택 할 수 있게 하세요.

YouTube 컴포넌트 설정 가이드

Framer에서는 YouTube 링크만 입력해도 손쉽게 영상을 임베드할 수 있습니다. 기본 설정 외에도 자동 재생, 썸네일 품질, 버튼 색상 등을 조정할 수 있어 다양한 상황에 맞게 커스터마이징이 가능합니다.

• Video

  유튜브 동영상의 URL을 입력하는 항목입니다. https://youtu.be/... 또는 https://www.youtube.com/watch?v=... 형식을 지원합니다.

  
  

• Autoplay (자동 재생)

  Off: 기본 설정. 사용자가 직접 재생해야 영상이 시작됩니다.
  On: 페이지 로드 시 자동 재생됩니다.
  단, 음소거(Mute)가 활성화되어 있어야 대부분의 브라우저에서 허용됩니다.
  Note : Framer가 YouTube에 대해 제공하는 연동 속성은 URL 정도에 국한되어 있어 Add Fetch 같은 연동 항목이 제한됩니다.

  
  

• Thumbnail (썸네일 품질)

  썸네일은 성능 최적화를 위해 사용되며, 영상 로딩 전 사용자에게 보여줄 미리보기 이미지입니다.
  옵션: Low Quality, Medium Quality (기본), High Quality, Off
Note : 성능이 중요한 페이지라면 썸네일을 설정해두는 것이 사이트 최적화에 유리합니다.

  
  

• Color (플레이어 색상)

  유튜브 플레이어 인터페이스의 색상을 선택합니다.
  옵션: Red(기본 유튜브 테마), White(밝은 인터페이스 테마)

Vimeo 컴포넌트 설정 가이드

Vimeo는 고화질 영상 콘텐츠나 디자인 중심의 포트폴리오 사이트에서 자주 사용됩니다. Framer에서는 Vimeo URL만으로 간편하게 임베딩할 수 있고, 여러 옵션을 통해 재생 방식도 세부적으로 설정할 수 있습니다.

• URL

  Vimeo 영상 링크를 입력하는 곳입니다.
  예: https://vimeo.com/123456789

  
  

• Controls (플레이어 컨트롤)

  Show: 재생/일시정지 버튼, 볼륨, 전체화면 등의 Vimeo 컨트롤이 표시됩니다.
  Hide: 인터페이스 없이 깔끔하게 영상만 보여줍니다. 포트폴리오, 아트웍 소개 등 비주얼에 집중해야 하는 경우에는 Hide로 설정하는 것이 유리할 수 있습니다.

  
  

• Autoplay (자동 재생)

  Yes: 페이지가 로드되는 동시에 영상이 자동으로 재생됩니다. 단, 음소거(Mute)가 활성화되어 있어야 대부분의 브라우저에서 허용됩니다.
  No: 사용자가 수동으로 재생해야 영상이 시작됩니다.

자동 재생 관련 주의사항

Chrome, Safari 등 대부분의 최신 브라우저는 소리가 포함된 영상의 자동 재생을 차단합니다. 따라서 자동 재생을 설정하려면 반드시 Muted 옵션을 함께 활성화해야 합니다. 소리가 필요한 영상의 경우, 사용자 클릭 등 명시적인 인터랙션 이후에 재생되도록 구성하는 것이 좋습니다.

Note : 영상이 뷰포트에 들어왔을 때 자동 재생되게 하는 설정도 가능합니다. Framer 공식 가이드 바로가기

동영상 접근성 고려사항

오디오가 없는 영상이라면, 청각 장애 사용자나 소리를 끈 상태로 웹사이트를 이용하는 사용자 모두에게 도움이 되기 때문에 영상 하단에 간단하게 텍스트 설명을 제공하는 것이 좋습니다.

Note : 실제 접근성 예시는 이 가이드라인을 참고하세요.

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