시작하기 전에

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

모든 팀 또는 요금제를 사용하는 사용자는 프로토타입을 재생할 수 있습니다.

열람 가능 권한이 있는 파일이나 프로토타입을 가진 누구나 프로토타입을 재생할 수 있습니다. 프레젠테이션 보기에서 모든 사용자가 보기 옵션을 조정할 수 있습니다.

프로토타입은 사용자가 디자인과 상호 작용하며, 복제하며, 덕분에 개발로 넘어가기 전에 어떻게 작동하는지 보고 테스트할 수 있습니다. Figma에서는 캔버스에서 직접 프로토타입을 만듭니다. 그런 다음, 프로토타입 인터랙션과 애니메이션을 실행하여 확인할 수 있습니다.

프로토타입을 재생하기 전에, 프로토타입이 원하는 대로 재생될 수 있도록 디자인을 준비하세요.

그런 다음, 다음 중 프로토타입을 재생하고자 하는 방식을 선택하세요.

• 미리보기: 편집기에서 인라인 미리보기를 통해 프로토타입을 직접 재생합니다. 프로토타입을 만들면서 프로토타입이 작동하는 방식을 모두 같은 탭에서 확인할 수 있습니다.
• 프레젠테이션: 별도의 탭에서 프레젠테이션 보기로 프로토타입을 재생합니다. 프로토타입을 다른 사람과 공유하거나 특정 기기에서 어떻게 보이는지 확인하세요.

재생할 프로토타입 준비하기

캔버스에서 프레임과 연결이 설정된 방식은 프로토타입 재생에 영향을 미칩니다.

• 디자인은 미리보기 나 프레젠테이션을 위해 프레임 내에 있어야 합니다.
• 프로토타입 제작 연결이 있는 경우, Figma는 프로토타입을 실행할 때 연결된 프레임만 표시합니다. 각 화면을 클릭하거나 핫스팟을 조작하세요.
• 프로토타입 제작 연결이 없으면, 현재 페이지에서 프레임을 통해 탐색할 수 있습니다.
• 흐름 시작 지점을 설정하여 사용자의 여정을 어디서 시작할지 결정하세요. 여러 개의 흐름 시작 지점을 설정할 수 있습니다.
• 프레젠테이션 보기의 프로토타입 설정에서 기기 유형, 시작점, 배경색을 설정하세요.

프로토타입을 재생할 준비가 완료되면 미리보기 또는 프레젠테이션을 선택하세요.

프로토타입 미리보기

디자인과 함께 캔버스에서 직접 프로토타입을 재생하려면 인라인 미리보기를 사용하세요. 인라인 미리보기를 사용하면 디자인 변경 사항이 즉시 미리보기에 반영되어 실시간으로 변경 사항을 확인할 수 있습니다. 캔버스의 다른 프레임을 클릭하면 미리보기가 해당 프레임으로 이동합니다.

인라인 미리보기를 열려면 다음 중 하나를 수행하세요.

• 상단 도구 모음에서 미리보기를 클릭합니다.
• 흐름 시작 지점에서 미리보기 아이콘을 클릭합니다.
• 키보드에서 ⇧ Shift Space를 누릅니다.

인라인 미리보기에서 다음을 수행할 수 있습니다.

• 왼쪽 및 오른쪽 화살표를 사용하여 프로토타입을 앞뒤로 탐색합니다.
• 캔버스에서 마지막으로 선택한 프레임에서 프로토타입을 다시 시작합니다. R 키를 눌러 다시 시작할 수도 있습니다.
• 오버플로 메뉴를 열어 프로토타입의 다양한 크기 조정 옵션을 선택합니다.
• 프레젠테이션 보기에서 새 탭으로 프로토타입을 엽니다.
• 인라인 미리보기를 닫으려면 X를 클릭합니다.
• 미리보기 창의 가장자리를 클릭하고 드래그하여 미리보기의 크기를 조정합니다. ⇧ Shift를 누른 상태에서 비율을 유지하며 크기를 조정합니다.

오버플로 메뉴 옵션

인라인 뷰어의 오버플로 메뉴에는 프로토타입의 다양한 크기 조정 및 보기 옵션이 포함되어 있습니다. 사용 가능한 옵션은 프로토타입 기기가 선택되었는지 여부에 따라 다릅니다. 이 옵션 중 일부는 중복됩니다.

프로토타입 프레젠테이션

