'UX'에 해당되는 글 2건

만들어진 키패드의 버튼에 들어갈 인터랙션에 대한 설명은 다음과 같습니다.

State 1 : Hour 버튼의 경우를 예를 들면,

먼저 키패드 입력을 통해 만들어진 문자는 replace 함수를 통해 "{keypad_hour}"에 문자로 저장됩니다.

이렇게 만들어진 "{keypad_hour}"를 가지고 "substr" 함수를 통해 "{length_hour}"에 2자리 문자로 저장됩니다.

2자리 문자인 "{length_hour}"는 "parseInt" 함수를 통해 숫자 형식으로 변환되어 {integer_hour}에 저장됩니다.

이렇게 생성된 {length_hour}는 조건문 필터링을 통해 값이 23이하인 경우에만 입력 값을 그대로 저장하고 그 이상인 경우는 문자열 "00"을 저장합니다.

그리고 {integer_hour}는 slice 함수를 통해 1자리 숫자인 경우 앞에 "0"이 붙은 후 {zero_hour}에 저장됩니다.

최종적으로는 {zero_hour}의 값이 텍스트 필드 "Hour"로 보내집니다.

<Hour 버튼 중 ①번에 적용될 인터랙션>

• Trigger : Tap
• Action : Set variable
• Variable Name : keypad_hour (default: empty)
• Value type : Custom value
• New Value : "{keypad_hour}".replace("undefined", "") + 1
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : length_hour (default: empty)
• Value type : Custom value
• New Value : "{length_hour}".substr(0,2)
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : integer_hour (default: empty)
• Value type : Custom value
• New Value : parseInt("{keypad_hour}")
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : integer_hour (default: empty)
• Value type : Custom value
• New Value : {integer_hour} > 23 ? "00" : {integer_hour}
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : zero_hour (default: empty)
• Value type : Custom value
• New Value : "0{integer_hour}".slice(-2)
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Read from variable
• Variable name : zero_hour (default: empty)
• Delay : 0

작성된 인터랙션을 복사하여 나머지 버튼에도 붙여 넣은 후 첫 번째 인터랙션의 뒷 부분 숫자만 각각 2에서 0까지 수정합니다.

<Minute 버튼 중 ①번에 적용될 인터랙션>

변수 이름만 다르고 위에 작성한 Hour와 같은 방법으로 인터랙션이 적용되며, 단지 다른 점은 integer_minute 값의 범위를 설정하는 부분에서의 자바스크립트만 다음과 같이 바뀐다는 점입니다.

{integer_minute} < 60 ? {integer_minute} : "00"

적용된 인터랙션을 복사하여 나머지 Minute 용 버튼에 붙여 넣고 첫 번째 인터랙션의 뒷 부분 숫자를 2에서 0까지 수정합니다.

<텍스트 필드 인터랙션>

시와 분이 표시되는 텍스트 필드를 각각 탭 했을 때 해당하는 스크린 상태로 이동하여 변수를 리셋하고, keypad 컨테이너 내부의 상태를 바꿔 해당하는 키패드로 바꿔야 합니다.

- Hour 텍스트 필드 인터랙션

• Trigger : Tap
• Action : Change Screen State
• Screen : Setting Time
• State : hour reset State
• Delay : 0

>>>콜백

• Action : Change Container State
• Screen : Setting Time
• Container : keypad
• State : State 1
• Delay : 0

- Minute 텍스트 필드 인터랙션

• Trigger : Tap
• Action : Change Screen State
• Screen : Setting Time
• State : minute reset State
• Delay : 0

>>>콜백

• Action : Change Container State
• Screen : Setting Time
• Container : keypad
• State : State 2
• Delay : 0

- reset all time 리셋 버튼 인터랙션

• Trigger : Tap
• Action : Change Screen State
• Screen : Setting Time
• State : all reset State
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Custom value
• New Value : 0
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Minute
• Property : Value
• Value type : Custom value
• New Value : 0
• Delay : 0

<텍스트 필드 초기화 인터랙션>

첫 화면에 빈 칸으로 보이는 텍스트 필드에 초기값으로 "00" 을 넣기 위해서 스크린에 인터랙션을 추가합니다.

