Facebook Origami 리뷰

지난 몇달 동안 프로토타이핑 툴에 관련된 업무를 진행하다보니, 지인분들로부터 괜찮은 툴을 추천해달라는 말을 간혹 들었습니다. 프로로타입 제작 목적에 따라 툴을 선택하는 것이 중요하지만, 비용 부담이 있다보니 무료이면서, 대부분의 기능을 구현할 수 있는 Facebook Origami로 결론이 나더군요. 하지만 Origami는 훌륭한 툴이지만 몇가지 단점도 있습니다.


첫째. Mac에서만 사용할 수 있다.
많은 툴들이 웹 플랫폼으로 개발되어 OS와 관계없이 어느 플랫폼에서나 사용이 가능한 반면, Origami는 Apple에서 제공하고 있는 Quartz composer 라는 툴에서 확장한 것이기 때문에, MAC OS X 외에는 사용할 수가 없습니다. 여전히 많은 사용자가 Windows를 사용하고 있다는 점을 고려하면 큰 단점입니다.

둘째. 고사양을 요구한다.
Quartz composer는 비주얼 개발 툴이기 때문에 프로그램이 무거운 편입니다. 저사양 디바이스에서 편집까지는 문제가 없지만, 결과물을 시각적으로 확인하는데는 어려움이 있습니다.

셋째. 어렵다.
Origami는 툴의 매커니즘을 이해하는데만 적지 않은 시간이 걸리고 기능을 구현하는데 있어서도 많은 학습을 요구합니다. 특히 제가 어려웠던 부분은 오리가미에서 많은 기능을 제공하고 있긴 하지만, 그 외에 기능을 구현하려면 기존의 것들을 응용하여, 우회적으로 접근해야 한다는 것이었습니다.


프로그램을 어느정도 구현하고 나면 이런 복잡한 화면을 꼭 보게 됩니다.
제가 첫번째, 두번째 문제는 해결해 드릴 순 없지만 :)
학습했던 내용들을 공유하며, Origami에 관심이 있으나 세번째와 같은 이유로 시작하지 못하는 분들이 배움을 시작할 기회가 되길 바랍니다. 내용이 적지 않은 관계로 연재 형식으로 진행할 예정이고, 이번 글에서는 시작하기에 앞서 Origami의 인터페이스와 앞으로 학습에 필요다고 생각하는 몇가지를 적으려 합니다.

Patch

Patch는 프로그래밍 언어에서 말하는 객체, 함수 같은 역할로, 각각의 기능을 가지고 있는 박스입니다. 예를 들면, 사람의 신체부위마다 제각기 다른 기능을 가지고 있듯, Patch 또한 서로 독립적인 기능을 가지며, 이것들을 선으로 연결하여 Patch간의 인터렉션을 할 수 있게 함으로써 하나의 프로그램으로 만들어집다. Patch는 아래와 같이 각각 다른 특성을 가진 3가지 색으로 구분이 됩니다.

1. Provider Patch (보라색)

: Scroll이나 Swipe등 특정 이벤트 발생시키는 기능.

Swipe Patch

2. Consumer Patch (파란색)

: Photoshop의 Layer와 같이 화면상에 오브젝트를 표현.

Layer patch & Button patch

3. Processor Patch (검은색)

주로 보라색과 파란색 사이에 위치하며, 그 안에서 수치값(value)을 조절.
Transition Patch를 이용한 값 변화


Patch의 왼쪽 포인트는 값을 전달 받는 'Input'을 오른쪽 포인트는 값을 전달하는 'Output'의 역할을 합니다. 자석의 N극과 S극처럼 같은 것끼리는 연결이 되지 않습니다. Output은 여러 갈래로 뻗어 나갈 수 있지만, Input은 하나의 값 밖에 전달 받지 못하며, 일반적으로는 연관성 있어 보이는 단어끼리 연결시키면 됩니다. Patch는 Origami의 핵심이기 때문에 종류를 많이 알고, 이해할수록 다양한 Prototype을 제작하는데 도움이 됩니다.

인터페이스

실제 작업을 하면서 쓰는 인터페이스라고 한다면 크게 4가지인데요. 꼭 필요한 내용이라고 생각이 되지만, 어려운 내용은 아니라 간단하게 정리만 하도록 하겠습니다.

1. Editor

Patch를 편집하는 화면입니다. 사용자가 가장 많이 접근하는 화면입니다.

2. Patch Library

사용할 Patch들이 나열되어 있는 화면입니다. 상단 선택창에서 Origami를 선택하면 Origami에서 제공하는 Patch들을 확인 할 수 있습니니다.

3. Parametors & Patch inspactor

Patch 안의 파라메터들을 변경할 수 있는 창입니다. Patch에서 바로 수정이 가능하기도 하지만, 이 창을 이용하면 좀더 편하게 수정이 가능해집니다. 다만 큰 영역을 차지하기 때문에 화면이 작은 디바이스에서 쓰기에는 어려움이 있습니다.

4. Viewer

작업한 내용을 시각적으로 확인할 수 있는 창입니다.
클릭하면 크게 보실 수 있습니다.

사고의 순서

일전에 Origami를 주제로 강의를 진행한 적이 있습니다. 2~3시간 분량을 준비하면서 가장 많은 고민을 했던 부분이 ‘짧은 시간 동안 어떤 내용을 전달해야, 강의가 끝난 뒤에도 참여자들이 지속적으로 사용할 수 있도록 할 수 있을까?’ 였습니다. 저에게는 이것이 가장 중요한 포인트였고, 고민 끝에 내린 결론은 ‘특정 오브젝트에 대해 표현의 순서를 바꾸고, 그 순서로 프로그래밍을 할 수 있도록 유도' 하는 것 이었습니다. 예를 들면 아래와 같은 화면을 우리는 어떻게 볼 것이냐는 것이죠.

"위,아래로 움직이는 원형 오브젝트? 원형 오브젝트에 위,아래 움직임을 준 것?"



말장난처럼 느껴지실 수도 있겠습니다만, 프로그래밍을 할 때는 전혀 다른 접근 방식이 됩니다. 대부분의 개발자는 이 프로그램을 구현할 때 애니메이션부터 개발하는 것이 아니라, 원형 오브젝트를 만들고 나서, 화면상에 잘 나타는지를 확인하고, 애니메이션 효과를 만들어 동작유무를 확인한 다음, 이동할 방향, 속도 값을 입력할 것입니다. 이런 흐름의 사고를 가져간다면, 프로그래밍을 하는데 접근성이 매우 좋아집니다. Origami 또한 마찬가지죠.
(이 부분은 다음 번 글에서 예제를 만들며, 다시 다루도록 하겠습니다.)

마무리하며.

다음 글부터는 예제를 통해서 Origami를 실습해보고, 여기서 사용되는 Patch 하나하나를 알아 보겠습니다. 다소 어렵고 지루할 수 있는 내용이지만, 최대한 쉽게 풀어 서술하도록 노력하겠습니다. 아래 링크로 들어가시면 Oragami를 설치 페이지가 나옵니다.
http://facebook.github.io/origami/download/
오리가미 사이트 링크 오류로 Quartz composer는 아래 링크로 접속하셔서 Graphics tools를 다운로드하면 내부에 포함되어 있습니다.
https://developer.apple.com/downloads/

[참고##프로토타이핑##]