소개
카운터(iOS 디자인에서는 steppers라고도 함)는 가장 흔히 사용되는 UI 요소 중 하나입니다. Stepper는 보통 이커머스 웹사이트에서 장바구니 수량을 업데이트하는 데 사용됩니다. 사용자가 장바구니에 항목을 추가하면, 카운터를 사용해 장바구니 항목 수를 언제든지 늘리거나 줄일 수 있습니다. 항목 수는 사용자가 지불해야 할 총 금액을 반영합니다. 이 레슨에서는 카운터를 사용해 최종 결제 금액을 업데이트하는 방법을 다룹니다.
ProtoPie는 stepper 컴포넌트와 send/receive 기능, 변수, 수식을 함께 사용해 이를 구현합니다.
배울 내용
인터랙션을 컴포넌트로 변환하기
컴포넌트 값을 씬으로 보내기
씬에서 컴포넌트의 값을 받아 변수에 할당하기
수식을 사용해 총 결제 금액 계산하기
마지막에는 이런 것을 만들 수 있게 됩니다!
시작하기 전에
위 링크에서 Input Stepper를 만드는 방법을 더 알아볼 수 있습니다.
튜토리얼을 시작하기 전에, 카운터 번호와 총 결제 금액이 편집 가능한 텍스트 레이어로 변환되어 있는지 확인하세요(Figma/Sketch에서 가져온 경우). 우리는 변수와 산술 수식을 사용해 총 결제 금액을 계산할 것이며, 이는 단계별 안내에서 자세히 설명합니다.
단계별 안내
1. 인터랙션을 컴포넌트로 변환하기
Stepper를 선택한 다음 툴바에서 Component 아이콘을 클릭해 만든 인터랙션을 컴포넌트로 변환합니다.
Components는 프로토타입 전반에서 재사용할 수 있는 인터랙션이 포함된 레이어 세트입니다. 이렇게 하면 불필요한 반복 작업을 줄이고 시간을 절약할 수 있습니다. 이 시나리오에서는 stepper 컴포넌트를 만든 뒤 장바구니 페이지에 인스턴스를 복제하면 됩니다.
그런 다음 메인 씬에서 각 항목에 맞는 위치로 Stepper 컴포넌트를 복제합니다.
객체를 복제하려면 Alt/Option + 드래그하세요.
2. 컴포넌트 값을 메인 컴포넌트로 보내기
Detect는 감지된 값이 변경될 때 응답을 트리거하는 데 사용됩니다.
이 경우 텍스트가 변경될 때마다 응답이 트리거되길 원합니다. 따라서 Number 레이어에 Detect 트리거를 추가해 봅시다. 속성에서 패널이 Text 속성을 감지하도록 설정합니다.
이 경우 Text가 변경될 때마다 응답이 발생하길 원합니다.
다른 무언가가 바뀔 때 어떤 동작이 일어나게 하고 싶다면 "Detect"가 유용합니다.
2. Detect 트리거 안에 Send 응답을 추가합니다. 텍스트가 변경될 때마다 Send가 트리거됩니다.
채널 섹션에서 Send to Parent를 선택하고 메시지 이름을 지정하세요.
메인 씬에는 서로 다른 값을 처리하는 Stepper 컴포넌트 인스턴스가 있으므로, Send to Parent를 사용하고 메시지를 받는 컴포넌트를 지정해 해당 컴포넌트 인스턴스와 연결된 특정 금액을 계산합니다
💡 채널 설명 (Send to "누구에게")
Send to Parent: 부모 컴포넌트가 있으면 부모 컴포넌트로, 없으면 씬으로 메시지를 보냅니다.
Send to Child Component: 자식 컴포넌트로 메시지를 보냅니다.
Send to Current Scene: 컴포넌트가 사용된 씬으로 메시지를 보냅니다.
Send to Current Component: 이 채널을 사용하면 컴포넌트 내부에 머무르는 메시지를 보낼 수 있습니다.
동일한 값을 가진 컴포넌트를 다루거나 씬에 컴포넌트가 하나만 있는 경우에는 대신 Send to Current Scene을 사용할 수 있습니다. 이 경우 컴포넌트를 지정할 필요가 없으며 메시지는 씬 전체로 전송됩니다.
3. Send value together를 체크해 메시지와 함께 값을 보냅니다. 값을 얻기 위해 수식을 사용합니다. 여기서 사용하는 수식은 number('Number'.text)입니다. 이 수식은 나중에 필요할 Number 객체의 텍스트를 숫자로 변환할 수 있습니다.
"Send"에서는 값을 보낼지 여부를 선택할 수 있습니다. 이번에는 보내기를 선택합니다.
4. 메인 씬으로 돌아가 변수를 만듭니다. 변수의 초기값을 속성 패널에서 1로 설정해 variable number와 text number가 일치하도록 하세요.
💡 새 변수를 만들 때 For all scenes 또는 For this scene으로 만들 수 있습니다. 이 시나리오에서는 둘 다 작동합니다. 하지만 다른 씬에서도 이 변수를 사용해야 한다면 For all scenes를 사용하세요.
이 변수는 첫 번째 stepper의 수량을 나타냅니다.
5. bug 아이콘을 켜서 미리보기 창에 변수를 표시할 수 있습니다. 이렇게 하면 변수가 올바른 값을 저장하고 있는지 확인할 수 있습니다.
변수를 다룰 때 bug 아이콘은 매우 유용합니다.
6. Receive 응답을 추가합니다. 속성 패널에서 Receive from Component를 선택하고 드롭다운 메뉴에서 Stepper 1을 선택합니다.
bug 아이콘을 켜서 미리보기 창에 변수를 표시할 수 있습니다.
7. Assign to Variable을 체크하고, 할당할 변수를 선택합니다. 이렇게 하면 variable1이 stepper의 숫자와 연결됩니다.
8. 메인 씬에서 stepper와 상호작용하면 변수도 함께 변경됩니다.
메인 씬에서 stepper와 상호작용하면 변수도 함께 변경됩니다.
9. 같은 방법으로 이제 모든 컴포넌트의 값을 각각 변수에 저장할 수 있습니다. 이를 위해 변수 두 개를 더 만드세요.
변수 이름을 바꾸려면 더블클릭하세요.
3. 수식을 사용해 총액 계산하기
Total payment 텍스트 레이어를 선택한 다음 각 receive 트리거 아래에 텍스트 응답을 추가합니다.
이제 모든 컴포넌트의 값을 각각 변수에 저장할 수 있습니다
2. content 섹션에서 Formula를 선택합니다.
여기서 사용하는 수식은: "$" + stepper1*60 + stepper2*23 + stepper3*12.99
이 수식은 총 결제 금액을 계산하고, 이 값 앞에 $ 기호도 붙입니다.
수식에서는 따옴표를 사용해 텍스트 내용을 감싸세요.
3. 각 트리거에 같은 응답을 추가합니다
비슷한 기능을 가진 여러 객체를 만들 때는 send & receive가 있는 컴포넌트를 사용하세요!
축하합니다!
이제 끝입니다. 이제 컴포넌트를 사용해 이커머스 앱의 장바구니를 업데이트하는 방법을 알게 되었습니다.
이 활용 사례 튜토리얼이 도움이 되었나요? 교육 콘텐츠를 개선할 수 있도록 이 1분 설문조사 에 참여해 주세요.
