소개
별점은 일반적으로 사용자가 앱 콘텐츠와 어떻게 상호작용하는지에 대한 관련 피드백을 얻기 위해 사용됩니다. 앱을 위한 시각적인 리뷰 역할을 하죠. 하지만 별점 기능을 구현하는 일은 꽤 번거로울 수 있습니다. 여러 가지 방법이 있지만, 일부 방식은 직접 작업하기에 매우 지루할 수 있습니다. ProtoPie를 사용하면 별다른 어려움 없이 몇 분 만에 별점 기능을 만들 수 있습니다. 이 튜토리얼에서는 컴포넌트, 변수, 그리고 send & receive를 사용해 이 효과를 구현하는 방법을 다룹니다.
배울 내용
각 컴포넌트 인스턴스에 고유한 번호를 부여해 고유 식별자를 설정하기
고유 식별자를 사용해 탭했을 때 현재 별과 이전 별을 밝게 표시하기
마지막에는 이런 것을 만들 수 있게 됩니다!
단계별 안내
각 컴포넌트 인스턴스에 고유한 번호를 부여해 고유 식별자를 설정하기
1. "Star" 컴포넌트를 엽니다.
별 컴포넌트를 만든 후, 작업 중인 씬에 5개의 인스턴스를 만드세요. 완료되면 메인 Star 컴포넌트를 엽니다.
💡왜 컴포넌트를 사용하나요?
비슷한 동작을 하는 오브젝트가 있을 때 컴포넌트를 사용합니다. 이 경우 5개의 별은 모두 비슷한 동작을 합니다. 컴포넌트를 사용하면 인터랙티브 오브젝트에 트리거/응답을 반복해서 추가하는 번거롭고 지루한 작업도 줄일 수 있습니다.
2. "Star" 컴포넌트에 "number" 변수를 추가합니다.
다음 단계는 Star 컴포넌트에 number 변수를 추가하는 것입니다. 이 변수에 대해 Make Overridable 옵션이 체크되어 있는지 확인합니다. 이렇게 하는 이유는 개별 Star 하위 인스턴스에 고유 식별자를 설정할 수 있게 하기 위해서입니다.
💡 Make Overridable이란?
Make overridable은 컴포넌트의 각 인스턴스가 변수에 대해 서로 다른 초기값을 가질 수 있다는 뜻입니다. 여기서는 각 하위 컴포넌트에 고유 식별자를 설정하는 데 사용합니다.
Make Overridable 옵션을 체크한 뒤, 메인 작업 씬으로 돌아가 개별 Star 하위 인스턴스의 번호를 (1 to 5) 순서대로 변경합니다. 이렇게 하면 각 Star 하위 인스턴스에 고유 식별자가 설정됩니다.
고유 식별자를 사용해 탭했을 때 현재 별과 이전 별을 밝게 표시하기
1. "Star" 컴포넌트에 Tap 트리거와 Send 응답을 추가합니다.
a. 이제 메인 Star 컴포넌트로 돌아갑니다. 별을 탭했을 때 특정 응답이 나오도록 하려 합니다. 따라서 Tap 트리거를 추가합니다. Tap trigger 아래에 Send response를 추가합니다.
b. 응답 아래의 메시지를 "tapped"로 설정합니다. 이는 별 인스턴스가 탭되었음을 나타냅니다. Send Value Together 옵션을 체크하고 값을 "number" 변수로 설정합니다. 이렇게 하면 탭된 Star 하위 인스턴스의 number가 저장됩니다.
💡 메시지는 어디로 전송되나요?
메시지는 탭된 Star 인스턴스를 포함하여 메인 씬의 모든 "Star" 인스턴스로 전송됩니다.
2. Star 컴포넌트에 Receive 트리거를 추가하고 "tapped_number"라는 변수를 하나 더 만듭니다.
a. Send 응답을 설정한 후에는 탭된 Star 인스턴스로부터 응답을 받아야 합니다. 먼저 변수를 만들고 이름을 "tapped_number"로 지정해 봅시다.
b. Receive 트리거를 추가하고 메시지를 "tapped"로 설정한 뒤, Assign to Variable 옵션을 체크합니다. 할당할 변수로 tapped_number를 선택합니다. 그러면 메인 씬에서 탭된 Star 인스턴스의 번호 값이 반환됩니다.
3. 탭했을 때 현재 별과 이전 별을 밝게 표시하기.
a. Receive 트리거 아래에 조건을 추가합니다. 조건은 number ≤ tapped_number로 설정합니다. 조건 아래에는 Vector 레이어에 Color 응답을 추가합니다. 색상 응답의 Fill을 #FDC97D로 설정합니다(색상은 프로토타입에 따라 달라질 수 있습니다). 이렇게 하면 탭된 Star 인스턴스 이전의 "Star" 인스턴스들이 색상을 변경하게 됩니다.
b. Receive 트리거 아래에 또 다른 조건을 추가합니다. 조건은 number > tapped_number로 설정합니다. Vector 레이어에 Reset 응답을 추가합니다. 이렇게 하면 탭된 Star 인스턴스 이후의 "Star" 인스턴스들은 색상이 변경되지 않도록 할 수 있습니다.
💡 어떻게 작동하나요?
Star 인스턴스를 탭하면, 해당 Star 인스턴스가 다른 Star 인스턴스들에게 빛나야 하는지 여부를 업데이트하라는 메시지를 전송합니다.
축하합니다!
단계를 끝까지 따라오느라 수고하셨습니다. 꽤 간단하고 직관적이죠? ProtoPie로 별점 만들기는 식은 죽 먹기입니다. 직접 한 번 시도해 보세요.
