'UI Design'에 해당되는 글 5건

상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(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)

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

웹 혹은 앱에서 많이 사용되는 이미지 슬라이더 (캐러셀 : Carousel) 방식 중에 페이드-인(fade-in)이 있는데, 이는 이미지가 다음 이미지로 자연스럽게 섞이면서 넘어가는 것입니다.

'Proto.io'에서는 'State Transition(상태 전환)'을 사용해서 이를 구현할 수 있습니다.

먼저 새로운 프로젝트를 생성하고, 기본 스크린의 제목을 ‘HOME’으로 수정합니다.

상단 메뉴바의 ‘Assets’을 클릭하고 ‘Proto.io’에서 제공하는 스톡 이미지 중에서 중간 크기의 이미지 3개를 캔버스로 가져옵니다. 여러 개를 동시에 선택할 수 없기 때문에 하나씩 가져와야 합니다.

가져온 이미지들을 캔버스 크기에 맞게 크기를 조정하고, 위치 또한 동일하게 맞춥니다.

이미지들을 모두 선택한 후 마우스 오른 클릭으로 나타나는 메뉴 중에서 ‘Convert to container’를 선택하여 컨테이너로 만듭니다.

컨테이너의 이름은 ‘photo auto fade’로 설정합니다.

만들어진 컨테이너를 더블 클릭하여 컨테이너 편집 창으로 들어간 후 “+ NEW CONTAINER STATE”를 클릭하여 컨테이너의 상태(State)를 3개 만듭니다(State 1, State 2, State 3)

각 상태의 이름을 알아보기 쉽게 ‘photo 1’, ‘photo 2’, ‘photo 3’로 수정합니다.

현재 모든 상태(state)에는 3개의 이미지가 함께 들어있기 때문에 각각의 상태에서 이미지를 겹치지 않게 하나씩만 남기고 나머지는 삭제합니다.

상태에서 삭제해도 실제로 삭제가 되는 것이 아니고 일종의 비활성화 상태가 되는 것이기 때문에 다시 아이템을 복구할 수도 있습니다(Add from...).

상태 사이에 전환 효과를 넣기 위해 STATE TRANSITIONS 탭에서 “+ NEW STATE TRANSITION”을 클릭합니다.

첫 번째 트랜지션은 ‘photo 1’에서 ‘photo 2’로 이동할 때 적용됩니다.

적용된 트랜지션의 속성을 수정합니다.

- Delay : 0.00

- Duration : 1(sec)

- Easing : Linear

마찬가지 방법으로 ‘photo 2’에서 ‘photo 3’ 그리고 ‘photo 3’에서 ‘photo 1’로 이동할 때의 트랜지션을 추가하고 속성을 수정합니다.

여기까지의 작업으로 기본 레이아웃과 상태 트랜지션까지 적용되었습니다.

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

프로그레스 바 제작의 마지막으로 할 작업은 다운로드 진행도를 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

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

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

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

진행 막대의 상태 트랜지션까지 적용되었다면 기본 애니메이션 부분은 끝마친 것이라 볼 수 있으며, 이제는 인터랙션을 적용하여 실제 동작을 구현해야 합니다.

<다운로드 버튼 제작 - 1>

애니메이션(트랜지션)이 동작(액션)하기 위해서는 이를 명령해야 하는 이벤트(트리거)가 있어야 합니다.

스크린 ‘HOME“으로 돌아와서 캔버스에 라이브러리의 ‘Button with background’ 컨테이너를 가져옵니다. 라벨도 ‘Download’로 수정하고, 이름도 ‘download button’으로 수정합니다. 그리고 마우스 오른 클릭 후 ‘Convert to container’를 선택하여 새로운 컨테이너로 만듭니다.

이렇게 만들어진 ‘“download button” Container’에 인터랙션을 추가하고 저장합니다.

- Title : Progress animation start

- Trigger : Tap

- Action : Change Container State

- Screen : HOME

- Container : “progress bar” Container

- State : Progress end

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

<다운로드 버튼 제작 – 2>

현재 다운로드 버튼은 컨테이너로 되어 있습니다. 컨테이너 내부로 들어가서 인터랙션 및 다운로드가 끝난 상태도 추가해야 합니다.

먼저 ‘State 1’ 상태 이름을 ‘Download’로 수정하고, 새로운 상태를 추가한 후 새로운 상태의 이름을 ‘State 2’에서 ‘Complete’로 수정합니다.

‘Complete’ 상태의 아이템을 배경색을 회색으로, 라벨을 ‘Complete’로 수정합니다.

‘Download’ 상태의 아이템을 선택하고, 인터랙션을 추가합니다.

- Title : Go complete

- Trigger : Tap

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : Complete

- Delay : 9000(ms)

인터랙션을 저장할 때 아래와 같은 메시지 박스가 나타나면 “Don’t ask me again”을 체크하고 “CANCEL”을 선택합니다(트랜지션 자동 생성 기능 비활성화).

이 인터랙션을 통해 ‘Download’ 버튼을 탭하고 9초가 흐르면 상태가 바뀌어서 ‘Complete’ 버튼으로 바뀌는 동작이 이루어집니다.

프로젝트를 저장하고 미리보기로 확인해 봅니다.

<리셋 버튼 제작>

트랜지션 및 버튼 상태 변화가 모두 끝난 후 처음 상태로 되돌리기 위한 리셋 버튼을 만듭니다.

스크린 ‘HOME’으로 돌아와서 리셋을 위한 버튼을 만듭니다.

리셋 버튼에 다음의 인터랙션을 추가합니다.

- Title : Go reset state

- Trigger : Tap

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0

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

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0

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

- Action : Set variable

- Variable Name : download (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0

프로젝트를 저장하고 미리보기로 확인합니다.

<리셋 버튼 감추기 / 보이기>

리셋 버튼은 처음에는 보이지 않다가 다운로드가 끝나면 나타나고, 리셋 버튼을 누르면 사라지는 동작을 해야 합니다. 이를 위해서 ‘Download’ 버튼과 ‘Reset’ 버튼에 각각 인터랙션을 추가해야 합니다.

먼저 스크린 ‘HOME’에서 ‘reset button’의 레어어에서 ‘레이어 감추기’ 버튼을 클릭합니다.

“download button” Container를 더블 클릭하여 컨테이너 창으로 이동한 후 상태 ‘Download’에 있는 ‘download button’을 선택하고, ‘Go complate’ 인터랙션에 콜백 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : reset button

- Property : Visibility

- Value type : Custom value

- New Value : check

- Duration : 400

- Easing : Linear

- Delay : 0

스크린 ‘HOME’으로 돌아와서 ‘reset button’을 선택하고, “+ ADD INTERACTIONS”를 클릭하여 두 번째 인터랙션을 추가합니다.

- Title : Reset button show

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : reset button

- Animation type : Fade item

- Fade to : 0

- Duration : 400

- Easing : Linear

- Delay : 0

- Loop animation : uncheck

프로젝트를 저장하고 미리보기로 확인합니다.

다운로드 바가 올라가는 모습

다운로드가 끝나고 버튼이 'Complete'로 상태가 변화한 후 'Reset' 버튼이 나타난 모습.

리셋 버튼을 클릭하여 초기 화면으로 돌아온 모습.

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

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

Title : 인터랙션의 이름

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

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

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

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

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

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

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

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

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