시작하기

Getting Started

오리가미 스튜디오 사용에 대한 소개

오리가미Origami에 오신 것을 환영합니다. 처음 시작하는 단계로 간단한 프로토타입을 제작하고 오리가미의 기초적 사용방법과 스케치Sketch와 같은 디자인 도구에서 파일 가져오기를 배우겠습니다. 이 튜토리얼과 함께 제공되는 파일을 다운로드 받아보세요.

스케치Sketch에서 복사하기

스케치와 같은 디자인 도구에서 가져오기는 복사 및 붙여넣기만큼 간단합니다. 먼저 레슨 파일에다 스케치 파일을 넣어야 합니다. 스케치에서 사진 레이어 (금문교Golden Gate Bridge 풍경 이미지)를 선택하고 편집edit > 복사copy(C) 하세요. 새로운 오리가미 프로토타입에서 편집edit > 붙여넣기paste(V) 하세요.

그런 다음 스케치로 돌아가서 몇몇 텍스트 레이어, 이미지 및 그라디언트가 포함된 인포 그룹Info Group에서 동일한 작업을 수행할 수 있습니다. 편집edit > 복사copy(C)를 한 후, 오리가미로 돌아가서 편집edit > 붙여넣기paste(V)를 하세요.

스케치 레이어가 맥OS 클립보드에 이미 있습니다. 

오리가미 스튜디오 인터페이스

화면 왼쪽에는 프로토타입을 가지고 보거나 인터랙션 할 수 있는 뷰어Viewer가 있습니다. 오른쪽에는 레이어Layer와 현재 선택된 레이어의 속성을 나열하는 레이어 인스펙터Layer Inspector가 있습니다. 가운데 부분을 패치 에디터Patch Editor라고 합니다.

오리가미 스튜디오 인터페이스

레이어 구성하기

사진 레이어를 선택하는 것으로 시작하겠습니다. 가운데로 옮기기 위해 앵커를 중심으로 이동하세요. 인포 그룹과 동일하게 해보세요; 화면 하단에 앵커가 위치하도록 앵커를 바꿉니다.

원하는 지점을 클릭 또는 클릭하고 드래그하여 앵커를 변경하세요.

인터랙션 추가하기

첫 번째로 해야 할 작업은 사진 레이어에 인터랙션을 추가하는 겁니다. 레이어에 인터랙션을 추가하려면, 레이어 패널에서 레이어 위에 마우스를 올려 놓고, Touch 버튼을 클릭한 다음, Tap을 클릭합니다.

이것이 우리의 첫 번째 패치인 Interaction 패치입니다. 나중에 조금씩 패치를 다루도록 하고, 지금은 뷰어에서 사진을 탭하는 동안 DownTap 아웃풋을 눈여겨 봐 주세요. 이 두 아웃풋은 사진을 ‘눌렀을 때down’, 그리고 Tap과 동격인 ‘누르고 놓았을 때released’의 깜박이는 반응을 보입니다.

처음 소개한 Down과 Tap 아웃풋은 이미지를가 탭 되었을 때 깜박이어야 합니다.

트랜지션 값

스케일의 두 값 사이에서 트랜지션을 해보겠습니다. 스케일 1과 화면에 맞는 스케일, 여기서는 0.38이 되겠습니다. 우리가 추가하고자 하는 다음 패치는 2개의 값 사이를 전환하는 Trasition 패치입니다.

Start 인풋 필드에 0.38을 입력하여 트랜지션 패치의 시작 입력값을 0.38로 만드세요. 그리고 End 입력값으로는 사진의 원래 크기로 가도록 1로 변경하세요.

Start 입력값은 0.38, End 입력값은 1 이어야 합니다.

패치 연결

보라색 Interaction 패치의 Down 아웃풋을 트랜지션 패치의 Progress 인풋에 연결하세요. Down 아웃풋을 클릭하고 Transition 패치의 Progress 인풋으로 드래그하면 됩니다.

Down 아웃풋에서 연결이 시작되는 점을 조심하세요.

레이어 속성에 패치 연결하기

Transition 아웃풋을 사진 레이어의 Scale 속성에 연결해야 합니다. Down에서 Progress로 연결한 것처럼, 패치에서 레이어 속성까지 연결할 수 있습니다.

Transition 아웃풋을 클릭하고 드래그 한 다음, 이번에는 레이어 패널에서 직접 이 옵션을 사진의 Scale 속성에 연결하세요.

애니메이션 추가하기

다음으로 해야 할 것은 애니메이션을 추가하는 것입니다. 패치 에디터를 두 번 클릭()하고 ‘animation’을 입력하세요. Pop Animation이 나타나면 리턴Return() 키를 누르세요.

