많은 회사들은 디자인 프로세스를 더 빠르게 하고 작업 전반의 일관성을 유지하기 위해 디자인 시스템을 사용합니다. Sketch와 같은 전통적인 UI 디자인 도구에서 디자인 시스템을 사용할 때의 단점은 라이브러리가 정적이라는 점입니다. 라이브러리 컴포넌트는 한 번에 하나의 상태만 표시할 수 있습니다. 팀과 함께 인터랙션 라이브러리를 만들고 공유하면, 디자인 시스템을 완전히 다른 수준으로 끌어올릴 수 있습니다. ProtoPie를 사용하면 완전히 인터랙티브한 컴포넌트를 만들 수 있다는 것을 이미 알고 계실지도 모릅니다. 인터랙션 라이브러리를 만들면 동적인 컴포넌트를 팀 전체와 공유하여 각자의 Pie에서 재사용할 수 있습니다.
준비할 것
하나 이상의 컴포넌트가 만들어진 Pie가 필요합니다. 직접 만들 수도 있고, 이 가이드를 따라 하려면 다음 예제 Pie를 사용하세요:
[Interaction Libraries Pie 파일]
라이브러리를 다른 팀원과 공유하려면 Team 또는 Enterprise 요금제에 가입되어 있어야 합니다. Individual 요금제 구독자는 개인 라이브러리만 만들 수 있습니다.
배울 내용
이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:
새 인터랙션 라이브러리를 만들고 컴포넌트를 게시하기
라이브러리를 팀과 공유하기
Component Guide로 라이브러리 컴포넌트 문서화하기
라이브러리에 추가 컴포넌트를 더해 게시하기
소요 시간: ≤30분
1단계: 컴포넌트가 들어 있는 Pie 열기
위의 예제 Pie를 여세요. 안에는 두 개의 로컬 컴포넌트가 있습니다: Button 컴포넌트와 Switch 컴포넌트입니다.
이러한 각 컴포넌트에는 인터랙티브하게 작동하도록 로직이 내장되어 있습니다. 예를 들어 Switch 컴포넌트를 더블클릭해 보세요. Switch 컴포넌트를 기능적이고 유연하게 만들어 주는 다양한 트리거와 응답이 내장되어 있습니다.
2단계: 새 인터랙션 라이브러리 만들기
로컬 컴포넌트 아래에는 세 개의 그룹이 더 표시됩니다:
팀 라이브러리: 팀과 공유할 인터랙션 라이브러리입니다. Team 및 Enterprise 요금제 구독자만 사용할 수 있습니다.
개인 라이브러리: 개인용으로만 사용하는 인터랙션 라이브러리입니다. 다른 사람은 볼 수 없습니다. Team 라이브러리와 같은 방식으로 작동하지만 팀과 공유할 수는 없습니다.
공용 라이브러리: ProtoPie Studio에 포함되어 있는 내장 라이브러리입니다. 이 부분은 조금 뒤에 더 자세히 설명하겠습니다.
이 튜토리얼에서는 팀 라이브러리를 사용합니다. Team Libraries 그룹 옆의 + 아이콘을 클릭하여 새 팀 라이브러리를 만드세요.
이제 라이브러리의 이름과 설명을 지정하고, 어떤 팀원과 공유할지 선택할 수 있습니다. 완료되면 생성을 클릭하세요.
새 탭이 열리며 방금 만든 라이브러리가 편집 모드로 표시됩니다. 씬 상단에 파란 막대가 나타나고 여기에 Library Edit Mode.라고 적혀 있으면 라이브러리를 편집 중인 것입니다.
3단계: 첫 번째 컴포넌트 추가하기
첫 번째 탭을 클릭해 예제 Pie 파일로 돌아가세요. 컴포넌트 패널에서 Switch 메인 컴포넌트를 클릭합니다. 마우스 오른쪽 버튼을 클릭하고 복사를 선택한 다음, 라이브러리 탭을 클릭하고 컴포넌트를 붙여넣으세요.
이제 Switch 컴포넌트가 라이브러리에 표시되어야 하며, 더블클릭해 보면 모든 트리거와 응답이 함께 따라왔다는 것을 확인할 수 있습니다.
4단계: Component Guide로 컴포넌트 문서화하기
다른 사람과 공유할 컴포넌트를 라이브러리에 추가했다면, 사용 방법을 알 수 있도록 문서화하는 것이 중요합니다. 이 단계는 완전히 선택 사항이며, 컴포넌트가 단순하다면 과할 수도 있습니다. 하지만 복잡한 인터랙션이라면 Component Guide가 다른 사람들이 컴포넌트를 쉽게 시작하는 데 큰 도움이 됩니다.
Library Edit Mode 화면에서 Switch 컴포넌트를 더블클릭해 편집하세요. 가장 오른쪽에는 Component Guide.라고 표시된 항목이 보일 것입니다. 그 옆의 연필 아이콘을 클릭하세요.
팝업 창이 열리면 이제 컴포넌트가 어떻게 작동하는지 설명할 수 있습니다. 일반적인 설명을 입력하세요. 다음으로 재정의할 수 있는 변수들이 나열되며, 각각의 사용 방법을 설명할 수 있습니다.
컴포넌트가 메시지를 받을 수 있다면 Message In 섹션에서 각 메시지가 어떻게 작동하는지 설명할 수 있습니다.
마찬가지로 컴포넌트가 메시지를 보낸다면 Message Out 섹션에 이를 문서화할 수 있습니다.
5단계: 라이브러리 게시하기
라이브러리를 게시하기 전까지는 변경 사항이 다른 사람에게 표시되지 않습니다. 아직 게시할 준비가 되지 않았다면 변경 사항을 저장만 할 수도 있지만, 인터랙션 라이브러리가 있는 곳이 클라우드이므로 이 변경 사항도 클라우드에 저장된다는 점을 알아두세요.
스테이지 위의 파란 막대에서 Publish 버튼을 클릭하세요. 아직 변경 사항을 저장하지 않았다면 먼저 저장해야 합니다.
이제 새로 게시한 변경 사항을 설명할 수 있습니다.
세부 정보를 입력한 다음 Publish를 클릭하세요.
화면 하단에 변경 사항이 성공적으로 게시되었다는 확인 메시지가 표시되어야 합니다. 이제 모든 팀원이 이 업데이트를 볼 수 있습니다! 이제 이 라이브러리의 편집을 마치고 닫아도 됩니다. File → Close.를 선택하세요.
새 라이브러리 사용하기
이제 라이브러리를 게시했으니 어떻게 사용할 수 있는지 살펴보겠습니다. 새 Pie를 만드세요. 아직 열려 있지 않다면 컴포넌트 아이콘을 클릭해 컴포넌트 패널을 여세요.
새 라이브러리는 이제 팀 라이브러리 아래에 표시됩니다. 라이브러리를 만들 때 공유한 모든 팀원은 자동으로 이 라이브러리에 접근할 수 있습니다.
라이브러리를 클릭하면 포함된 모든 컴포넌트를 볼 수 있습니다.
로컬 컴포넌트처럼 이 컴포넌트들을 Pie 안으로 드래그할 수 있습니다. Switch 컴포넌트를 씬으로 끌어오세요.
Component Guide를 기억하시나요? 여기서 볼 수 있습니다. 오른쪽 끝의 인스펙터 패널을 보세요. Component 레이블 옆에는 흰색 상자에 두 줄이 들어 있는 것처럼 보이는 아이콘이 있습니다. 그 아이콘을 클릭하세요.
여기에서 위의 4단계에서 추가한 모든 문서를 확인할 수 있습니다.
라이브러리에 컴포넌트 더 추가하기
라이브러리에 추가 컴포넌트를 넣으려면 위와 같은 단계를 그대로 따르면 됩니다. 하지만 먼저 다시 라이브러리를 편집하려면 어떻게 열 수 있는지 알아야 합니다. 로컬 버전의 Button 및 Switch 컴포넌트가 들어 있는 원래 Pie의 탭을 클릭하세요.
이제 Button 컴포넌트를 라이브러리에 추가해 보겠습니다. 이전과 마찬가지로 Button 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 복사를 선택하세요.
그다음 팀 라이브러리 그룹을 펼쳐서 방금 만든 새 라이브러리를 표시하세요. 라이브러리 위에 마우스를 올리면 줄임표 아이콘이 나타납니다. 그 아이콘을 클릭하고 라이브러리 편집을 선택하세요. 그러면 라이브러리가 다시 편집 모드로 열립니다.
이전과 같이 컴포넌트를 붙여넣으세요. 원하시면 Component Guide도 수정할 수 있습니다.
라이브러리에서 컴포넌트를 삭제할 수도 있습니다. 새 라이브러리가 만들어지면 ProtoPie는 기본적으로 빈 Component 1을 라이브러리에 추가합니다. 이를 제거하려면 마우스 오른쪽 버튼을 클릭하고 삭제를 선택하세요.
라이브러리에서 직접 컴포넌트를 만들 수도 있다는 점도 알아두세요. Pie 파일에서 복사해 올 필요는 없습니다. 라이브러리 이름 옆의 + 아이콘을 클릭해 새 빈 컴포넌트를 만들고, 더블클릭해 편집한 다음 마음껏 사용하세요!
마지막으로 변경 사항을 게시하세요.
공용 라이브러리
ProtoPie에는 바로 사용할 수 있는 몇 가지 내장 라이브러리가 포함되어 있습니다. 이러한 라이브러리는 컴포넌트 패널의 공용 라이브러리 그룹 아래에 표시됩니다. 팀 라이브러리와 완전히 같은 방식으로 사용할 수 있습니다. 라이브러리에서 컴포넌트를 직접 씬으로 드래그하기만 하면 됩니다.
*Material Design용 라이브러리와 iOS UI 키트도 찾을 수 있습니다. *
자체 컴포넌트 라이브러리와 마찬가지로, 작동 방식에 대한 자세한 내용은 컴포넌트 가이드를 참고할 수 있습니다.
식은 죽 먹기!
이제 여러분도 자신만의 인터랙션 라이브러리를 만들고 팀과 공유할 준비가 되었습니다. 축하합니다!
자료
조건으로 토글 버튼 만드는 방법: ProtoPie에서 조건이 토글 버튼을 만드는 데 어떻게 작동하는지, 그리고 그 외 많은 내용을 배워 보세요.
컴포넌트와 Send & Receive를 사용해 체크박스 폼에서 항목 선택 상태 확인하기: 이 레슨에서는 체크박스 컴포넌트를 효과적으로 사용해 프로토타입의 항목을 체크하고 체크 해제하는 방법을 배웁니다.
컴포넌트를 사용해 TV 컨트롤러 만들기: 이 튜토리얼은 키보드(왼쪽 및 오른쪽 화살표 키)로 조작할 수 있는 TV 컨트롤러를 만드는 데 도움이 됩니다.
더 빠른 워크플로를 위해 컴포넌트로 드롭다운 메뉴 프로토타입 만들기: ProtoPie의 컴포넌트를 사용해 반복 작업을 줄임으로써 드롭다운 메뉴를 더 빠르게 만들 수 있습니다. 또한 ProtoPie는 send 및 receive 기능을 사용해 입력 간 정보를 원활하게 공유합니다. 즐겁게 사용해 보세요!
