[ProtoPie School] 협업하기
Interaction Recording에 대해 자세히 알아보세요.
▶ 이전 학습내용이 궁금하다면? 여기를 클릭!
▶ 어떤 내용을 배울 지 한눈에 보고 싶다면? 여기를 클릭!
ProtoPie를 더 쉽고 빠르게 알려주는 ProtoPie School의 두 번째 시간에 오신 여러분을 환영합니다.
이번 아티클에서는 기존에는 Interaction Recipe로 알려졌던 Interaction Recording에 대해 알아보겠습니다. 개발자가 뛰어난 디자인을 정확하게 코딩하려면, 디자인이 의도한 바를 정확히 알아야 합니다. Interaction Recording은 핸드오프 그 이상이자, 개발에 명확성을 제공하는 강력한 기능입니다. 애니메이션의 완전 인터랙티브한 스펙으로 ,애니메이션을 프레임별로 표시하는 스크러블 가능한 타임라인과 매개 변수, 시작 및 종료 속성, 타이밍 등을 완화하기 위한 정확한 값을 제공합니다. 따라서 개발자는 더 이상 추측할 필요없이 개발에만 집중할 수 있게 됩니다.
시작하기 전에
이번 레슨을 학습하기 위해서는 Pro Plan또는 Enterprise Plan에 구독이 되어야 합니다. Interaction Recording은 Free Plan에는 포함이 되어있지 않습니다.
또한 작업 가능한 Pie도 필요합니다. 원하는 어떤 Pie든 사용 가능하지만, 이번 레슨에서는 아래 Pie를 사용할 예정입니다.
Interaction Handoff Pie 파일 다운받기
학습 내용
학습 목표
▶ Pie를 Pro Space에 업로드
▶ Interaction Recording 생성
▶ Interaction Recording 내용 검토
▶ Interaction Recording 팀과 공유
소요 예정 시간: ≤15분
1. ProtoPie Cloud에 Pie 업로드
ProtoPie Studio에서 Pie를 열고, 인터페이스의 오른쪽 상단 모서리에 있는 Upload 아이콘을 클릭합니다. Pie를 업로드할 Pro Space를 선택합니다. 앞서 언급했듯, Interaction Libraries는 Free Plan 구독자는 사용이 불가합니다. 따라서 개인 스페이스에 Pie를 업로드할 경우 Interaction Libraries에 접근할 수 없습니다.
ProtoPie Cloud에서 Pie를 엽니다. 업로드가 완료되면 Studio에서 제공하는 링크를 클릭하면 됩니다.
2. Interaction Recording 생성
ProtoPie Cloud에서 Pie를 볼 때, 브라우저 창의 왼쪽에서 Interaction Recording이라는 패널을 찾으세요.
그런 다음, Record 버튼을 클릭하여 녹화를 시작하세요. Pie와 인터랙트하여, 개발 팀에 전달하려는 특정 인터랙션을보여줍니다. 완료되면 Pie 아래에 Stop 버튼을 클릭하세요.
짠! 단 몇 초 만에 첫 번째 Interaction Recording을 생성하셨습니다 :)
3. Interaction Recording 내용 검토
녹화가 중지되면 녹화된 내용을 검토할 차례입니다. Interaction Recording는 녹화된 모든 항목의 타임라인 그리고 타임라인과 동기화되어 업데이트되는 Pie의 시각적 미리 보기로 구성됩니다.
타임라인에서의 인터랙션은 ProtoPie Studio에서 보는 것처럼 trigger 및 response로 그룹화됩니다.
수행 가능 액션:
▶ 애니메이션 스크럽: 빨간색 화살표(재생 헤드)를 오른쪽과 왼쪽으로 드래그합니다. 이렇게하면 방금 프레임 단위로 녹화된 인터랙션을 볼 수 있습니다.
▶ 애니메이션 재생 속도 조정: 애니메이션을 더 빠르거나 느리게 재생하려면 Playback speed 아이콘을 클릭하고, 재생 속도를 선택합니다. 그런 다음 Play 아이콘을 클릭하여 애니메이션을 시작하면, 원할 때 재생을 중지할 수 있도록 Pause 아이콘으로 변경됩니다. 현재 재생 위치에서 재생이 다시 시작됩니다. 인터랙션이 재생되는 동안, 언제든 재생 헤드를 드래그하거나 타임라인의 위쪽 막대를 클릭하여 재생 헤드의 위치를 변경할 수 있습니다.
▶ 인터페이스 크기 조정: 미리보기와 타임라인 사이의 구분을 드래그하여 타임라인을 더 크거나 짧게 만들 수 있습니다.
▶ 특정 response의 애니메이션 검사: 타임라인에서 아무 Response나 클릭하면, 화면 오른쪽 상단에 검사기 창이 나타납니다. 여기에는 애니메이션의 시작점과 끝점에 있는 속성의 정확한 값, 애니메이션 곡선 완화 매개 변수 및 검사하는 특정 속성의 "현재" 값이 표시됩니다. 현재 값은 재생 헤드와 동기화되어 실시간으로 업데이트됩니다.
▶ 특정 레이어를 검사: 레이어 스택은 미리보기 왼쪽에서 사용할 수 있으며, 클릭과 동시에 오른쪽의 검사기 창이 업데이트됩니다. 따라서, 레이어의 속성이 재생 헤드와 동기화되어 실시간으로 표시됩니다.
ProtoPie는 Recording에 New Recording같은 기본 파일명을 제공합니다. 이후 Interaction Recording 패널에 이제 새 Recording 파일을 확인할 수 있을 것입니다. 연필모양 아이콘을 클릭하여 Recording 파일명을 더 의미있는 것으로 변경하세요.
4. Interaction Recording 내용 검토
마지막으로 Recording 파일을 팀과 공유할 차례인데요. 이 작업을 수행하는 방법에는 두 가지가 있습니다.
▶ 전체 Pie에 대한 Cloud 링크를 공유하기. 링크를 가진 모든 사용자는 이 Pie에 대해 생성된 모든 Interaction Recording을 왼쪽의 상호 작용 녹음 아래에 나열하여 볼 수 있습니다. 이렇게 하려면 보라색 Share 버튼을 클릭합니다. Access Settings에서 원하는 옵션을 구성한 다음, Copy Link를 클릭합니다.
▶ 특정 Recoding에 바로 접근 가능한 링크 공유. Pie를 여러번 녹화했는데, 의도한 대로 녹화가 되었는지 확인하고 싶다고 가정해 봅시다. 마지막 단계에서 Pie의 이름을 바꾼 것, 기억나나요? 이때 클릭했던 연필 아이콘 대신, 체인 링크처럼 보이는 첫 번째 아이콘을 클릭합니다. 그러면 해당 특정 Recording 파일에 직접 접근할 수 있는 링크가 복사됩니다. 그리고 복사된 링크를 개발자에 공유하기만 하면 끝!
요점: Interaction Recording은 Pie 자체와 동일한 액세스 설정으로 보호됩니다. Access Settings 버튼을 클릭하여 필요한 사항을 변경하세요.
Interaction Recording에 대해 다시 한 번 살펴보기
Interaction Recording 생성 시, ProtoPie Cloud에 업로드된 Pie의 녹화본은 업데이트된 변경사항을 반영하는 것이 아닌, 일정 버전의 Pie를 표시합니다. 따라서 변경 사항이 특정 녹화에 영향을 미치는 경우, 새 Recording 파일을 생성하고 이해 관계자들에게 공유하는 것이 좋습니다. 이전 항목은 자동으로 제거되지 않고, 새로 생성된 버전과 함께 나열됩니다. 따라서 아래 보여지는 것처럼, 녹화일자를 Recording 파일 제목에 포함하는 습관화하면 많은 도움이 될 것입니다.
오래된 버전을 유지할 필요는 없지만, 파일 정리를 위해 필요하다면 언제든지 삭제할 수 있습니다. 그러나, Recording을 삭제하면 영구적으로 삭제되어 복구가 불가능한 점은 기억해 주세요.
누구든지 쉽게 생성할 수 있는 Interaction Recording
단 몇 분 만에 개발 팀과 공유할 수 있는 인터랙션에 대한 인터랙티브한 스펙을 만드는 방법을 학습해 보았습니다.
이번 레슨이 도움이 되었기를 바라며, 다음에는 더 유익한 내용을 가지고 오도록 하겠습니다 :)
