Prototyping for IxD — 02 Origami

May 6, 2015

이번에는 저번 포스트에 이어 본격적으로 Origami에 대해 정리하려고 한다. 최대한 간단하게 써보겠다.

크게 두가지 부분으로 나눌 수 있을 것 같다.

  • Origami 튜토리얼을 보기 전에 읽을 부분 : 1,2,3번 파트
  • 본 후에 읽을 부분 : 4,5번 파트

페이스북 튜토리얼은 아무래도 제작자가 만든 튜토리얼이라 어려울 수있지만 기본적인 내용을 대부분 소개하고 있기 때문에 꼭 해볼 것을 추천한다. 하지만 그 전에 나처럼 툴에 대한 지식이 전혀 없는 사람들을 위해 간단히 워크샵에서 배운 내용과 혼자 공부하면서 깨달은 몇 가지 사실들을 정리하려고 한다.

1. 기본적인 패치에 대한 이해

Patch는 색깔 별로 구분된다. 각 패치에 대한 이름은 공식적인 것은 아니며 구분을 위해 편의상 붙여 보았다.

Event 보라색 패치 : 각각의 특수한 기능을 가지고 있는 패치. 인터랙션이나 애니메이션을 담당한다.
Function 검은색 패치 : 실행에 대한 세부 설정을 추가하기 위한 패치. 트랜지션이나 수치 맵핑, 조건문, 수식이 필요할 때 이용한다.
Object 파란색 패치 : 화면상에 표현 되는 오브젝트 혹은 Layer들. Layer하나당 하나의 이미지나 동영상이 연결 된다. Layer를 Group으로 만들 경우 Group패치와 파란색 Layer패치를 연결해주어야만 화면에 나타난다.

대개 패치들은 아래 순서대로 이어지게 된다.

  • 위와 같이 보통 Interaction을 담당하는 보라색 패치 다음, 그를 전달하는 검은색 Progress 패치들, 그리고 이를 전달 받아 화면 상에 표현하는 파란색 Layer패치로 이루어진다. 이 사이에 보라색 Animation 패치가 더 추가될 수 있다.

아래는 가장 기본이 되는 패치들이다.

1. Interaction2 : 단축키 I. 기본적인 화면 터치나 마우스 클릭과 같은 인터랙션을 표현한다. 이와 함께 많이 사용되는 인터랙션 패치는 Swipe와 Scroll이 있다. 인터랙션은 모두 1과 0으로 on/off를 표현한다. On이 1, Off가 0이고 이 값을 progress 관련 패치들이 받아 필요한 수치로 환산한다.
2. Pop Animation : 단축키 A. Classic Animation과 함께 많이 사용되는 애니메이션 용 패치이다. Bounciness, Speed 등 기본적인 애니메이션을 줄 수 있다. 좀 더 무난한 것을 원한다면 Classic Animation 패치를 쓰면 된다.
3. Progress : 단축키는 없다. 패치 라이브러리(Mac 단축키 cmd+return)를 사용하여 꺼낸다. 인터랙션 패치로 부터 전달받은 0/1 값을 실제 화면에 표현될 오브젝트를 위한 수치로 변환한다. 가령 인터랙션이 일어났을 경우(On=1), X Position을 0에서 750으로 옮길 때, 위의 이미지와 같이 구성될 수 있다. 단 Switch 패치를 넣어주어야 인터랙션이 일어난 상태가 유지된다.

2. Layer의 위계

각각의 Layer는 포토샵처럼 위/아래 개념을 갖고 Parent Layer와 Child Layer로 구성된다. 레이어의 위계는 레이어 우측 상단의 숫자로 확인할 수 있다. 이 위계와 별개로 각각의 오브젝트는 x,y,z 좌표값을 갖기 때문에 Z Position 설정으로 위계를 정할 수도 있다. 축은 써본 결과 다음의 이미지와 같이 설정된 것으로 추정하고 있다. 이미지 출처

3. 기본 패턴

패치들의 기본 패턴은 다음과 같다.

인풋은 하나일 경우 flip, 두 가지일 경우 on/off, 여러가지일 경우는 조건문을 붙여 설정할 수 있다. 아웃풋도 여러 오브젝트가 연결될 수 있다.

4. 편리한 패치들

오리가미는 Quartz Composer에 추가로 자신들이 만든 패치를 제공하는 형태이기 때문에, 다른 플러그인(IDEO의 Avocado)나 Quartz Composer 에서 기본으로 제공하는 여러 패치를 잘 이용하면 좀 더 편리하게 이용할 수 있다.

아래는 용이하게 사용했던 패치들이다. (어떤 것이 origami 것이고 avocado 것이고 Quartz Composer 것인지는 구분하지 않았다.)

1. Range : 값 범위를 정하는 것은 애니메이션에서 특히 유용했다.
2. Reverse progress : 단순히 반대로 전달하면 되는 것인데 swith에서 flip을 쓸 수 없는 경우 사용했다.
3. Boolean 종류 : and, or 등등. and는 단축키 shift+A, or 단축키는 마찬가지로 shift+O.
4. 조건문 : boolean이나 switch로 부족할 때 썼다.
5. Default & Value : 디폴트값을 두고, 특정 인터랙션이 일어났을 때 특정 값을 전달하고 싶을 때 썼다.
6. Wireless 패치들 : Receiver와 Broadcaster가 짝을 이루는 패치. 단축키 W와 shift+W가 세트.
7. Number : 반복되는 숫자 입력이 지겨울 때, 하나 만들어놓고 다 연결하면 끝!
8. Text : 단축키 shift+T 특정 과정이 제대로 일어나고 있는지, 어떤 수치가 전달되고 있는지를 확인하고 싶을 때, 각 프로그레스 패치 앞 뒤로 Text layer를 연결해주어 디버그를 할 수 있다.
9. Delay : 오브젝트들이 순차적으로 등장해야할 경우 필수적인 패치인 Delay.

5. 고급 유저가 되는 길

Facebook에는 Origami 커뮤니티가 있다. 이곳에는 최신 버전에 대한 정보와 여러 플러그인, 추가 팁, 그리고 사람들이 만든 자료들을 받을 수 있다.

그 밖에 참고할 만한 사이트들이다.

Min-Sang Choi님의 블로그

medium에 올라온 Origami에 관한 포스트

Github의 자료

Google의 Material Design

Google의 Animation 관련 개발자 페이지

이 외에도 검색해보면 여러 자료를 구할 수 있다. 그리고 대부분 Quartz Composer 원본 파일을 제공한다. 해당 파일을 열어보고, 또 페이스북에서 제공하는 Example들을 이용하면 더 고급 단계의 프로토타이핑을 배워볼 수 있을 것이다.

그리고 마지막으로 워크샵에서 완성했던 나의 작업을 일부 공유한다. 코드가 매우 복잡(더러우니) 열 때 주의할 것. Quartz Composer를 실행해보면 알겠지만, 저사양 맥북에겐 너무 버거운 프로그램이다. 맥북 레티나 Late 2013, RAM 8GB를 사용중인데, Quartz Composer를 실행하면 언제나 팬이 무섭게 돌아갔다.

dropbox로 다운받기

툴을 공부해보니 새삼스럽게 또 깨달은 것은, 툴은 더 나은 결과물을 만들기 위한 수단일뿐 툴에 지배되어서는 안 된다는 것이다. 기회가 된다면 공부한 것을 활용하여 ‘프로토타이핑 — 테스트 — 피드백’으로 반복되는 프로세스로 무언가 제대로 만들어보고 싶다.


Originally published at 001xm.svbtle.com.