brunch

매거진 파이처럼 쉬운 프로토타입

라이킷 15 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이세호 Apr 15. 2018

프로토파이 입문 클래스 2회차

3.8 업데이트 기능과 다양한 예제 제작 실습

1회차 (링크) 에 대한 호응이 커지면서 다시듣기 자리를 마련해서 분반을 나누어서 두번 진행하였습니다.

지난주 일요일, 이번주 월요일에 1회차 다시듣기로 총 30명의 게스트 디자이너가 참여해주셨는데요!

충격의 김수대표님 페북 공유 대박사건....

1회차 글 공유한 뒤에 김수 대표님께서 글을 공유해주시면서 더 큰 동기부여가 되었습니다.

넘나 감사드립니다ㅠㅠ 영광영광영광...

이번 2회차에는 게스트 + Ptyper 멤버를 포함해 총 22명의 디자이너가 참석하셨습니다.

대관 문제와 강의 컨텐츠에 대한 어려움이 있어서 앞으로 3회차는 마련되기 어려울 것 같고, 최대한 가볍게 요약하여 20-30분정도로 스터디내에서 가끔 이어나갈 예정입니다. (차차주 예정) 때문에 게스트 분들을 모시기에는 어려움이 있을 것 같습니다. 정기적으로 뵙는 멤버들 위주로 짧게 짧게 가야할 것 같습니다. 그래도 앞으로도 계속 클래스 내용은 브런치에 공개될 예정입니다. 공유가 가능한 예제 파일은 완성본과 함께 공유합니다.

총 수업시간은 2시간 30분정도 걸렸습니다.

2주차 본 강의 요약 ]

(Ptyper소개, 참여방법 안내)

(개인적인 강의 목표 이야기 - 다른 사람이 만든 Pie를 열어보고 따라할 수 있는 수준이 되는 것)

- 프로토파이의 3.8 업데이트로 바뀐 것은

1) 조건을 넣을 수 있는 Chain, Range 트리거와 Condition 리스폰스에 Color, Text를 사용가능해졌습니다. 그래서 Chain, Range, Condition에 넣을 수 있는 Property는 X , Y, Width, Height, Rotation, Radius, Scroll, Color, Text 까지 총 9종이 되었다. (일부 Property는 제한적으로 사용됨)

2) Canvas 패널의 색상을 변경할 수 있으며, Default Device를 선택할 수 있게 되었습니다.

3) Contatiner/Image에 Radius 속성이 생겼으며, 덕분에 Mask대신 활용할 수 있게 되었습니다.

- 인터랙션 패널에서 노란색으로 나오는 부분은 입력값이 없어서 채워줘야 할 트리거나 리스폰스를 나타냅니다. 노란색으로 나온 트리거나 리스폰스를 클릭해 보면 입력되지 않는 값도 노란색 타이틀과 노란색 박스로 강조됩니다. 입력이 필요없는 경우에는 지워버리면 노란색으로 강조되지 않습니다.

- Clip Sublayers는 Container밖에 있는 개체를 보이게 할 것인지 아닌지를 결정하는 속성값이며, 이를 이용해 우리는 사실상 개체를 Crop하는 효과처럼 사용할 수 있습니다. Scroll/Paging Container에서 컨테이너밖의 영역까지 터치 가능한 영역으로 만들려면 Hit Area를 활성화하면 됩니다.

- Easing 알아보기 (이정영님 미디엄글 링크, easings.net 링크, 프로토파이 공식 easing소개 링크)

인터랙션 디자이너가 아니라면 가급적이면 커스텀(Cubic bezier)에 도전하기보다는 기존에 존재하는 값 위주로 사용하기를 권장합니다.

- Cloud / Share 사용법 공유 (cloud.protopie.io, description작성, downloadable 설정 소개)

Pie파일로 만들어 스튜디오에서 열거나, 웹링크로 공유하는 방법도 있는데 웹링크로 공유하면 Description을 입력할 수 있고 다운로드도 버튼이 바로 노출되므로 후자를 선호하는 편입니다. Downloadable은 끌 수 있지만 습작정도의 수준일때 공유해서 Pie파일을 함께 열어볼 수 있도록 해주었으면 좋겠습니다.

- Rotate to / Rotate by의 차이와 Rotate값 쉽게 계산하는 방법에 대해

Rotate to는 그 각도(목표점)으로 한번만 돌리고, Rotate by는 그 각도만큼 돕니다. 개체밖 Origin을 두고 있을때에는 Rotate to가 좀 더 계산이 쉽습니다. 개체를 0으로 놓고 일정한 각도를 to로 돌려도, by로 돌려도 결과는 같으니 0기준으로 생각해서 잡거나 대강의 값을 던져 입력한 뒤에 맞춰가는 것이 빠를 때도 있습니다.

- Repeat설정 (Count / Interval)

- Condition 리스폰스에 걸 수 있는 모든 Property에 대해

(X, Y, Width, Height, Scroll, Rotation, Radius, Scroll, Color, Text)

- 인터랙션 패널은 Ctrl + D가 되지 않는데, 일부 트리거에 대해 리스폰스의 값을 다르게 입력해야하는 경우가 있기 때문입니다. (ex. Drag, Chain트리거) 인터랙션 패널에서 리스폰스 몇개를 드래그해보면 드랍할수 없는 트리거(Chain)가 존재하는 것을 보면 알 수 있다. 반면 Layer패널에서는 Ctrl + D가 작동합니다.

- Reorder트리거는 Z index값을 바꾸는 것으로 레이어패널에서의 순서를 조정하는 리스폰스라고 생각하면 됩니다.

- 개체의 Rotation 입력방법 (드래그, 직접입력)

- Clova배너 실습

사용된 기능/개념 : Chain 트리거, Clip Sublayer(크롭용도), Scroll Container

- Basic Material Animation 실습 ( 예제 완성본 )

참고 : 최민상님 드리블에서 참고한 애니메이션 링크

사용된 기능/개념 : Container에 Origin을 주어 하나의 개체에 Response를 두개 걸고 각각 다른 Origin을 써보기, Rotate to, Scale, Reorder (또는 Opacity)

- Hanna2 실습 ( 예제 완성본 )

한나님이 질문했던 2번째 인터랙션이라서 한나2입니다.

https://share.protopie.io/zaZL9KNv3o

3.8 업데이트에서 추가된 Condition (Color, Text)를 실습하는 예제입니다.

사용된 기능/개념 : Rotate by, Color, Text (또는 Opacity), Radius, Condition(Color, Text), Timeline활용 (Delay조정, Duration입력)