'변수'에 해당되는 글 6건

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

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 으로 초기화

<다운로드 진행도를 숫자로 출력하기>

프로그레스 바 제작의 마지막으로 할 작업은 다운로드 진행도를 0~100까지 증가하는 숫자 애니메이션으로 구현하는 것입니다.

Proto.io에서 대부분의 상태 값 변화는 트리거에 의해 발생한다고 보면 됩니다. 예를 들어 ‘Slider bar’의 경우는 인디케이터가 사용자에 의해 위치가 변화되므로 그 중간 값의 변화를 변수에 저장할 수 있지만, ‘Progress bar’의 경우는 그 중간 값의 변화가 사용자의 행동과는 관계가 없기 때문에 그 값을 변수에 넣을 수 없습니다.

마찬가지로 현재 제작된 ‘Progress bar’도 계속 변화하는 위치 값을 변수로 보낼 수가 없기 때문에 이를 텍스트로 출력할 수 없습니다. 그렇기 때문에 일종의 편법으로, 애니메이션의 재생 시간인 (여기에서는 9000ms = 9초) 동안 순차적으로 증가되는 변수를 넣는 방법을 쓸 수 밖에 없습니다.

인터페이스에 숫자가 표시될 부분을 추가합니다. 모두 라이브러리의 Text를 사용했으며, 변화하는 텍스트의 이름은 ‘increase text’로 합니다. 

“download button” Container를 더블 클릭하여 컨테이너 내부로 들어간 후 ‘download button’을 선택하고 “+ ADD INTERACTIONS”를 클릭하여 새로운 인터랙션을 추가합니다.

아래의 인터랙션을 추가합니다.

- Title : Increase loop

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : increase text

- Animation type : Move item

- Move type : Move to (x,y) coordinates

- Move X to (px) : * (변화 없음)

- Move Y to (px) : * (변화 없음)

- Duration : 50

- Easing : Linear

- Delay : 0

- Loop animation : check

- Loop iterations : 100

Callback을 체크하고 이어서 인터랙션을 추가합니다.

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : {downloader}+1

- Delay : 0

Callback을 체크하고 다시 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : increase text

- Property : Text

- Value type : Read from variable

- Variable name : downloader (default: empty)

- Delay : 0

인터랙션을 저장하고, 지금 새롭게 만든 인터랙션의 위치를 위로 옮깁니다.

프로젝트를 저장하고 지금까지 작업한 결과물을 미리보기로 확인해봅니다.

지금까지의 작업을 한 장의 이미지로 정리하면 다음과 같습니다.

Proto.io에서 제공하는 라이브러리에는 ‘Progress bar’가 있어서 간단한 방법으로 진행도를 그래프로 보여주는 것을 애니메이션으로 쉽게 표현할 수 있습니다. 다만 이 진행도를 수치로 나타내는 기능은 없는데 약간의 편법을 통해 이를 구현할 수 있습니다.

<초기화 세팅 작업>

먼저 아래와 같이 작업을 진행하는 스크린과 상태의 이름을 수정합니다.

- 스크린 제목 : HOME

- 스크린 상태 1 : Default

- 스크린 상태 2 : Reset

진행도가 저장될 변수를 작성합니다. 상단의 (X) Variables를 클릭하고 아래와 같이 변수를 작성합니다.

- Name : downloader

- Type : Numeric

- Value : 빈칸

- Evaluate : check

스크린의 상태가 Default 인 것을 확인하고 스크린에 인터랙션을 추가합니다. Proto.io는 이벤트(트리거)가 발생할 수 있는 거의 모든 곳에는 인터랙션을 적용할 수 있습니다.

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

- Title : Reset

- Trigger : Screen before show

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0

Callback을 체크하고 첫 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0

Callback을 체크하고 두 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0

이는 HOME 스크린이 보이기(show) 전에 동작하는 인터랙션으로 변수와 상태를 초기값으로 돌리는 역할을 합니다.

