[오리가미 스튜디오 Basic] 목차
2. 패치 Patches
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-클릭하여 출력을 여러 입력에 신속하게 연결할 수 있습니다.
서로 연결하기
아래 예제에서 세 가지 패치는 포트에 연결된 케이블을 사용하여 서로 값을 전달합니다. 이와 함께 패치는 레이어를 켜고 끄는 터치다운 인터랙션을 그려냅니다.
Refresh Studio
해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.
'Origami + Studio ' 카테고리의 다른 글
[오리가미 스튜디오 Basic 07] 미리보기 & 공유하기 Previewing & Sharing (0) | 2017.01.13 |
---|---|
[오리가미 스튜디오 Basic 06] 애니메이션 Animation (0) | 2016.12.30 |
[오리가미 스튜디오 Basic 05] 상태 State (0) | 2016.12.28 |
[오리가미 스튜디오 Basic 04] 인터랙션 Interaction (0) | 2016.12.26 |
[오리가미 스튜디오 Basic 03] 레이어 Layers (0) | 2016.12.23 |
[오리가미 스튜디오 Basic 01] 소개 Introduction (0) | 2016.12.19 |