조건문을 활용해 원형 슬라이더를 설계하는 방법

슬라이더는 사용자가 손잡이 같은 컨트롤을 움직여 범위 내의 값을 쉽게 조절할 수 있게 해줍니다. 정확한 숫자가 아니라 대략적인 선택만 필요할 때에 적합합니다.

이 튜토리얼에서는 사용자가 퍼센트 표시를 조절하는 노브를 제어할 수 있는 원형 슬라이더를 만드는 방법을 배웁니다. ProtoPie는 Chain 트리거와 변수 요소를 사용해 이 과정을 간소화합니다. Chain 트리거를 사용하면 노브의 회전을 슬라이더의 활성 영역에 연결할 수 있고, 변수는 회전을 계산하여 표시되는 퍼센트 값을 업데이트하는 데 도움을 줍니다.

자, 시작해 볼까요!

개요

• 1단계. 노브를 드래그 가능하게 만들기

• 2단계. 마스크와 Chain 트리거를 사용해 슬라이더의 활성 부분을 드러내기

• 3단계. 텍스트 값이 노브의 회전에 대응하도록 만들기

마지막에는 아래와 같은 것을 만들 수 있게 됩니다👇

[시작 Pie 파일] [완료된 Pie 파일]

1단계. 노브를 드래그 가능하게 만들기

1. 시작하려면 원형 다이얼의 크기에 맞는 컨테이너를 만듭니다. 그런 다음 Knob 오브젝트를 컨테이너로 드래그하고 이름을 "Knob Container"로 변경합니다.

2. Knob Container의 원점을 가운데로 변경합니다.

3. Knob 오브젝트를 선택한 상태에서 Drag 트리거를 추가합니다. Knob Container를 선택하고 Rotate 응답을 추가합니다. 이제 미리보기 창에서 노브를 원형 다이얼을 기준으로 완벽하게 회전시킬 수 있습니다.

💡 참고: 원형 슬라이더에서 Knob 오브젝트를 드래그 가능하게 만드는 다른 방법도 있지만, 이 레슨에서 사용하는 방법보다 효율이 떨어집니다.

대안은 Knob의 원점을 컴포넌트의 중심으로 바꾸고 Rotate 응답을 사용하는 것입니다. 그러나 ProtoPie에서는 원점 값이 퍼센트로 설정되기 때문에 정확한 위치를 맞추기 까다롭습니다. Knob 오브젝트가 다이얼을 기준으로 완벽하게 회전하도록 하려면 시행착오가 자주 필요하므로, 이 튜토리얼에서 설명한 방법을 권장합니다.

2단계. 마스크와 Chain 트리거를 사용해 슬라이더의 활성 부분을 드러내기

다음 단계에서는 노브가 움직일 때 슬라이더의 활성 부분이 드러나도록 설정하기 위해 마스크를 사용합니다.

파트 1. 마스크 설정하기

1. 먼저 원을 세로로 나누는 두 개의 도형 반쪽을 만들고 왼쪽과 오른쪽 반쪽에 배치합니다. 정확한 치수를 확인하려면 왼쪽과 오른쪽 이미지의 크기(128x256)를 참고하면 됩니다. 반쪽이 노브를 양분하기 때문에 두 개의 반쪽을 만드는 것이며, 노브가 회전할 때 반쪽들도 함께 회전하여 활성 부분을 드러냅니다.

2. 오른쪽 반쪽 이미지를 왼쪽에 있는 마스크 안에 배치합니다. 왼쪽의 도형 반쪽을 오른쪽 이미지 아래로 드래그한 다음, 도형 반쪽을 선택하고 ”마스크로 사용”을 선택합니다. 도형 레이어의 채우기는 제거합니다. 요소 위에 있는 모든 레이어도 함께 마스킹된다는 점에 유의하세요. 대신 오른쪽 이미지와 왼쪽 마스크를 선택해 각각의 컨테이너에 넣어야 합니다.

3. 왼쪽 이미지를 오른쪽 도형 레이어와 함께 컨테이너에 넣고 마스크를 만듭니다.

파트 2. Chain 트리거 설정하기

다음 단계에서는 활성 영역이 드러나도록 마스크의 회전을 노브 컨테이너의 회전에 연결할 것입니다.

1. Left Mask를 선택하고 원점을 center-left(또는 원형 슬라이더의 정확한 중앙)로 설정합니다. **오른쪽 마스크**도 같은 방식으로 반복하여 원점이 원형 슬라이더의 정확한 중앙에 오도록 합니다.

2. Knob Container의 Rotation에 Chain 트리거를 추가합니다.

3. 회전 시 드러나는 부분은 노브가 움직일 때 먼저 오른쪽 반쪽이 나타나므로 오른쪽 반쪽부터 시작됩니다. Left Mask를 선택하고 Chain 트리거에 Rotate 응답을 추가합니다. 값이 모두 0에서 180이 되도록 입력합니다.

4. Right Mask를 선택하고 Chain 트리거에 Rotate 응답을 연결합니다. 회전 범위는 180에서 360, 각도 범위는 0에서 180입니다.

미리보기 창에서 살펴봅시다.

3단계. 텍스트 값이 노브의 회전에 대응하도록 만들기

1. 변수를 만들고 이름을 value로 지정합니다. 이 변수를 선택한 상태에서 Chain에 Assign를 추가합니다. 변수를 value 변수로 변경하면 컨테이너 값에 따라 값이 할당됩니다. Rotation의 범위를 0에서 360으로, Value의 범위를 0에서 100으로 변경합니다.

2. 디버거 아이콘을 클릭하여 값이 변경되는지 확인할 수 있습니다. Preview window를 열고 드래그해 보세요. 드래그하는 동안 값이 변하는 것을 볼 수 있어야 합니다. 값에 소수점 이하 두 자리가 포함된다는 것을 알게 될 것입니다. 걱정하지 마세요. 다음 단계에서 이를 처리하겠습니다.

3. value 변수에 연결된 Detect 트리거를 만듭니다. 텍스트 Value에 연결된 Text 응답을 만듭니다. 내용을 formula로 변경합니다. formula round(value)+"%"를 사용하게 됩니다. 이렇게 하면 소수점이 제거되고 가장 가까운 정수로 반올림됩니다.

💡 round(): 숫자를 반올림한 값을 반환합니다.

• round(source:NUMBER) → NUMBER

축하합니다!

이 튜토리얼을 끝까지 따라오느라 수고하셨습니다! 멋진 ProtoPie 프로젝트에 사용할 원형 슬라이더를 만드는 과정이 즐거우셨기를 바랍니다. 여러분의 창의적인 실험도 꼭 보고 싶습니다. 자신만의 프로토타입을 만들어 #MadeWithProtoPie와 함께 X 또는 Instagram에 공유해 주세요.

[ProtoPie 다운로드] {커뮤니티에 가입하기}