소개
이미지는 오늘날 대부분의 디지털 제품에서 사용되는 강력한 자산입니다. 이미지를 강조하는 앱에서는 사진을 정리할 수 있는 능력이 사용자 경험에서 매우 중요합니다. 이 데모에서는 사용자가 숫자 순서를 유지한 채 사진을 선택하고 선택 해제하는 방법을 보여줄 수 있습니다. 이 튜토리얼은 약간의 순차 논리를 소개하며, 그래서 꽤 지적으로 흥미롭습니다! 컴포넌트, 변수, 그리고 수식을 사용하면 무작위성을 다루는 능력을 익히고 선택 및 선택 해제할 수 있는 사진에 질서를 부여할 수 있습니다.
ProtoPie는 컴포넌트를 사용해 이를 더 쉽게 만들어 줍니다. 따라서 디자인 전반에 걸쳐 동일하게 사용되는 요소들에 영향을 주는 변경을 하게 됩니다. 컴포넌트를 사용하면 작업 흐름이 빨라집니다! ProtoPie는 또한 변수를 사용합니다. 변수는 값을 담고 있으며, 수식과 결합되면 선택 및 선택 해제와 같은 사용자의 상호작용에 반응할 수 있습니다.
배울 내용
각 컴포넌트 인스턴스에 특별한 번호를 부여합니다
이미지가 선택될 때 각 체크박스 번호를 1씩 증가시킵니다
체크박스가 선택될 때 숫자 순서를 갖도록 합니다
선택 해제 시 체크박스 번호를 1씩 감소시키고 선택된 사진의 순서를 다시 정렬합니다
마지막에는 이렇게 만들어낼 수 있습니다!
시작하기 전에
미리 준비된 에셋이 있어 바로 시작할 수 있다는 것을 알 수 있을 것입니다. 모든 이미지 파일을 컴포넌트로 변환하고, 체크박스가 번호와 함께 선택 및 선택 해제되도록 활성화해 두었습니다. 이제 시작해 볼까요?
단계별 안내
1. 각 컴포넌트 인스턴스에 고유한 ID 부여하기
1. 앱의 메인 씬 보기에서 이미지 컴포넌트로 이동합니다. 이 컴포넌트를 편집하게 되며, 그러면 미리 이 컴포넌트의 인스턴스로 채워진 앱 전체에 변경 사항이 적용됩니다.
2. 새로운 변수를 만듭니다. 이름은 "ID"로 지정할 수 있습니다. 각 컴포넌트를 구분할 수 있도록 고유 식별자를 부여하려면 Make Overridable 체크박스를 선택하면 됩니다.
3. 메인 씬으로 이동하여 컴포넌트를 하나 선택한 뒤 overrides 상자에서 번호를 1씩 바꿔 각 컴포넌트에 고유한 번호(1부터 8까지)를 부여합니다. 원한다면 번호를 이미지 번호와 맞출 수 있지만, 번호가 고유하기만 하면 됩니다.
2. 이미지가 선택될 때 각 체크박스 번호를 1씩 증가시키기
이 프로토타입에서는 이미지를 선택할 때마다 번호가 +1씩 증가하도록 하려 합니다. 이미지를 표시하는 체크박스의 텍스트를 제어하기 위해 변수를 사용합니다.
1. 컴포넌트로 돌아가 첫 번째 조건 아래에 전송 응답을 만듭니다. 메시지 상자에는 "select"라고 입력할 수 있습니다.
2. 수신 트리거를 추가하고 방금 만든 "select" 메시지를 선택합니다.
3. 새 변수를 만들고 "order_of_selection"이라고 이름을 지정합니다. 이 변수는 선택된 순서를 제어하는 데 사용된다는 의미입니다.
4. 수신 트리거 아래에 방금 만든 새 변수(order_of_selection)에 연결된 할당 응답을 만듭니다. 수식에서 order_of_selection 변수를 선택하고 수식 끝에 "+1"을 추가합니다.
5. 수신 트리거에 텍스트 응답을 추가하고 숫자에 할당합니다. 콘텐츠를 수식으로 변경한 뒤 "order_of_selection" 변수를 삽입합니다.
6. 이제 씬을 테스트해 보면, 사진을 선택할 때마다 체크박스의 모든 번호가 하나씩 증가하는 것을 볼 수 있습니다. 다음 단계에서는 각 번호가 추가 선택에 맞게 반응하도록 이를 수정하겠습니다.
3. 선택될 때 체크박스가 숫자 순서를 갖도록 만들기
다른 컴포넌트 인스턴스들이 우리의 선택에 반응할 수 있도록 약간의 정보를 전송해야 합니다.
1. 탭 트리거 아래의 전송 응답에서 Send Value Together 체크박스를 선택하고, 방금 만든 ID 변수를 함수로 추가합니다.
2. 수신 트리거에서 변수에 할당 체크박스를 선택합니다. 이 시점에서는 아직 만들지 않은 새 변수에 저장해야 합니다.
3. 새 변수를 만들고 "activated"라고 이름을 지정합니다. 컴포넌트의 모든 인스턴스에 고유한 ID를 부여했기 때문에, 이 변수는 각 고유 컴포넌트가 활성화되었을 때 ProtoPie가 이를 인식하도록 해줍니다.
4. 수신 트리거에서 변수에 할당 기능을 방금 만든 "activated" 변수로 변경합니다.
5. 수신 트리거의 텍스트 응답 아래에 새 조건을 추가하고 ID = activated로 설정합니다. 텍스트 응답을 방금 만든 새 조건 아래로 옮깁니다.
💡 이제 씬을 테스트하면 사진을 선택할 때 선택한 순서에 따라 번호가 1씩 증가하는 것을 볼 수 있습니다. 하지만 번호를 선택 해제한 뒤 다른 사진을 선택하면 번호가 올바르게 반응하지 않고 순서가 어긋납니다. 다음 단계에서 이를 수정하겠습니다.
순차 논리를 잠시 살펴보기
숫자를 다시 정렬하는 논리에 대해 잠시 설명해야 합니다. 예를 들어 컴포넌트 다섯 개를 무작위로 선택한다고 해봅시다. 그러면 이 컴포넌트들의 숫자 상자가 1,2,3,4,5 순서로 증가하는 것을 볼 수 있습니다. 어떤 컴포넌트든 선택 해제하면 나머지 숫자들은 1씩 감소해야 하지만, 무작위로 반응해서는 안 됩니다. 이 숫자들은 처음 선택한 순서를 유지해야 합니다.
컴포넌트를 무작위로 선택해 숫자 상자가 1,2,3,4,5까지 올라간 상태에서 3번을 선택 해제하면 어떻게 될까요? 4는 3이 되고 5는 4가 되지만, 컴포넌트 1과 2는 그대로 유지됩니다.
이것은 이 앱 디자인의 세련된 사용자 인터페이스 뒤에 가려져 있는 복잡한 부분이지만, 다음 단계에서 달성하려는 것을 이해하려면 이러한 개념이 필요합니다. 숫자를 1씩 줄이는 동시에 컴포넌트의 숫자 순서를 논리적인 순서로 재구성하고 있는 것입니다.
4. 선택 해제 시 체크박스 번호를 1씩 감소시키고 선택된 사진의 순서를 다시 정렬하기
1. 컴포넌트에서 색상 응답 아래의 탭 트리거 밑에 전송 응답을 만듭니다. 메시지에는 "deselect"라고 입력하고, Send Value Together를 선택한 뒤 "ID" 변수를 사용합니다.
2. 새 수신 트리거를 만들고 메시지를 방금 만든 "deselect" 메시지로 변경한 다음, 변수를 "activated" 변수에 할당합니다.
3. 수신 트리거 아래에 할당 응답을 만들고, 이것이 "order_of_selection" 변수와 연결되어 있는지 확인합니다. 수식은 order_of_selection -1입니다.
4. 수신 트리거 아래의 조건을 복사해 같은 수신 트리거 아래에 붙여넣습니다. 텍스트 응답을 삭제하고 대신 전송 응답을 추가합니다. 메시지는 "reorder"로 지정할 수 있으며 Send Value Together 체크박스를 선택합니다. 전체 수식은 number('Number'.text)여야 합니다.
5. 수신 트리거를 추가하고 메시지 상자에 "reorder"를 입력합니다. 새로 만들어야 할 또 다른 변수에 대해 변수에 할당 체크박스를 선택합니다.
6. 새 변수를 만들고 "number_of_deselected"라고 이름을 지정합니다. 방금 만든 수신 트리거에서 이를 "number_of_deselected"로 변경합니다.
7. 이 새 수신 트리거 아래에 조건을 추가합니다. 방금 전송 응답에서 사용한 것과 같은 수식을 사용할 것이므로, 이 수식을 새 조건에 복사해 붙여넣으세요. ">" 값을 선택하고 값을 "number_of_deselected" 변수로 변경합니다. 조건은 number('Number'.text) > number_of_deselected가 됩니다.
8. 새 조건 아래에 숫자와 연결된 텍스트 응답을 추가합니다. 콘텐츠를 수식으로 변경합니다. 전체 수식은 number('Number'.text)-1이어야 합니다.
축하합니다!
정말 쉽지 않은 작업이었습니다. 방금 따라온 트릭을 완전히 이해하려면 4단계로 돌아가 다시 살펴봐야 할 수도 있지만, 흥미로운 방식으로 다시 활용할 수 있는 일종의 논리 마법입니다. 이제 나아가 자신만의 ProtoPie 마법을 만들어 보세요(공유하는 것도 잊지 마세요)!
