프로토타이핑 툴 proto.io 묻고 답하기 - 1

2016년 10월 14일 삼성전자 R&D 캠퍼스 강의에서의 질문에 대한 답변입니다.

이 포스트의 내용은 수정될 수도 있습니다.

<Q1> Screen을 분리하였을 때라도, 공통적으로 같은 배경을 사용할 수는 없는지?

- 세트(기기) 의 프로토타입을 했을 때, 배경(기기 부분) 분리가 안되어 화면 부분에만 애니메이션을 보여줄 수 없었습니다.

<A> 스크린은 각각 개별적이므로 공통의 배경을 사용할 수 없습니다. 하나의 스크린만을 사용하고 그 위에 컨테이너 여러 개를 사용해서 구현하는 수밖에 없을 듯합니다.

<Q2> 마스킹 기능이 있는지?

- 마찬가지로 마스킹 기능이 있으면 세트 프로토타이핑을 할 때 좀더 유용하지 않을까 하여 여쭙니다.

<A> 마스킹 기능은 없지만 컨테이너 기능을 응용하여 사각형 형태로 아이템의 일부만을 보여 줄 수는 있습니다. 

배경이 투명한 PNG 이미지를 외부에서 만들어 Assets으로 가져와서 사용하는 것이 가장 좋은 방법입니다.

<Q3> 타이머 기능 구현여부

- 액션을 입력하지 않고 일정 시간이 지나면 메인화면으로 복귀되어야 하는데, 지난 번 사용하였을 때는 찾지 못했습니다.

<A> 간단한 방법으로는 트랜지션 항목에 타임라인의 지작과 끝 부분에 인터랙션을 줄 수가 있습니다. 적당한 시간의 트랜지션을 만들고 끝 부분에 Go to screen 액션을 주어서 메인화면으로 복귀하면 됩니다.

<Q4> 인디케이터 구현이 가능한가요?

- 인디케이터는 screen이나 states와 관계없이 항상 같은 위치에 뜨면서, 사용자 조작에 따라 상태가 변화됩니다.

+ 혹시 container를 활용하여 구현할 수 있지 않은가요?

<A> 인터랙션의 Overlay screen 으로 다른 스크린을 가져올 수는 있습니다. 하지만 상태, 스크린의 변동 후에도 그대로 유지되는지는 컨트롤은 제대로 동작하는지는 좀 더 확인해봐야 합니다.

<Q5>. long press 액션이 있나요?

<A> Trigger 중에 Tap Hold 가 long press 와 비슷한 액션으로 보입니다(탭하고 그대로 일정 시간 유지하고 있으면 액션 발생).

<Q6> 플래시처럼 간단한 코딩이 가능한가요? 가능하다면 언어는 어떤 것이 지원되나요?

<A> Variable을 사용하는 경우 약간의 자바스크립트를 입력할 수 있으며 간단한 조건문, 문자열 합치기, 자르기, 사칙연산 정도의 구현이 가능합니다.

<Q7> 애니메이션 선택시에 ease 종류에 따라 그래픽을 보여주던데, 그것 말고 애프터이펙트처럼 frame이나 graph 등의 가시적인 요소는 없나요?

<A> 간단한 직선 이동, 회전 애니메이션 정도는 상태 트랜지션 혹은 인터랙션으로 만들 수 있지만 키프레임 이나 이펙트를 사용하는 화려한 움직음의 애니메이션은 만들 수 없습니다. 각 트랜지션 마지막에 인터랙션으로 다음 상태로 넘어가게 하는 방법으로 어느 정도는 구현할 수 있지만 딜레이 등이 있기 때문에 썩 만족스러운 결과는 아니었습니다.

<Q8> 라이브러리를 이용 하지 않은 버튼 온/오프 구현 방법

<A> 버튼을 컨테이너로 변환하고 컨테이너의 상태(State)를 온/오프 두 개로 만든 후 인터랙션을 통해 구현할 수 있습니다.

<Q9> 오븐에 knob 을 돌리듯이 동그라미를 axis 중간으로 맞춰 돌리는 법

<A> 아이템을 컨테이너로 변환하고 옵션의 Draggable를 체크하여 Rotation을 선택하는 방법으로 구현할 수 있습니다.

<Q10> state 를 이용한 animation 을 전반적으로 알려주세요.

<A> 상태 A와 상태 B에 동일한 아이템들이 있으면 이 각각의 아이템들의 위치 값, 투명도 등의 속성 사이에 애니메이션이 발생하는 것입니다. 일반적으로 트랜지션은 2개의 state 사이에서 이루어집니다.

<Q11> 전체 로테이트 : 파일 만든 후 전체적으로 로테이트 가능 여부 (90도,180도,270도..)

<A> 스크린은 고정되어 있는 것으로 로테이트가 불가능하기 때문에, 각 방향 마다 별도의 스크린을 제작해야 합니다. Animate 인터랙션이나 상태 트랜지션으로 회전을 한다고 하더라도 스크린의 가로, 세로 값이 서로 바뀌기 때문에 이에 대한 위치를 별도로 변경하는 작업이 필요할 것입니다.

<Q12> 사운드 넣는 부분 : 우측 사운드바를 통해 사운드를 넣었으나, disable(사운드바 보이지 않음)을 한 경우, 사운드 재생(클릭)이 되지 않음. 특정한 버튼을 탭했을 때 사운드가 플레이 되는 인터랙션 제작법.

<A> 사운드 아이템을 invisible 한 후, 재생(일시정지, 정지) 버튼을 만들고 인터랙션을 추가하면 됩니다. 인터랙션의 Audio 항목에서 찾을 수 있습니다.

<Q13> 떳다가 사라지는 애니메이션(토스트팝업): 토스트팝업과 같이, 떳다가 몇초 후 자동으로 사라지는 애니메이션. proto에서도 에펙이나 ppt와 같이 특정 시간 경과 뒤 변화하는 애니메이션을 줄 수 있는지 여부

<A> 대부분의 애니메이션은 컨테이너의 상태 변화를 사용하여 구현을 할 수 있습니다.

 

<Q13> html → apk변환방법

<A> Proto.io와 관계가 없지만... 구글링을 하면 관련 내용을 찾으실 수 있습니다. (검색어 예 : html to apk)

https://github.com/praveshagrawal/HTML-to-APK

<Q14> 애니메이션 가능 여부: 탭하면 해당 버튼이 커지는 등, VI사안들 구현 가능 여부

<A> 대부분의 애니메이션은 컨테이너의 상태 변화를 사용하여 구현을 할 수 있습니다.

<Q15> 외부 폰트를 등록하여 사용할 수 있나요?

<A> 아직까지는 불가능합니다.

https://support.proto.io/hc/en-us/community/posts/207859598-Loading-external-fontello-font

https://support.proto.io/hc/en-us/community/posts/207860738-How-do-i-use-custom-fonts-that-are-not-hosted-on-Google-Fonts