ProtoPie Genie
ProtoPie Genie는 Figma 프로토타입에서 직접 다이내믹한 인터랙션을 가능하게 함으로써 디자인 품질과 워크플로우를 향상해 주는 Figma 플러그인입니다. ProtoPie Genie를 사용하면 대화형 요소를 빠르게 생성하고, 다양한 시나리오를 테스트하며, 디자인을 효과적으로 보여주는 매력적인 프로토타입을 제공할 수 있습니다.
개요
ProtoPie Genie는 다음과 같은 이점을 통해 다이내믹한 인터랙션 테스트를 간소화하고, 프로토타입 인도 기간을 단축하며, 프로토타입 환경의 격을 높여줍니다.
신속한 프로토타입 인도: 정적인 디자인을 인터랙티브 프로토타입으로 빠르게 변환합니다.
다이내믹 인터랙션 테스트: 다양한 시나리오와 인터랙션을 매끄럽게 테스트할 수 있습니다.
감격적인 프로토타이핑 테스트: 마치 실제로 구동되는 듯한 생동감 있는 프로토타입으로 팀, 고객 및 이해관계자에게 깊은 인상을 심어보세요.
시작하기
다음 지침에 따라 ProtoPie Genie 플러그인을 설치하세요.
Figma 커뮤니티 페이지를 방문하세요.
추후 작업을 위한 적절한 파일을 선택하려면 "Open in..."을 선택하세요.
“Run(실행)”을 클릭하여 “ProtoPie Genie”를 실행합니다.
또는 Figma에서 마우스 우클릭 후 플러그인 메뉴로 이동하여 "ProtoPie Genie"를 선택할 수도 있습니다.
주요 기능
ProtoPie Genie를 사용하면 프로토타입에 다양한 대화형 요소를 통합하여 사용자 참여와 몰입도를 높일 수 있습니다.
텍스트 입력 (Text Input): 프로토타입 내에서 상호작용하는 사용자 입력을 직접 캡처하고 실시간으로 표시합니다.
카메라 (Camera): 몰입감 높은 인터랙션을 위해 실시간 카메라 뷰를 통합합니다.
음성 (Voice): 직관적인 사용자 경험을 구현하기 위해 음성 인식(STT) 및 음성 명령 기능을 제공합니다.
지도 (Maps): 맞춤 가공이 가능한 지도를 디자인에 간편하게 통합할 수 있습니다.
웹 임베드 (Web embed): 사용자 경험을 풍부하게 하기 위해 비디오 등의 웹 콘텐츠를 삽입합니다.
인터랙티브 요소 추가하기
다음은 텍스트 입력, 카메라 뷰, 음성 인터랙션, 지도 및 웹 임베드 등의 주요 기능을 추가하는 단계별 방법입니다.
텍스트 입력 추가하기
사용자 인터랙션을 시뮬레이션하기 위해 텍스트 오브젝트를 인터랙티브한 입력 필드로 변환합니다.
순서:
입력 필드로 변환하고자 하는 텍스트 오브젝트를 선택합니다.
“Text input” 버튼을 눌러 값 소스(value source)를 설정합니다.
“Create interaction”을 선택해 입력 필드를 생성합니다.
출력 필드(output field) 섹션에서 “Add”를 클릭하여 출력 항목을 할당합니다.
출력을 표시할 텍스트 오브젝트를 선택합니다.
브라우저에서 해당 인터랙션을 미리 보세요.
카메라 뷰 추가하기
프로토타입에 실시간 카메라 뷰를 제공합니다.
순서:
카메라 영역으로 사용할 사각형 도형을 선택합니다.
전면 또는 후면 카메라 뷰를 선택합니다.
셔터 버튼을 위해 사각형 또는 원형 도형을 삽입합니다.
설정을 마무리하려면 ‘Create interaction’을 클릭합니다.
음성 인터랙션 추가하기
음성 인식 기능을 프로토타입 상에 구현합니다.
순서:
음성 수동 마이크 버튼으로 사용할 사각형 또는 원형 도형을 선택합니다.
STT를 위한 언어를 적용합니다.
바뀐 음성 텍스트를 담을 텍스트 오브젝트를 지정합니다.
‘Create interaction’을 클릭하여 음성 인터랙션을 최종 완성하세요.
실시간 지도 추가하기
사용자가 컨트롤하고 직접 상호 보완할 수 있는 대화형 실시간 지도를 제공합니다.
순서:
지도가 표시될 사각형 영역을 지정하세요.
지도에 노출할 위치를 검색하고 추가해 보세요.
지도 스타일 및 확대 레벨(zoom level)등을 조정할 수 있습니다.
‘Create interaction’을 누르면 지도 데이터의 삽입이 끝납니다.
웹 임베드 추가하기
동영상이나 기타 웹페이지 콘텐츠를 매끄럽게 프로토타입 안에 융합합니다.
순서:
웹 임베드를 올릴 사각형 도형을 선택하세요.
https://로 시작하는 URL 주소를 기입합니다. YouTube 또는 Vimeo 링크 주소를 적용한 경우, 플레이어 제어 옵션을 사용할 수 있습니다.‘Create interaction’을 누르면 웹 임베드가 추가 완성됩니다.
인터랙션 프리뷰 (미리보기)
ProtoPie Genie를 사용하면 Figma에서 디자인한 결과를 직관적으로 구현할 수 있습니다. 각 개별 인터랙션 혹은 여러 개의 복합적인 상호작용의 결과를 기본 브라우저나 지정 기기로 즉각 모니터링할 수 있습니다.
단일 인터랙션 프리뷰 방법
저장해 둔 인터랙션 리스트를 확인하기 위해 “Interactions” 탭으로 이동합니다.
지정한 결과를 기본 설정된 브라우저에서 보려면 “Preview”를 누르세요.
모바일 등의 다른 대상 장치에서 보고자 한다면, “Open in device”를 선택한 뒤 화면에 나타난 QR코드를 찍어 이동하세요.
멀티 인터랙션 프리뷰 방법
Figma 우측의 “Prototype” 탭에서 플로우 워크플로우를 생성하고 임의의 이름을 명명해 둡니다.
이후 실행 중인 ProtoPie Genie 플러그인 창으로 돌아와 “Interactions” 탭을 다시 엽니다.
동기화된 Flow 명칭을 올바르게 매치한 뒤 “Publish the selected flow”를 눌러 선택된 여러 개의 전체 흐름을 테스트합니다.
지원 대상 Figma 오브젝트 키트
현재 ProtoPie Genie는 다음과 같은 Figma 기본 오브젝트를 호환해 드립니다.
텍스트 (Text)
사각형 (Rectangle)
프레임 (Frame)
그룹 (Group)
컴포넌트 (Component)
인스턴스 (Instance)
불리언 (Boolean)
벡터 (Vector)
원형 (Ellipse)
지원 Figma 인터랙션
ProtoPie Genie 플러그인은 디자인에 사용된 입체적인 의미를 유기적으로 감지하기 위해 피그마 기본 프로토타입 트리거 옵션인 "On Click"과 액션 속성 "Navigate to" 인터랙션을 그대로 유지하여 프리뷰 화면에서 동일하게 동작될 수 있도록 보정합니다.
비지원 Figma 대상군 및 환경 제약
현재 제공되는 일부 기능상 피그마에 등록 가능한 오브젝트 및 정적 렌더링에 일부분 다음과 같은 한계점이 있을 수 있습니다.
비지원 대상 오브젝트 목록: Star, Line, Polygon, Video.
비지원 프로퍼티 속성 목록: Visibility (표시 여부), Lock (잠금), Position (좌표 위치값), Size (크기), Rotation (회전값), Opacity (불투명도), Constraints (제약 조건), Fill (단색 및 이미지 채우기), Borders (테두리), Shadow (그림자 효과).
현재 알려진 한계 사항(Known limitation): 이외 그라디언트 채우기, 기타 특수 필터 효과 (블러, 내부 그림자 효과 등), 오브젝트 회전 적용 여부, 폰트 출력 누락 이슈, 이미지 비율 오류 및 외부 비디오 렌더링을 완전히 보장해 드리지 못할 수 있습니다.
ProtoPie Genie Player 보조 앱
ProtoPie Genie Player는 Figma용 ProtoPie Genie 플러그인을 보완하기 위해 준비된 무료 플레이어 앱입니다. 제작 중인 고퀄리티 인터랙션을 실제 iOS 및 Android 태블릿 등의 각 디바이스 성능 그대로 느껴 보실 수 있습니다. 생성된 클라우드 프로토타입 접근, 로컬 기기로의 파일 세이브 등을 언제든 빠르고 쉽게 사용해 보세요!
출시된 전용 Player 앱을 더해 모바일 기기에서도 손쉽게 다이내믹 피그마 프로토타입을 실시간으로 함께 제어할 수 있습니다.
iOS 및 Android 기기용 ProtoPie Genie Player를 직접 다운로드하세요.
