안녕하세요 ProtoPie 한국 총판 단군소프트입니다.
사실적이고 역동적인 프로토타입을 만들기 위해서는 수학이 중요하다는 사실 알고 계시나요?
많은 디자이너가 겪는 보다 사실적인 프로토타입 제작의 어려움도 수학적 지식을 이용하면 해결할 수 있습니다.
하지만 수학자가 아닌 이상 수학이라는 말을 들으면 거부감이 드실 텐데요.
여기에서 말하는 수학에 대한 지식은 학교에서 배우는 순수 수학이 아니라 단순한 숫자 계산을 기반으로 한 수학적 사고방식을 말하는 것이니 너무 걱정하지 마세요.
아직 무슨 소리인지 모르시겠다고요?
오늘은 ProtoPie에서 수학적 지식으로 변수와 수식을 사용하는 몇 가지 예시를 알려드리겠습니다.
자세한 내용은 아래에서 살펴보세요>>
ProtoPie의 다양한 기능을 이용해 여러 함수를 만들어 보세요!
ProtoPie에는 상호작용의 가능성을 열어주는 다양한 기능들이 있습니다. 이 기능들을 사용하면 변수를 정의하고 산술 연산 및 함수에 사용할 수 있는 공식을 만들 수 있습니다. 그리고 이 기능들을 이용하면 더 사실적이고 역동적인 프로토타입을 만들 수 있습니다.
그럼 몇 가지 기능들을 살펴보겠습니다.
| 슬라이더(Slider) |
슬라이더(Slider)란 온도계와 같이 가장자리를 드래그하면서 높이를 조정할 수 있는 기능을 말합니다. 이 슬라이더(Slider)는 드래그(Drag) 트리거 및 스케일(Scale) 응답을 통해 간단히 만들 수 있습니다. 그런데 슬라이더(Slider)를 드래그하는 동안 도달한 백분율이나 백분위 수가 변경되는 것을 표현하려면 어떻게 해야 할까요?
대부분의 경우 슬라이더의 높이가 정확히 100px이거나 1:1 비율로 화면상의 높이가 일치하지 않습니다. 그래서 백분율이나 백분위 수가 변경되는 것을 확인하기 위해서는 약간의 수학이 필요합니다. 현재 백분율과 슬라이더의 높이를 이용하면 다음과 같은 식을 만들 수 있습니다.
현재 백분율 = (100 % × 현재 높이) ÷ 슬라이더의 높이
위의 공식에 대입해 보면, 530픽셀 높이 슬라이더에서 40픽셀을 드래그하면 7.547 %의 비율에 도달한다는 것을 간단하게 알 수 있습니다.
추가로 ProtoPie에는 이 백분율 값을 더 잘 표시할 수 있는 다음과 같은 기능을 이용할 수 있습니다.
- ceil: 소수점 첫째 자리에서 올림합니다. Ex) ceil (7.547) = 8
- round: 소수점 첫째 자리에서 반올림합니다. Ex) round (7.547) = 8
- floor: 소수점 첫째 자리에서 내림합니다. Ex) floor (7.547) = 7
이 기능들은 다음과 같이 위의 식과 함께 사용할 수 있습니다.
현재 백분율 = floor {(100 % × 현재 높이) ÷ 슬라이더의 높이}
[프로토파이를 이용해 슬라이더 높이를 확인해 보세요. ↓ ↓]
cloud.protopie.io/p/7a41d4df25
[Math] Slider | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
| 거리 표시(Distance display) |
터치스크린에 있는 원의 드래그 거리를 알고 싶으면 어떻게 해야 할까요? 물론, 드래그 후 출발점과 도착점에서의 높이(Y좌표)를 보면 거리는 비교적 쉽게 구할 수 있습니다. 하지만 표준치는 어떻게 구할까요?
거리의 표준치를 알기 위해서는 터치 업(Touch Up) 및 터치다운(Touch Down) 트리거 두 변수의 차이가 필요합니다. 더 자세히 말하면 터치스크린을 터치 다운로드할 때 원의 높이(Y 좌표)를 첫 번째 변수에 할당하고 터치 업할 때의 위치를 두 번째 변수에 할당해 아래의 공식처럼 두 변수의 차이를 구하면 드래그 거리를 알 수 있습니다.
거리 = 두 번째 변수-첫 번째 변수
양수(+)의 거리 값은 아래로 이동함을 의미하고 음수(-) 값은 위로 이동함을 의미합니다. 마이너스 기호 없이 거리 값만 표시하려면 abs 기능을 사용하세요.
abs (-135.6) = 135.6
cloud.protopie.io/p/98ee2c3e65
[Math] Distance | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
| Swipe Counter |
디스플레이에 표시되는 컨트롤러 없이 거리를 알고 싶다면 어떻게 해야 할까요? 바로 ProtoPie에 있는 몇 가지 사전 정의된 변수를 사용하면 됩니다.
- touchY : 터치 포인트의 높이(Y 좌표 위치)
- touchVelocityY : 단위 시간 및 방향 동안 이동할 거리
Touch Velocity는 시간당 거리를 뜻하는 속도와 방향을 표시합니다. 아래쪽으로 끌면 양수(+), 위쪽으로 끌면 음수(-) 값으로 표시합니다. 그리고 일정 거리를 위로 끌 때마다 카운터를 만들고 아래를 끌 때 카운터를 늘릴 수 있습니다.
[Touch Velocity 기능을 실제로 확인해 보세요. ↓ ↓]
cloud.protopie.io/p/da79ae507f
[Math] Swipe | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
| 노브 카운터(Knob counter) |
자동차 중앙 화면의 온도를 조절하는 손잡이와 같이 많은 종류의 노브는 특정 각도가 아닌 특정 회전량을 기준으로 작동합니다. 그렇다면 회전량을 알기 위해서는 어떻게 해야 할까요?
회전량을 알기 위해서는 노브를 회전하는 동안의 처음 각도와 마지막 각도의 차이 값이 필요합니다. 차이 값이 양수(+)이면 시계 방향으로 회전하고 음수(-) 값은 시계 반대 방향으로 회전합니다. 이 기능을 위한 계산에서는 카운터를 늘리거나 줄인 후 초기 각도 변수를 마지막 각도로 업데이트하는 것이 중요합니다.
[프로토타입에서 노브 카운터를 계산하는 방식을 살펴보세요. ↓ ↓]
cloud.protopie.io/p/cd14ad32f5
[Math] Knob | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
| 타이머(Timer) |
AI가 탑재된 디지털 비서와 가전제품에는 알림 해주거나 완료된 작업에 대해 시간을 설정할 수 있는 타이머가 있습니다.
타이머는 카운터와 같은 방법으로 만들 수 있습니다. 다만, 시계 형식의 타이머는 일반적으로 90 분이 아닌 1:30 (1 시간 반)으로 표시됩니다. 그럼 나누기를 이용해 수식을 만들어 볼까요? 다들 아시겠지만 90을 60으로 나누면 몫은 1이고 나머지는 30입니다.
90 ÷ 60 = 60 × 1 + 30
이 식은 다음의 식으로 표현할 수 있습니다.
90 ÷ 60 = 1 R 30
그리고 모듈 연산으로 표시하면 다음과 같이 표현됩니다.
90 mod 60=30
90% 60 = 30
위에서 알려준 나누기 수식과 모듈 연산식을 사용하면 아래와 같이 카운터를 타이머 형식으로 변환할 수 있습니다.
시간 = 층 (카운터/60)
분 = 카운터 % 60
한 가지 더!
"05"분과같이 분을 두 자리고 표시하려면 lpad 기능을 사용하여 숫자 왼쪽에 “0”을 추가하면 됩니다. 즉, “05”를 표현하고 싶으면 lpad(5,2, ”0”)라고 표시하면 됩니다.
lpad (카운터 % 60, 2, "0")
[프로토타입으로 타이머 기능을 직접 사용해 보세요! ↓ ↓]
cloud.protopie.io/p/1c7450df7d
[Math] Timer | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
| 다양한 프로토타입 사례 |
마지막으로 오늘 보여 드린 몇 가지 기능을 적용하여 만들 수 있는 몇 가지 프로토타입을 소개합니다.
cloud.protopie.io/p/d21c4546cc?_ga=2.20234814.748519906.1606962893-1804490704.1605664135
ProtoPie Home: Lights | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
cloud.protopie.io/p/923e616f11?&_ga=2.48533408.748519906.1606962893-1804490704.1605664135
ProtoPie Home: Sound | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
cloud.protopie.io/p/8f60414d46?_ga=2.46967713.748519906.1606962893-1804490704.1605664135
Phone Key | ProtoPie Cloud
This prototype was made with ProtoPie, the interactive prototyping tool for all digital products.
cloud.protopie.io
오늘 알려드린 내용을 보시면 아시겠지만 프로토타입을 위해서 어려운 수학적 지식은 필요 없습니다.
몇 가지 간단한 수학적 지식과 아이디어를 자유롭게 사용하고 설명할 수 있다면 충분히 원하는 프로토타입을 만드실 수 있습니다.
혹시 더 궁금하신 사항이 있으시면 언제든지 아래에 댓글을 남겨주세요. 빠르게 답변해드리겠습니다!
오늘도 긴 글을 읽어주셔서 감사합니다.
이 글은 ProtoPie의 Mathematics, Your Ally for Better Prototyping를 번역한 글입니다.
'ProtoPie > ProtoPie 정보 공유' 카테고리의 다른 글
| 더 빠르고 간편해진 Sketch 가져오기 : Sketch 용 ProtoPie 플러그인 (0) | 2021.05.07 |
|---|---|
| 어디에도 없는 터치스크린 프로토타입을 소개합니다. (0) | 2020.11.26 |
| 프로토파이(ProtoPie)의 다양한 음성인식 프로토타입을 소개합니다. (0) | 2020.11.10 |