프로토파이 워크샵 리뷰
얼마전 Innovation Lab Korea form Facebook에서 열린
Workshop : 디자이너의 새로운 무기 - 프로토타이핑에 갔다왔었습니다.
Protopie 기초에 관련된 workshop이었고 강연은 Protopie 대표이신 김수님께서 해주셨습니다.
프로토파이, 김수님에 대한 간단한 소개가 있었으며 워크샵에 필요한 소스를 다운받고, 프로토파이 pc버전과 앱을 설치하는 시간을 가진 후 바로 프로토파이 기초설명으로 진행됐습니다.
본 페이지 외의 프로토파이에 대한 대부분의 가이드는 https://www.protopie.io/ko/learn/basics/ 사이트에서 볼 수 있습니다.
1. If~ 를 생각한다면, Condition을 써라
프토로파이를 제일 먼저 개발할 때 개발자분과 상의해서 만들었던 것이 Condition이라는 기능이라고 하셨습니다. 그처럼 Condition은 하나의 조건을 만들어서, 그 조건이 맞는다면 조건에 따른 것들을 수행하게 만드는 구조를 갖고 있습니다.
아래 condition.pie 파일은 각 조건(Condition)에 따른 실행을 하는 화면으로 첫번째 조건은 사각형이 상단에 붙어있을 때= 아래로(y) 300만큼 move와 rotate를 해주는 실행문이고, 두번째 조건은 반대로 사각형이 아래로(y) 300만큼 이동했을 때 상단에 붙도록(원상복귀) 해달라는 조건을 갖고 실행해줍니다.
1) shape를 그린 후 shape의 중심값(Origin)을 가운데로 맞춰줍니다.
2) Add Trigger에 Tap추가(사각형을 tap했을 때)
3) + 클릭 후 Condition 추가 -> 속성창에서 Y값이 50일때를 입력
왜 y=50이냐? 100*100인 크기의 사각형 중심점(Origin)이 가운데로 변경되었으므로 사각형의 y값은 자동적으로 50이 됨. 웹, 모바일 환경에서의 x,y좌표는 최상단,좌측부터 0이 된다는 것을 떠올리면 됩니다.
4) Condition에 move를 추가한 후 -> y에 300을 입력
5) Rotate에 임의의 각도를 입력
6) 만들어진 Condition을 복사->붙여넣기 한 후
7) 복사된 Condition에 y값이 300일때 / move 값에 원래의 값으로 돌아갈 y=50이라 입력 / Rotate도 동일한 각도에 -(마이너스)를 붙여 완료.
2. Drag와 Pinch는 영역이 움직일 때의 명령
Drag는 말그대로 영역을 손가락으로 드래그 했을 때의 명령을 나타내고 Pinch는 두손가락을 이용하여 늘렸을 때를 의미합니다. 이것을 이용하여 간단한 지도 프로토타이핑이 가능합니다.
1) Add Trigger에서 Drag를 클릭하여 map이미지를 지정
2) Move를 추가하여 마찬가지로 map이미지를 지정한 후 좌우위아래 움직이게 할 것이므로 Direction값을 변경해줍니다
3) Add Trigger에서 Pinch를 클릭
4) Pinch에 Scale을 추가하여 영역을 두손가락으로 늘릴때마다 지도이미지도 같이 늘어나도록 해줍니다.
3. Send와 Receive를 이용하여 Device로 전달
Protopie Studio에서 동작하는 것을 Protopie APP에서 작동할 수 있도록 지정
말 그대로, device에서 작업물을 확인하는 것과 별개로 Protopie Studio에서 동작하는 것들은 Protopie Studio APP에 전달될 수 있습니다.
1) 일련의 사각형을 만듭니다.
2) Add Trigger 하여 Tap을 지정, 사각형을 선택한 후
3) Send를 추가하여 Protopie studio로 지정합니다.
4) Add Trigger하여 Receive 추가한 후
5) 사각형이 Tap될 때마다 Rotate 되란 뜻으로 Rotate 값을 추가합니다.
6) 모바일과 pc가 동일한 wifi가 되도록, 혹은 pc와 직접 연결되도록 해줍니다.
7) Device에서 확인하면 사각형이 Tap될때마다 Rotate되는 것을 확인할 수 있습니다.
4. Sound는 실제소리를 감지, Start는 시작점을 Delay.
Sound는 Device에서 소리를 감지했을 때 동작하는 Trigger로 영상, 음악 등 소리를 감지한 후 동직하는 프로토타이핑을 만들 때 유리합니다. Start는 일정시간 Delay후 동작하도록 할 수 있는 Trigger로 순차 진행이 가능합니다. 그래서 이 예제에서는 무대를 떠올리면 됩니다. 소리가 들리면 logo의 크기가 변화하고 그 소리를 감지한 후 음악에 관련 된 화면이 뜬다는 느낌으로 만들어줍니다.
1) logo영역은 상단에, Delay후 나타날 화면은 프레임 밖으로 위치해줍니다.
2) Add Trigger하여 Sound 추가, Scale을 추가하여 logo로 지정합니다.
3) 데시벨의 범위를 대략적으로 지정한 후 크기가 얼마나 변화할 것인지 속성에 적어줍니다. 이에 따라 Device에서는 데시벨만큼의 소리가 들리면 logo의 크기가 변화할 것입니다.
4) Add Trigger을 클릭하여 Start 를 추가
5) Move를 추가하여 프레임밖의 화면이 화면안으로 들어올 수 있도록 지정해준후 속성의 Start Delay값을 조정해줍니다.
5. Chain은 요소와 요소를 묶어놓는 것
Chain은 요소가 영향을 받을 때 묶여있는 다른 요소도 함께 영향을 받는 기능입니다. 이를 이용해서 동시에 움직이거나 변화하는 것을 활용할 수 있습니다.
1) shape을 두가지 그려줍니다. 기준(Chain)이 될 붉은 원과 회색 사각형.
2) Add Trigger하여 Drag 추가, 원으로 지정해준 후
3) Move추가, 단 원이 좌우로만 이동할 수 있도록 Direction 값을 좌우버튼으로 지정, 스크린밖으로 나가면 안되므로 Limit to screen으로 지정해줍니다.
4) Add Trigger하여 Chain추가, 원으로 지정해준 후 -> 원이 좌우로만 이동하므로 X값이 변경될때로 지정합니다.
5) Rotate를 추가하여 Range(범위)값에 원의 x값이 0-275(스크린크기375-원의너비100) 변화할 동안 -90~90도 까지 Angle한다로 지정합니다.
6. Range는 범위안에 있을 때 명령을 실행
먼저 Container은 크게 scroll과 paging으로 나뉠 수 있으며 이 두개를 동시에 쓸 수 있고 초기 명칭이 Group이었던 것처럼 섹션을 나눈다는 생각으로 쓰면 됩니다. 처음 Container을 만들어 필요한 요소들을 하위에 속하게 드래그하면, Container 영역만큼 잘려져 보이게 되는데 이것은 우측 속성창에 Clip Sublayers를 체크해제하면 됩니다.
아래 pageMSG.pie파일은 Chain과 Range, Container, Condition을 동시에 사용한 예시로 Page Container안에 Scroll Container이 이동하면 Indicator도 같이 이동하고, 또 동시에 page Scroll이 되며 영역 클릭시 -> Screen2로 이동, + 버튼을 tap했을 때 상세버튼 영역들이 조건(Condition)에 따라 보이고/안보일 수 있도록 한 것입니다.
pageMSG.pie를 해보겠습니다.
1) 각 요소들을 위치에 맞게 배치한 후 Scroll Container에 넣습니다.
1-1) Scroll Container에 넣은 msg / active / group 영역을 좌측부터 순서대로 놓습니다.
2) Page Container을 만들어 Scroll Container로 만든 세가지 영역을 Page의 하위영역이 될수 있도록 드래그 해줍니다.
3) Page가 Scroll할때마다 Indicator도 함께 이동(Chain)하기 위해서 Add Trigger -> Chain 클릭
3-1) Chain속성에 Page / Scroll 값으로 지정
3-2) Move를 추가하여 Indicator로 지정한 후 범위속성 값에 Scroll 영역이 0~750 (화면 하나에 375이니 *2하면 750, 즉 두 화면이 이동하는 것은 Scroll의 범위가 0~750인 것), Indicator 영역이 0~250 (인디케이터 가로폭이 125이니 *2하면 250, 즉 인디케이터가 두번 움직이는 것은 0~250만큼 이동인 것) 입력해줍니다.
그러면 Page가 0~750만큼 이동할 때마다 인디케이터도 0~250만큼 이동=Chain이 된것입니다.
4) 비슷한 느낌으로 Range를 이용하여 Page가 Scroll 될 때 Starting되는 Page의 범위(Range)가 바뀔때마다 message / active / group 탭그룹 색깔이 바뀌게 해야합니다.
4-1) Device크기가 375라 할 때
1Page의 Starting position은 0이므로 Range 속성값은 -1 / 1
2Page의 Starting position은 375이므로 Range 속성값은 374 / 376
3Page의 Starting position은 750이므로 Range 속성값은 749 / 751 입니다.
4-2) 1Page로 Range를 먼저 만든 후 Color를 추가하여 message값이 블루, 나머지는 그레이가 되도록 지정해줍니다.
4-3) 1Page로 만든 Range를 복사-붙여넣기 한 후 2Page/3Page로 이름과 속성값을 변경
4-4) message / active / group의 칼라값이 각 영역에 맞게 변하도록 수정해줍니다.
5)마지막으로 message page를 Tap했을 때 Screen이 이동하도록 해줍니다.
5-1) 상단Scene를 클릭하여 Add New Scene를 클릭하여 Scene2 만들어줍니다.
5-2) Scene1으로 돌아와 Tap Trigger을 추가한 후 message page를 지정
5-3) Jump를 추가한 후 Scene2를 지정해줍니다.
6) Scene2에서 + 버튼을 클릭하면 버튼이 회전함과 동시에 / Dim이 Background 로 보이고 / Icon menu영역이 올라와야 합니다.
6-1) Tap Trigger를 추가하여 + 버튼을 지정 (Tap했을 때 135도 돌아가는 것과 0으로 돌아오는 것을 만들 것입니다.)
6-2) 조건(Condition)을 추가하여 Rotate 0도 였을 때로 지정
6-3) Dim의 Fill 값은 60% / Opacity는 0입니다. Opacity Trigger 추가하여 Dim의 Opacity가 100이 되어 활성화되도록 합니다.
여기서 Opacity가 0이라는 것은 영역이 아예 없는 것을 의미, 반대로 100은 영역이 살아있음을 의미
Fill이 0인것은 영역의 색상이 없음을 의미하며 영역이 있고 없음과는 차이가 있음
6-4) Rotate Trigger 추가하여 + 버튼이 135도 돌수있도록 Rotate값 추가
6-5) Move Trigger추가하여 menu의 y값이 290이 되도록 지정합니다 (menu의 height가 325이므로 screen(667) - (menu(325)+input(52)) = 290)
6-6) 만들어진 조건(Condition)을 복사-붙여넣기하여 조건값에 + 버튼이 135도 돌아갔음을 지정
6-7) Dim의 Opacity값이 0(비활성화) 되도록하고 / + 버튼이 0으로 Rotate될수 있도록 해주며 / menu값이 y=667(스크린 가장 끝)으로 이동할 수 있도록 해줍니다.
이정도 워크샵을 하는데에 3시간정도 걸렸고 이를 마지막으로 마무리했습니다. :)
김수 대표님과 프로토파이 관계자 분들께서 질문이 있을 때마다 잘 알려주셔서 무척 감사했습니다. 특히 마지막 차례에서 여기저기서 질문 폭발하는 바람에 좀 분주하셨던 걸로 기억하는데..(가담한 1인;) 그럼에도 불구하고 세세한 질문에도 상세히 답변해주셔서 프로토파이를 이해하는데 도움이 많이 됐습니다. 역시 우주최고 프로토타이핑툴 프로토파이.
이노베이션랩은 처음엔 강연장소가 판교에서도 좀 거리가 있는 편이라 괜찮을까 싶었는데 막상 가고보니 테이블이나 스크린 등이 쾌적한편이고 1층에 편의점도 위치하고 있어 무척 만족스러웠습니다. 혹시 괜찮아보이는 워크샵인데 장소 때문에 망설인다 싶으신 분이 있으시다면 한번 가봐도 나쁘지 않으실거 같아요. 또 어떤게 열릴지 모르겠지만 매번 재밌는 것들이 많았던 걸로 기억하고, 그것도 그것이지만 대부분이 무료였던 걸로 기억합니다.
좋은 워크샵 추진하느라 고생하신 분들께 감사드리며 이 날 이노베이션랩에서, 프로토파이 덕분에 좋은 경험 하고 갔습니다.
