최근 ProtoPie에서 팀 협업과 관련해 어떤 모범 사례가 있을지에 대한 논의가 있었습니다. ProtoPie의 강점이자 약점 중 하나는, Figma와 마찬가지로 같은 결과를 달성하는 방법이 여러 가지인 경우가 많다는 점입니다. 이는 빠른 개발에는 유리하지만, 팀 협업에는 어려움을 초래할 수 있습니다.
컴포넌트 라이브러리를 개발하는 것은 협업을 단순화하는 데 매우 중요한 단계입니다. 잘 구조화되고 재사용 가능한 컴포넌트를 만드는 법을 익히는 것은 효과적인 팀워크를 위한 핵심 역량입니다. 이 튜토리얼에서는 ProtoPie 라이브러리 안에서 재사용 가능한 컴포넌트를 구성하는 몇 가지 모범 사례를 보여드리겠습니다.
이 가이드에서는 로컬 pie 안의 컴포넌트를 사용하겠습니다. 하지만 팀 협업을 위해서는 이상적으로 공유 라이브러리에서 만들어져야 합니다. 이렇게 하면 업데이트를 팀 전체와 공유할 수 있어 모든 pie에서 일관성을 유지할 수 있습니다.
간단하게 핵심 개념을 명확히 보여주기 위해, 예제로는 소박한 라디오 버튼을 사용하겠습니다. 사용자가 초기 화면에서 플레이어('Player 1' 또는 'Player 2')나 난이도('Easy' 또는 'Hard')를 선택해야 하는 게임을 상상해 보세요.
이 튜토리얼의 시작 Pie는 정확히 이와 같은 구성으로 되어 있지만, 재사용성은 전혀 고려하지 않은 채 모두 하드코딩되어 있습니다. 파일을 살펴보면 네 개의 라디오 버튼에 대한 코드가 본질적으로 모두 같아서 재사용 가능성이 바로 보일 것입니다.
컴포넌트의 가치를 제대로 이해하려면 시작 pie에 세 번째 난이도 수준('Moderate')을 추가해 보세요. 그러면 여러 곳을 수정해야 하고, 작은 변경 하나를 놓쳐 프로토타입이 깨지기 쉽다는 것을 알게 될 것입니다. 게다가 버튼이 늘어날수록 씬의 트리거와 응답 목록은 점점 더 복잡해지며, 이는 라디오 버튼이 작동하도록 만드는 데 필요한 것일 뿐이고, 입력에 반응하는 상호작용은 아직 고려하지도 않은 상태입니다.
이제 장점을 충분히 이해하셨다면, 다음 단계로 진행해 보겠습니다.
1단계: 컴포넌트 만들기
“Name Buttons”라는 이름의 컨테이너를 선택하고 Create Component를 선택합니다. 컴포넌트 이름을 “Radio Buttons”로 변경한 뒤 편집을 시작합니다. Container Layer가 Auto Layout(Hug and Hug)으로 설정되어 있는지 확인하세요. 마지막으로 텍스트 변수 “Name”의 이름을 “Value”로 변경합니다.
컴포넌트 만들기
2단계: 버튼 복제하기
“Button 1”을 선택해 복사한 다음, “Paste with Linked Triggers”를 다섯 번 사용합니다. 그러면 이제 Button 1부터 Button 6까지 이름이 붙은 여섯 개의 라디오 버튼이 있어야 합니다.
버튼 복제하기
3단계: 레이어 이름 바꾸기
컴포넌트 안의 모든 레이어를 살펴보고 레이어 이름을 정확하게 수정합니다. 예를 들어 “Button 4” 안의 “Label” 필드는 “Label 1”이 아니라 “Label 4”로 이름을 바꿔야 합니다.
레이어 이름 바꾸기
4단계: 트리거와 응답 업데이트하기
다음으로 트리거와 응답 목록을 검토합니다. 각 항목이 수행해야 하는 내용을 정확히 반영하도록 설명을 변경하세요. 응답을 편집하기 전에 이 작업을 먼저 하는 것이 훨씬 좋습니다. 각 동작을 설명과 비교하며 검토하기가 더 쉬워지기 때문입니다.
5단계: 트리거와 응답 편집하기
이제 실제 트리거와 응답을 편집합니다. 재사용성을 위해 'value' 변수에 레이블을 할당하는 방식도 조정해야 합니다. “Player 1” 대신 ‘Label 1’.text와 같은 식을 사용하세요. 버튼이 여섯 개이므로, 하나가 켜질 때 다른 다섯 개는 꺼지도록 해야 합니다. 즉, 'On 2'의 불투명도를 0으로 설정하는 응답은 추가 버튼들에 대해 네 번 더 복제해야 합니다.
응답 변경하기
6단계: 컴포넌트 미리보기
새 버튼이 올바른 인디케이터를 업데이트하는지 확인하기 위해 컴포넌트를 미리 봅니다.
7단계: 업데이트된 값 전송하기
업데이트된 값을 메인 씬으로 다시 보내는 방법이 필요합니다. 이를 위해 'value' 변수에 대한 트리거를 추가하고, 이를 사용해 새 메시지(NEWVALUE라고 부르겠습니다)를 부모에게 보냅니다. 이 메시지에는 'value' 변수를 매개변수로 포함하세요. 이 설정을 마친 뒤에는 씬으로 돌아갈 수 있습니다.
값 보내기 추가하기
8단계: 씬 업데이트하기
메인 씬으로 돌아가서 이전의 “Difficulty buttons” 컨테이너를 삭제합니다.
불필요한 레이어 제거하기
“Radio Buttons” 컴포넌트의 새 인스턴스를 씬에 드래그해 넣고 이 레이어 이름을 “Difficulty buttons”로 지정합니다.
다른 인스턴스 추가하기
이미 존재하는 인스턴스의 이름은 “Name Buttons”로 변경해야 합니다.
레이블 이름 바꾸기
9단계: 컴포넌트에서 메시지 받기
자식 컴포넌트에서 오는 NEWVALUE 메시지를 듣기 위해 씬에 Receive 트리거를 추가합니다.
받기 트리거 추가하기
그 매개변수를 적절한 변수에 할당합니다.
변수 추가하기
그다음 이 트리거를 복제해 다른 자식 컴포넌트와 다른 변수에 맞게 구성합니다.
받기 트리거 복제하기
10단계: 최종 설정
“Name buttons” 인스턴스에서는 플레이어 옵션을 몇 개 사용할지 결정하고 남은 라디오 버튼은 숨깁니다. 보이는 버튼의 레이블은 필요에 따라 변경하세요. 이 과정을 “Difficulty buttons” 세트에도 반복합니다.
레이어 숨기기 및 레이블 이름 바꾸기
이제 두 세트의 라디오 버튼이 동작하는 프로토타입이 완성되어 있어야 합니다. pie를 미리 보고 'Name'과 'Difficulty' 변수에 올바른 값이 할당되는 것을 확인할 수 있습니다. 지금은 버튼 레이블이 올바르지만, 다음 시간에는 더 다양한 커스터마이징을 살펴보겠습니다.
결론
시작점과 최종 결과를 비교해 보면, 이제 우리는 매우 단순한 트리거와 필요한 경우 2~6개의 라디오 버튼 세트를 전달할 수 있는 견고한 컴포넌트를 갖게 되었습니다. 세 번째 버튼 세트를 추가하는 일도 이제는 아주 간단한 작업입니다.
다음 튜토리얼에서는 이 컴포넌트를 더 발전시켜 선택된 버튼을 다르게 표시하는 기능을 추가하고, 아마도 서로 다른 선택 동작도 도입해 볼 것입니다.
비디오 튜토리얼
더 자세한 가이드를 원하신다면, David Gilmore가 제작한 이 비디오 워크스루에서 전체 과정을 실제로 확인해 보세요: ProtoPie 재사용 가능한 컴포넌트 튜토리얼 1부
