brunch

매거진 ProtoPie School

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by ProtoPie Aug 31. 2022

[ProtoPie School] 구축하기

Interaction Library를 구축해 효율적으로 협업해 보세요.

▶ 이전 학습내용이 궁금하다면? 여기를 클릭!

▶ 어떤 내용을 배울 지 한눈에 보고 싶다면? 여기를 클릭!

많은 기업들이 디자인 프로세스 가속화 및 작업 전반에 걸쳐 일관성을 보장하기 위해 디자인 시스템을 사용합니다. 일반적으로 Sketch와 같은 전통적인 UI 디자인 툴과 함께 디자인 시스템을 사용하는 경우, library component는 하나의 상태만 표시할 수 있습니다. 따라서, library가 정적이라는 단점이 있습니다.

ProtoPie를 사용하면 인터랙티브한 component를 만들 수 있음은 이미 잘 알려져 있습니다. Interaction Library는 동적 component를 팀 내에서 공유하거나 Pie에서 재사용이 가능하게 만들어, 디자인 시스템을 더욱 업그레이드 할 수 있습니다.

시작하기 전에

하나 이상의 component 요소가 생성된 Pie가 필요합니다. 가지고 있는 어떤 Pie 파일이든 사용 가능하나, 이번 레슨에서는 아래 Pie 파일을 사용할 예정입니다.

Interaction Library Pie 파일 받기

Interaction Library를 다른 팀 구성원과 공유하려는 경우, Pro Plan 혹은 Enterprise Plan에 가입해야 합니다. Free Plan 가입자는 개인 library만 사용이 가능합니다.

학습할 내용

학습 목표

▶ Interaction Library 생성 및 component 게시
▶ 팀과 Interaction Library 공유
▶ Component Guide를 사용하여 component library 구축
▶ Interaction Library에 component 추가 및 게시

소요 예정 시간: ≤30분

1. Component가 추가된 Pie 열기

위의 예제 Pie를 엽니다. 내부에는 Button component와 Switch component, 두 가지 로컬 component가 있습니다.

각 component에는 인터랙티브하게 만드는 로직이 내장되어 있습니다. 예를 들어 Switch component를 두 번 클릭하면, Switch component를 기능적이고 유연하게 만드는 모든 종류의 trigger 및 response를 확인할 수 있습니다.

2. 새 Interaction Library 생성하기

로컬 component 아래에 세 개의 그룹이 더 나열됩니다.

▶ Team Library: Team Library는 팀 내에서 공유 가능한 Interaction Library로, Pro 및 Enterprise Plan 구독자만 사용 가능합니다.
▶ Personal Library: Personaly Library는 개인적인 사용을 위한 Interaction Library입니다. Team Library와 동일한 방식으로 작동하지만, 공유가 불가능하기 때문에 작성자 외에 다른 사용자는 접근이 불가능합니다.
▶ Public Library: ProtoPie Studio에 기본적으로 내장된 library입니다. 이 부분에 대해서는 잠시 후에 더 자세히 알아보도록 하겠습니다.

이번 레슨에서는 Team Library로 작업을 진행하겠습니다.
Team Library 그룹 옆에 있는 + 아이콘을 클릭하여 새 Team Library를 생성합니다.
이제 library에 이름과 설명을 추가할 수 있으며, 공유할 팀 구성원을 선택할 수 있습니다. 작업이 완료되면 Create를 클릭합니다.

새로 만든 library가 편집 모드에서 새 탭이 열립니다.
Scene 위에 Library Edit Mode라는 파란색 막대가 표시되는 경우, library가 편집 중임을 알 수 있습니다.

3. 첫 번째 component를 추가하기

첫 번째 탭을 클릭하여 예제 Pie 파일로 돌아갑니다. Components 패널에서 Switch 버튼을 클릭하세요. 마우스 오른쪽 단추를 클릭하고 Copy를 선택하세요. 그 후, library의 탭을 클릭하고 component를 붙여 넣으세요.

이제 Switch component가 library에 나타나야 하며, 두 번 클릭하면 모든 trigger 및 response가 함께 추가되었음을 확인할 수 있습니다.

4. Component Guide를 사용하여 component library 구축

Library에 다른 사용자와 공유하려는 component를 추가한 후에는, library의 사용 방법을 아는 것이 중요합니다. 이 단계는 전적으로 선택 사항으로, component가 단순하다면 생략해도 됩니다.

그러나 좀 더 고도화된 인터랙션을 구현하는 경우, Component Guide는 다른 사용자가 component 사용을 시작하는 데 도움을 줄 수 있습니다.

