ProtoPie를 빠르게 익히고 바로 사용할 수 있도록 도와주는 ProtoPie School의 두 번째 편에 오신 것을 환영합니다. 이 글에서는 이전에 Interaction Recipes라고 불렸던 멋진 ProtoPie 기능인 Handoff를 다룹니다.
준비물
ProtoPie는 Basic 및 Free 플랜 사용자에게 상호작용 기록을 최대 1개까지 허용하여 이 기능을 더 쉽게 사용할 수 있게 했습니다. Pro 또는 Enterprise 플랜을 구독하면 팀과 무제한 기록을 녹화하고 공유할 수 있습니다.
원하는 Pie를 아무거나 사용해도 되지만, 저와 함께 따라 하고 싶다면 이 파일을 사용하세요:
배울 내용
이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:
Team Space에 Pie 업로드하기
상호작용 기록 녹화하기
상호작용 기록 검토하기
상호작용 기록을 팀과 공유하기
완료 시간: ≤15분
ProtoPie Handoff 기능이란?
ProtoPie Handoff 기능은 디자인과 개발 사이의 간극을 메워, 상호작용이 코드로 충실하게 변환되도록 해줍니다.
Handoff를 사용하면 프로토타입에서 사용자 흐름, 요소 동작, 상호작용을 보여주는 상호작용 기록을 만들 수 있습니다. 상호작용 기록은 단순한 전달을 넘어서는 것으로, 드래그 가능한 타임라인, 이징 매개변수, 시작 및 종료 속성, 정확한 타이밍까지 갖춘 완전한 인터랙티브 사양입니다. 이를 통해 추측이 사라지고, 개발자는 의도한 디자인을 프레임 단위로 명확하게 확인할 수 있습니다.
1단계: Pie를 ProtoPie Cloud에 업로드하기
ProtoPie Studio에서 Pie를 엽니다.
Studio 인터페이스 오른쪽 상단 모서리에 있는 Handoff 아이콘을 클릭합니다.
ProtoPie Cloud에 Pie를 저장하려면 Team Space 또는 Personal Space를 선택합니다. 상호작용 기록도 같은 위치에 저장됩니다.
업로드가 완료되면 Pie 클라우드 페이지로 이동합니다.
2단계: 상호작용 기록하기
클라우드 페이지 오른쪽 상단에서 Handoff 버튼을 찾습니다.
Record 버튼을 클릭해 녹화를 시작합니다.
엔지니어링 팀에 전달하고 싶은 특정 상호작용이 보이도록 Pie와 상호작용하세요. 끝나면 페이지 상단의 Stop 버튼을 클릭합니다.
상호작용 기록은 기본적으로 ‘New Recording’으로 저장됩니다. 연필 아이콘을 클릭해 Handoff 메뉴에서 이름을 변경할 수 있습니다.
이제 끝입니다! 단 몇 초 만에 첫 번째 상호작용 기록을 만들었습니다.
3단계: 상호작용 기록 검토하기
녹화를 중지하면 기록을 검토할 수 있습니다. 상호작용 기록은 기록한 모든 내용의 타임라인과, 타임라인과 동기화되어 업데이트되는 Pie의 시각적 미리보기로 구성됩니다.
타임라인의 상호작용은 Studio에서 보이는 방식과 동일하게 Triggers와 Responses로 그룹화됩니다.
💡 할 수 있는 몇 가지 작업:
애니메이션을 스크럽하기: 빨간색 거꾸로 된 물방울 모양 컨트롤 — 즉 플레이 헤드 — 을 좌우로 드래그하세요. 이렇게 하면 방금 녹화한 상호작용을 프레임 단위로 스크럽할 수 있습니다.
다른 속도로 애니메이션 재생하기: 애니메이션 재생 속도를 더 빠르게 또는 더 느리게 설정할 수 있습니다. 재생 속도 아이콘을 클릭하고 재생 속도를 선택하세요. 그런 다음
Play아이콘을 클릭해 애니메이션을 시작하면Pause아이콘으로 바뀌어 재생을 멈출 수 있습니다. 재생은 플레이 헤드의 현재 위치부터 이어집니다. 상호작용이 재생되는 동안에는 언제든지 플레이 헤드를 드래그하거나 타임라인 상단 바를 클릭해 위치를 다시 지정할 수 있습니다.인터페이스 크기 조정하기: 미리보기와 타임라인 사이의 구분선을 드래그하여 타임라인을 더 높게 또는 더 낮게 만들 수 있습니다.
특정 Response의 애니메이션 검사하기: 타임라인에서 아무 Response나 클릭하면 화면 오른쪽 상단에 인스펙터 창이 나타납니다. 여기에는 애니메이션 시작점과 종료점에서의 속성 값, 애니메이션 곡선의 이징 매개변수, 그리고 검사 중인 특정 속성의 "현재" 값이 표시됩니다. 현재 값은 플레이 헤드와 동기화되어 실시간으로 업데이트됩니다.
특정 Layer 검사하기: 레이어 스택은 미리보기 왼쪽에서 확인할 수 있습니다. 아무 레이어나 클릭하면 오른쪽의 인스펙터 창이 플레이 헤드와 동기화되어 실시간으로 해당 속성을 표시하도록 업데이트됩니다.
4단계: 상호작용 기록 공유하기
마지막으로, 상호작용 기록을 팀과 공유하고 싶을 것입니다. 이를 수행하는 방법은 두 가지입니다:
전체 Pie에 대한 Cloud 링크 공유. 이 링크가 있는 사람은 누구나 Handoff 버튼을 클릭하여 이 Pie에 대해 생성된 모든 상호작용 기록에 액세스할 수 있습니다. Cloud Pie 링크를 공유하려면 보라색 Share 버튼을 클릭하고 공유 옵션을 설정한 다음 Copy link.를 클릭합니다.
특정 기록으로 바로 연결되는 직접 링크 공유. Pie Cloud 페이지로 이동한 다음 Handoff 버튼을 클릭하고 목록에서 공유하려는 상호작용 기록을 선택합니다. 그것을 클릭하여 기록 페이지를 엽니다. 그런 다음 주소 표시줄에서 링크를 복사하거나 "링크 복사" 버튼을 클릭해 팀과 공유할 수 있습니다.
ProtoPie 상호작용 기록에 대한 팁
상호작용 기록은 Pie와 동일한 액세스 설정으로 보호됩니다. Pie 페이지에서 Share 버튼을 클릭하여 이 설정을 수정할 수 있습니다.
상호작용 기록을 만들 때, ProtoPie Cloud에 업로드한 Pie의 새 변경 사항을 반영하도록 기록이 업데이트되지는 않습니다. 이는 녹화 시점의 해당 버전의 Pie를 나타냅니다. 따라서 변경 사항이 특정 기록에 영향을 미친다면 새로 기록을 만들어 관련된 사람들에게 공유해야 합니다. 이전 기록은 자동으로 제거되지 않으며, 새로 만든 기록과 함께 목록에 표시됩니다. 그래서 기록 이름에 녹화한 날짜를 포함하는 습관을 들이면 좋습니다. 예를 들면 다음과 같습니다:
물론 이전 기록을 꼭 보관할 필요는 없습니다. 더 잘 정리하는 데 도움이 된다면 언제든 삭제할 수 있습니다. 하지만 주의하세요: 기록을 삭제하면 영구적으로 사라지며 복구할 수 없습니다.
단 몇 분 만에 ProtoPie의 Handoff 기능을 사용하여 개발 팀과 공유할 수 있는 완전한 인터랙티브 사양을 만드는 방법을 배웠습니다.
