프로토타이핑 툴 proto.io 다운로드 진행 막대(progress bar) 제작 - 1

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 값에 약간의 변동이 생기지만 그대로 둡니다)

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