UXPin의 **인터랙션 (Interactions)**을 사용하여 정적이 아닌 동적인 프로토타입을 만들 수 있습니다. 간단한 클릭연결 목업에서부터 완벽하게 애니메이션된 프로토타입까지 뭐든지 가능합니다.
UXPin을 사용하면 요소와 캔버스에 인터랙션을 추가할 수 있습니다.
기존 인터랙션에는 숫자가 표시됩니다. 잘못된 인터랙션은 빨간색 하이라이트를 표시합니다.
드래프트 인터랙션이란 무엇일까요?
**드래프트 인터랙션 (Draft interactions)**란 요소나 변수 (Variables)에 대한 연결이 삭제되는 등의 불완전한 인터랙션입니다.
기존 인터랙션을 복사하여 하나 이상의 요소에 동시에 붙여넣을 수 있습니다 (다른 페이지에서도 적용 가능합니다). 인터랙션을 복사하려면 기존 인터랙션이 있는 요소를 마우스 오른쪽 버튼으로 클릭을 하여 Copy Interaction (인터랙션 복사)를 선택합니다. 모든 인터랙션을 복사하거나 선택한 인터랙션만을 복사할 수 있습니다. 복사한 인터랙션을 다른 요소나 그룹에 붙여넣으려면 해당 요소를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 열고 Paste (붙여넣기) > Paste Interactions (인터랙션 붙여넣기)를 선택합니다.
인터랙션의 복제는 오른쪽의 Interactions 패널에서 수행할 수 있습니다. 기존 인터랙션 위에 커서를 놓고 Duplicate 아이콘을 클릭합니다.
인터랙션을 삭제하려면 인터랙션 패널에서 X 아이콘을 클릭합니다.
트리거 (Triggers)는 사용자가 인터랙션을 시작하기 위해 수행해야 하는 액션입니다. UXPin에는 **Element triggers (요소 트리거)**와 **Canvas triggers (캔버스 트리거)**라는 두 가지 유형의 트리거가 있습니다. 요소 트리거는 사용자가 요소를 조작할 때 액션을 발생시키고 캔버스 트리거는 캔버스 상태가 변경될 때 액션을 발생시킵니다.
| 요소 트리거 | 다음과 같은 경우에 트리거됩니다. |
|---|---|
| 클릭/탭 (Click/Tap) | 사용자가 구성요소를 클릭하거나 탭할 때 |
| 더블 클릭/더블 탭 (Double Click/Tap) | 사용자가 컴포넌트를 더블 클릭하거나 더블 탭할 때 |
| 오른쪽 클릭 (Right Click) | 사용자가 구성 요소를 마우스 오른쪽 버튼으로 클릭할 때 |
| 호버링 중 (While Hoverings) | 마우스 포인터가 컴퍼넌트 위에 들거가거나 나올 때 |
| 마우스 다운/터치 다운 (Mouse Down/Touch Down) | 선택한 요소 위에 마우스 왼쪽 버튼을 눌렀을 때 |
| 마우스 업/터치 업 (Mouse Up/Touch Up) | 선택한 요소 위에 마우스 눌렀던 왼쪽 버튼을 놓았을 때 |
| 마우스 오버 (Mouse Over) | 마우스 포인터가 컴퍼넌트에 들어갔을 때 |
| 마우스 이탈 (Mouse Leave) | 마우스 포인터가 구성 요소에서 멀어질 때 |
| 왼쪽 스와이프 (Swipe Left) | 사용자가 오른쪽에서 왼쪽으로 수평으로 스와이프할 때 |
| 오른쪽 스와이프 (Swipe Right) | 사용자가 왼쪽에서 오른쪽으로 가로로 스와이프할 때 |
| 위쪽으로 스와이프 (Swipe Up) | 사용자가 아래에서 위로 수직으로 스와이프할 때 |
| 아래로 스와이프 (Swipe Down) | 사용자는 위에서 아래로 수직으로 스와이프할 때 |
| 프레스 & 홀드 (Press & Hold) | 사용자가 손가락을 누른 상태에서 1초 이상 누르고 있을 때 |
| 길게 누르기 (Release Hold) | 사용자가 손가락을 1초 이상 유지한 후 손을 뗄 때 |
| 포커스 (Focus) | 컴퍼넌트가 포커스된 상태 (예: 입력필드) |
| 포커스 로스트 (Focus Lost) | 컴퍼넌트가 포커스를 잃은 상태 (예: 입력필드) |
| 값 변경 (Value Change) | 구성 요소의 값이 업데이트될 때 (예: 입력필드) |
| 옵션선택 (Option Select) | 다중 선택 목록에서 옵션 선택 |
스테이트가 있는 요소에는 State **Change (스테이트 변경)**이라는 옵션이 있습니다.