소개
체크박스 폼은 UI 디자인에서 사용자가 여러 선택지 중에서 여러 옵션을 선택할 수 있게 해 주는 입력 요소입니다. 하나의 체크박스 폼 안에는 여러 개의 체크박스(하위 항목)가 중첩될 수 있습니다. 사용자는 체크박스를 체크하여 활성화하고, 체크박스를 체크 해제하여 비활성화할 수 있습니다. 이 효과는 Protopie에서 Components와 Send & Receive 기능을 사용하여 쉽게 구현할 수 있습니다. 이 레슨에서는 각 트리거에 연결된 두 개의 조건 트리거와 불투명도 응답으로 구성된 체크박스 컴포넌트를 사용할 것입니다. 또한 이 컴포넌트는 장면의 모든 항목을 체크/체크 해제하기 위해 Send & Receive를 사용합니다.
학습 내용
체크박스 컴포넌트 만들기
컴포넌트에 **Send & Receive ** 추가하기
Send & Receive를 사용해 모든 항목 체크하기
Send & Receive를 사용해 모든 항목 체크 해제하기
변수에 체크박스 상태 저장하기
전체 체크 항목이 모든 하위 항목에 반응하기
마지막에는 이런 것을 만들 수 있게 됩니다!
단계별 안내
1. 체크박스 컴포넌트 만들기
1. 체크되지 않은 항목을 컴포넌트로 만듭니다. 그리고 방금 만든 컴포넌트에 체크된 항목을 복사해서 붙여넣습니다.
컴포넌트는 프로토타입 전체에서 재사용할 수 있는 상호작용이 포함된 레이어 세트입니다. 이렇게 하면 불필요한 반복 작업을 줄이고 시간을 절약할 수 있습니다. 트리거와 응답으로 구성된 체크박스 컴포넌트를 장면에 복제해 필요할 때마다 재사용할 수 있습니다.
복사하려면 ctrl/command + c, 붙여넣으려면 ctrl/command + v
2. 레이어 이름을 바꾸고 체크된 레이어의 불투명도를 0으로 설정합니다.
레이어 패널에서 체크된 레이어가 체크되지 않은 레이어 위에 놓이도록 해야 합니다. 이제 가장 위에 있는 레이어(체크된 레이어)의 불투명도만 사용해서 켜고 끄겠습니다(켜짐은 100%, 꺼짐은 0%를 의미합니다). 기본 상태에서는 항목이 체크 해제된 상태입니다. 체크된 항목이 체크되지 않은 항목 위에 있으므로, 기본 불투명도는 0%여야 합니다.
레이어 이름을 바꾸고 체크된 레이어의 불투명도를 0으로 설정합니다
3. 체크박스에 Tap 트리거를 추가합니다.
4. 조건을 추가하고 체크된 항목의 불투명도를 0으로 설정합니다.
조건은 특정 조건이 충족될 때만 응답이 실행되도록 할 수 있습니다. 여기서는 체크박스에 가능한 상태가 2개이고 서로 충돌하므로 조건을 사용해야 합니다. 따라서 서로 다른 두 조건을 사용하고, 각각 특정 응답을 생성하게 됩니다.
조건은 =, <, > 같은 논리 검사를 의미하며, 논리 검사가 통과할 때만 트리거 응답이 실행됩니다
5. 체크된 레이어의 불투명도 = 0일 때, 불투명도 응답을 사용해 불투명도 값을 100으로 설정합니다.
불투명도 값을 100으로 설정하면 체크된 레이어가 표시됩니다. 따라서 체크박스를 탭했을 때 아직 체크되어 있지 않다면 체크됩니다.
6. 체크된 레이어의 불투명도 = 100일 때, 불투명도 응답을 사용해 불투명도 값을 0으로 설정합니다.
불투명도 값을 0으로 설정하면 체크된 레이어가 사라집니다. 따라서 체크박스를 탭했을 때 체크되어 있다면 체크를 해제합니다.
2. 컴포넌트에 Send 추가하기
컴포넌트에서는 Send와 Receive를 모두 활성화해야 합니다.
기본적으로 컴포넌트는 서로와 장면으로부터 분리되어 있습니다. 이 한계를 극복하려면 Send와 Receive를 사용해야 합니다. 자세히 알아보기.
체크박스 항목이 체크되면 checked 메시지를, 체크 해제되면 unchecked 메시지를 보내야 합니다. 또한 하위 항목 중 하나라도 체크 해제되면 전체 체크 항목도 체크 해제되어야 합니다. 마찬가지로 모든 하위 항목이 체크되면 전체 체크 항목도 체크되어야 합니다.
1. 항목이 체크되었을 때 조건 아래에 Send 응답을 추가합니다. 'Send to parent'를 선택하고 메시지를 지정합니다. 그리고 값을 함께 보냅니다. 값은 1로 설정할 수 있습니다. 이 값은 체크박스 항목의 상태를 구분하는 데 사용됩니다. 항목을 체크할 때는 1을, 항목을 체크 해제할 때는 0을 사용합니다. 프로토타입 전체에서 일관성만 유지한다면 원하는 숫자를 사용해도 됩니다.
같은 컴포넌트의 인스턴스가 여러 개일 때는 Send to parent를 사용합니다. 이번에는 장면에 체크박스 컴포넌트 인스턴스가 4개 있습니다. 따라서 "Send to parent" 채널을 사용해야 합니다.
이번에는 Send 응답과 함께 값도 보냅니다. 항목을 체크 해제할 때는 0을 보내고, 체크할 때는 1을 보냅니다. 메인 장면에서는 이 메시지를 받기 위해 몇 가지 변수를 사용할 것입니다. 이 변수들은 나중에 전체 체크 항목의 로직을 위한 조건 검사에 사용됩니다.
Send 응답을 사용할 때 값도 함께 보낼지 여부를 항상 선택할 수 있습니다
**💡 **채널 설명 (Send to "who")
****Send to Parent: 부모 컴포넌트가 없을 때 컴포넌트에서 부모 컴포넌트 또는 장면으로 메시지를 보냅니다.
Send to Child Component: 컴포넌트에서 자식 컴포넌트로 메시지를 보냅니다.
Send to Current Scene: 컴포넌트가 사용된 장면으로 메시지를 보냅니다.
Send to Current Component: 이 채널을 사용하면 컴포넌트 내부에 머무르는 메시지를 보낼 수 있습니다.
Note: 같은 값을 가진 컴포넌트를 다루거나 장면에 컴포넌트가 하나뿐인 경우에는 대신 Send to Current Scene를 사용할 수 있으며, 이 경우 컴포넌트를 지정할 필요가 없고 메시지는 장면 전체에 전역으로 전송됩니다. 이번에는 장면에 같은 컴포넌트 인스턴스가 여러 개 있고 어떤 인스턴스에서 메시지를 받는지 알아야 하므로 Send to parent를 사용하려고 합니다.
2. 마찬가지로 항목이 체크 해제되었을 때 조건 아래에 Send 응답을 추가합니다. 이번에는 메시지를 'unchecked'로 바꾸고 값을 0으로 설정합니다.
값은 메인 장면으로 전송되어 변수에 저장됩니다. 이 변수들은 체크박스 상태를 저장합니다. 1은 체크됨을 의미하고, 0은 체크 해제를 의미합니다.
3. Send & Receive를 사용해 모든 항목 체크하기
1. 메인 장면으로 돌아갑니다. 전체 체크 항목에서 오는 메시지를 받기 위해 Receive 트리거를 추가합니다.
2. 전체 체크 항목이 checked라는 메시지를 받으면 모든 항목이 체크되어야 합니다. 따라서 각 항목에 개별적으로 Send 응답을 추가하고 checked라는 메시지를 지정합니다.
Send to component 채널을 사용하면 어떤 컴포넌트 인스턴스로 메시지를 보낼지 선택할 수 있습니다. 전체 체크 항목이 체크되면 모든 하위 항목이 동시에 체크되도록 해야 합니다. 전체 체크 항목은 이 메시지에 반응하여 체크되면 모든 하위 항목을 체크합니다.
3. 컴포넌트로 돌아갑니다. 메인 장면에서 오는 메시지를 받기 위해 Receive 트리거를 추가합니다. 'checked'라는 메시지를 받으면 체크된 그룹의 불투명도를 100으로 설정합니다.
이제 전체 체크 항목을 체크하면 다른 3개의 하위 항목도 모두 체크됩니다.
"Receive from parent"는 컴포넌트의 부모로부터 메시지를 받는다는 뜻이며, 부모 컴포넌트가 없으면 메인 장면에서 메시지를 받습니다.
4. Send & Receive를 사용해 모든 항목 체크 해제하기
******메인 장면으로 돌아갑니다. **마찬가지로, 전체 체크 컴포넌트가 unchecked를 받으면 각 항목에 개별적으로 **unchecked ** 메시지도 보냅니다.
1. 전체 체크 항목에서 오는 메시지를 받기 위해 Receive 트리거를 추가합니다. 메시지는 unchecked일 수 있습니다.
2. 전체 체크 항목이 unchecked라는 메시지를 받으면 모든 항목이 체크되어야 합니다. 따라서 각 항목에 개별적으로 Send 응답을 추가하고 unchecked라는 메시지를 지정합니다.
3. 마찬가지로 컴포넌트가 unchecked라는 메시지를 받으면 **체크된 **그룹의 불투명도를 0으로 설정합니다.
4. 미리보기 창에서 확인해 봅시다. 이제 전체 체크 항목의 체크를 해제하면 다른 3개의 하위 항목도 모두 체크 해제됩니다.
5. 변수에 체크박스 상태 저장하기
상호작용을 더 완성도 있게 만들기 위해, 전체 체크 항목이 다음 모든 하위 항목에 반응하도록 하고 싶습니다:
모든 하위 항목이 체크되어 있으면 전체 체크 항목도 체크되어야 합니다
하위 항목 중 하나라도 체크 해제되어 있으면 전체 체크 항목도 체크 해제되어야 합니다
이렇게 하려면 메인 장면에서 어떤 항목이 체크되었고 어떤 항목이 체크되지 않았는지 알아야 합니다. 이를 위해 각 항목의 상태를 값으로 저장하는 변수를 사용해야 합니다.
1. 체크박스 1에서 메시지와 함께 전송된 값을 저장할 변수를 만듭니다.
변수를 만들 때 "모든 장면에 적용" 또는 "이 장면에만" 변수를 만들 수 있습니다. 이번에는 둘 다 가능합니다.
Receive 트리거를 사용하려면 Add Trigger 메뉴에서 추가하기만 하면 됩니다. 각 Receive 트리거마다 "receiving" 채널, 메시지를 받는 대상 컴포넌트, 그리고 변수에 할당할 값을 선택할 수 있습니다.
변수에 값을 저장하려면 Assign to Variable 옵션을 체크하고 값을 할당할 변수를 선택하기만 하면 됩니다.
변수 "checkbox1"에 "checked" 상태를 저장합니다
변수 "checkbox1"에 "unchecked" 상태를 저장합니다
2. 같은 방법으로 나머지 2개 항목에도 적용할 수 있습니다. 체크 항목의 상태를 저장하려면 총 3개의 변수와 6개의 Receive가 필요합니다.
여러 트리거를 선택할 때는 ctrl/command + G를 눌러 이 트리거들을 그룹화할 수 있습니다
3. 미리보기 창에서 확인해 봅시다. 체크와 체크 해제를 할 때마다 변수 값이 바뀌는 것을 볼 수 있습니다. 하위 항목이 체크되면 해당 체크박스 항목의 변수 값이 1로 업데이트됩니다.
4. 그러나 이 방법을 사용하면 **Today ** 항목으로 전체 체크 또는 체크 해제를 시도할 때 변수에 저장된 값은 바뀌지 않습니다. 이를 해결하려면 각 변수에 값을 수동으로 할당해야 합니다.
5. 같은 방법으로 3개 항목에 각각 값을 할당해야 합니다. 이제 변수들이 상태와 일치합니다.
6. 미리보기 창에서 확인해 봅시다. 이제 전체 체크 항목이 체크되면 모든 하위 항목이 체크되고 값이 1로 반환됩니다. 전체 체크 항목이 체크 해제되면 모든 하위 항목이 체크 해제되고 값이 0으로 반환됩니다.
6. 전체 체크 항목이 모든 하위 항목에 반응하기
1. 하위 항목 중 하나라도 체크 해제되면 부모 항목을 체크 해제하려면, 어떤 하위 항목이든 unchecked 메시지를 받을 때 전체 체크로 메시지를 보낼 수 있습니다.
즉, 하위 항목 중 하나라도 체크 해제하면 전체 체크 항목도 체크 해제됩니다. 이렇게 하려면 각 하위 항목이 체크 해제될 때마다 전체 체크 항목으로 unchecked 메시지를 보내도록 만들겠습니다.
다음 단계에서 그 방법을 설명하겠습니다:
모든 하위 항목이 체크되어 있으면 전체 체크 항목도 체크됩니다. 하위 항목 하나로 전체 체크 항목을 체크 해제하는 것과 달리, 하위 항목의 상태가 바뀔 때마다 모든 하위 항목이 체크되어 있는지 매번 확인할 것입니다. 모든 하위 항목이 전체 체크 항목을 체크할 가능성을 갖도록 Detect trigger를 사용할 것입니다. 이를 위해서는 모든 변수의 값을 감시해야 합니다. 값이 변하는 것을 감시하기 위해 Detect trigger를 사용할 것입니다. (Detect 트리거에서는 레이어 속성이나 변수가 변경될 때 응답이 활성화됩니다.)
1. 변수 checkbox1에 Detect 트리거를 추가합니다.
2. 모든 변수가 1과 같을 때의 조건을 추가합니다.
3. 체크된 항목에 checked 메시지를 보냅니다.
4. 각 항목에 적용하기 위해 이 단계를 3번 반복해야 합니다.
하위 체크박스 상태 변수 중 하나라도 변경되면, 3개의 하위 체크박스 상태 변수 모두가 1과 같은지(즉, 3개 모두 체크되어 있는지) 확인합니다. 그렇다면 전체 체크 체크박스를 체크하기 위해 메시지를 보내야 합니다.
이 세 트리거는 같은 응답을 가집니다. 유일한 차이는 Detect 트리거의 대상입니다
5. 미리보기 창에서 확인해 봅시다. Today를 체크하면 아래의 모든 하위 항목이 체크되는 것을 볼 수 있습니다. 하위 항목 중 하나라도 체크 해제하면 Today도 함께 체크 해제됩니다.
축하합니다!
와! 이제 체크박스 폼에서 항목을 체크/체크 해제하는 방법을 배웠습니다.
