ProtoPie에 오신 것을 환영합니다! 이 튜토리얼에서는 단 3단계로 멋진 아이디어를 현실로 만드는 시작 방법을 배워 보겠습니다:
Figma, Sketch 또는 Adobe XD에서 디자인을 가져와 에셋을 추가합니다
ProtoPie의 Trigger, Response & Object 모델을 사용해 인터랙션을 추가합니다
기기에서 프로토타입을 테스트하고 클라우드에 업로드하여 멋진 작업을 다른 사람들과 공유합니다.
ProtoPie란? 시작하기 전에 ProtoPie에 대해 조금 더 알아볼 시간을 가져보겠습니다. ProtoPie를 사용하면 실제 디지털 제품처럼 작동하는 인터랙티브하고 현실적인 프로토타입을 코딩 없이 만들 수 있습니다. 다른 프로토타이핑 도구는 화면 간 빠른 클릭형 프로토타입을 만드는 데는 좋지만, 사용성 테스트처럼 더 많은 기능이 필요할 때는 ProtoPie의 Trigger, Response & Object 모델을 통해 프로토타입의 모습과 동작을 실제와 거의 똑같이 구현할 수 있습니다.
ProtoPie School
ProtoPie는 처음에는 다소 어렵게 느껴질 수 있지만 걱정하지 마세요! 더 고급 주제로 넘어가기 전에 빠르게 익힐 수 있도록 모든 내용을 작고 소화하기 쉬운 단위로 나누어 설명하겠습니다. ProtoPie School 연재는 기초부터 시작해 ProtoPie의 가장 강력한 기능까지 다룹니다.
준비되셨나요? 시작해 봅시다!
1단계: 디자인 프로그램에서 에셋 추가하기
ProtoPie에서는 직사각형과 타원 같은 도형을 기본적으로 만들 수 있지만, 디자인을 ProtoPie로 가져오는 더 쉬운 방법은 Figma, Sketch, Adobe XD 같은 다른 도구에서 작업을 가져오는 것입니다. 아래에서 사용 가능한 플러그인을 확인하고 안내에 따라 설치하세요.
이 튜토리얼을 따라 하려면 Figma 플러그인을 설치하고 아래의 ProtoPie UI 스타터 팩 for Figma를 받아 보세요.
Figma 계정이 없다면 무료로 만들 수 있으니 따라 해 보세요. 설치한 후 ProtoPie Studio를 열고 New Pie.를 클릭하세요.
“Pie”는 ProtoPie가 만드는 파일 형식입니다.
이제 디자인 도구로 돌아가 그 도구에서 플러그인을 시작하세요. Figma에서는 Plugins → ProtoPie.를 선택합니다.
다음으로 가져올 항목을 선택하세요. Figma에서 전체 아트보드를 가져오면 ProtoPie에서 씬으로 가져와집니다. 개별 레이어를 선택하면 ProtoPie의 현재 씬으로 가져와집니다.
이 두 아트보드인 Welcome Page와 Home_Todo List를 가져와 보세요.
그런 다음 Export를 클릭하면 Pie에 두 개의 새 씬이 만들어집니다.
씬의 모든 레이어는 Figma에서의 상태에 맞게 정리되고 이름이 지정됩니다.
2단계: ProtoPie의 Trigger, Response & Object 모델을 사용해 인터랙션 추가하기
ProtoPie의 Trigger, Response & Object (TRO) 모델은 ProtoPie가 작동하는 핵심입니다. TRO를 이해하면 ProtoPie에서 만들 수 있는 것의 한계는 사실상 없습니다. Trigger는 어떤 종류의 이벤트로, 보통은 사용자의 직접 입력이지만 항상 그런 것은 아닙니다. 예를 들어 사용자가 기기에서 버튼을 탭할 때 Tap이 Trigger가 됩니다. Response는 Trigger의 결과로 이어지는 다음 동작입니다. 예를 들어 버튼에 연결된 Tap 트리거에는 다른 씬으로 이동하는 Jump 리스폰스가 있을 수 있습니다. 마지막으로 Object는 Trigger와 Response에 관여하는 레이어입니다.
ProtoPie에서의 "Triggers"
ProtoPie에서의 "Responses"
작동 예시를 보겠습니다. 사용자가 Next 버튼을 탭하면 두 번째 씬으로 이동하게 하고 싶습니다:
UI 오른쪽의 인터랙션 패널에서 Add Trigger를 클릭하세요.
드롭다운에 사용 가능한 모든 Trigger 목록이 표시됩니다. Tap을 선택하세요.
탭할 Object를 선택하세요. 이 예시에서는
Btn / Next라는 이름의 레이어입니다.이제 이 Trigger에 Response를 추가해야 합니다. Tap Trigger 아래의
+아이콘을 클릭하세요. 사용 가능한 모든 Response가 표시된 드롭다운이 나타납니다. Jump Response를 선택하세요.Response를 설정하세요. 이동할 Scene인
Home_Todo List.를 선택합니다. 추가로 전환 효과를 설정할 수 있습니다. 이 예시에서는 오른쪽에서 왼쪽으로 Slide In을 사용합니다.
이 기본 예시는 이 Trigger 아래에 Response가 하나만 있는 경우를 보여 주지만, Trigger 하단의 + 아이콘을 클릭해 원하는 만큼 추가할 수 있으며 각 Response는 서로 다른 Object에서 작동할 수 있습니다. 또한 인터랙션에 조건을 둘 수 있어, Your Name 필드가 채워져 있을 때만 두 번째 Scene으로 이동하도록 할 수 있습니다. 이런 방식으로 ProtoPie에서 모든 인터랙션을 만들게 됩니다.
곧 아래와 같이 여러 Trigger와 Response를 사용한 인터랙션도 만들 수 있게 됩니다:
이 이미지가 복잡해 보여도 걱정하지 마세요. 이후 글에서 다룰 예정입니다. 하지만 먼저 우리의 인터랙션이 원하는 대로 작동하는지 테스트해 봅시다.
3단계: 테스트 및 공유
이제 첫 번째 인터랙션을 만들었으니 테스트해 볼 차례입니다. 오른쪽 위의 Preview 아이콘을 클릭하세요. 그러면 Pie가 미리보기 모드로 열린 새 창이 뜹니다. 씬에서 Next 버튼을 클릭하세요. 선택한 전환 효과를 사용해 Home_Todo List 씬으로 이동하는 것을 볼 수 있을 것입니다. 언제든지 미리보기 창 왼쪽 아래의 Reset 아이콘을 클릭하여 미리보기를 초기 상태로 되돌릴 수 있습니다.
이제 작동하니, 기기에서 프로토타입과 직접 상호작용할 수 있으면 가장 좋습니다. 그러려면 기기에 ProtoPie Player 앱을 설치해야 합니다. 안내는 여기를 따르세요.
기기에서 Pie를 미리 보려면 컴퓨터와 같은 WiFi 네트워크에 연결되어 있거나 USB 케이블로 컴퓨터에 연결되어 있어야 합니다.
컴퓨터의 ProtoPie Studio에서 오른쪽 상단의 Device를 클릭하면 QR 코드가 표시됩니다.
기기에서 ProtoPie Player 앱을 실행하세요. Scan QR Code.를 탭합니다. 이전 단계에서 표시한 QR 코드를 스캔하면 기기에서 Pie가 로드됩니다.
이제 Pie와 상호작용할 수 있어야 합니다. 씬에서 Next 버튼을 탭해 Home_Todo List 씬으로 이동하세요.
기기에서 Pie를 초기 상태로 되돌리려면 화면 아무 곳이나 두 손가락으로 두 번 탭하세요. 그러면 Reset 옵션을 포함한 Pie의 옵션이 표시됩니다.
축하합니다! 첫 번째로 작동하는 Pie를 만들었습니다.
이제 당신의 작업을 다른 사람들과 공유할 시간입니다. 예를 들어, 당신의 결과물을 코드로 구현할 엔지니어에게 전달할 수 있습니다. Pie를 클라우드에 업로드하면 작업을 다른 사람들과 공유할 수 있습니다. 다른 사람들은 ProtoPie Studio를 설치하지 않아도 당신의 작업에 접근하고 미리 볼 수 있습니다.
Pie를 업로드하려면 오른쪽 상단의 Upload 아이콘을 클릭하세요. Team 또는 Enterprise 라이선스가 있다면 어떤 공간에 업로드할지 묻는 창이 나타납니다. 팀 프로젝트 또는 개인 공간 중 선택할 수 있습니다. Individual plan을 사용하는 경우 이 단계는 건너뜁니다. Pie 업로드가 완료되면 다른 사람들과 공유할 수 있는 링크가 표시됩니다. 나중에 링크가 다시 필요하면 Upload 아이콘 바로 왼쪽의 Cloud 아이콘을 클릭하여 다시 가져올 수 있습니다.
링크를 클릭하는 누구나 브라우저에서 Pie를 열고, 내장된 미리보기로 상호작용할 수 있습니다.
또한 아래의 Pie 설명에 있는 링크로 표시되는 **ProtoPie Player 앱을 설치하고 QR Code**를 스캔하면 기기에서도 미리 볼 수 있습니다.
Pie의 작성자로서 공유 옵션의 일부를 사용자 지정할 수 있습니다. 3점 아이콘을 클릭하면 추가 메뉴 항목이 표시됩니다:
예를 들어 Access Settings를 선택하여 비밀번호 보호를 설정하고, 누가 Pie를 볼 수 있고 다운로드할 수 있는지 제한할 수 있습니다.
스스로에게 박수를 보내세요!
이 튜토리얼에서는 디자인 도구에서 작업을 가져오는 방법을 배웠고, ProtoPie의 Trigger, Response & Object 모델을 사용해 인터랙션을 추가했으며, ProtoPie Cloud에서 작업을 테스트하고 공유했습니다. 다음 강의에서 만나요.
