로직 추가

Adding Logic

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

프토토타이핑을 할 때 종종 인터랙션이 있었으면 합니다. 무언가가 true이거나 거짓false이거나 또는 같은 효과를 갖는 두 개의 서로 다른 버튼과 같이 여러 개의 것들이 인터랙션을 제어하고 싶을 때 말이죠.

이를 로직 추가adding logic라고 하며, 인스타그램Instagram 다이렉트 메시지 프로토타입을 만들어보면서 오리가미에서 이에 관해 배워보겠습니다.

코드를 조금 알고 계시나요?

자바스크립트JavaScript 또는 프레이머Framer (커피스크립트CoffeeScript)와 같은 코드 기반의 배경을 가지고 있다면 오리가미는 이와 약간 다를 수 있습니다. 계속 진행하기 전에 ‘코드와의 차이점Coming From Code‘을 우선 볼 것을 권해드립니다.

설정

이미 만들어져 있는 일부 핵심 인터랙션 파일을 열 때 주의해 주세요.

orgamikorea_addinglogic01

튜토리얼 시작 파일Starting tutorial files은 이와 비슷해야 합니다.

이 프로토타입은 인스타그램에 있는 다이렉트 메시지 기능을 중심으로 이루어져 있습니다. 여기에는 다이렉트 메시지 Modal Group을 여는 Send To 레이어와 그것을 닫는 Cancel 레이어가 있습니다.

더 자세히 살펴보면, 프로토타입에는 다이렉트 메시지 Hit Area이 있습니다. 이 레이어와 인터랙션하면 Switch가 켜지고 Cancel 레이어를 누르면 스위치가 꺼집니다.

Or

Color Fill을 탭 해서도 Modal을 닫으면 좋을 것 같습니다. 레이어 패널에서 Color Fill 위에 마우스 커서를 올리고 Touch 메뉴에서 Tap을 클릭합니다.

orgamikorea_addinglogic02

새로운 Interaction 패치가 패치 에디터에 나타나야 합니다.

뷰어에서 Modal 다음 Color Fill 해보세요. 새로운 Interaction 패치를 보면 탭핑이 감지되었음을 있습니다.

orgamikorea_addinglogic03

Color Fill 인터랙션할 Interaction 패치의 Down Tap 한번 눈여겨 봐주세.

궁극적으로 Switch Turn Off 위해서 Cancel 또는 Color Fill 탭하고 싶을겁니다. 이러한 옵션을 모두 허용하려면 Or 패치가 필요합니다.

패치 에디터를 더블 클릭()하고 Or 패치를 추가하세요. Cancel Interaction 패치의 Tap 아웃풋을 Or 인풋에 연결하세요. 또한 Color Fill Tap 아웃풋을 남은 Or 인풋에 연결하세요.

이제 Cancel이나 Color Fill 아무 곳을 탭할 Or 아웃풋이 트리거 됨을 있습니다.

orgamikorea_addinglogic04

뷰어에서 탭하는 동안에 패치의 인풋과 아웃풋을 다시 한번 눈여겨 봐주세요.

Or 대체

현재 Switch의 Turn Off에 연결된 것은 Cancel Interaction Tap 아웃풋만 있습니다. Or 아웃풋을 Switch의 Turn Off 인풋에 연결하여 해당 연결을 교체하세요.

orgamikorea_addinglogic05

Or 아웃풋이 Switch의 Turn Off 인풋에 연결되어 있는지 확인하세요.

이제 Color Fill 또는 Cancel을 탭하면 Switch가 꺼집니다.

더 많은 로직 준비

Color Fill 레이어는 기본적으로 뷰어의 전체 높이와 너비를 사용합니다. 즉 Cancel뿐 아니라 Send To를 탭하는 것은 Switch를 Turn Off하고 Modal을 닫으라는 의미가 됩니다.

이를 방지하기 위해 Send To를 탭하는 시점을 알아야 합니다. 레이어를 선택하고 Touch 메뉴에서 Tap을 클릭하여 Send To 레이어의 Interaction 패치를 추가하세요.

orgamikorea_addinglogic06

패치 에디터의 새로운 Interaction 패치는 이제 Send To에서의 탭핑을 감지할 겁니다.

Not

Color Fill 또는 Cancel를 탭하면 Switch를 Turn Off되고 Send To가 탭 되었을 때는 그렇지 않았으면 합니다. 오리가미는 이에 걸맞은 Not 패치가 있습니다. 패치 에디터를 더블 클릭()하고 Not 패치를 추가합니다.

orgamikorea_addinglogic07

Send To Interaction 패치의 Tap 아웃풋을 Not 패치의 입력에 연결합니다. 뷰어에 Send To 레이어가 되어질 Not 패치를 눈여겨 보세요. 펄스는 레이어가 각각 되고 되지 않을 Not 패치에 잠깐 나타날 겁니다.

orgamikorea_addinglogic08

오리가미에서 Tap은 한 프레임 동안 지속되므로 몇 번 탭하여 변경사항을 확인해 보세요.

And

Cancel을 탭 하거나 Color Fill을 탭 했을 때 Switch가 Turn Off 되야하고, Sent To를 탭 했을 때에는 그렇지 않아야 합니다. 오리가미에는 And 패치가 있습니다. 패치 에디터를 더블 클릭()하고 And 패치를 추가합니다.

orgamikorea_addinglogic09

Or 패치의 아웃풋을 And 패치의 인풋에 직접 연결합니다. 그런 다음 And 패치의 아웃풋을 Switch 패치의 Turn Off 인풋에 연결합니다.

orgamikorea_addinglogic10

And 아웃풋에서 Switch Turn Off 인풋으로 연결되는 것과 같이 새 연결을 이미 연결이 있는 곳에 놓으면 기존 연결을 대체합니다.

이러한 연결 및 정렬을 통해 다음 로직을 확인할 수 있습니다:

– Cancel 레이어 또는 Color Fill 레이어는 탭 되나요?
– 그 외에 무언가 반응하는게 있나요?

이제 Not 아웃풋을 두 번째 And 인풋에 연결하여 마지막 로직을 완성할 수 있습니다.

orgamikorea_addinglogic11

세 가지 로직 패치의 최종 상태

체크해 봐야 할 마지막 로직은 다음과 같습니다:

– Cancel 레이어 또는 Color Fill 레이어는 탭핑이 되야 합니다.
– Send To는 탭핑이 되지 않아야 합니다.

Color Fill과 Send To를 탭 하면 Modal은 닫히지 않지만, 다른 곳에서 Cancel 또는 Color Fill을 탭하면 Modal이 닫힙니다.

원문: http://origami.design/tutorials/common-interactions/Adding-Logic.html


 

연관된 Examples 콘텐츠

 

origamikorea_instagram-direct-messages

Instagram Direct Messages

인스타그램 다이렉트 메시지를 친구들에게 계속 보내기