- 인터랙션 1 Hour 초기값

• Trigger : Screen show
• Action : Set variable
• Variable Name : zero_hour (default: empty)
• Value type : Custom value
• New Value : "00"
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Read from variable
• Variable name : zero_hour (default: empty)
• Delay : 0
  

- 인터랙션 2 : Minute 초기값

• Trigger : Screen show
• Action : Set variable
• Variable Name : zero_hour (default: empty)
• Value type : Custom value
• New Value : "00"
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Read from variable
• Variable name : zero_hour (default: empty)
• Delay : 0

두 인터랙션 모두 변수의 New Value 값으로 0이 아닌 "00" 을 넣는 것에 주의합니다(문자형).

프로젝트를 저정하고 미리보기로 확인합니다.

기본

한자리 숫자 입력값 - 앞에 0 붙임

잘못된 입력값 - 00 으로 초기화

전에 포스팅한 "다이얼 패드" 이용하여 텍스트필드에 시간을 넣는 인터페이스를 만들어보려고 합니다.

다이얼 패드에서는 특별히 값에 대한 범위가 적용이 되어 있지 않지만, 시간을 넣기 위해서는 시와 분에 각각 범위가 정해져 있어서 최소값으로 "00:00" 최대값으로 "23:59"가 입력이 되어야 하기 때문에 변수의 설정이 조금 복잡해 집니다.

<인터페이스 제작>

라이브러리의 버튼, 텍스트 필드 등을 사용하여 다음과 같이 인터페이스를 디자인합니다. 키패드는 위치만 선정하고 제작은 나중에 할 것입니다.

• 스크린 이름 : Setting Time
• 시 텍스트 필드 : Hour
• 분 텍스트 필드 : Minute
• 리셋 버튼 : reset all time

주의할 점으로 텍스트 필드의 속성 중 Placeholder Texts 항목은 반드시 빈 칸으로 설정합니다.

<변수의 생성>

변수는 시, 분 각각 다음과 같이 최소 4개씩이 필요합니다. 메인 메뉴에서 "Variables(X)" 클릭하고 시, 분에 사용될 변수를 생성합니다. 기본적으로 값은 비워 놓고 Evaluate는 체크합니다.

- 시

• keypad_hour : Text, Evaluate (default: empty) : 탭
• length_hour : Text, Evaluate (default: empty) : 문자열 자르기
• integer_hour : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
• zero_hour : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기

- 분

• keypad_minute : Text, Evaluate (default: empty) : 탭
• length_minute : Text, Evaluate (default: empty) : 문자열 자르기
• integer_minute : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
• zero_minute : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기

<변수 리셋 스크린 생성>

Setting Time 스크린에서 하단의 "+ NEW SCREEN STATE"를 클릭하여 기본상태인 "State 1"이외에 변수를 리셋하는 상태인 "hour reset State", "minute reset State", "all reset State"를 각각 생성합니다.

State 1을 제외한 각각의 상태에 인터랙션을 추가하여 각각의 변수를 모두 0 으로 초기화 합니다. 다음의 이미지는 hour reset State 의 인터랙션입니다. 나머지 인터랙션도 같은 방법으로 넣습니다.

• Trigger : State enter
• Action : Set variable
• Variable Name : keypad_hour (default: empty)
• Value type : Custom value
• New Value : 0
• Delay : 0

>>>콜백

...

위와 같이 length_hour, integer_hour, zero_hour 값을 0로 설정

...

>>>콜백

• Action : Change Screen State
• Screen : Setting Time (스크린 이름)
• State : State 1
• Delay : 0

<키패드 제작>

키패드는 Hour 용과 Minute 용이 별도로 있어야 합니다. 그렇기 때문에 반드시 컨테이너로 만들어져야 하고 그 내부에는 두 개의 상태가 있어야 합니다(여기에서는 기본값인 State 1, State 2 로 생성하였습니다).

State 1 : Hour 입력용 키패드

State 2 : Minute 입력용 키패드

다음 포스트에는 버튼에 들어갈 인터랙션을 다룹니다.