코드와의 차이점

Coming From Code

오리가미가 프로그래밍과 어떻게 다른지 확인해 보세요.


 

오리가미에서 프로토타입에 함수functions를 사용하고 로직logics을 추가하는 것은 간단하지만, 만약 프로그래밍 백그라운드를 가지고 있는 분들에게는 기대했던 것과 조금 다를겁니다.

패치와 함수

오리가미의 기본 빌딩 블록을 패치Patches라고 합니다. 그것들은 데이터 입력을 취하고, 그것에 대한 액션을 수행하고, 결과를 만들어내는 함수functions와 유사합니다.

origamikorea_coming from code01

코드에서 함수의 구성 방식

오리가미의 패치도 같은 방식으로 작동합니다; 단일 또는 다중 인풋을 취하고, 액션을 수행하고, 아웃풋을 생성합니다. 약간 다른 형식을 사용할 뿐입니다.

origamikorea_coming from code02

오리가미 스튜디오에서 패치 형식으로서의 함수

오리가미를 독특하게 만들어주는 것은 다양한 상호작용을 듣고, 자연스러운 애니메이션을 만들고, 레이어 속성을 조작하는 등의 사전 제작된 패치 모음이 있기 때문입니다. 코드의 함수처럼 자신만의 패치를 만들 수도 있습니다.

인풋과 아웃풋

화씨Fahrenheit섭씨Celsius로 변환하는 예를 사용해 보겠습니다. 화씨는 입력값이고 섭씨는 반환값 또는 아웃풋입니다.

자바스크립트JavaScript와 같은 프로그래밍 언어에서 이 계산은 다음과 같습니다.

origamikorea_coming from code03

화씨에서 섭씨로 변환하는 자바스크립트 함수

오리가미에서 화씨를 섭씨로 변환하는 계산은 다음과 같습니다.

origamikorea_coming from code04

주의해야 중요한 점은 계산 순서입니다. 코드는 일반적으로 수학 연산의 전통적인 순서를 따릅니다. +, – 연산자보다 /, * 연산자에 우선 순위를 부여합니다. 오리가미는 패치가 연결된 순서대로 계산합니다.

다중 아웃풋

오리가미 여러 개의 아웃풋을 쉽게 얻을 수 있습니다. 이는 일반적으로 사용되는 함수 이상으로 패치를 사용할 수 있음을 의미합니다

origamikorea_coming from code05

패치 내에서 계산된 값들은 단지 아웃풋으로 나와져야 합니다.

origamikorea_coming from code06

로직과 조건문

조건문conditionals이라고 불리우는 코드에서의 로직은 오리가미가 처리하는 방식과는 조금 다릅니다. 코드는 일반적으로 위에서 아래로 선형으로 실행되며 다음 행으로 이동하기 전에 계산이 처리되어야 합니다.

비주얼 중심인 오리가미의 패치 에디터Patch Editor에서는 정보가 왼쪽에서 오른쪽으로(로직 작업 포함) 상호작용 및/또는 트리거 되는 내용에 따라 흐릅니다. 이런 이유로 if, else, else if 또는 코드에서 찾을 떄와 유사한 패치를 찾지 못할 것입니다. 대신 패치를 통해 전달된 정보 (일반적으로 인터랙션에서의)는 비교가 false가 아니면 계속 흐르게 됩니다.

수학 풀기

오리가미의 수학은 코드에서 산술 연산자와 거의 같습니다. 오리가미에는 대부분의 표준 연산자를 위한 패치가 있습니다.

코드에서의 단순 연산문

오리가메에서의 단순 연산문

아이템 비교하기

오리가미는 코드에서 비교 연산자와 마찬가지로 값을 취하여 참 또는 거짓 불 값을 출력할 수 있습니다.

origamikorea_coming from code07

코드에서의 단순 비교문

origamikorea_coming from code08

오리가미에서의 단순 비교문

로직으로 비교하기

여기서부터 오리가미와 코드가 갈라집니다. 오리가미에는 공통 로직을 빠르고 쉽게 처리할 수 있는 패치가 내장되어 있습니다. 예를 들어:

origamikorea_coming from code09

코드에서의 단순 비교문

origamikorea_coming from code10

오리가미에서의 로직으로 비교하기

코드에서 논리 연산자는 대개 비교 연산자와 쌍을 이룹니다(위 그림 참조). 오리가미는 공통 로직을 위한 전용 패치로 쉽게 비교할 수 있습니다:

origamikorea_coming from code11

코드에서의 비교 연산자

origamikorea_coming from code12

오리가미에서의 비교 연산자

이러한 패치는 if 또는 else와 유사한 조건문을 검사할 때 유용합니다. 예제를 통해 계산이 참인지 확인해 보겠습니다.

origamikorea_coming from code13

오리가미는 왼쪽에서 오른쪽으로 (3> 2 && (2 == 3 || 2 <3) && 2! => 3 유사하게) 흐르는 정보를 취하고, and false 아웃풋을 and 패치의 아웃풋으로 나타냅니다.

origamikorea_coming from code14

코드에서는 다중적 계산을 연결하게 되면 관리하기가 복잡해지고 어려워질 수 있습니다. 오리가미에서 이러한 작업을 하면 더 직관적이고 유연해질 수 있습니다.

원문: http://origami.design/tutorials/getting-started/Coming-From-Code.html


연관된 Learn 콘텐츠

 

adding_logic

로직 추가 Adding Logic

트랜지션과 플로우에 로직 추가하기