Library Edit Mode에서, Switch component를 두 번 클릭하여 편집합니다. 맨 오른쪽에 Component Guide라는 항목이 표시될 때, 옆에 있는 연필 아이콘을 클릭합니다.

팝업 되는 창에서 이제 component의 전반적인 작동 방식을 작성하세요.
이후 대체될 수 있는 모든 variable이 나열되며, 대체 variable을 사용하는 방법을 기록합니다.

Component가 메시지를 받을 수 있는 경우, Message In 섹션에서 각 메시지의 작동 방식을 설명할 수 있습니다.

또한, Component가 메시지를 보낼 수 있는 경우, Message Out 섹션에서 이러한 메시지를 문서화할 수 있습니다.

5. Library 게시하기

Library에 대한 변경 사항은 게시 전까지 공개되지 않습니다. 또는 아직 게시할 준비가 되지 않은 경우 변경 내용을 저장할 수 있습니다. 그러나 Interaction Library는 클라우드에 있으므로, 변경 사항은 클라우드에 저장된다는 것을 기억하시기 바랍니다.

변경 내용을 아직 저장하지 않은 경우, 스테이지 위 파란색 막대에서 Publish 버튼을 클릭하세요.

이제 새로 게시된 변경 내용을 기록할 차례입니다.

세부 정보를 입력하고 Publish를 클릭하세요.

Publish 버튼을 클릭하면, 화면 하단에 변경 내용이 성공적으로 게시되었다는 확인 메시지가 표시됩니다. 이제 모든 팀원이 업데이트된 사항을 확인할 수 있습니다.

계속 편집을 진행하기 위해 Library를 닫으려면, File → Close를 클릭하세요.

새 Library 사용

이제 Library 게시를 완료했으므로, Library를 사용하는 법을 알아보겠습니다.
새 Pie를 만듭니다. 아직 Pie가 열려있지 않은 경우, component 아이콘을 클릭하여 component 패널을 열어주세요.

새로 생성된 Library는 Team Library 아래 나열되며, 처음 Library 생성 시 추가되었던 모든 팀 구성원은 자동으로 액세스가 가능합니다.

Library를 클릭하면 포함된 모든 component가 표시되며, 로컬 component처럼 Pie로 드래그할 수 있습니다. Switch component를 scene으로 드래그합니다.

Component에 대한 자세한 내용은 Component Guide에서 확인 가능합니다.
맨 오른쪽의 검사기 패널을 찾고, component 라벨 옆 두 줄이 있는 상자 아이콘을 클릭하세요.

클릭과 함께 4번에서 추가된 모든 문서자료가 표시됩니다.

Library에 더 많은 component 추가하기

Library에 component를 추가하려면 위에 언급된 단계를 반복하면 됩니다.
그러나 편집을 위해서는 library를 다시 여는 방법을 알아야 합니다.

기존 Pie 탭을 클릭합니다. 이때, Button 과 Switch component의 로컬 버전이 있는 Pie의 탭을 선택하세요.

Button component를 library에 추가해 봅시다.
이전과 마찬가지로 Button component를 마우스 오른쪽 버튼으로 클릭하고 Copy를 선택합니다.

이제 Team Library 그룹을 확장하여, 새로 생성한 library를 열어볼 차례입니다.
마우스를 library 위로 가져가면 '...' 아이콘이 표시되면, 해당 아이콘을 클릭하고 Edit Library를 선택하세요.

Edit Mode에서 library가 다시 열리면, 이전과 마찬가지로 component를 붙여 넣으세요.
필요한 경우, Component Guide를 편집하거나, library에서 component를 삭제할 수도 있습니다.
새 library가 생성되면 ProtoPie는 기본적으로 빈 Component 1을 library에 추가합니다. 제거하려면 마우스 오른쪽 버튼을 클릭하고 Delete를 선택하세요.

또한 언제든 library에서 component를 직접 만들 수 있어, Pie 파일에 component를 일일이 복사할 필요가 없습니다. Library 이름 옆 + 아이콘을 클릭하여 새로운 빈 component를 생성하고, 두 번 클릭하여 편집하는 등 자유롭게 탐색해 보세요!

모든 작업이 완료되면 Publish 버튼을 눌러주세요.

Public Library

ProtoPie에는 사용할 준비가 된 일부 내장 library가 함께 제공되며, 해당 항목은 component 패널의 Public Library 그룹 아래에 나열됩니다. Team Library와 동일한 방식으로 사용할 수 있으며, Library의 component를 scene으로 직접 드래그하기만 하면 됩니다.

또한 필요한 경우 Material Design 용 library와 iOS UI 키트도 사용해 볼 수 있습니다.
자체 component library와 마찬가지로, 작동 방식에 대한 자세한 내용은 component guide를 참조하세요.