시간 기반 UI는 UX 디자인 전략에서 종종 간과되지만, 스톱워치 스타일의 타이머는 운동, 요리, 생산성 앱에서 흔히 볼 수 있는 기능입니다. 여러분이 사용하는 앱 중 작업에 시간적 요소가 포함된 경우를 떠올려 보고, 설계 중인 앱 프로토타입에 스톱워치 타이머를 어떻게 적용할 수 있을지 생각해 보세요.
ProtoPie 는 디자이너가 수식, Detect 기능, 변수들을 사용해 실제로 작동하는 스톱워치 타이머를 만들 수 있게 해줍니다. 이 강력한 도구를 활용하면 ProtoPie는 데이터의 변화를 읽고 이에 반응할 수 있습니다. 복잡해 보일 수 있지만, 이 기능들을 살펴보면 ProtoPie가 데이터(그리고 시간) 중심 디자인에 얼마나 강력한 도구인지 알게 될 것입니다!
배울 내용
변수를 사용해 센티초 자동화하기
Detect와 조건으로 초 증가시키기
Detect와 조건으로 분 증가시키기
스톱워치를 멈추고 초기화하기
마지막에는 이런 것까지 만들 수 있게 됩니다!
프로토타이핑을 시작하기 전에
자산에서 start/stop 버튼의 상호작용이 이미 만들어져 있는 것을 볼 수 있을 것입니다. 이는 Condition 기능으로 만든 것입니다. Condition을 기반으로 한 버튼을 만드는 방법을 배우고 싶다면 조건으로 토글 버튼 만드는 방법을 확인해 보세요.
단계별 안내
1. 변수를 사용해 센티초 자동화하기
1. 마지막 두 자리(센티초)를 작업하면서 버튼으로 시작하고 멈추게 할 것입니다. 새 변수를 만들고 이름을 centisecond로 지정하세요. 변수의 기본값은 숫자로 유지되고 0에서 시작하도록 그대로 두세요. 작업을 테스트할 수 있도록 디버거를 미리보기 화면으로 드래그하세요.
2. start 조건 아래에 centisecond 변수에 연결된 Assign을 추가합니다. 수식은 centisecond+1입니다. 반복을 켜고 Infinite Repeat도 켭니다. interval은 0.01입니다.
3. Stop 조건 아래에 centisecond 변수에 대한 Stop 응답을 추가합니다. 미리보기에서 시작 및 정지 버튼을 테스트하면 숫자가 계속 올라가다가 버튼으로 멈추는 것을 확인할 수 있습니다.
4. 센티초는 두 자리만 사용하므로 숫자를 99에서 초기화해야 합니다. 이를 위해 새 트리거를 추가하고 centisecond 변수에 연결된 Detect를 선택합니다.
5. centisecond ≥ 99일 때를 읽는 조건을 만듭니다. 그런 다음 Reset을 추가합니다. duration은 0으로, start delay는 0.01로 변경합니다. 이 지연은 눈에 잘 띄지 않지만 나중을 위해 중요합니다. 디버거를 사용하면 값이 99까지 갔다가 0에서 다시 시작하는 것을 볼 수 있습니다.
6. 이제 이 값을 텍스트에 할당해 보겠습니다. Detect 트리거 아래에 Text 응답을 추가합니다. 이를 centisecond에 연결하고, 수식 lpad(centisecond,2,"0")를 입력합니다. 이 수식은 한 자리 숫자 앞에 0을 붙여 센티초가 두 자리가 되도록 합니다.
💡 lpad(): 텍스트의 왼쪽에 다른 텍스트를 붙여 특정 길이로 만듭니다.
lpad(source:TEXT,length:NUMBER,pad:TEXT)→ TEXT
2. 센티초를 기준으로 초를 증가시키기
1. 센티초가 99에 도달하면 초를 1만큼 증가시키고 싶습니다. 이를 위해 변수를 추가하고 이름을 second로 바꾸세요. 변수의 기본값은 숫자로 유지되고 0에서 시작하도록 그대로 두세요. 디버거를 미리보기 화면으로 드래그하세요.
2. Detect 트리거 아래에서, 방금 만든 Condition 아래에 Assign을 추가하고 이를 second 변수에 연결합니다. 수식에 second+1을 입력하여 centiseconds가 99에 도달할 때마다 초가 1씩 증가하도록 합니다. 시작 지연은 0.01로 변경하세요. 반복은 설정하지 마세요.
3. "second" 텍스트에 연결된 Text 응답을 추가하여 변수를 텍스트에 할당합니다. 이전과 마찬가지로 수식은 lpad(second,2,"0")이며, 한 자리 숫자 앞에 0을 추가합니다.
4. 시작 지연을 0.01로 변경하고, second 변수에 대한 Text 응답이 Assign 응답 뒤에 오도록 하세요. 상호작용 요소의 순서도 중요합니다. Assign 응답이 Text 응답보다 위에 오도록 해야 합니다. 이는 ProtoPie가 먼저 Assign 응답을 트리거한 다음 Text 응답을 트리거하도록 하기 위함입니다.
3. 초를 기준으로 분을 증가시키기
1. second 변수에 연결된 Detect 트리거를 추가합니다. 그런 다음 second variable ≥ 59라고 읽히는 second 변수에 연결된 condition을 추가합니다.
2. 이 조건 아래에 second에 연결된 Reset 응답을 만들고 start delay를 1로 설정합니다.
이는 초가 59에 도달하면 0으로 다시 시작하기 전에 1초 동안 지연된다는 뜻입니다.
3. 변수를 초기화하는 것과 함께 텍스트도 초기화해야 합니다. second 텍스트에 연결된 또 다른 Reset을 추가하고 start delay를 1로 변경합니다.
4. minute 변수를 텍스트에 연결하려면 변수를 만들고 이름을 "minute"로 바꾸세요. 마지막 Reset 응답 아래에 Assign 응답을 추가하고 방금 만든 minute 변수에 연결합니다. 수식은 minute+1입니다. start delay는 1입니다.
5. assign 아래에 Text 응답을 만들고, 이를 minute text에 연결한 다음 lpad(minute,2,"0") 수식을 사용합니다. 시작 지연은 1로 변경합니다.
6. 미리보기 창에서 초가 59에 도달하면 분은 1 증가하고 초는 0으로 초기화되어야 합니다.
4. 초기화 버튼을 작동 가능하게 만들기
1. 초기화 버튼에 대한 Tap 트리거를 만듭니다. centisecond 변수에 연결된 Stop 응답을 만듭니다.
2. 그런 다음 모든 변수(centisecond, second, minute)를 초기화한 뒤 해당 텍스트도 초기화해야 합니다. 이 세 변수 각각에 연결된 Reset 응답을 세 개 만듭니다. 이 세 변수의 텍스트에 연결된 Reset 응답도 세 개 만듭니다.
3. start/stop 버튼도 원래 상태로 되돌려야 합니다. Stop 레이어를 선택하고 reset 응답을 만듭니다. 그런 다음 Start와 Base 레이어에 대한 reset 응답을 만듭니다.
4. 아래 이미지를 참고하세요.
축하합니다! 스톱워치 타이머가 준비되었습니다
이 튜토리얼에서는 Formulas, Detect, Variables를 사용하는 것을 포함해 여러 고급 기법을 살펴보았습니다! 이제 이 기법들을 익혔으니, 여러분만의 독특한 디자인을 위한 스톱워치 타이머를 만들 때 다른 전략들을 어떻게 적용할 수 있을지 생각해 보세요!
아이디어를 현실로 만들 준비가 되셨나요? 지금 ProtoPie를 다운로드하여 다음 프로토타입 제작을 시작하고, LinkedIn, X, 또는 Instagram에서 #MadeWithProtoPie와 함께 여러분의 멋진 작업을 공유하는 것도 잊지 마세요. 여러분이 무엇을 만들지 정말 기대됩니다!
