현실적인 프로토타입은 모든 디자이너의 위시리스트에 있습니다. 그러나 대부분의 경우 디자이너들은 프로토타입을 다음 단계로 끌어올리는 방법에서 어려움을 겪곤 합니다. 사실, 역동적이고 현실적인 프로토타입을 만드는 일은 수학에 대한 몇 가지 지식과 실습이 있으면 더 쉬워질 수 있습니다. 사실 제가 말하는 것은 학교에서 배운 순수 수학이 아니라, 숫자 계산에 기반한 예술이나 기법에 더 가까운 것으로, 보다 수학적인 사고방식을 갖추는 것입니다.
이 주제를 단계별로 살펴보며 ProtoPie에서 변수와 수식을 사용하는 몇 가지 팁을 알려드리겠습니다**.**
변수와 수식이라니?
이것들은 ProtoPie만의 고유한 기능으로, 인터랙션의 잠재력을 끌어내 훨씬 더 역동적이고 현실적으로 만들어 줍니다. 이 기능의 장점은 자신만의 변수를 정의하고 자신만의
를 만들 수 있다는 점입니다. 여기서는 산술 연산, 변수, 함수 등을 사용할 수 있습니다. 기본적으로 원하는 것은 무엇이든 만들 수 있는 무한한 가능성을 제공합니다.
몇 가지 예시로 시작해 보겠습니다.
슬라이더
Drag 트리거와 Scale 반응을 사용하면 슬라이더를 쉽게 만들 수 있습니다. 슬라이더의 가장자리를 드래그하여 높이를 조절할 수 있습니다.
아마 슬라이더를 드래그하는 동안 어느 퍼센트까지 도달했는지, 또는 퍼센트가 어떻게 변하는지 보고 싶을 것입니다. 많은 경우 슬라이더의 높이는 정확히 100px이 아니거나 퍼센트와 1:1로 맞지 않는 높이를 가집니다. 따라서 이를 구현하려면 약간의 수학이 필요합니다. 이 비례식을 살펴보겠습니다.
예를 들어 높이가 530픽셀인 슬라이더에서 40픽셀을 드래그하면 7.547%에 도달합니다. 정말 쉽죠? 여기서는 퍼센트 값을 더 보기 좋게 표시하기 위해 몇 가지 함수를 사용할 수 있습니다:
ceil: 소수 첫째 자리에서 올림합니다. 예: ceil(7.547) = 8
round: 소수 첫째 자리에서 반올림합니다. 예: round(7.547) = 8
floor: 소수 첫째 자리에서 내림합니다. 예: floor(7.547) = 7
마지막으로, 퍼센트 표시를 위해 다음 수식을 사용해 볼 수 있습니다.
"%"는 "000%" 형식으로 표시하는 데 필요합니다.
거리 표시
터치스크린 위에 원이 있다고 상상해 보고, 드래그 거리를 알고 싶다고 해봅시다. 물론 드래그한 뒤 출발 지점과 도착 지점의 Y 위치만 보면 거리를 비교적 쉽게 구할 수 있습니다. 하지만 그 값들은 어떻게 얻을 수 있을까요? 이 문제를 해결하려면 드래그 동작을 살펴봐야 합니다. 손가락 패드가 화면에 닿아 드래그를 시작하고, 드래그가 끝나면 떨어집니다. 그러니 출발 지점에서 화면을 터치하고 도착 지점에서 손을 떼는 것이라고 할 수 있습니다. 짠!
Touch Down(출발 지점) → Drag → Touch Up(도착 지점).
Touch Up과 Touch Down 트리거의 차이를 이해해야 합니다. 또한 두 개의 변수가 필요합니다. 터치스크린을 누를 때 원의 Y 위치를 첫 번째 변수에 할당하고, 손을 뗄 때 두 번째 변수에 할당하세요. 그러면 두 변수의 차이를 구할 수 있고, 이것이 바로 드래그 거리입니다.
양수 거리 값은 아래로 이동했음을 의미하고, 음수 값은 위로 이동했음을 의미합니다. 마이너스 기호 없이 거리 값만 표시하고 싶다면 abs 함수를 사용할 수 있습니다.
스와이프 카운터
화면에 보이는 컨트롤러가 없지만 드래그한 거리를 알고 싶다면 어떨까요? 예를 들어 스마트폰에서 눈을 떼고 사용할 수 있는 사용자 인터페이스로 방의 온도를 설정하고 싶을 수 있습니다. 너무 복잡하게 들리나요? 간단한 해결책이 있습니다. ProtoPie에는 몇 가지 사전 정의 변수가 있습니다.
$touchY: 터치 지점의 Y 위치
$touchVelocityY: 단위 시간 동안 이동하는 거리와 방향
Touch Velocity는 방향과 속도 모두를 보여주며, 이는 시간당 거리입니다. 아래로 드래그하면 양수 값이 표시되고, 위로 드래그하면 음수 값이 표시됩니다. 네, 거의 끝났습니다.
마지막으로 카운터를 만들고, 특정 거리만큼 위로 드래그할 때마다 카운터를 증가시키고 아래로 드래그할 때는 감소시킬 수 있습니다.
노브 카운터
많은 노브는 특정 각도보다는 일정한 회전량으로 작동합니다. 자동차의 중앙 디스플레이에서 온도를 조절하는 노브를 떠올려 보세요.
노브를 회전할 때 초기 각도와 마지막 각도를 할당하기 위해 두 개의 변수가 필요합니다. 차이값이 양수면 시계 방향으로 회전한 것이고, 음수면 반시계 방향으로 회전한 것입니다. 이 예시에서는 다음 계산을 위해 카운터를 증가하거나 감소시킨 후 초기 각도 변수를 마지막 각도로 업데이트하는 것이 중요합니다.
회전하는 동안 변수에 값이 할당되는 모습.
타이머
디지털 어시스턴트나 가전제품에는 알림이나 작업 완료 시점을 위해 시간을 설정하는 타이머가 있습니다.
카운터와 같은 방식으로 타이머를 만들 수 있습니다. 하지만 보통 90분보다는 1:30(1시간 30분)처럼 시계 형식의 타이머를 보게 됩니다. 자, 다시 학교로 돌아가 나눗셈을 살펴봅시다. 90을 60으로 나누면 몫은 1이고 나머지는 30입니다.
다음 수식으로도 설명할 수 있습니다.
Mod(모듈로) 연산)은 다음과 같은 나머지를 구하는 데 도움이 됩니다.
따라서 나눗셈과 mod 연산을 사용해 Counter를 Timer 형식으로 변환할 수 있습니다.
한 가지 더, 분 단위는 항상 “05”처럼 두 자릿수로 표시하고 싶을 수 있습니다. lpad 함수를 사용해 숫자 왼쪽에 “0”을 추가하여 두 자릿수로 만들 수 있습니다. lpad(5, 2, “0”)는 “05”를 반환합니다.
오늘 보여드린 몇 가지 기법을 적용해 달성할 수 있는 예시를 소개합니다!
저는 수학을 바탕으로 한 몇 가지 기법과 팁을 소개했습니다. 물론 로켓 과학자나 수학자가 될 필요는 전혀 없습니다. 아이디어를 자유롭게 풀어내고 그것을 올바른 방식으로 설명할 수만 있다면, 그것만으로도 충분합니다. 여기 나열되지 않은 팁이 더 있다면 댓글로 남겨 주세요.
