프로토타입에서 동영상 사용 – Figma Learn - 도움말 센터

Figma의 새로운 디자인인 UI3를 사용하는 경우 이 문서의 일부가 현재 제품에 있는 내용과 일치하지 않을 수 있습니다. 업데이트하는 동안 기다려 주셔서 감사합니다. Figma의 새 디자인에 대해 자세히 알아보기 →

시작하기 전에

이 기능을 사용할 수 있는 사용자

교육, 프로페셔널, 조직, 엔터프라이즈 팀의 파일에 지원됩니다.

유료 팀에 속한 사람은 누구나 파일에 동영상을 추가할 수 있습니다.

편집 가능 액세스 권한이 있는 사람은 누구나 파일에 있는 동영상을 편집할 수 있습니다.

프로토타입 제작이 처음이신가요? 프로토타입 제작 가이드를 확인하세요 →

프로토타입에 동영상을 추가하여 사용자가 사이트나 앱에서 동영상 재생 또는 미리 보기를 통해 경험할 수 있는 환경을 재현할 수 있습니다.

프로토타입 동영상은

.mp4, .mov, .webm 형식이 가능합니다.
최대 100MB의 크기일 수 있습니다.
모양 채우기이며, 그에 따라 작동합니다.
현재 Figma 모바일 앱에서는 지원되지 않습니다.

참고: 동영상은 유료 교육, 프로페셔널, 조직 팀의 파일에만 추가할 수 있습니다. 무료 스타터 팀의 공동작업자는 파일에 있는 기존 동영상을 편집할 수는 있지만 동영상을 업로드할 수는 없습니다.

디자인 파일에 동영상을 추가하면 기본 비디오 품질을 편집하거나 조정할 수 있습니다. 그런 다음 동영상에 상호 작용을 추가하여 프로토타입 제작을 시작할 수 있습니다.

파일에 동영상 추가

Figma에는 동영상에 대한 특정 레이어 유형이 없습니다. 대신 동영상은 채우기 유형입니다. 동영상은 채우기이므로 모든 벡터나 모양에 추가할 수 있습니다.

채우기 모달이 열려 있는 상태에서 사각형이 선택되었습니다.

디자인 파일에 동영상을 추가하는 방법에는 여러 가지가 있습니다.

A 컴퓨터에서 캔버스로 동영상 파일을 끌어다 놓습니다.
B 채우기 색상 선택기에서 비디오 가져오기를 사용합니다. 채우기 업로드 방법에 대해 자세히 알아보기 →
C 이미지/동영상 배치 도구를 사용하여 동영상을 일괄적으로 추가합니다. 이미지/동영상 배치 도구에 대해 자세히 알아보기 →
C 현재 파일의 다른 레이어나 다른 파일에서 동영상을 복사합니다.
D 클립보드의 동영상을 캔버스에 붙여넣습니다.

참고: 프로토타입에 애니메이션 GIF를 추가할 수도 있습니다. GIF는 프레젠테이션 보기에서 디자인과 프로토타입을 볼 때만 재생됩니다. 프로토타입에 애니메이션 GIF 추가 →

캔버스에 직접 동영상을 추가하면 Figma는 원본 파일의 크기로 캔버스에 개체를 만듭니다. 기존 개체에 동영상을 채우기로 추가하면 Figma는 원래 개체의 이름과 치수를 사용합니다.

오른쪽 사이드바의 Fill(채우기) 섹션에서 동영상 채우기를 보고 업데이트합니다. Fill(채우기) 섹션에서 동영상 채우기를 재생 및 미리 보거나, 특정 타임스탬프로 이동하거나, 동영상을 스크러빙할 수 있습니다.

채우기 모달이 열려 있고 동영상이 업로드되어 동영상 미리보기가 표시됩니다.

왼쪽 사이드바의 Layers(레이어) 패널에서 동영상 채우기가 적용된 레이어를 식별할 수도 있습니다. 동영상 채우기가 적용된 개체는 Layers 패널에 아이콘으로 표시됩니다.

동영상 편집

파일에 동영상을 추가한 후에는 다음과 같은 방법으로 동영상을 편집할 수 있습니다.

동영상으로 프로토타입 제작

프레임에 동영상을 추가한 후 오른쪽 사이드바의 Prototype(프로토타입)으로 전환합니다. 여기에서 동영상과 프레임 사이에 상호 작용을 만들 수 있습니다.

프로토타입 제작 자세히 알아보기 →

비디오 속성

