[ProtoPie School] 시작하기
ProtoPie의 기본적인 사용법을 배워보세요.
ProtoPie에 오신 것을 환영합니다!
이 튜토리얼에서는 아래 3 단계로 훌륭한 아이디어를 실현하는 방법을 학습할 예정입니다.
▶ Figma, Sketch 또는 Adobe XD 디자인 가져오기를 통한 에셋 추가
▶ ProtoPie의 Trigger, Response 그리고 Object 모델을 사용하여 인터랙션 추가
▶ 프로토타입 테스트 및 클라우드에 업로드를 통한 공유
ProtoPie School
본격적으로 시작하기 전, 잠시 시간을 내어 ProtoPie에 대해 좀 더 자세히 알아보겠습니다. ProtoPie를 사용하면 코딩을 전혀 사용하지 않고도, 실제 디지털 프로덕트와 똑같이 작동하는 인터랙티브 프로토타입을 구현할 수 있습니다. 타 프로토타이핑 툴은 간단한 click-through 프로토타입을 구현하는데 훌륭한 기능들을 탑재하고 있습니다. 하지만, 사용성 테스트 목적 등을 위해 더욱 고도화된 기능이 필요하다면, ProtoPie의 Trigger, Response 그리고 Object 모델을 사용하여 현실과 같은 프로토타입을 구현할 수 있습니다.
ProtoPie는 처음에는 복잡해 보일수도 있지만, 걱정하지 마세요!
다음 주제로 넘어가기 전, 모든 내용들을 빠르게 습득할 수 있도록 작은 덩어리로 잘게 쪼개서 알려드릴 것입니다. ProtoPie School 시리즈를 통해, ProtoPie의 기본부터 고도화된 기능 구현하는 방법까지 학습할 수 있습니다.
자, 시작할 준비가 되셨나요? 이제 본격적으로 ProtoPie에 대해 하나씩 알아가보도록 하겠습니다.
1. 디자인 프로그램에서 에셋 가져오기
ProtoPie를 사용하면 기본적으로 사각형 및 타원과 같은 모양을 만들 수 있습니다. 하지만, Figma, Sketch 및 Adobe XD와 같은 다른 툴로 가져오면 더 쉽게 디자인을 가져올 수 있습니다.
아래 사용 가능한 플러그인을 확인하고, 각 플러그인의 지침에 따라 설치하세요. (영문)
▶ Figma
▶ Sketch
▶ Adobe XD
이번 튜토리얼을 진행하기 위해, Figma 플러그인을 설치하고 아래 Figma 용 ProtoPie UI 스타터 팩을 준비하세요.
Figma용 ProtoPie UI 키트 다운받기 XD
"Pie"는 ProtoPie가 만드는 파일 형식입니다.
이제 Figma로 돌아가 플러그인을 시작할 차례입니다. Figma에서 ProtoPie → Plugin을 선택하세요.
이제 가져올 항목을 선택할 차례입니다. Figma의 전체 아트보드는 ProtoPie에서 scenes로, 개별 레이어는 ProtoPie의 current scene으로 불러오게 됩니다.
Welcome Page and Home_Todo List 아트보드를 가져오세요.
Export를 클릭하면, Pie에 두 개의 새 scene 이 생성됩니다.
Scene의 모든 레이어는 Figma의 상태와 일치하도록 구성되고 이름이 지정됩니다.
2. ProtoPie의 Trigger, Response 그리고 Object 모델을 사용하여 인터랙션 추가
ProtoPie의 Trigger, Response 및 Object (TRO) 모델은 ProtoPie 작동 방식의 핵심입니다. TRO를 이해하면 ProtoPie에서 무한한 상상력을 펼칠 수 있습니다. Trigger는 일종의 이벤트로, 항상은 아니지만 일반적으로 사용자가 직접 입력을 하는 것입니다. Trigger의 한 예는 유저가 디바이스에서 버튼을 탭할때 Tap버튼을 누르는 것입니다. Response는 Trigger의 결과로 수행됩니다. 예를 들어, 버튼과 연결된 Tap trigger에는 다른 장면으로 이동하는 Jump response가 있을 수 있습니다. 마지막으로, Object 는 Trigger 및 Response에 관련된 레이어입니다.
ProtoPie의 "Trigger"
ProtoPie의 "Response"다음은 실제 예제입니다. 다음 버튼을 누를 때 두 번째 장면으로 이동해 봅시다.
1. UI의 오른쪽에 있는 조작 패널에서 Add trigger를 클릭합니다.
2. 드롭다운은 사용 가능한 모든 trigger 목록을 제공합니다. 이 중에서 Tap을 선택합니다.
3. 탭할 Object를 선택합니다. 이 예제에서는 Btn / Next라는 레이어입니다.
4.이제 이 trigger에 response를 추가해야 합니다. Tap trigger 아래의 + 아이콘을 클릭하세요. 클릭과 동시에 사용 가능한 모든 response를 보여주는 드롭다운 메뉴가 나타날 것입니다. 메뉴에서 에서 Jump response를 선택하세요.
5. Response를 구성할 차례입니다. Jump를 원하는 Scene을 선택하세요. (이 예제에서는 Home_Todo List 라는 Scene 입니다.) 또한, transition 구성도 가능합니다. 이제 이 예제에서는 오른쪽(Right)에서 왼쪽(Left)으로 Slide In 을 적용하겠습니다.
이번 기본 예제에서는 해당 Trigger 아래의 하나의 Response만 보이지만, Trigger 아래쪽에 있는 + 아이콘을 클릭하여 원하는 만큼 Response를 추가할 수 있으며, 각 Response는 다른 Object에서도 작동이 가능합니다. 또한, 사용자 이름 필드가 채워진 경우에만 두번째 scene 으로 이동하는 등의 인터랙션에 조건(condition) 추가도 가능합니다.
위와 같은 과정들을 통해, 아래와 같이 복수의 Trigger 및 Response가 추가된 인터랙션을 만들 수 있습니다.
이 이미지가 당장은 복잡해 보일 수 있지만, 하나씩 차근차근 학습할 예정이니 너무 걱정하지 마세요.
우선, 인터랙션을 테스트하여 우리가 원하는 방식으로 작동하는지 확인해 보겠습니다.
3. 프로토타입 테스트 및 클라우드에 업로드를 통한 공유
이제 첫 번째 인터랙션을 만들었으므로 테스트를 진행할 차례입니다.
오른쪽 상단의 Preview 아이콘을 클릭하면 Pie가 미리보기 모드에서 새 창이 열립니다.
장면에서 Next 버튼을 클릭하면, 선택한 transition을 사용하여 Home_Todo List Scene으로 이동합니다. 언제든지 미리 보기 창 왼쪽 아래에 있는 Reset 아이콘을 클릭하면 미리보기 상태를 초기화 할 수 있습니다.
PC에서 인터랙션을 작동하는 것을 확인했기 때문에, 이제 디바이스에서 직접 프로토타입을 사용해볼 차례입니다. 이를 위해서는 디바이스에 ProtoPie Player를 설치해야 합니다. 여기의 가이드를 따라 진행하세요.
장치에서 Pie를 미리 보려면 컴퓨터와 동일한 WiFi 네트워크에 연결하거나, USB 케이블로 컴퓨터에 연결해야 합니다.
컴퓨터의 ProtoPie Studio에서 오른쪽 상단의 Device를 클릭하면 QR 코드가 표시됩니다.
디바이스에서 ProtoPie Player 앱을 시작합니다. Scan QR Code를 탭하세요. QR 코드를 스캔과 함께 이전에 보였던 Pie가 디바이스에 로드됩니다.
이제 Pie와 인터랙션 할 수 있습니다. Scene에서 Next 버튼을 탭하여 Home_Todo List Scene으로 이동합니다.
Pie를 장치의 초기 상태로 재설정하려면 화면의 아무 곳이나 두 손가락으로 두 번 탭하세요.
Reset 옵션을 포함하여 Pie에 대한 옵션이 표시됩니다.
축하합니다! 첫 번째 파이를 만들었습니다.
이제는 다른 동료들과 작업을 공유할 시간입니다. 예를 들어, 작업물을 코딩할 엔지니어라 가정해 보겠습니다. Pie를 ProtoPie Cloud에 업로드하여 다른 사용자와 작업을 공유할 수 있습니다. 다른 사람들은 ProtoPie Studio를 설치할 필요없이 작업에 액세스하고 미리 볼 수 있습니다.
Pie를 업로드하려면 오른쪽 상단의 Upload 아이콘을 클릭합니다. Team 또는 Enterprise Plan을 사용중인 경우, team project 또는 personal space 중 업로드할 공간을 묻는 메세지가 표시됩니다. Individual Plan을 사용중인 경우 이 단계는 생략됩니다. Pie 업로드가 완료되면 다른 사람들과 공유할 수 있는 링크가 표시됩니다. 링크가 다시 필요한 경우, Upload 아이콘 왼쪽에 있는 Cloud 아이콘을 클릭하여 링크를 검색할 수 있습니다.
링크를 클릭하는 사람은 누구나 브라우저에서 Pie를 열 수 있으며, 미리보기가 내장되어 있어 직접 인터랙션을 해볼 수 있습니다.
또한 ProtoPie Player 앱 설치 후 Pie의 설명 아래에서 링크를 통해 확인할 수 있는 QR 코드를 스캔하면, 가지고 있는 디바이스에서 미리보기가 가능합니다.
Pie 작성자는 공유를 위한 몇 가지 옵션을 사용자 지정할 수 있습니다. 옆에 점 3개 아이콘을 클릭하면 몇 가지 추가 메뉴가 표시됩니다.
예를 들어, Access Settings를 클릭하여 Pie를 보거나 다운로드할 수 있는 사용자를 제한하거나, 암호를 관리할 수 있습니다.
수고 많으셨어요! :)
이번 튜토리얼에서는 다른 툴로부터 작업을 가져오는 법, ProtoPie의 Trigger, Response 그리고 Object 모델을 사용하여 인터랙션 추가, 그리고 ProtoPie Cloud에서 작업을 테스트하고 공유했습니다.
다음 레슨에서는 더 유익한 내용으로 찾아오겠습니다!
학습 자료 (영문)
▶ ProtoPie Ecosystem
▶ ProtoPie Player
