brunch

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

라이킷 49 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이세호 Apr 04. 2018

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

프로토타이핑 스터디 P-typer에서

3월 초부터 저는 프로토타이핑을 스스로 학습하는 P-typer라는 스터디 모임의 P2그룹 스탭으로 활동하고 있습니다. P2그룹에서 프로토파이 클래스를 가진 후기를 기록으로 남겨보려고 합니다. 혹시 제가 기술한 내용 중에 오개념이 있다면 댓글로 알려주시면 감사하겠습니다.

클래스를 시작하게 된 계기 :

프로토파이에 처음 입문하는 P2그룹 멤버가 많아서 클래스를 필요로 하는 니즈가 있는지 확인하고 멤버를 다섯명 모아서 시작하였습니다. 프로토파이 입문이 대략 2년전이라 그래도 시도해본 것들이 많아서 멤버들에 비해 조금 더 알고 있었는데, 향후 강의를 온라인에 올릴 계획을 가지고 있어서 이번 기회에 오프라인에서 프로토파이를 입문하는 이들의 반응도 알아보고 어떤 부분에서 어려움을 느끼는지 알 수 있을것 같아서 시작하게 되었습니다. 2회차 내에 끝낼 생각으로 시작했는데 1회차에서 반응이 좋아서 3회-4회차까지 진행할 수 있을것 같습니다.

1회차

클래스 준비 :

프로토파이는 매우 쉬운 툴이고, 기본 개념을 익히면 응용을 쉽게 할 수 있다고 생각했습니다. 그외에는 크게 메뉴들을 소개하고, 각 패널영역에 대해 소개하고, 주요 트리거와 리스폰스에 대해 소개하는 정도로 계획하였습니다.

클래스 시작 :

마이크로인터랙션의 요소 (프로토파이 기능/개념과의 연결)

시작은 마이크로 인터랙션 디자인에 대한 개념을 소개하면서 시작하였습니다. 우리는 인터랙션 디자인 툴을 다루면서 마이크로 인터랙션 디자인의 기초도 잘 모른 채 시작하게 되는 경우도 많습니다. 저도 인터랙션 디자인 서적을 읽은 경험은 없지만.. 웹에서 읽은 아티클 (링크1) (링크2) 에 따르면, 인터랙션 디자인을 이루는 주요 요소는 Trigger, Rules, Feedback, Loops and modes라고 합니다.

트리거는 발생/시작을 의미하고, 룰은 규칙, 피드백은 반응, 루프는 반복, 모드는 상태입니다. 프로토파이는 Trigger / Response(Feedback)가 인터랙션 디자인의 양 축으로 작동하는 툴이며, 그 둘 사이에 규칙(Rules)을 잡아주는 Interaction Panel이 있습니다. Repeat/Timeline이 Loop와 대응되며, mode(상태)에 대한 개념은 따로 기능으로 존재하는 것은 아니지만 Condition를 통해 이 부분을 대응하고 있다고 볼 수 있습니다.

프로토파이의 화면 구성에 대해, 좌측의 레이어패널, 중앙의 캔버스 패널, 그리고 우측의 인터랙션 패널이 있습니다. 레이어와 캔버스 패널은 그간 사용해 오신 디자인툴들과 유사한 느낌으로 사용하면 될 것이고, 인터랙션 패널은 앞서 소개한 트리거와 리스폰스로 연결되는 규칙을 설정하는 영역입니다.

프로토파이에서 다루는 레이어의 종류는 Shape(Rectangle/Oval), Container, Image, Video, Text로 총 5가지가 있습니다.

마이크로인터랙션의 요소와 프로토파이 기능/개념간의 연결

1회차(3/24)에는 예제를 통해 Container를 중심으로 진행했습니다.

1회차 도입에서 다룬 내용은 앞서 언급드린

- 마이크로 인터랙션의 4요소

- 프로토파이의 화면구성, 타임라인, 주요 트리거-리스폰스 소개.