<인터페이스 제작>

라이브러리에서 Text, Rectangle, Button with background 등의 컴포넌트를 캔버스로 가져와서 실제로 동작을 시키기 위한 인터페이스를 만듭니다.

(1) 진행 막대 (Progress bar) 제작

Rectangle로 적당한 길이의 진행 막대를 만듭니다. 이름은 ‘progress bar’로 합니다.

진행 막대를 마우스 오른 클릭하고, ‘Convert to container’를 선택하여 컨테이너로 변환합니다.

“progress bar” Container를 더블 클릭하거나 좌측 상단의 CONTAINERS 탭을 통해 컨테이너 편집 창으로 들어갑니다.

아이템 ‘progress bar’를 왼쪽으로 이동시켜서 컨테이너 영역 밖으로 옮깁니다(X : -200).

옮겨진 아이템 ‘progress bar’를 마우스 우측 클릭한 후 Duplicate를 선택, 복제하고 이를 콘테이너 영역 안으로 옮깁니다(X : 0).

왼쪽의 ‘progress bar’의 배경색을 눈에 띄는 색으로 수정하고, 레이어의 위치도 복제본 ‘progress bar 2’의 위로 옮깁니다. 마찬가지로 ‘progress bar 2’ 역시 적당한 배경색으로 수정합니다.

(2) 진행 막대 트랜지션 적용

진행 막대가 오른쪽으로 이동하는 애니메이션을 만들기 위해 트랜지션을 추가해야 합니다. 그 전에 먼저 상태의 제목을 알기 쉽게 ‘Progress start’로 바꿉니다.

“+ NEW CONTAINER STATE”를 클릭하여 현재 상태가 복제된 새로운 상태를 만듭니다. 그리고 이름도 ‘Progress end’로 바꿉니다.

새롭게 만들어진 상태 ‘Progress end’에서 아이템 ‘progress bar’의 위치를 컨테이너 영역 안쪽 원래의 위치로 옮깁니다(X : 0).

상태 ‘Progress start’와 ‘Progress end’ 사이에 애니메이션을 넣기 위해서 “STATE TRANSITIONS (0)” 탭을 클릭합니다.

“+ NEW STATE TRANSITION”을 클릭하고 새로운 트랜지션을 생성합니다.

애니메이션 레이어의 우측에 있는 애니메이션 종류 아이콘을 클릭하고, 아래와 같이 설정합니다.

- Delay : 0

- Duration : 9

- Easing : Linear

(수정한 후 다시 확인해보면 Duration 값에 약간의 변동이 생기지만 그대로 둡니다)

재생 버튼을 클릭하여 애니메이션을 확인해봅니다.

<숫자 증가 버튼>

먼저 UI Button과 Text 등의 컴포넌트를 사용하여 아래와 같은 인터페이스를 만듭니다.

이 인터페이스에서는 (+)버튼을 누르면 아래의 숫자가 1씩 증가하고, (-)버튼을 누르면 1씩 감소할 것입니다.

이를 구현하기 위해서는 먼저 증감할 값이 저장될 변수가 필요합니다. 현재 프로젝트에는 그 어떤 변수도 지정되어 있지 않습니다.

먼저 상단 메뉴에서 “(X) Variables”를 클릭합니다.

“+ NEW VARIABLE”을 클릭하고 다음과 같이 새로운 변수를 만듭니다(선언).
- Name : range_var
- Type : Numeric
- Value : 0
- Evaluate : check

Variables 창을 닫고 에디트 화면으로 돌아온 후, (+) 버튼을 클릭하고 인터랙션을 추가합니다.

- Title : inc num
- Trigger : Tap
- Action : Set variable
로 설정한 후 Variable Name을 클릭하면, 미리 만들어 놓은 “range_var (default: 0)” 변수가 풀다운 리스트에 나타납니다.