Interaction 패치의 Down 아웃풋을 Pop Animation 패치의 Number 인풋에 연결하고, Pop Animation 패치의 Progress 아웃풋을 Transition 패치의 Progress 인풋에 연결하여 두 개의 기존 패치 사이에 Pop Animation 패치를 삽입하세요.

왼쪽에서 오른쪽으로 흐르게 하기

패치 에디터의 모든 내용이 왼쪽에서 오른쪽으로 흐르고 있음을 볼 수 있습니다. 이제 사진 위를 탭하여 누르고 있으면 트랜지션이 이징 또는 애니메이션 됩니다.

탭 상태

트랜지션이 사진을 누르고 있을 때가 아니라 탭 할때 발생했으면 합니다. Interaction 패치의 Tap 아웃풋을 Pop Animation 패치의 Number 인풋에 연결해 보세요.

다른 인풋에 대한 연결하면 이전 인풋을 대체하게 됩니다. 

작동은 하지만 그 상태를 유지하지는 못하고 있습니다. Tap은 한 프레임 동안만 지속되며 손가락을 떼는 순간 작동되기 때문입니다.

상태 스위칭 하기

패치 에디터에 Switch 패치를 추가해야 합니다. 패치 에디터를 두 번 클릭()하고 ‘switch’를 입력하세요. Switch가 나타나면 리턴Return() 키를 누르세요.

Switch 패치를 Interaction 패치와Pop Animation 패치 사이에 삽입하세요. Interaction 패치의 Tap 아웃풋을 Switch 패치의 Flip(켜고 끄기, 플립에 연결된 아웃풋에 따라 스위치가 on/off 됨) 인풋에 연결하세요. 마지막으로 Switch 패치의 아웃풋을Pop Animation 패치의 Number 인풋에 연결하세요.

이제 Tap이 Switch 패치에서 Flip을 작동하게 할 것입니다. 이 Flip은Pop Animation 패치로 보내지고 그 다음에 Transition 패치로 보내집니다. 이 값은 사진을 탭하여 스위치를 끄거나 켤 때까지 유지됩니다.

다중 트랜지션

Interaction, Switch, Pop Animation 및 Transition은 오리가미에서 프로토타이핑의 대부분을 구성합니다. 주로 다른 상호작용을 위해 재사용되고 확장되기 때문입니다.

이제 우리는 Text 레이어를 숨기고 표시하는 것뿐만 아니라 Color Fill를 사용하여 배경 색상을 변경하려 합니다. 이 모든 것이 사진의 스케일 변경과 동일한 물리적 인터랙션 내에서 일어나야 합니다.

패치 에디터를 두 번 클릭()하고 ‘transition’을 입력하세요. transition이 나타나면 리턴Return() 키를 누르세요. Pop Animation 패치의 기존 출력을 이 새로운 Transition 패치의 Progress 인풋에 연결합니다.

새로운 Transition 패치의 아웃풋에서 인포 그룹Info group의 레이어 인스펙터Layer inspector로 드래그하고 Opacity 속성에 연결하여 마칩니다.

레이어 패널에 있는 레이어 이름으로 드래그 할 수도 있습니다. 레이어 속성이 표시되도록 레이어가 확장될 겁니다.

Opacity를 0에서 Start하여 1에서 End 되기를 원하기 때문에 Transition 패치의 기본 입력을 변경할 필요는 없습니다.

패치와 값이 위와 같아야 합니다.

트랜지션 타입 변경하기

마지막으로 패치 에디터에 하나 이상의 트랜지션 패치를 추가해 주세요. 트랜지션 패치에 마우스 오른쪽 클릭 또는 컨트롤Control(^) + 클릭을 해서 드롭다운 메뉴에서 Type Color를 선택하세요.

흰색으로 Start해서, 검정색으로 End 합니다. 이전과 같이 Pop Animation 패치의 Progress 아웃풋을 새로운 Transition 패치의 Progress 인풋에 연결합니다.

마지막으로, Transition 패치의 아웃풋을 Color Fill 레이어의 Color 속성에 연결하세요.

레이어 패널에서 레이어 이름으로 드래그 할 수도 있습니다. 레이어가 확장되어 속성이 표시됩니다.

이제 프로토타입과 인터랙션할 때 Color Fill 레이어는 사진이 축소될 때 흰색 바탕으로, 사진이 확대될 때 검정색 바탕으로 색상이 전환됩니다

원문: http://origami.design/tutorials/getting-started/Getting-Started.html


 

연관된 Examples 콘텐츠

Photo Zoom

스크린을 탭 해서 두 상태를 애니메이션 하기