'proto.io'에 해당되는 글 15건

<스크린 디자인>

먼저 적당한 크기의 스크린을 만듭니다. 여기에서는 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에서는 이미지 슬라이더를 콘테이너(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 을 클릭한 후 프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

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