슬라이더의 값을 동적으로 표시하면 다양한 경험을 설계할 때 큰 가치를 더하고 즐거움을 줄 수 있습니다. 볼륨, 밝기, 또는 텍스트 음성 변환 속도를 조절하는 것이 몇 가지 예입니다. 하지만 이는 빙산의 일각일 뿐입니다 — 저장 요금제를 구매하는 슬라이더, 주문할 피자 수, 또는 소셜 미디어-그램의 스토리에 반응하는 슬라이더를 떠올려 보세요! 구현 방식에 따라 많은 경험을 더 쉽고 직관적으로 사용할 수 있습니다.
하지만 쉬운 것은 이것만이 아닙니다 — ProtoPie에 내장된 Chain 트리거와 Variables 접근 기능을 사용하면 이 경험을 기쁨을 잃지 않고 프로토타입할 수 있습니다.
개요
배울 내용
드래그 가능한 슬라이더 만들기 단계별 안내
1. 슬라이더의 Knob을 드래그 가능하게 만들기
2. Chain을 사용하여 Knob 뒤에 동적인 흔적 표시
3. 숫자 표시기가 Knob과 함께 움직이게 만들기
4. Variable을 사용하여 Knob의 현재 값 표시
이걸로 드래그 가능한 슬라이더를 프로토타입했습니다!
이 레슨에서는 다음을 배우게 됩니다:
슬라이더의 Knob을 드래그 가능하게 만들기
Chain을 사용하여 Knob 뒤에 동적인 흔적 표시
Chain을 사용하여 숫자 표시기가 Knob과 함께 움직이게 만들기
Variable을 사용하여 Knob의 현재 값 표시
마지막에는 다음과 같은 것을 만들 수 있습니다!
드래그 가능한 슬라이더 만들기 단계별 안내
1. 슬라이더의 Knob을 드래그 가능하게 만들기
1. Knob 레이어를 선택하고 Origin을 center로 설정합니다.
💡 왜 Origin을 Center로 설정했을까요?
Knob의 중심을 기준으로 위치를 표시하고 상호작용을 추가하고 싶지만, 기본 origin 위치는 왼쪽 위 모서리로 설정되어 있었습니다. 이를 가운데로 바꾸면 앞으로 상호작용을 추가할 때 위치를 쉽게 찾을 수 있습니다.
3. Knob 레이어를 선택하고 Drag 트리거를 추가합니다. +를 클릭하고 Move 응답을 추가합니다. 이동 direction을 horizontal로 설정합니다.
4. Move 응답의 Limit를 None에서 Custom Limit으로 변경합니다. 사용자 지정 제한에서는 Min X를 0, Max X를 212로 설정합니다.
💡 왜 "Custom Limit"이며, 왜 이 숫자들일까요?
Custom Limit을 선택하면 Knob의 움직임을 화면의 특정 지점으로 제한할 수 있습니다. 그렇지 않으면 레이어가 화면 전체 너비로 이동할 수 있습니다.
이 경우 움직임은 Track 레이어로 제한되어야 합니다. Track의 너비가 212이므로, Knob이 드래그될 수 있는 최대값으로 이를 설정합니다. 드래그될 수 있는 최소값은 0입니다. Knob이 Slider 컨테이너 안에 있고 0과 212는 그 기준에 상대적인 값이기 때문에 이 값들이 작동합니다.
5. Knob 레이어를 선택하고 속성 패널에서 Touch Area.를 활성화합니다. 모든 방향을 20으로 설정합니다. Knob 레이어 자체가 20 ✕ 20으로 매우 작기 때문에 더 터치하기 쉽게 만들기 위해 이 작업을 합니다. Touch Area를 설정하면 Knob의 터치 가능 영역은 60 ✕ 60이 됩니다.
2. Chain을 사용하여 Knob 뒤에 동적인 흔적 표시
1. Active 레이어를 선택하고, 속성 패널에서.
2. Knob을 선택하고 Chain 트리거를 추가합니다. Active를 선택하고 같은 Chain 트리거에 Scale 응답을 추가합니다.
3. Scale 응답을 선택하고, Range1에서 X = 0일 때 width를 0으로, X = 212일 때 212로 설정합니다.
💡 왜 이 값들일까요?
Knob이 X = 0에서 X = 212까지 움직일 수 있으므로 Range1의 X 위치에 같은 값을 사용합니다. Knob이 0에서 212로 움직일 때 Active의 너비는 그 위치와 일치해야 하므로 width = 0에서 width = 212로 변합니다.
앞서 Knob의 Origin을 center로 설정했기 때문에 Active 너비의 변화가 Knob의 위치와 정확히 일치합니다.
3. Chain을 사용하여 숫자 표시기가 Knob과 함께 움직이게 만들기
1. Number와 Slider 컨테이너를 선택하고(둘 다 선택하려면 레이어 패널에서 Shift를 누른 채 클릭), Ctrl+G(Mac에서는 Cmd+G)를 눌러 새 컨테이너로 그룹화합니다.
💡 왜 새 컨테이너에 넣어야 했을까요?
이는 각 객체의 좌표가 해당 컨테이너를 기준으로 하기 때문입니다. Number를 Slider만큼 넓은 컨테이너 안에 넣으면, X = 0일 때 Number는 컨테이너의 왼쪽 가장자리에 있고, X = 212일 때는 오른쪽 가장자리에 있게 됩니다. 앞으로 Number를 이동시킬 때 이 값들을 사용하기가 매우 쉬워집니다.
새 컨테이너를 만들지 않았다면, Number를 Slider의 왼쪽과 오른쪽 가장자리로 직접 드래그하여 Number의 X 값을 수동으로 찾아야 했을 것입니다.
2. Number를 선택하고 Origin을 center로 설정합니다 — 앞서 Origin을 가운데로 사용한 것과 같은 이유입니다. 이렇게 하면 앞으로 Knob와 같은 X 값을 사용할 수 있습니다.
3. Knob의 Chain 트리거 아래에 Move 응답을 추가합니다. Move 응답이 컨테이너 Number에 할당되었는지 확인합니다. Move 아래의 Range1에 다음 값을 할당합니다.
💡 왜 Move 응답을 "Number"에 할당해야 했을까요?
ProtoPie의 Trigger와 Response 모델에서는 각 항목에 올바른 레이어가 선택되어 있어야 합니다. 이 경우 Chain은 트리거이며 Knob에 적용됩니다. Response에서는 Number 컨테이너를 Move하고 싶습니다. 따라서 Move의 할당 대상을 Number로 변경합니다.
💡 왜 이 값들일까요?
Knob이 X = 0에서 X = 212까지 움직일 수 있으므로 Range1의 X 위치에 이 값을 사용합니다. Knob이 0에서 212로 움직일 때 Number도 그 위치와 일치해야 하므로, Number도 X = 0에서 X = 212로 이동시킵니다.
Number의 Origin도 center로 설정했기 때문에, 그 움직임이 Knob의 움직임과 완벽하게 맞아떨어집니다.
4. Variable을 사용하여 Knob의 현재 값 표시
1. 새 변수를 만듭니다 — 이 예제에서는 For All Scenes를 선택할 수 있습니다. Chain 트리거 아래에 Assign 응답을 추가합니다. Assign 응답의 대상은 value로 선택합니다. 다음 값을 사용합니다:
💡 왜 이 값들일까요?
Knob이 X = 0에서 X = 212까지 움직일 수 있으므로 Range1의 X 위치에 이 값을 사용합니다. Knob이 0에서 212로 움직일 때 value의 값이 0에서 100으로 변하는 것을 보여주고자 합니다.
이는 Knob이 X = 0에 있을 때 Value는 0이고, Knob이 X = 212에 있을 때 Value는 212가 된다는 뜻입니다.
2. 값 할당이 올바르게 작동하는지 테스트하려면 변수 옆의 bug icon을 클릭하여 실시간 값을 확인합니다. Preview window를 열고 드래그해 보세요 — 드래그하는 동안 값이 변하는 것을 볼 수 있어야 합니다. 값이 소수점 둘째 자리까지 표시되는 것을 확인할 수 있습니다. 걱정하지 마세요, 이 문제는 6단계에서 다루겠습니다.
3. Add Trigger를 누르고 Detect 트리거를 추가합니다. 이를 value.에 할당합니다.
4. 텍스트 레이어 Value.를 선택합니다.
5. Detect 트리거 아래에서 +를 클릭하고 Text 응답을 추가합니다.
6. Text response에서 내용을 Text에서 Formula.로 변경합니다. 수식 round(value)를 사용합니다.
💡 잠깐, 방금 무엇을 한 걸까요?
방금 round(source:NUMBER) 함수.를 사용했습니다. 이 함수는 숫자 값을 받아 반올림된 형식의 숫자를 반환합니다. 즉 round() 함수에 전달된 숫자에 소수점이 있으면, 출력으로 반올림된 정수를 받게 됩니다.
round(source:NUMBER)→ NUMBER
3단계에서 소수점 둘째 자리까지 값이 표시되는 것을 확인했기 때문에 Value에 round() 함수를 사용했습니다. 디자인 의도는 정수만 표시하는 것이므로 이 수식을 사용합니다.
이제 끝입니다, 드래그 가능한 슬라이더를 프로토타입했습니다!
잘하셨습니다! 드래그 가능한 요소를 만들고 사용자 지정 제한을 적용하는 방법을 배웠습니다. 또한 Chain을 사용해 여러 요소의 이동, 너비, 동적 숫자 값을 제어하는 방법도 배웠습니다! 꽤 많은 내용을 배웠지만, 그게 전부는 아닙니다 — 숫자 값을 정수로 반올림하고 이를 텍스트 레이어에 동적으로 할당하는 방법까지 배웠습니다!
ProtoPie에서 이 방법들을 계속 실험하고, 더욱 사실적인 경험을 만들어 보세요. 여러분의 멋진 실험을 꼭 보고 싶습니다! 직접 프로토타입을 만들어 LinkedIn, X, 또는 Instagram에 #MadeWithProtoPie.와 함께 공유해 주세요.