Variable Name : range_var (default: 0)로 설정한 후 그 아래의 항목들을 설정합니다.
- Value type : Custom value
- New Value : {range_var}+1

즉, 기본 변수 {range_var}에 +1을 더하는 {range_var}+1을 새로운 값으로 한다는 것입니다.

이제 이 새롭게 만들어진 값을 텍스트에 적용하는 인터랙션을 추가하기 위해 Callback을 체크합니다.
그리고 아래와 같이 텍스트를 수정하는 설정을 합니다. 슬라이더를 통해 값을 수정하는 방법((Change property)과 거의 같으며 마지막 Variable name만 이번에 만들어 놓은 “range_var (default: 0)”로 설정하면 됩니다.

프로젝트를 저장하고 프리뷰를 통해 (+) 버튼을 클릭할 때 숫자가 하나씩 늘어나는 것을 확인해봅니다.

<숫자 감소 버튼>

증가하는 기능을 이미 구현하였기 때문에 변수의 계산식만 바꿔주면 손 쉽게 구현할 수 있습니다.
(+) 버튼을 클릭하고, 현재 적용되어 있는 인터랙션 위치에서 마우스 오른 클릭을 하여, Copy interaction을 선택합니다.

(-) 버튼을 클릭하고, 인터랙션을 넣을 위치에서 마우스 오른 클릭을 하여 Paste in Interactions를 선택합니다.

(+) 버튼에 있던 인터랙션이 (-) 버튼에도 적용이 되었습니다.

인터랙션 편집 모드로 들어가서 Title을 “dec num”으로 수정하고 계산식의 “+”를 “-”로 고친 후 인터랙션을 저장합니다.

프로젝트를 저장하고 프리뷰를 통해 숫자의 증감을 테스트합니다.

<숫자의 범위 지정>

현재 증감되는 값은 양수, 음수 무한대라고 볼 수 있습니다. 이 변화하는 값의 범위를 지정해야 할 필요가 있기 때문에 인터랙션을 추가하여 {range_var}의 값의 범위를 정합니다.
먼저 (+)버튼을 클릭하고 인터랙션 편집 모드로 들어갑니다.

두 번째 인터랙션을 활성화하고 하단의 Callback을 체크하여 새로운 콜백 인터랙션을 추가합니다.

변수의 값이 새롭게 정의되기 때문에 Action을 “Set variable”으로 선택합니다.
그리고 먼저 이하의 속성들을 다음과 같이 설정합니다.
- Variable Name : range_var (default: 0)
- Value type : Custom value

이제 가장 중요한 New Value 값을 지정해야 하는데, 변수의 범위를 지정하는 조건문인 “If문”을 돌려야 합니다. 이 부분은 약간의 프로그래밍(자바스크립트) 지식이 있어야 하는 부분입니다.

New Value 란에 아래의 코드를 입력합니다. 입력란이 짧기 때문에 되도록이면 '메모장' 등의 텍스트 편집기에서 타이핑 한 후 복사해서 붙여넣는 것이 안전합니다(한글, 워드 등의 워드프로세서는 사용하지 않습니다).

{range_var}<0 ? 0 : {range_var}>9 ? 9 : {range_var}

이 코드는 {range_var} 변수가 0 보다 작으면 0으로, 9보다 크면 9로 고정한다는 뜻입니다.

값의 범위를 지정하는 인터랙션은 값이 출력되기 전에 동작이 되어야 하기 때문에 인터랙션의 위치를 드래그 & 드롭으로 두 번째 위치로 옮깁니다. 콜백 체크는 자동으로 수정됩니다.

프로젝트를 저장하고 (+) 버튼의 동작과 숫자의 변화를 테스트해 봅니다. 9 이상 숫자가 올라가지 않는 것을 확인할 수 있습니다.

같은 방법으로 (-) 버튼에도 인터랙션을 추가하고 0 이하로 숫자가 내려가지 않는 것을 확인해 봅니다.

<스크린 디자인>

먼저 적당한 크기의 스크린을 만듭니다. 여기에서는 iPhone6/6s 사이즈에 맞추겠습니다.

라이브러리에서 IOS9에 있는 슬라이더를 가져옵니다. 가져온 후 슬라이더의 이름을 “Slider text”로 수정합니다. 이름은 한 눈에 알아보기 쉽게 짓는 편이 좋습니다. 그리고 두께 등을 수정해봅니다.

라이브러리 BASIC에 있는 텍스트를 넣어봅니다. 그리고 이름을 “Text by slider”로 기본 글자도 이와 같게 “Text by slider”로 고쳐봅니다.

<기본 인터랙션 추가>

먼저 사용자에 의한 동작(Trigger)이 발생하는 곳인 슬라이더에 인터랙션을 부여합니다.
Slider text를 클릭하고, 인터랙션 탭을 선택한 후 “+ ADD INTERACTIONS”를 클릭합니다.

제목은 “change text”로 하고, 트리거는 “Slider drag”를 선택합니다.

이제 트리거에 의해 발생할 액션을 추가합니다.
슬라이더 인디케이터의 위치가 변하면 내부적으로 0~100까지의 값이 변화합니다. 이 값이 텍스트로 보내져야하기 때문에 값을 저장할 공간이 필요한데 그 저장 공간이 바로 “Variables(변수)”입니다. 즉 여기에서는 트리거에 의해 변수가 생성(세팅)되야 하기 때문에 “Set Variables”를 선택해야 합니다.

Variables 항목을 클릭하여 “New variables”를 통해 새로운 변수명을 “sliderposition” (만일 빈칸을 띄운다면 “slider_position” - 이유 : 변수명이나 함수명에는 공백이 들어갈 수 없습니다)으로 설정하고, Variables type(변수형)를 “Numeric(숫자형)”으로 선택합니다.

Value type(값의 형태)는 “Callback value from event”를 선택하는데 이 뜻은 “이벤트로 발생한 값을 되돌려 받은 것“이라고 생각하면 됩니다. 여기서는 트리거로 인해 발생한 인디케이터의 위치 값이라고 할 수 있습니다.
Callback value(되돌려 받은 값의 양)은 “%”를 선택하게 자동으로 정해져 있습니다.

<콜백 인터랙션 추가>

Callback”은 액션이 발생한 후 새롭게 발생하는 것을 말하며 이것은 값(변수)이 될 수도 있고 또다른 행동(액션)이 될 수도 있습니다.
여기서는 슬라이더의 인디케이터 위치가 변하고 그에 설정된 값이 변수 “sliderposition”에 “숫자형”, “%”값으로 저장된 후에 (순차적으로) 발생하는 또 다른 인터랙션이라 생각하면 됩니다.

인터랙션 설정창 하단의 “Callback”의 체크를 활성화합니다. 그리고 Action 항목 중에서 “Change property”를 선택합니다.

현재 스크린에 있는 아이템 속성이 변할 것이므로 스크린 항목은 그대로 두고, Item은 “Text by slider”를 선택하고 Property는 “Text”를 선택합니다.

이제 불러올 값을 지정하기 위해 Variable type에서 “Read from variable”을 선택하여 특정 변수에서 값을 가져올 수 있게 설정한 후 Variable name에서 “slidterposition”변수를 특정하여 가져옵니다.

설정이 끝났으니 “SAVE INTERACTION”을 클릭하여 인터랙션을 저장합니다. 저장과 동시에 인터랙션의 구조가 트리형식으로 나타나는 것을 확인할 수 있습니다.

저장한 후 미리보기를 통해 동작을 확인해봅니다. 인디케이터 위치가 변할 때마다 텍스트의 값이 0~100까지 변하는 것을 볼 수 있습니다.

웹 기반의 프토토타이핑 툴 '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 을 클릭한 후 프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

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