프레젠테이션 보기를 사용하여 새 탭에서 프로토타입을 재생하세요.  프로토타입 내에서 핫스팟과 상호 작용하거나 키보드 바로가기를 입력할 수 있습니다. 

데스크톱에서 프레젠테이션 보기로 프로토타입을 열려면 툴바에서 프레젠테이션을 클릭하거나 다음 키보드 단축키를 사용하세요.

• Mac:⌘ Command⌥ Optionreturn
• Windows: ControlAltenter

Figma는 선택한 배경색에 따라서 기기를 표시해 줍니다.

프레젠테이션 보기 레이아웃

프레젠테이션 보기에는 프로토타입과 상호작용할 수 있는 다양한 옵션이 포함됩니다.

옵션 메뉴

아이콘을 클릭하여 추가 설정을 위한 옵션 메뉴를 엽니다.

다음 옵션은 항상 사용할 수 있습니다.

옵션 메뉴에는 프로토타입 또는 기기 프레임의 표시 및 크기 조정을 결정하는 콘텐츠 및 기기 크기 조정 옵션도 포함됩니다. 사용 가능한 크기 조정 옵션의 종류는 프로토타입 기기 가 선택되었는지 여부에 따라 다릅니다:

• 기기 프레임 사용 안 함 ↓
• 기기 프레임 사용함 ↓

기기 프레임 없는 크기 조정 옵션

페이지에 프로토타입 기기를 선택하지 않은 경우, 옵션 메뉴는 다음과 같은 콘텐츠 크기 조정 옵션을 제공합니다.

프레임 크기에 따라 프로토타입은 특정 배율 설정으로 기본이 설정되고 옵션 메뉴의 추천 및 기타 배율 옵션 섹션에 다양한 옵션이 표시됩니다.

	기본 크기 조정 설정	다른 추천 및 크기 조정 옵션
첫 번째 프레임이 1024px보다 넓음	실제 크기 (100%)	반응형
첫 번째 프레임이 1024px보다 좁음	실제 크기 (100%)	너비와 높이 맞춤
모든 프레임이 16:9 형식이거나, 기기 유형이 프레젠테이션으로 설정되어 있음	화면 채우기	실제 크기 (100%)
기기 유형이 사용자 정의로 설정된 경우	너비와 높이 맞춤	화면 채우기 실제 크기 (100%)

기기 프레임 포함 크기 조정 옵션

기기 프레임이 있는 경우, 옵션 메뉴는 반응형 및 고정 크기 크기 조정 옵션을 제공합니다.

프로토타입 기기가 선택된 경우, 프레젠테이션 보기 하단에서 전환 기능이 사용 가능해져 현재와 유사한 프로토타입 기기를 선택할 수 있습니다. 또한, 기기 크기 조정 옵션도 선택할 수 있습니다:

프레임 정렬 및 탐색

프로토타입을 실행할 때, →, Space 또는 N을 눌러 다음 프레임으로 이동하고 ←를 눌러 이전 프레임으로 이동할 수 있습니다. 이 설정은 기본으로 활성화되어 있습니다.

다음 및 이전 프레임은 캔버스에서의 프레임 위치나 생성한 프로토타입 제작 연결에 따라 결정됩니다.

흐름 시작 지점이 있는 프로토타입

프로토타입에 시작점이 있으면, Figma는 프로토타입을 볼 때 방문한 프레임의 "히스토리"를 생성합니다.

• 이전 프레임이 있는 경우, ←는 이전 프레임으로 이동합니다.
• →를 누르면 다음 프레임으로 이동합니다. 히스토리가 없는 경우—예: ←사용 후—방문하지 않은 인접한 프레임으로 이동합니다.

흐름 시작 지점이 없는 프로토타입

프로토타입에 흐름 시작 지점이 없으면, Figma는 캔버스에서의 좌표에 따라 프레임을 정렬합니다. 먼저, 왼쪽에서 오른쪽으로 x 좌표에 따라, 그런 다음 위에서 아래로 y 좌표에 따라.

y 좌표가 어떤 방식으로든 오프셋되는 경우, 프레임이 순서대로 나타나지 않을 수 있습니다. 수정하려면 각 프레임 행에 대해 가로 정렬을 상단으로 맞추세요.

• ←는 이동 가능하다면 이전 프레임으로 이동합니다.
• →를 누르면 다음 프레임으로 이동합니다. 먼저 x 좌표, 그런 다음 y 좌표에 따라.

기기와 시작점을 설정하는 방법을 알아보세요 →