'Interaction'에 해당되는 글 5건

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

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 입력용 키패드

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

상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(Trigger)가 없기 때문에 현재로서는 그 어떤 동작도 일어나지 않습니다.

스크린이 출력되면 상태 트랜지션이 동작하도록 인터랙션을 스크린에 추가합니다. 좌측 패인(Left Pane)에서 스크린 트랜지션 아이콘을 클릭합니다.

아래와 같이 트랜지션을 적용합니다.

- Title : auto fade start

- Trigger : Screen show

- Action : Change Container State

- Screen : HOME

- Container : photo auto fade

- State : photo 2

- Delay : 3000

이 인터랙션을 통해 스크린이 출력되고 3초 후 ‘photo 2’ 상태로 이동합니다. 프로젝트를 저장하고 미리보기로 동작을 확인합니다.

스크린 인터랙션을 통해 이미지가 페이드인 되는 것은 시작이 되었지만 다른 상태 트랜지션으로는 바뀌지 않는 것을 볼 수 있습니다. 그 이유 역시 해당하는 인터랙션이 없기 때문입니다.

이를 구현하기 위해 이번에는 각 상태 트랜지션의 마지막 프레임에 인터랙션을 추가하겠습니다. 먼저 ‘photo 1 → photo 2’ 트랜지션을 선택하고 타임라인의 마지막 프레임에 있는 인터랙션 추가 아이콘을 클릭합니다.

프레임 인터랙션을 아래와 같이 설정합니다.

- Title : next state 1

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 3

- Delay : 3000(ms)

인터랙션을 저장할 때 아래와 같이 트랜지션 자동 생성 여부를 묻는 창이 나오기도 하는데 이미 생성되어 있는 상태이므로 ‘Don’t ask me again’을 체크한 후 ‘CANCEL’을 클릭합니다.

같은 방법으로 각 트랜지션의 마지막 프레임에 인터랙션을 아래와 같이 추가합니다.

‘photo 2 → photo 3’ 트랜지션 프레임 인터랙션

- Title : next state 2

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 1

- Delay : 3000(ms)

‘photo 3 → photo 1’ 트랜지션 프레임 인터랙션

- Title : next state 3

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 2

- Delay : 3000(ms)

프로젝트를 저장하고 미리보기를 통해 자동으로 페이드인 되는 이미지를 확인합니다.

'Proto.io'의 인터랙션(interaction) 기본 속성 살펴보기

인터랙션 : A와 B 사이에서 상호간에 영향을 주는 어떠한 행동 및 결과를 나타내며 이 인터랙션은 아래와 같이 기본적인 인터랙션 프로퍼티 (Interaction Property 상호작용 고유속성)를 가지고 있습니다.

Title : 인터랙션의 이름

- 인터랙션의 이름은 한 눈에 알아볼 수 있는 것이 좋습니다. 작업을 하다보면 다양한 인터랙션을 사용하게 되는데, 각각의 네이밍이 제대로 되지 않는다면 나중에 인터랙션이 많아졌을 때 관리가 매우 힘들어집니다.

Trigger (event) : 사용자에 의해 발생하는 행동의 종류

- 아래 이미지에서는 방아쇠 당기기로 표현할 수 있으며 사용자가 실제로 어플리케이션을 사용하기 위해 행하는 행동(제스쳐)이라고 보면 됩니다. Tap, Swape 등이 있습니다.

Action : 이벤트에 의해 발생하는 인터랙션의 종류

- 아래 이미지에서는 방아쇠를 당김으로 발생하는 총알의 발사라는 결과로 말할 수 있으며, 특정 페이지로 이동하거나 어떤 구성 요소(아이템)의 속성을 변화시키거나 하는 여러 액션들이 있습니다.

Delay : Trigger가 일어나고 Action이 발생하기까지의 시간

Callback : 현재의 인터랙션이 발생하고 생성되는 또 다른 인터랙션

- 아래 이미지에서는 총알이 발사되고 나서 실린더가 돌아가는 또다른 (이어지는) 액션이 발생하는 것을 생각하면 됩니다.

트리거, 액션, 콜백과 총알 발사의 상관관계

웹 기반의 프토토타이핑 툴 'proto.io'에서 variable(변수)를 사용하여 인터랙션(상호작용)을 구현하려면 약간은 복잡한 과정을 거쳐야 합니다.