1회차 예제를 통해 풀어본 개념은

- Container, Scroll Container, Paging Container

- Container의 상대위치와 Origin의 개념

- Container의 Hit area설정과 그 활용법 (+ Allow touch to affect lower layers)

- Chain / Range의 차이

- Trigger (Tap, Chain)

- Response (Move, Scale)

+ Pull (강의 후)

1회차 내용 요약

- Container는 일반적인 디자인툴에서 사용되는 Group과는 다소 다른 개념입니다. Container내의 상대위치는 포토샵에서 잡는 절대위치값에 비해 좀 더 개발친화적이라고 할 수 있습니다. 레이어 패널에서Container내의 개체를 Container보다 상위로 빼고 나면 절대위치로 바뀌고, 하위로 놓고 나면 상대위치로 바뀌는 것을 확인할 수 있습니다. Container를 이동시키면 하위의 개체들도 함께 이동하지만 상대위치 개념이기 때문에 개체의 위치값은 변화가 없습니다.

- Container에는 Scroll, Paging 속성을 줄 수 있고 방향을 설정할 수 있습니다. Paging은 Scroll과 달리 Container의 Width(가로방향일때), Height(세로방향일때)만큼 이동하는 것입니다. Paging Container라고 해서 Paging값이 따로 있지는 않고 Scroll Container와 동일하게 Scroll값을 사용합니다.

- Origin은 일종의 무게중심이라고 볼 수 있고 위치값과 위치나 크기가 변하는 Rotate, Scale Response 등의 기준이 됩니다. Origin은 개체 안에만 위치해야 하는 것은 아니라서 개체 밖의 위치에 설정할 수도 있습니다.

- Hit Area는 기존 개체의 터치영역보다 주변부를 더 넓게 잡는 것입니다.

- Allow touch to affect lower layers는 상위 레이어를 터치해도 하위 레이어에 터치가 적용될 수 있도록 하는 기능입니다. 그 레이어보다 높은, 위의 레이어(Z-index가 갚이 높은)에서 체크하면 됩니다.

- Chain는 기준값의 변화에 따라 다른 값을 변화시키는 것으로 현재 X, Y, Opacity, Width, Height, Scroll, Rotation을 기준값/결과값으로 잡을 수 있습니다. 예를 들어 어떤 값 A가 0-1000 B가 0-500으로 Chain에 걸리면, A가 2만큼 이동/변화할때 B는 1만큼 이동/변화한다고 할 수 있습니다.

- Chain은 연속적인 변화이나 Paging Container는 끊어지는, 분절적인 이동이기에 Chain과 Paging Container의 Scroll값을 연결시킨다면 Chain을 사용하면서도 분절적인 변화를 사용할 수 있습니다. 다른 방법으로 Range를 사용할 수도 있습니다.

- Container나 Rectangle의 개체에 투명도를 주어 버튼처럼 활용할 수 있습니다. 급할때나 개체의 일부 영역만 버튼으로 둬야할때 유용합니다만 가급적이면 Sketch에서 Import할때 영역을 나누어 주는 것이 좋습니다.

- 1회차에서 Container와 Chain 정도만 배운 상태로도 이미 우리는 Invision/Marvel보다 더 높은 수준의 인터랙션 프로토타입을 제작할 수 있게 됩니다.

2회차(4/14)에 다룰 개념과 기능은 아래와 같습니다.

3.8 업데이트 리뷰

- 개체, 인터랙션관련 :

Mask대신 Clip Sublayers와 Radius를 통해

Color / Text를 Chain, Range, Condition의 Property에 추가

- 편의기능 :

Canvas 패널 색상 변경가능, Preview화면에서 스크롤 가능,

본 강의 (개념 + 실습)

- Container의 Clip sublayers (3.8업데이트 후 Radius로 유사한 효과 vs Use as mask기능)

- Chain / Range의 차이 보충 (거리이동으로 보여주기)