라이브러리는 오랫동안 요청되어 온 기능이었고, 마침내 제공되어 정말 반갑습니다. 이제 ProtoPie가 재사용 가능한 인터랙션의 공유와 관리를 어떻게 해결했는지, 그리고 이것이 조직에서 프로토타이핑을 다루는 방식을 어떻게 바꿀 수 있는지 살펴보겠습니다.
인터랙션 라이브러리 개요
ProtoPie의 인터랙션 라이브러리는 Figma와 Sketch 같은 다른 도구와 일부 특성을 공유하므로 금방 익숙하게 느껴질 것입니다. 다만 여기서 가장 큰 차이점은 이 컴포넌트들이 인터랙티브하다는 점입니다. 이를 통해 디자인 팀이 사용할 수 있는 완전히 동작하는 디자인 시스템을 구축할 수 있으며, 실제 코드 기반 디자인 라이브러리가 사용되고 관리되는 방식과 비슷합니다.
라이브러리를 보여주는 새롭게 개편된 컴포넌트 패널
그러나 몇 가지 차이점이 있습니다. 예를 들어 라이브러리 파일은 일반 Pie 파일처럼 로컬에 저장할 수 없습니다. 대신 ProtoPie Cloud에서 ProtoPie Studio로 동기화됩니다. Cloud에 변경 사항을 게시하면 인터랙션 라이브러리를 자신이나 다른 팀원이 사용할 수 있게 됩니다.
이 시점에서 인터랙션 라이브러리의 기능은 Free 요금제인지 Pro 요금제인지에 따라 다르다는 점을 언급할 가치가 있습니다. Free 요금제에서는 자신의 프로토타입 안에서 사용할 개인 라이브러리를 만들 수 있지만, 라이브러리 파일은 컴퓨터에 물리적으로 저장할 수 없기 때문에 다른 디자이너와 라이브러리를 공유할 수는 없습니다. 라이브러리를 공유하려면 Pro 요금제가 필요합니다.
이를 우회하는 방법으로는 ProtoPie 5.0의 새 라이브러리로 내보내기 기능을 사용해 컴포넌트 라이브러리를 일반 Pie 파일로 만드는 것이 있습니다. 이 방법을 사용하면 업데이트 연동성은 얻지 못하지만, 팀 밖에서도 라이브러리를 사용할 수는 있습니다. 프리랜서 디자이너에게는 분명 필요한 기능으로 보입니다.
인터랙션 라이브러리 사용하기
팀 계정과 연결된 모든 인터랙션 라이브러리는 새롭게 개편된 컴포넌트 패널에서 접근할 수 있습니다. 컴포넌트 패널에는 다음 기능이 있습니다:
로컬 컴포넌트
이 Pie에서 사용된 컴포넌트
팀 라이브러리
개인 라이브러리
공개 라이브러리
로컬 컴포넌트
이것은 버전 4의 현재 컴포넌트 패널과 비슷하다고 생각하면 됩니다. 여기 저장된 컴포넌트는 해당 컴포넌트를 만든 Pie에서만 접근할 수 있습니다.
Pie에서 사용된 컴포넌트
컴포넌트를 씬으로 드래그하면 이 섹션에 추가됩니다. 이를 사용하면 이미 Pie에서 사용한 컴포넌트를 빠르게 찾아 더 많은 인스턴스를 추가할 수 있습니다. 또한 컴포넌트를 Ctrl/오른쪽 클릭한 뒤 인스턴스로 이동.을 선택하여 해당 컴포넌트의 인스턴스로 이동할 수 있습니다. 현재 씬에 추가.도 사용할 수 있습니다.
팀 라이브러리
여기에는 모든 팀 라이브러리가 나열됩니다. 라이브러리를 탭하면 해당 라이브러리로 이동합니다. 메인 컴포넌트 목록으로 돌아가는 뒤로 가기 버튼도 보일 것입니다. +를 탭하여 새 팀 라이브러리를 만들 수도 있습니다.
개인 라이브러리
이 라이브러리들은 개인 요금제와 연결되어 있으며, 팀에 속해 있다면 개인 공간과 연결됩니다. 이 라이브러리들은 본인만 접근할 수 있습니다.
공개 라이브러리
이 라이브러리들은 ProtoPie에서 직접 제작하고 제공하며, Material Design UI Kit과 iOS UI Kit용 라이브러리로 구성됩니다. 이 라이브러리들은 잠겨 있기 때문에 직접 만든 인터랙션 라이브러리와는 다릅니다. 즉, 내부 동작 방식에는 접근할 수 없지만 자신의 프로젝트에서는 자유롭게 사용할 수 있습니다. 모든 컴포넌트와 마찬가지로 메시지를 전달하기 위해 Send와 Receive를 사용하므로, 이를 이용해 반응을 트리거하고 인터랙티브한 UI를 만들 수 있습니다. Send와 Receive에 대해 더 알고 싶다면 이전 글 ProtoPie 컴포넌트 101을 참고하세요.
라이브러리를 보여주는 개편된 컴포넌트 패널
슬래시를 사용해 컴포넌트를 그룹으로 정리할 수 있습니다. 예: Buttons/My Button.
각 그룹은 펼침 삼각형을 토글하여 접을 수 있습니다. 인터랙션 라이브러리를 썸네일 그리드 또는 목록으로 볼 수도 있습니다. 이름이 길다면 목록 보기가 유용한데, 그리드 보기일 때처럼 이름이 잘리지 않기 때문입니다.
모든 인터랙션 라이브러리에서 이름으로 항목을 검색할 수도 있습니다. 강조하자면 검색만 가능하고 필터링은 없습니다. 따라서 라이브러리 안으로 들어가 검색어를 입력하면 실제로는 모든 라이브러리의 결과를 받게 됩니다. 처음에는 혼란스러울 수 있으니, 현재는 그렇게 동작한다는 점만 알아두세요.
라이브러리 업데이트
컴포넌트 패널 안에는 목록/그리드 보기 전환과 핀 패널 버튼 사이에 위치한 라이브러리 업데이트 버튼이 있으며, 이는 안에 번개가 들어간 책 아이콘으로 표시됩니다. 이 아이콘을 탭하면 언제든 업데이트 패널을 열 수 있으며, 업데이트가 게시되면 이 아이콘에 은은하게 깜박이는 점이 나타나 업데이트가 있음을 알려줍니다.
사용 중인 라이브러리에 업데이트가 있음을 보여주는 깜박이는 빨간 점
이 패널을 열면 업데이트된 각 컴포넌트가 목록으로 표시됩니다. 실제로 프로토타입에서 사용한 변경된 컴포넌트에 대해서만 업데이트를 받게 됩니다. 다른 컴포넌트들은 자동으로 업데이트됩니다. 현재로서는 이 패널만으로 무엇이 변경되었는지 알 방법이 없습니다. 나란히 비교하는 기능도, 버전 관리 댓글도 없습니다. 라이브러리 접근 권한이 있다면 인터랙션 라이브러리를 열어 컴포넌트를 볼 수 있고, Cloud로 들어가 버전 노트를 확인할 수도 있습니다. 아마도 향후 업데이트에서는 노트에 접근할 수 있게 될 텐데, 저는 이것이 매우 유용할 것이라고 생각합니다. 모든 컴포넌트를 업데이트하거나 개별적으로 업데이트할 항목을 선택할 수 있습니다.
라이브러리 업데이트 패널
라이브러리 소유자와 멤버
클라우드에서 ProtoPie의 인터랙션 라이브러리는 프로젝트와 분리된 별도의 공간을 가집니다. 팀의 모든 구성원은 팀 공간에서 생성된 모든 라이브러리를 사용할 수 있습니다. 편집 권한을 주기 위해 팀 라이브러리에 팀원을 추가할 수 있습니다. 팀원이 목록에 추가되지 않았더라도 ProtoPie Studio의 컴포넌트 패널에서 인터랙션 라이브러리를 계속 사용할 수 있습니다.
ProtoPie Cloud의 라이브러리
속성 패널의 컴포넌트
컴포넌트를 선택하면 속성 패널에 몇 가지 항목이 추가된 것을 확인할 수 있습니다. 마스터 컴포넌트로 이동 기능 외에도 이제 컴포넌트를 교체할 수 있습니다.
컴포넌트 드롭다운을 탭하면 모든 라이브러리의 모든 컴포넌트와 현재 Pie에서 이미 사용된 컴포넌트에 접근할 수 있습니다. 필요한 항목을 찾는 데 도움이 되는 검색 기능이 있으며 중첩된 팝업을 통해 탐색할 수도 있습니다. 관련 컴포넌트 섹션에는 버튼처럼 같은 그룹의 컴포넌트가 표시됩니다.
그룹화된 컴포넌트는 쉽게 접근할 수 있도록 관련 항목으로 표시됩니다
컴포넌트를 교체할 때는 예를 들어 Sketch처럼 크기에 제약을 받지 않습니다. 즉, 어떤 컴포넌트든 다른 어떤 컴포넌트와도 교체할 수 있습니다. 크기가 같다면 완벽하게 교체되지만, 다르다면 교체된 컴포넌트의 크기로 변경됩니다.
컴포넌트 가이드
라이브러리 기능이 디자인 시스템 중심의 사고방식을 이끌어내고 있음은 분명합니다. 이러한 라이브러리의 사용자가 컴포넌트가 어떻게 작동하는지와 어떤 기능을 갖고 있는지를 이해할 수 있도록 컴포넌트 가이드가 추가되었습니다. 이 가이드는 컴포넌트 제작자가 자신의 컴포넌트가 어떻게 작동하는지 문서화할 수 있게 해줍니다. 다음 속성을 문서화할 수 있습니다:
설명
변수
메시지 입력
메시지 출력
컴포넌트 기능을 보여주는 가이드 패널
Send와 Receive
Send와 Receive를 함께 사용해 컴포넌트의 기능을 확장할 수 있습니다. 컴포넌트 밖으로 메시지를 보내고 Receive 트리거로 이를 가로채 원하는 응답을 추가할 수 있습니다. 예를 들어 스위치 컴포넌트를 만들고 스위치가 켜졌을 때 메시지를 보낼 수 있습니다.
반대로도 가능합니다. 메시지를 컴포넌트 안으로 보내고 Receive 트리거로 내부 인터랙션을 작동시킬 수 있습니다. 예를 들어 컴포넌트 안에서 탭 바 항목을 활성화할 수 있습니다. Send와 Receive에 대한 자세한 내용은 제 글 ProtoPie 컴포넌트 101을 참고하세요.
변수 재정의
또한 Send와 Receive에 더해 ProtoPie 5.0에서 새롭게 추가된 기능은 컴포넌트 내부 변수의 재정의를 가능하게 하는 것입니다. 변수 재정의는 ProtoPie의 속성 패널에서 설정할 수 있습니다. 이는 컴포넌트 내부에서 계산되어 사용되는 값 등을 설정하는 등 다양한 작업을 가능하게 하는 매우 강력한 기능입니다. 아래 예시에서는 다운로드 인디케이터 컴포넌트를 만들었고, 이 간단한 변수 재정의를 통해 다운로드 인디케이터 속도를 제어할 수 있습니다.
속성 패널에서 변수 재정의 사용하기
기존 컴포넌트 변환하기
이미 컴포넌트를 사용 중이라면, 저처럼 컴포넌트 묶음이 들어 있는 Pie 파일을 이미 가지고 있을 수도 있습니다. 그렇다면 좋은 소식이 있습니다. File 메뉴 아래에 새 라이브러리로 내보내기 기능이 있습니다. Pie를 연 상태에서 이 명령을 실행하면 새 라이브러리 파일이 생성되어 열립니다. 팀에서 사용할 수 있도록 하려면 다른 라이브러리와 마찬가지로 게시하면 됩니다.
마무리 생각
여기까지입니다. 이제 앱의 디자인 시스템을 관리하는 일이 믿을 수 없을 만큼 쉬워진, 판도를 바꾸는 기능입니다. 점점 더 많은 디자인 도구들이 협업 기능을 강화하는 방향으로 나아가고 있으며, 특히 인터랙션 디자인 도구의 경우 ‘일회성’ 프로토타입은 이제 완전한 기능의 인터랙션 디자인 툴킷으로 대체될 수 있습니다.
이미 확립된 제품을 대상으로 점진적인 로드맵에 맞춰 작업하고 있다면, 인터랙션 라이브러리는 ProtoPie를 제품 디자인 도구 모음에서 ‘필수’ 도구로 만들어 줍니다.
ProtoPie 사용 방법에 대한 영상은 제 YouTube 채널 ProtoPilot을 확인해 보세요.
