'프로토타이핑/Proto.io'에 해당되는 글 15건

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

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

Title : 인터랙션의 이름

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

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

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

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

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

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

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

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

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

proto.io에서는 이미지 슬라이더를 콘테이너(container) 기능 + 페이지 콘트롤러(page controller) 를 사용해서 손쉽게 만들 수 있습니다.

<Swipe 로 이미지 슬라이딩>

먼저 슬라이더로 만들 이미지를 캔버스에 넣습니다. 현재 이 캔버스는 프론트 페이지에서 사용되고 있는 세로 스크롤(Vertical scroll)콘테이너 Front page container의 안(內部)입니다.

캔버스로 이동된 이미지의 크기를 슬라이더로 사용할 크기로 조절하고(여기서는 750*560 정도) 콘테이너로 변환합니다.

콘테이너 내부에서 마우스 오른 클릭을 한 후 옵션 항목 중 Container Properties 로 들어갑니다.

Edit container properties 설정 창에서

Container title Container : front page image slider

Container width : 750px의 세 배인 2250px로 수정합니다. 우측의 [x3] 버튼을 클릭하면 자동으로 3배수로 계산됩니다.

콘테이너 크기가 변경된 것을 확인합니다.

Project Assets 에 있는 나머지 이미지들을 넣은 후 위치와 크기를 조정합니다.

상위 콘테이너(Front page container)로 돌아온 후 이미지 슬라이더용 콘테이너의 크기를 정확히 맞춥니다.

아래와 같이 콘테이너 크기가 정확히 맞아야 합니다.

이미지 슬라이더용 콘테이너를 클릭하고 Properties 탭에서 Scroll 항목을 Horizontally 로 선택한 후 아래의 항목 중에서 상단에 비활성화 되어 있던 Treat scroll container as snap (carousel)을 체크하여 활성화 합니다.

프로젝트를 저장하고 미리보기를 통해 동작을 확인합니다.

<버튼 탭(tap)으로 이미지 슬라이딩>

아이템 라이브러리에서 Page Controller 를 선택하여 이미지 슬라이더용 콘테이너에 넣습니다. 레이어 상하 관계에 주의합니다.

먼저 콘트롤러 전체를 선택하고 Properties 탭에서 Active Button (기본 활성화 버튼)을 Button 1 으로 설정합니다.

다음으로 콘트롤러를 구성하고 있는 버튼 각각에 인터랙션을 넣기 위해 먼저 첫번 째 버튼을 클릭한 후 아래와 같이 인터랙션을 설정합니다.

Title : 임의

Trigger : Tap (Triggers after a quick)

Action : Go to snap container page

Screen : Current container

Item : front page image slider

Horizontally : 1

Duration : 임의

Delay : No delay

만들어진 인터렉션을 [ctrl+c]로 클립보드에 복사한 후

두 번째 버튼의 인터랙션으로 붙여 넣습니다.

붙여 넣은 인터랙션을 수정하여 Horizontally 항목을 2 로 고칩니다.

마찬가지 방법으로 3번 버튼도 Horizontally 항목을 3 으로 고칩니다.

프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

슬라이더 이미지 Swipe와 버튼 싱크(Sync) 맞추기

front page image slider 콘테이너를 클릭하고 인터랙션을 아래와 같이 추가합니다.

Title : 임의

Trigger : Container scroll

Action : Sync Page Controller item

Screen : Current container

Item : Page Controller 1 (혹은 설정한 다른 이름)

Delay : No delay

인터랙션과 프로젝트를 모두 저장하고 프리뷰를 통해 동작을 확인합니다.

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

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