웹 기반 프로토타이핑 툴 서비스 Proto.io
https://proto.io/

아래 처럼 슬라이더 아이템의 이름은 'slider'로, 텍스트 아이템의 이름은 'text'로 설정합니다.

슬라이더 아이템 이름 = slider

텍스트 아이템 이름 = text

슬라이더를 클릭하고 옵션 창에서 Interaction 탭으로 이동하여 Add Interactions 버튼을 클릭하여 아래와 같이 설정합니다.

Interaction (슬라이더 범위 수치 1~100를 변수 {slider_position}에 넣는다)

슬라이더값 변수 생성

Title : Slider-Text
Trigger : Slider drag
Action : Set variable
Variable Name : New variable : slider_position
Variable type : Numeric
Evaluate variable : check
Value type : Callback value from event
Callback value : Value(%)
Delay : No delay
Callback : check

<설명>
인터렉션의 이름(Title)은 "Slider-Text"로 슬라이더 값이 텍스트를 변화시킨다는 뜻입니다.
이 인터렉션은 슬라이더가 '드래그'되어 발생하기 때문에 트리거(Trigger:방아쇠)는 "Slider drag"로 선택합니다.
'드래그'의 결과 발생하는 액션(Action:동작)은 변수가 설정(생성)되는 것입니다(Set variable).
이 생성되는 '새로운 변수(New variable)'의 이름은 "slider_position"으로 하며,
변수의 종류는 "숫자(Numeric)"이고,
이 값은 다른 어떤 변수를 위해서 사용되기 때문에 'Evaluate variable'을 체크합니다.
변수의 값은 현재 발생하는 이벤트(드래그)에서 콜백(불러옴)되고(Callbak value from event),
호출된 값은 Value(%) 즉, 숫자(단위)입니다.
호출에 딜레이(지연)은 없으며,
이어서 콜백 인터렉션이 추가되므로 'Callback'을 체크합니다.

Callback 1 (슬라이더 값의 특정 범위에 따라 글자를 변경하고 이를 변수 {text_change}에 넣는다)

텍스트값 변수 생성

Action : Set variable
Variable Name : text_change
Variable type : Text
Evaluate variable : check
Value type : Custom value
New Value : ({slider_position}<33) ? 'Cappuccino' : (({slider_position}>67) ? 'CafeLatte' : 'Americano');
Delay : No delay
Callback : check

<설명>
위에서 발생한 인터렉션(slider_position 변화)을 트리거로 하여,

액션으로 새로운 변수가 설정됩니다(Set variable).
이 새로운 변수(New variabe)의 이름은 "text_change"이며,
변수의 종류는 "문자(Text)"이고,
이 값은 다른 어떤 변수를 위해서 사용되기 때문에 'Evaluate variable'을 체크합니다.
변수의 값은 사용자가 임의로 생성을 하는데,
이 임의로 생성되는 새로운 값은 자바스크립트를 통해 생성합니다.
({slider_position}<33) ? 'Cappuccino' : (({slider_position}>67) ? 'CafeLatte' : 'Americano');
만일 변수 {slider_position}이
33보다 작으면 Cappuccino 를 값으로 하고,
67보다 크면 Americano 를 값으로,
둘 다 아니면 (즉 34~66 사이) CafeLatte 를 값으로 합니다.
값을 생성하는데에 딜레이(지연)은 없으며,
이어서 콜백 인터렉션이 추가되므로 'Callback'을 체크합니다.

Callback 2 (글자 속성 변경을 위해 변수 {text_change}를 사용한다)

텍스트값 변수 아이템(text)에 적용

Action : Change property
Screen : Current container
Item : text
Property : Value
Value type : Read from variable
Variable name : text_change
Delay : No delay

<설명>
위에서 발생한 인터렉션(text_change 변화)을 트리거로 하여,

액션으로 아이템의 속성을 변경합니다(Change property).
현재 스크린의 현재 콘테이너(Current container)에서
아이템 이름 "text"에 적용되며
변경되는 속성은 값(Value)으로 여기서는 글자 그 자체입니다.
이 값(글자)은 변수에서 읽어오는데(Read from variable)
그 변수의 이름은 "text_change"입니다.

Save Intercation 을 클릭한 후 프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

슬라이더 위치에 따른 텍스트 변화