Prototyping for IxD - 02 Origami


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

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

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


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

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

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

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


basic components.png

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


example.png

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

  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 설정으로 위계를 정할 수도 있다. 축은 써본 결과 다음의 이미지와 같이 설정된 것으로 추정하고 있다. 이미지 출처

001.png


3. 기본 패턴

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

pattern.png

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

pattern2.png


4. 편리한 패치들

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

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

tips.png

  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를 실행해보면 알겠지만, 저사양 맥북에겐 너무 버거운 프로그램이다. 맥북 레티나 2013 mid, RAM 8GB를 사용중인데, 언제나 Quartz Composer를 실행하면 팬이 무섭게 돌아갔다.

swish.png

dropbox로 다운받기


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

 
4
Kudos
 
4
Kudos

Now read this

AI가 디자이너를 대체할 수 있을까?

영화 ‘her'에 나오는 인공 지능 운영체제 '사만다'의 모습. AUI와 최소한의 GUI만 남아있다. '미래 유망 직종'과 마찬가지로 '미래에 사라질 직업들'은 연말 연초 언론사들의 단골 뉴스 소재이다. 그 중 옥스퍼드 마틴스쿨 칼 베네딕트 프레이 교수와 마이클 오스본 교수가 발표한 '고용의 미래'라는 보고서를 살펴보자. 이 보고서에 따르면 자동화와 기술 발전으로 20년 이내, 현재 직업의 47%가 사라질 위기에... Continue →