[오리가미 스튜디오 Basic 04] 인터랙션 Interaction

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

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

1. 소개 Introduction

2. 패치 Patches

3. 레이어 Layers

4. 인터랙션 Interaction

5. 상태 State

6. 애니메이션 Animation

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

4. 인터랙션 Interaction

인터랙션 패치는 사용자의 인터랙션(터치, 스와이프, 키 누름)에 대한 정보를 뷰어에서 출력합니다. 레이어 위로 마우스 커서를 가져갔을 때 나오는 'Touch' 버튼을 클릭해서 인터랙션을 추가하거나, 패치 라이브러리에서 검색하여 추가합니다. 

인터랙션 패치 Interaction Patches

인터랙션Interaction

이것은 인터랙션의 가장 기본이라 할 수 있습니다. 사용자가 특정 레이어를 터치하거나 탭 했을 때 알려줍니다. 또한 부모 그룹 내의 터치 위치와 3D 터치를 지원하는 랩탑, 폰, 태블릿을 사용할 때 적용되는 포스의 양를 제공합니다. 

스크롤 Scroll

레이어를 수직 또는 수평으로 스크롤 할 수 있습니다. 페이징 모드로 설정도리 수 있으며, 커루셀 프로토타이핑을 할 때 유용합니다.

팝 스위치 Pop Switch

두 상태의 스와이프가 가능한 인터랙션 (예: 왼쪽과 오른쪽에 있는 카드를 스와이핑 하기)을 신속하게 프로토타입 하는데 도움이 됩니다. 또한 스와이프 외에도 두 손가락으로 핀칭pinching하는 것을 지원합니다.

롱 프레스와 더블 탭 Long Press and Double Tap

인터랙션 패치와 연결하면 롱 프레스와 더블 탭을 포착합니다. 

드래그 Drag

모든 레이어를 드래그 가능하게 만듭니다.

키보드 Keyboard

K 키를 누를 때마다 나타납니다.

호버 Hover

마우스로 호버 인터랙션을 포착할 수 있게 합니다.

터치 감지에 대한 참고사항

터치를 수신하려면 레이어를 활성화하고 불투명도가 0보다 커야합니다. 레이어 그룹의 터치는 상위 그룹과 함께 전파되고 공유되므로, 탭 할 수 있는 레이어가 포함된 스크롤링 레이어 그룹을 만들 수 있습니다. 

원문: Origami Studio - Interaction

Refresh Studio

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