'프로토타이핑'에 해당되는 글 16건

'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 을 클릭한 후 프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

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

근래 앱 개발에 대한 문의들이 있는 가운데 클라이언트에게 어플리케이션의 레이아웃, 디자인은 물론 기본적인 동작까지 보여줄 수 있는 여러 프로토타이핑 도구들에 대한 관심도 역시 커져가고 있었지만 주요 작업이 앱 보다는 웹(반응형)이기 때문에 크게 신경은 쓰지 않았습니다.

그래도 어떤 도구들이 있으며 어떤 것들이 많이 쓰인다 정도는 인터넷을 통해 어느 정도는 알고 있었죠. 그 중에 구글에서 인수하여 무료로 공개한 'Form(Mac)'과 'Pixate(Mac/PC)'정도는 시스템에 설치해 놓고 만져보고 있던 상황이던 중에 '어도비가 그냥 있지는 않을 텐데...'라는 생각에 구글링을 해 보니 역시나 진행중인 프로젝트가 있었습니다. 그것이 바로 이번에 프리뷰 테스트 단계에 들어간 프로토타이핑 프로그램 'Adobe XD'입니다('XD'는 'Experience Design'을 뜻하고 있으며 얼마전까지는 'Adobe Comet'로 알려져 있었습니다).

프리뷰 테스트 중이기 때문에 어도비 ID가 있으면 무료로 다운로드 받아서 사용할 수 있지만 아직까지는 맥(Mac) OSX용으로만 공개하고 있습니다. 조만간 혹은 정식 버전이 공개되면 윈도우용도 나오겠지만요.

어쨌든 프로그램을 다운받고 설치 후 바로 실행해 보았습니다. 그리고 잠깐 끄적끄적 해 봤는데 아주 손쉽게 아래와 같은 결과물이 나옵니다.

Adobe XD - Prototyping Tool

어도비의 홈페이지에서 프로그램 설명 동영상을 보면 더 쉽게 이해할 수 있는데, 포토샵이나 파워포인트 등을 사용해서 프로토타입 이미지를 만드는 경우 텍스트 나 사진 등의 반복작업이 (복사+붙이기 작업)이 꽤나 많아집니다만 Adobe XD를 사용하면 그럴 필요가 없습니다.

위의 캡쳐화면에서 중간에 볼 수 있는 녹색 상자가 그런 번거로움을 확 줄여주는데요. 드래그(drag)만 해 주면 자기가 알아서 반복 복사를 해 줍니다.

거기다가 이미지에 대한 마스킹도 아주 간단하게 할 수 있으며 반복되는 레이아웃 내의 이미지들도 간편하게 개별 수정이 가능합니다. 거의 모든 작업이 그냥 드래그앤드롭(drag&drop)으로 마무리 되는 것이 매우 직관적이면서도 편하게 작업할 수 있게 합니다.

Adobe XD는 크게 3영역으로 나누어지는데 'Design', 'Prototype' 그리고 'Preview'입니다.

Design 영역에서는 좌측 툴박스의 여러 도구 및 외부 이미지, 클립, 아이콘 등을 사용해서 앱, 웹의 레이아웃 및 디자인을 할 수 있고, 

Prototype 영역에서는 Design 영역에서 만들어진 아트보드(artboard) 사이의 링크를 통한 이동 관계 및 전환 애니메이션을 설정할 수 있습니다.

Preview는 위의 두 영역에서 만들어진 프로토타입을 미리보는 기능을 통해 실제 디스플레이에서 보이는 모습과 동작을 실행해볼 수 있습니다.

adobe xd - prototype tab

특히 이 'Preview' 기능은 매우 강력한데요. 저의 경우 다른 프로토타이핑 도구(Form, Pixate)들이 프리뷰 부분에서 생각보다 만족스러운 결과를 볼 수 없었기 때문입니다. Form의 경우는 자꾸 프리뷰 창이 닫히고 실시간 수정이 잘 되지 않았으며, Pixate는 클라우드에 저장이 가능했지만 저장 시간 간격에 문제가 있는 것인지 아니면 해외 접속 문제 때문인지 수정 사항이 반영이 안되는 경우가 많았습니다만 Adobe XD의 프리뷰는 클릭과 함께 바로 동작하고 전혀 지연시간도 없고, 오류도 없었으며 프리뷰 창이 띄어진 상태에서 수정작업을 해도 곧바로 적용이 됩니다. 동영상으로 저장(mov파일)도 클릭만으로 바로 되기 때문에 동작을 다른 사람들에게 보여주기도 쉽고 'Creative Cloud'에 바로 저장하고 URL을 만들어 배포할 수 있습니다.

adobe xd - preview window

2D기반의 그래픽 프로그램의 대부분을 Adobe가 꽉 잡고 있는 것은 어찌보면 '독점'이 아닐까 생각이 되기도 합니다. 저 역시 비용적인 부분이라던가 약간 반항심(?)같은 마음으로 다른 대체 프로그램들(상용 혹은 오픈소스)을 찾아보고 사용도 해 봤지만 결국은 Adobe로 돌아올 수 밖에 없는 것은 현실이었습니다. 이번에 만나게 된 Adobe XD도 프리뷰 버전을 경험해 보니 역시나 어도비...라는 생각밖에 들지 않으며, 거의 100% 사용하게 될 것 같습니다.