본문 바로가기

Origami + Studio

[오리가미 스튜디오 Basic 03] 레이어 Layers


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

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


1. 소개 Introduction

2. 패치 Patches

3. 레이어 Layers

4. 인터랙션 Interaction

5. 상태 State

6. 애니메이션 Animation

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





3. 레이어 Layers

레이어는 스케치Sketch 및 포토샵Photoshop의 레이어와 유사합니다. 모든 레이어는 스타일 속성 (위치, 크기, 이미지 또는 색상)을 가지며 주문 및 구성할 수 있습니다. 


단축키 ⌘⇧N 또는 툴바의 + 단추를 사용하여 레이어 삽입 팝업으로 레이어를 추가하세요. 


레이어 그룹 Layer Group

여러 레이어를 선택하고 G 누르면 레이어를 그룹화 있습니다. 오리가미 스튜디오의 레이어 그룹은 크기와 위치가 고유하고 클립 레이어가 있습니다. 


레이어 속성 Layer Properties

레이어 속성은 패치의 포트와 비슷합니다. 입력 포트의 값에 따라 레이어의 모양이 결정됩니다. 


레이어 속성 패치 Layer Property Patches

패치를 통해 레이어 속성을 조정하려면 속성창의 속성을 클릭하면 레이어의 이름과 해당 포트에 값을 쓰는 단일 입력 포트인 파란색 레이어 속성 패치가 만들어집니다. 


속성창에 투명도Opacity 포트를 클릭하면 위와 같은 패치가 패치 에디터에 추가됩니다.



패치에서 케이블을 속성창의 레이어 속성으로 직접 드래그 할 수도 있습니다.


속성에 여러 좌표 (예: 위치position X/Y, 크기size W/H)가 있으면 특정 좌표만 클릭할 수 있습니다. 



또는 전체 속성을 클릭할 있습니다. 예를 들어 X/Y 가진 위치Position 클릭할 있습니다.



마스킹 Masking

레이어는 다른 레이어에 의해 마스크 될 수 있습니다. ⌘⌥M 누르면 레이어가 알파 마스크로 바뀌고 바로 위의 레이어가 잘립니다. 마스킹 레이어를 추가하려면 레이어를 선택하고 ⌘⌥⇧M 누릅니다.


모든 마스크는 그라디언트 마스크 또는 모양 그룹을 기반으로 하는 합성 마스크와 같은 고급 마스크를 수행할 있는 알파 마스크입니다.


구성 요소 Components

Android 또는 iOS 표준 구성 요소를 사용하여 신속하게 프로토타이핑 있도록 사전 제작된 구성 요소 모음이 계속 생겨나고 있습니다. 구성 요소는 레이어 삽입 팝업에 나열됩니다.


레이어를 선택하고 ⌘⌥G 눌러 구성 요소에 그룹화하여 사용자 정의 구성 요소를 만듭니다. 구성 요소를 클릭하여 입력하고 변경하세요. 라이브러리에 추가하고 ⌘⌥C 눌러 다른 사람들과 공유하세요.






원문: Origami Studio - Layers


Refresh Studio

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