본문 바로가기

Origami + Studio

[오리가미 스튜디오 Basic 02] 패치 Patches

오리가미 스튜디오Origami Studio는 모던 인터페이스 디자인을 위한 프로토타이핑 툴입니다. 페이스북Facebook 디자이너들이 만들고 사용 중인 프로토타이핑 툴로써, 특히 인터랙션, 애니메이션 및 동작을 위한 프로토타입을 구현하기에 적합한 툴입니다. 

[오리가미 스튜디오 Basic] 목차


1. 소개 Introduction

2. 패치 Patches

3. 레이어 Layers

4. 인터랙션 Interaction

5. 상태 State

6. 애니메이션 Animation

7. 미리보기 & 공유하기 Previewing & Sharing






2. 패치 Patches

패치는 오리가미 스튜디오의 빌딩 블록입니다. 패치를 통해 인터랙션, 애니메이션 및 동작을 프로토타입에 추가할 수 있습니다. 각 패치는 고유한 기능을 수행하며 다른 패치와 정보를 주고받을 수 있습니다. 


패치 라이브러리에는 많은 수의 패치가 포함되어 있지만 15-20개의 패치 코어 세트가 대부분의 프로토타입을 지원합니다. 모든 키보드 단축키는 단일 단축키를 사용하여 반복적인 작업에 용이합니다. 


패치에는 간단한 수학적 패치부터:


+ 패치는 왼쪽에 개의 숫자 입력을 받아 오른쪽에 합을 출력합니다. 2 + 3 = 5



레이어에 인터랙션interaction 추가하기도 하고:


인터랙션 패치는 뷰어에 보이는 레이어를 터치했을 때의 정보를 출력합니다. 터치를 하면 Down 포트에 표시됩니다.



상태를 관리하기도 하고:


스위치Switch 패치는 왼쪽의 입력에 의해 켜지거나 꺼질 있으며, 오른쪽에는 현재 상태를 출력합니다.



레이어 속성을 제어하기도 합니다:


레이어 속성창에 있는 속성을 클릭하여 레이어 속성 패치를 추가합니다. 위의 패치는 Rectangle 레이어가 표시되거나 숨겨지는지의 여부를 제어합니다. 



포트 Ports

포트는 패치가 정보를 수신하고 정보를 다시 전달할 수 있도록 합니다. 패치의 왼쪽에 있는 포트는 입력input이고, 오른쪽에 있는 포트는 출력output입니다. 포트의 값을 클릭하여 입력을 편집할 수 있습니다. (다른 패치의 케이블이 이미 입력에 연결되어 있지 않은 경우에만 해당됩니다.)


각 포트에는 수신할 수 있는 다른 유형의 정보가 있습니다. 오리가미에서 사용되는 중요한 유형의 값은 다음과 같습니다. 


- Number: 정수 또는 소수

- Boolean: 불리언 값 (예: true/false, yes/no, on/off, 0/1). 불리언 포트는 주로 on/off 레이블을 갖게 되고, on 값은 확인 표시로 나타납니다. 프로그래밍과 마찬가지로 패치간에 값을 전달할 때 숫자 0(off) 또는 1(on)로 변환할 수 있습니다. 

- Text: 모든 텍스트 문자열

- Image: 드래그하거나 붙여넣은 이미지

- Video: 드래그하거나 붙여넣은 동영상

- Sound: 드래그하거나 붙여넣은 사운드

- Color: 모든 RGB 또는 HSL 색상

- Index: 임의의 음수가 아닌 정수 (: 0, 1, 2)

- JSON: JSON 형식의 모든 유형의 값을 개수에 관계없이 사용할 있습니다. JSON (JavaScript Object Notation) 데이터를 저장하고 교환하기 위한 일반적인 형식입니다. 

- Point: 2D, 3D 또는 4D 숫자를 나타내는 값입니다. 점은 X, Y ,Z (: 위치 X, Y, Z, 회전 X, Y, Z) 모든 집합을 나타낼 있습니다.


일부 패치는 포트 또는 지원하는 유형을 변경할 있습니다. 패치를 마우스 우클릭하여 사용 가능한 옵션을 있습니다. 


케이블 Cables

케이블은 포트를 통해 패치에서 패치로 정보(값)을 전달합니다. 값을 물이라고 생각해보고, 케이블을 어떤 장소에서 다른 장소로 물을 이동시키는 파이프라고 생각해 보세요. 값은 출력에서 입력으로, 왼쪽에서 오른쪽으로 한 방향으로만 흐릅니다.


케이블을 만들려면 출력 포트(패치 오른쪽)에서 입력 포트(패치 왼쪽)로 드래그 하세요. 케이블을 분리하려면 오른쪽 끝을 입력 포트 밖으로 드래그하세요. 


출력 포트는 여러 케이블에 연결할 수 있지만, 입력 포트는 한 번에 하나의 케이블만 수용할 수 있습니다. 수학 (+, -, x, /), 로직 (Or, And, Not), 트랜지션Transition, 옵션 선택기Option Picker와 같은 패치를 사용하여 여러 케이블을 결합하거나 선택할 수 있습니다. 출력을 선택하고 연결하려는 입력을 Shift-클릭하여 출력을 여러 입력에 신속하게 연결할 수 있습니다. 


서로 연결하기

아래 예제에서 가지 패치는 포트에 연결된 케이블을 사용하여 서로 값을 전달합니다. 이와 함께 패치는 레이어를 켜고 끄는 터치다운 인터랙션을 그려냅니다. 






원문: origami studio - patches


Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.