태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'Origami'에 해당되는 글 2건

  1. 2015.08.27 Facebook Origami 예제 1) 움직이는 원 만들기 (2) by 문현석
  2. 2015.06.25 Facebook Origami 리뷰 by 문현석
2015.08.27 07:52

Facebook Origami 예제 1) 움직이는 원 만들기

이전 글(Facebook Origami 리뷰 1편)에서 간략하게 Origami가 어떤 툴인지 알아보았다면, 이번에는 예제를 만들면서 학습을 하는 형식으로 진행해 보겠습니다. 이전 글에서 말씀드렸듯이 우리가 사물을 보며 정의하는 것과는 반대로 사고의 흐름을 가져가면서 예제를 만들어 가도록 하겠습니다. 그리고 Origami를 능숙하게 사용하기 위해서는 Patch에 대한 이해가 중요한데요. 예제를 진행하면서 사용하는 Patch들의 속성값을 자유롭게 변경하고, 값애 따른 오브젝트의 변화를 확인하다보면 빠르게 Patch를 알아가실 수 있을겁니다.

Patch 마다 다양한 속성을 가지고 있는데, 속성의 이름만으로 어떤 역할을 하는지 쉽게 파악할 수 있습니다.


1. Origami 프로젝트 생성

Quartz composer를 실행하고 상단 메뉴에서 File 탭을 눌러 New Origami File을 클릭하면 새로운 프로젝트를 생성할 수 있습니다. 새로운 창이 열리면 Editor 화면에 3개의 Patch가 있는데요. 가장 왼쪽의 Viewer Size Patch는 디바이스의 종류, 방향을 선택 할 수 있는 옵션을 제공하며, 오른쪽의 Viewer Patch는 Viewer에서 오브젝트를 시각적으로 나타내는 역할을 합니다. 그리고 가운데 위치한 Layer Group Patch가 실제 프로토타이핑을 하게 될 공간입니다.
Layer Group Patch를 더블클릭하여 내부로 들어가게 되면 Fill Layer Patch 하나가 화면에 보입니다. 이 패치는 디바이스 화면 사이즈의 영역에 색을 채우는 기능을 가진 Patch입니다. Layer Group을 더블 클릭해서 들어가세요!


2. 오브젝트 만들기

먼저 만들어야 할 것은 원형 오브젝트입니다. Patch Library에서 Layer를 검색하신 후 Layer를 더블클릭하면, 화면에 Layer Patch가 추가 됩니다. (*Layer Patch를 한번 클릭 했을 때 Patch Library 내부에 디스크립션이 제공되는데, 여기에 Origami라고 적혀있는 것들이 Origami를 설치하며 추가된 Patch들입니다) Layer 패치는 포토샵에서 제공하는 레이어와 성격이 동일하다고 생각하시면 됩니다.
추가 된 Layer Patch의 Width 속성과 Hight 속성을 각각 300으로 입력을 하면 사각형의 오브젝트가 생성 된 것을 Viewer에서 확인할 수 있고 여기에 모서리가 둥글게 가공을 할건데요. Patch Library에서 Rounded Rectangle를 찾아 추가합니다.
Patch의 오른쪽 Image 포인트를 Layer Patch의 왼편의 Image 포인트와 서로 연결 해줍니다. 그리고 Viewer를 확인하면 사각형 오브젝트에 Radius 값이 들어간 것을 확인할 수 있습니다. 그리고 Rounded Rectangle Patch 속성의 Radius 값을 0.5로 바꿔주면 원형의 오브젝트로 변경이 됩니다.



3. 움직임 주기

