ProtoPie의 Formula 기능으로 입력 스테퍼 프로토타입 만들기

소개

입력 스테퍼(Steppers)는 사용자가 숫자 값을 점진적으로 늘리거나 줄이기 쉽게 해 주는 일반적인 디자인 요소입니다—숫자 변동폭이 작은 입력 필드에 사용할 때 가장 효과적입니다. Voice나 Gestural 같은 다른 유형의 인터페이스에서도 사용되지만, 이 글에서는 그래픽 사용자 인터페이스(GUI)를 위한 표준 스테퍼 유형을 다룹니다.

ProtoPie에서는 추가 노력 없이 숫자에 직접 수학 공식을 적용할 수 있어 스테퍼 인터랙션을 쉽게 프로토타이핑할 수 있습니다. 잠깐 살펴보면, 여기서 다룰 두 가지 공식 변형 중 하나는 다음과 같습니다: number(Layer Name.text)+1

배울 내용

이 레슨에서는 다음을 구현합니다:

1. 텍스트 레이어에 'Make Editable' 적용

2. 숫자를 증가시키는 수식 ( + )

3. 숫자를 감소시키는 수식 ( - )

4. 예외 상황을 위한 조건문

이 워크스루를 끝내면, 이것을 만들 수 있습니다!

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

단계별 설명

1. 텍스트 레이어에 'Make Editable' 적용

1. 오른쪽 속성 패널에서 텍스트 레이어(Number)를 선택한 다음 Make Editable을 클릭합니다.

💡 다른 디자인 프로그램(Figma, Adobe XD, Sketch 등)에서 레이어를 가져오면 모든 레이어는 객체로 가져와집니다. ProtoPie에서 해당 객체를 편집하려면, 객체를 편집 가능한 레이어로 바꿔야 합니다(즉, 가져온 텍스트 객체를 편집 가능한 텍스트 레이어로 변경해야 합니다).

'Number' 레이어를 선택하고 'Make Editable' 기능을 사용해 편집 가능하게 만드는 과정을 보여주는 GIF.

2. 숫자를 증가시키는 수식 ( + )

1. + 그룹에 Tap 트리거를 추가한 다음, 이 Tap 트리거에 대해 Number 레이어에서 Text 응답을 추가합니다.

'Number' 레이어에서 오는 [Text] 응답을 '+' 버튼 그룹의 새 [Tap] 트리거의 일부로 보여주는 GIF.

　2. 새 Text 응답의 콘텐츠 섹션에서 Text 대신 Formula로 변경합니다.

[Text] 응답의 콘텐츠가 [text]에서 [formula]로 바뀌는 과정을 보여주는 GIF

　3. fx 버튼을 클릭합니다. 그러면 수식 입력줄이 열리고 다음을 입력할 수 있습니다: number('Number'.text)+1 이는 ProtoPie에 Number 텍스트를 숫자로 읽도록 알려 주는 내부 변환 함수입니다. 이를 통해 ProtoPie가 텍스트에 직접 수학 연산을 수행할 수 있습니다.

수식 입력줄에 number('Number'.text)+1 수식을 입력하는 방법을 보여주는 GIF

지금 프로토타입을 실행해 보세요. + 버튼을 탭할 때마다 숫자가 1씩 증가하는 것을 볼 수 있지만, - 버튼은 아직 비활성화되어 있습니다. 지금까지 배운 내용을 사용해 - 버튼의 인터랙션을 활성화해 보겠습니다.

3. 숫자를 감소시키는 수식 ( - )

1. 이전 섹션의 첫 단계와 비슷하게, [Tap] 트리거를 '-' 그룹에 만들고 [Text], [formula] 응답을 'Number' 레이어에서 추가합니다.

'-' 그룹에 대해 비슷한 [Tap] 트리거와 [Text] 응답 구성을 보여주는 GIF.

　2. - 버튼 그룹을 탭할 때마다 숫자가 감소하도록 하려면, 이번에 사용할 수식은 다음과 같습니다: number('Number'.text)-1

원래 수식에 -1을 더해 감소하는 인터랙션을 프로토타이핑하는 과정을 보여주는 GIF.

지금 프로토타입을 실행해 보세요. 그러면 + 및 - 버튼이 각각 숫자 값을 증가시키거나 감소시켜야 합니다. 또한 스테퍼가 음수 값까지 내려갈 수 있다는 것을 알 수 있습니다. 조건문을 사용해 사용자가 음수 값을 입력하지 못하도록 막을 수 있습니다.

4. 예외 상황을 위한 조건문

ProtoPie의 conditionals 기능은 음수와 같은 예외 상황을 방지하는 방법을 테스트하는 데 도움이 됩니다. 조건문은 우선순위가 높은 항목으로 인식되며, ProtoPie는 다른 응답을 실행하기 전에 이를 먼저 확인합니다.

이 경우 사용자가 텍스트가 0일 때 - 버튼 그룹을 클릭하면, 해당 그룹에 할당한 원래 감소 수식을 건너뛰고 0 조건에 응답하는 작업을 실행합니다.

1. Tap 트리거에서 - 그룹의 Number 레이어에 다음 condition을 추가합니다: Text of 'Number' = 0

2. 이 condition 아래에 Number 레이어의 Text 응답을 추가합니다. 응답 콘텐츠는 Text로 설정하고 0을 입력합니다.

'Number' 레이어가 [Text]를 0으로 설정하여 응답하는 "0" 값 조건 구성을 보여주는 GIF.

Number의 텍스트 값이 0에 도달하면, 프로토타입은 더 이상 감소하지 않습니다.

이제 끝입니다!

수량을 편집할 수 있는 이커머스 상품 결제에 이 스테퍼 인터랙션이 적용된 모습을 보고 싶으신가요? 자세한 내용은 Component를 사용한 쇼핑 카트의 총 결제 금액 계산하기를 확인해 보세요.

이 사용 사례 튜토리얼이 도움이 되었나요? 교육 콘텐츠를 개선하는 데 도움이 되도록 이 1분 설문조사 에 참여해 주세요.