1부에서는 Part 1에서 재사용 가능한 라디오 버튼 컴포넌트를 만들었습니다. 유용하긴 했지만 여전히 코드가 많이 필요했고, 작은 변경에도 오류가 생기기 쉬웠으며, 최대 6개의 버튼으로 제한되었습니다.
이번에는 접근 방식을 한 단계 더 끌어올려 보겠습니다. 단일 라디오 버튼만으로 어떤 크기에도 사용할 수 있는 매우 효율적인 컴포넌트를 만들 것입니다. 이 방법은 코드 양을 크게 줄이고 컴포넌트를 더욱 강력하고 유연하게 만들어 줍니다.
튜토리얼로 들어가기 전에, 따라오려면 몇 가지 필수 개념을 이해하는 것이 중요합니다:
1. JSON 구조
ProtoPie 메시지는 한 번에 하나의 값만 보낼 수 있습니다. 여러 값을 하나의 메시지에 묶기 위해 JSON을 사용하면 더 복잡한 정보를 보낼 수 있습니다.
2. 재정의 가능한 변수
컴포넌트 인스턴스의 사용자 정의 속성이라고 생각하면 됩니다. 이를 통해 각 라디오 버튼에 고유한 정체성과 기능을 부여할 수 있어, 하나의 컴포넌트를 진정으로 재사용 가능하게 만듭니다.
3. ProtoPie와 Figma의 오버라이드
Figma와 ProtoPie 간의 동기화를 유지하려면 무엇을 오버라이드할지 신중해야 합니다. ProtoPie의 오버라이드는 항상 Figma의 변경 사항보다 우선합니다. 일반적으로 그래픽 속성(도형, 색상, 테두리, 글꼴, 위치)을 ProtoPie에서 변경하지 않는 것이 좋습니다. 이러한 항목은 Figma에서 관리하거나, 'Start' 트리거에 대한 응답을 사용해 ProtoPie에서 변경하는 편이 좋습니다. 텍스트 값과 불투명도는 ProtoPie에서 변경할 수 있지만, 여전히 트리거를 통해 수행하는 편이 더 나은 경우가 많습니다.
4. 불투명도 vs. 숨김 레이어
ProtoPie에는 레이어를 "숨기기" 위한 응답이 없지만, 불투명도는 변경할 수 있습니다. 중요한 점은 레이어가 숨겨져 있는지 확인하는 방법은 없고, 불투명도에만 접근할 수 있다는 것입니다. 레이어 패널에서 레이어가 숨겨져 있더라도(따라서 보이지 않더라도) 불투명도가 100일 수 있다는 점을 기억하세요. Figma 가져오기에서 레이어를 삭제하거나 숨겨도 동기화가 깨지지는 않지만, 이는 상호작용이 아니라 ProtoPie Studio에서 해야 합니다.
더 스마트하고 확장성 높은 컴포넌트를 만들 준비가 되셨나요? 시작해 봅시다.
단일 범용 라디오 버튼 만들기
사전 준비
튜토리얼을 따라하려면 시작 pie와 Figma 파일을 여기에서 다운로드할 수 있습니다: 시작 pie | Figma 파일
완성 pie도 여기에서 다운로드할 수 있습니다: 완성 pie
1단계: 초기 설정
“Starting Pie.pie” 파일을 엽니다. Figma에 접근할 수 없다면, 바로 3단계로 건너뛰세요.
1단계: 처음 열었을 때의 Starting Pie
2단계: Figma 에셋 가져오기 및 준비하기 (Figma 접근 가능할 때만 가능)
“Starting Pie.pie” 파일에 있는 로컬 컴포넌트를 삭제하고 “tutorial.fig” 파일을 Figma로 가져옵니다. 두 개의 라디오 버튼 디자인이 보일 것입니다: 하나는 'Tick', 다른 하나는 'Dot'입니다. 두 개를 모두 선택하고 ProtoPie Figma 플러그인을 여세요. 두 오브젝트를 ProtoPie로 내보냅니다(플러그인에 2개의 오브젝트를 내보내는 것으로 표시되는지 확인하세요).
ProtoPie로 돌아가 Tick과 Dot의 위치를 0,0으로 설정하고 컴포넌트 이름을 “Radio Buttons”로 바꿉니다. Tick과 Dot 안의 레이어를 열어 모두 편집 가능 상태인지 확인하세요(그렇지 않다면 “Make Editable”을 클릭하세요). 이 시점에서는 ON 레이어의 불투명도를 0으로 설정해 선택되지 않은 버튼만 보이도록 하는 것도 좋습니다.
2단계a: Figma에서 ProtoPie로 내보내기 준비하기
2단계b: 가져온 레이어가 편집 가능한지 확인하기
3단계: 컴포넌트 변수 만들기
Radio Buttons 컴포넌트의 컴포넌트 편집기를 엽니다. 이제 필요한 변수를 만들어 보겠습니다:
‘LABEL’이라는 재정의 가능한 텍스트 변수를 추가합니다 - 재정의 가능한 변수를 나타낼 때는 모두 대문자를 사용합니다.
‘SET’이라는 또 다른 재정의 가능한 텍스트 변수를 추가합니다.
‘value’라는 텍스트 변수를 추가합니다 - 수식으로 정의된 변수는 대문자를 사용하지 않습니다 - 그리고 수식 regexreplace(LABEL," “,"")를 입력합니다. 이를 통해 라디오 버튼의 UI 표시는 공백이 포함될 수 있지만, 내부 값에서는 공백이 없도록 할 수 있습니다(JSON 사용 시 문제가 생길 수 있습니다).
수식 “{\”Set":"+Set+", "Value":"+Value + “}”로 정의된 ‘parameters’라는 텍스트 변수를 추가합니다.
마지막으로 ‘sender’라는 텍스트 변수를 추가합니다. 이 변수는 메시지가 전송될 때 값을 받는 데 사용됩니다.
3단계: 트리거와 응답을 위한 편집 가능한 레이어 및 변수 준비하기
4단계: Start에서 레이블 채우기
이제 컴포넌트에 코드를 추가할 수 있습니다. 먼저 컴포넌트 안의 다양한 텍스트 필드에 적절한 레이블을 채우기 위한 ‘Start’ 트리거가 필요합니다. 버튼의 레이블을 표시해야 하는 각 텍스트 필드에, 변수 ‘LABEL’을 넣는 텍스트 응답을 추가하세요.
4단계: 'Start' 트리거와 그 응답
5단계: 'Tap' 트리거 만들기
필요한 핵심 코드는 ‘Tap’ 트리거에 대한 응답입니다. 컴포넌트를 탭하면 필요한 동작을 통해 버튼을 켭니다. 가장 기본적으로는 ‘ON’ 레이어의 불투명도를 100으로, ‘OFF’ 레이어의 불투명도를 0으로 설정하는 방식일 수 있습니다.
버튼을 켜는 것 외에도, ‘NEWVALUE’가 선택되었음을 알리기 위해 씬 전체에 메시지를 보내야 하며, 그 값으로 변수 parameters가 전달됩니다.
5단계: 핵심 Tap 트리거와 응답
6단계: 들어오는 값 처리하기
컴포넌트는 ‘NEWVALUE’ 메시지를 받아야 합니다. 다른 버튼 인스턴스가 선택되면, 이 인스턴스는 스스로 꺼져야 합니다. 이를 위해 ‘NEWVALUE’에 대한 ‘receive’ 트리거를 추가하고, 연결된 값을 변수 sender에 할당하세요. 이제 parseJson 함수를 사용해 sender가 같은 set에 속해 있지만 값이 다른지 확인할 수 있으며, 그런 경우 이를 끕니다(‘Tap’ 트리거의 ‘ON’ 동작을 반대로 수행).
6단계: 'Receive' 트리거와 그 응답
7단계: 씬에서 값 할당하기
이제 씬으로 돌아가 새 컴포넌트를 사용할 수 있습니다. 씬에서 ‘NEWVALUE’ 메시지에 대한 ‘receive’ 트리거를 만들어야 하며, 연결된 parameters를 ‘sender’라는 변수에 할당합니다. 그런 다음 각 가능한 set에 대해 sender가 그 set 안에 있는지 확인하고, 해당하는 경우 적절한 변수에 값을 저장합니다. 이 코드는 만들고자 하는 각 라디오 버튼 set마다 수동으로 업데이트해야 합니다.
7단계: 결과를 씬 변수에 할당하기 위한 'Receive' 트리거
8단계: 버튼 세트 만들기
pie를 사용하려면 컴포넌트의 반복 인스턴스를 씬에 드래그하고, 각 인스턴스마다 고유한 LABEL과 속할 SET을 지정하세요. 또한 해당 set의 현재 값을 저장할 변수를 만들어야 합니다. 하나의 set에는 원하는 만큼 버튼을 넣을 수 있지만, 각 버튼은 서로 다른 LABEL과 동일한 SET을 가져야 합니다.
각 라디오 버튼에는 여전히 Tick과 Dot 변형이 모두 표시되므로, 각 SET 안에서 Tick 또는 Dot 버전 중 하나를 숨겨야 합니다.
8단계: 각 버튼 세트에서 변형 중 하나를 숨기고 각 버튼에 LABEL과 SET을 지정하기
9단계: 디자인 변경 사항 동기화하기
이제 Figma로 돌아가 라디오 버튼의 시각적 디자인을 다듬을 수 있습니다. 색상, 글꼴, 간격 또는 정렬을 조정하세요. 준비가 되면 업데이트된 프레임을 ProtoPie 컴포넌트로 다시 가져오기만 하면 됩니다.
그 속성을 ProtoPie에서 직접 수정하지 않았다면, Figma 디자인에 맞게 자동으로 업데이트됩니다. 상호작용은 계속해서 정상적으로 작동해야 합니다.
스타일이 업데이트되지 않으면 어떻게 하나요? ProtoPie에서 실수로 속성(예: "Tick" 또는 "Dot"의 색상)을 변경했다면 더 이상 Figma와 동기화되지 않습니다. 이를 해결하려면 컴포넌트 안에서 수정된 레이어를 삭제하고, Figma에서 깨끗한 오브젝트를 다시 가져온 다음, 해당 레이어를 사용하던 모든 응답에서 새 레이어를 다시 연결하세요.
팁: Figma 연결을 깨뜨리지 않고 ProtoPie에서 변경 사항을 실험하고 싶다면 Start 트리거를 사용해 적용하세요. 이 코드 기반 접근 방식은 프로토타입이 실행 중일 때만 Figma 스타일을 덮어쓰므로, 컴포넌트 구조를 깔끔하게 유지할 수 있습니다.
예정
다음 튜토리얼에서는 Figma 이야기를 한 걸음 더 나아가 ProtoPie Team Library에서 Figma Design System으로 재사용 가능한 컴포넌트를 만드는 방법을 설명할 예정입니다. 이렇게 하면 한 팀원이 Figma에서 변경 사항을 적용하고 ProtoPie 라이브러리를 업데이트한 뒤, 그 라이브러리로 만든 모든 pie가 재코딩 없이 새 디자인 시스템에 맞게 조정될 수 있습니다.
이 심층 가이드는 David Gilmore, UX Design 디렉터 겸 컨설턴트가 작성했습니다.