다음은 이 오브젝트에 움직임을 부여할건데요. 먼저 값에 따른 오브젝트의 변화를 확인해보겠습니다. Patch Library에서 Transition Patch를 찾아 추가한 다음 Transition의 Value와 Layer의 Y Position과 연결해주시기 바랍니다.
Transition Patch는 Progress 값 (0 or 1)을 전달받아 지정된 Value 값 (-9999~9999)으로 출력해주는 역할을 하는 Patch입니다.
Transition Patch의 Start Value와 End Value의 값을 각각 -300, 300으로 변경한 다음 Progress 값을 0과 1을 번갈아가며 입력하면, Progress값이 0일때는 -300이, 1일때는 300이 Layer Patch의 Y Position 속성이 전달되는데, 이를 통해 Progress의 0이 입력되면 Start Value를 1일때는 End Value를 출력하는 것을 확인할 수 있습니다.



4. 연속성 주기.

다음으로 오브젝트의 이산적인 움직임에 연속성을 주도록 하겠습니다. Classic Animation Patch를 검색하고 추가해주시기 바랍니다. 그리고 Classic Animation의 Progress와 Transition의 Progress를 연결해주시고, Classic Animation의 Number 속성값을 0 또는 1로 변경하면, 오브젝트의 움직임이 일정 시간(Duration 속성 값)을 두고 부드러운 움직임을 가져가는 것을 볼 수 있습니다.
Classic Animation은 Number 속성의 값이 변할때 이전의 값과 현재 값 사이의 값을 연속적으로 전달하는 역할을 합니다. Curve 속성은 애니메이션의 가속도를 정해주는 부분입니다.



5. 반복하기.

그리고 여기에 따로 값을 넣지 않더라도 이 오브젝트가 반복해서 움직일 수 있도록 줄건데요. 그러기 위해서는 Classic Animation에 0과 1을 반복적으로 값을 전달하는 역할을 하는 무언가가 있어야겠죠.
Progress Patch를 찾아 추가하신 뒤 Progress의 Progress 포인트와 Classic Animation의 Number를 연결해 주시기 바랍니다.
Progress는 임의의 Value값이 들어왔을때, Start Value, End Value 속성을 통해 처음과 끝을 지정해주면, 그 해당 값이 전달 됐을 때 Progress 값을 전달해주는 역할을 합니다. 예를 들면 Start Value에 100을 입력하고, End Value에 200을 입력했을 경우, Value값에 100이 들어오면 출력값으로 0을, 200이 입력됬을때는 출력값을 1로 매칭시켜주는 것입니다.
이제 이 속성을 이용해서 주기적으로 값을 번갈아가며 전달하는 프로그램을 만들건데요. Delay Patch를 추가해주시기 바랍니다.
Delay는 연결되어 있는 출력값을 지정된 시간 만큼 이후의 값을 전달하는 기능을 합니다. Progress의 출력값과 Delay의 입력 Value를 서로 연결시켜주고 Delay의 출력 Value를 다시 Progress의 입력 Value에 연결해줍니다. 그러면 Progress에서 Classic Animation과 Delay에 값을 각각 전달하고 Delay가 다시 Progress에 다시 값을 전달함으로 결과적으로 Layer에 반복적으로 값을 전달하게 됩니다.


마무리하며..

이번글에서 준비한 내용은 여기까지고요. 오늘 사용한 패치들을 간략하게 정리하며 마치겠습니다.감사합니다.





1. Layer : 화면에 Layer를 추가하는 역할


2. Rounded Rectangle : 연결된 오브젝트의 테두리를 둥글에 만들어주는 역할


3. Transition : Progress (0~1) 입력값을 사용자가 지정한 Value (-9999~9999)값으로 변환하여 출력을 해주는 역할.


4. Crassic Animation : 입력 값의 변화를 지정된 시간동안 값을 연속적으로 출력하는 역할.


5. Progress : Value (-9999~9999) 입력 값을 지정된 값에 맞에 Progress (0~1)로 출력해주는 역할.


6. Delay : 입력된 값을 설정된 시간 뒤에 입력된 값 그대로 출력해주는 역할

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

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...
2015.06.25 08:29

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/

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

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...