Prototype(프로토타입) 탭이 선택되었습니다. Video(동영상) 섹션에서 Autoplay(자동 재생) 기능이 선택되어 있습니다.

동영상을 선택하면 Prototype(프로토타입) 탭에서 Video(동영상) 섹션을 사용할 수 있습니다. 이 섹션에서는 프로토타입에서 프레임으로 이동할 때 동영상의 동작을 설정할 수 있습니다.

동영상을 자동 재생하려면 박스를 체크합니다.
Loop(루프) 아이콘을 클릭하여 동영상을 반복합니다.
Sound(사운드) 아이콘을 클릭하여 동영상의 기본 사운드 설정을 켜거나 끕니다.

동영상 상호 작용

프로토타이핑 연결을 만들 때 상호 작용이 시작되는 원인을 결정하는 트리거와 트리거된 이벤트의 응답을 정의하는 액션이 있습니다.

동영상에 사용할 수 있는 상호 작용 트리거는 다음과 같습니다.

동영상 도달 시 - 동영상이 특정 타임스탬프에 도달하면 설정된 액션을 트리거합니다.
동영상 종료 시 - 동영상 재생이 완료되면 설정된 액션을 트리거합니다.

동영상에 사용할 수 있는 상호 작용 액션은 다음과 같습니다.

동영상 재생/일시 중지 - Play video(동영상 재생), Pause video(동영상 중지), Toggle play/pause(재생/중지 전환) 중 하나를 선택합니다.
동영상 음소거/음소거 해제 - Mute video(동영상 음소거), Unmute video(동영상 음소거 해제), Toggle mute/unmute(음소거/음소거 해제 전환) 중 하나를 선택합니다.
특정 시간으로 설정 - 동영상에서 이동할 타임스탬프를 설정합니다.
시간 앞으로/뒤로 이동 - Jump forward(앞으로 이동) 또는 Jump backward(뒤로 이동)를 선택한 다음 동영상에서 앞으로/뒤로 이동할 시간(초)을 설정합니다.

동일한 동영상이 있는 두 프레임 사이에 상호 작용을 만드는 경우, Interaction details(상호 작용 세부 정보) 패널에 Reset video state(동영상 상태 재설정) 토글이 있습니다. 이 기능을 켜면 동영상이 프레임 사이에서 처음부터 다시 시작됩니다. 동영상 상태 관리 자세히 알아보기 →

동일한 프레임 내의 동영상 상호 작용

동일한 프레임 내에서 만든 트리거를 기반으로 동영상과 상호 작용하고 프로토타입을 제작할 수 있습니다. 이는 대화형 동영상 플레이어 환경을 구축할 때 유용할 수 있습니다.

시작 개체에서 동영상 파일에 대한 연결을 만듭니다.
원하는 시작 액션을 설정합니다(예: On click(클릭 시)).
동영상에 대해 원하는 액션을 설정합니다(예: Mute/unmute video(동영상 음소거/음소거 해제)).

동영상 및 스마트 애니메이션

스마트 애니메이션을 사용하여 프레임 사이를 이동할 때 동영상의 진행 상황을 보존할 수 있습니다. 프레임을 입력하면 재생이 시작되고 동영상을 클릭하면 더 크게 볼 수 있는 새 프레임으로 이동하는 프로토타입을 만들고 싶다고 가정해 보겠습니다.

동일한 동영상 이름으로 두 프레임을 연결합니다. 동영상 레이어 이름도 일치하는지 확인하세요.
애니메이션 설정을 Smart animate(스마트 애니메이션)으로 설정합니다.
Interaction details(상호 작용 세부 정보) 패널에서 Reset video states(동영상 상태 재설정)을 선택 취소합니다.

동영상 및 인터랙티브 컴포넌트

인터랙티브 컴포넌트를 사용하여 마우스오버 시 재생 미리보기와 같이 단일 프레임에서 동영상 상호작용 프로토타입을 제작할 수 있습니다.

기본 및 마우스오버 상태에 대한 변형이 있는 컴포넌트를 만듭니다.
기본 상태에서는 자동 재생이 꺼져 있어야 하며, 마우스오버 상태는 자동 재생으로 설정되어야 합니다.
기본 변형에서 연결을 만들어 마우스오버 변형으로 변경하고, Reset video states(동영상 상태 재설정)를 선택 취소합니다.
컴포넌트의 몇 가지 인스턴스로 프레임을 만들고 동영상을 대체하여 컴포넌트를 재사용합니다.

더 많은 방법으로 플레이그라운드 파일을 사용하여 동영상으로 프로토타입을 제작해 보세요 →

···