피그마에서 레이어나 프레임 간에 커넥션을 만들게 되면, **인터랙션(Interaction)**이라는 것을 지정할 수 있습니다. 인터랙션이라는 건 커넥션을 통해 연결된 대상들이 프로토타입에서 어떤 식으로 전환하거나 상호작용할 지를 결정하는 것인데요. 인터랙션을 설정할 때는 다음 사항들을 설정해야 합니다. # 1. 트리거(Trigger) 먼저 트리거를 설정해야 하는데요. 프로토타입에서 커넥션이 시작되는 대상(레이어 혹은 프레임)에 **어떤 행동을 했을 때 인터랙션을 시작할 것인지를 선택하는 것**입니다. 트리거의 종류는 다음과 같습니다.

- None (없음) - On Click / On Tap (대상을 클릭하거나 손가락으로 탭했을 때) - On Drag (마우스로 드래그하거나 손가락으로 스와이프했을 때) - While Hovering (마우스로 대상 위에 호버하는 동안만) - While Pressing (마우스로 클릭하고 있거나 손가락으로 누르고 있는 동안만) - Key/Gamepad (키보드나 패드의 특정 키를 누르고 있을 때) - Mouse Enter (마우스가 대상의 영역으로 진입/호버했을 때) - Mouse Leave (마우스가 대상의 영역을 벗어났을 때) - Mouse Down / Touch Press (마우스 누름이나 터치를 감지했을 때) - Mouse Up / Touch Release (마우스를 누른 상태, 혹은 화면을 터치한 상태에서, 손가락을 뗐을 때) - After Delay (정해놓은 시간이 지난 후에) 참고로 프레임과 프레임 간에 커넥션을 연결했을 때, 트리거는 기본적으로 On Click으로 설정됩니다. # 2. 액션(Action) 다음은 액션이라는 것으로, 트리거로 설정한 조건을 만족했을 때, **어떤 일이 일어나야 할 지를 설정하는 것**입니다.

- None (없음) - Navigate to (하나의 화면에서 다른 화면으로 전환하기) - Change to (특정 요소로 변하기) - Open Overlay (화면/프레임 위에 특정 요소를 띄우기) - Swap Overlay (띄운 요소를 다른 요소와 바꾸기) - Close Overlay (띄운 요소를 닫기) - Back (이전 화면으로 돌아가기) - Scroll to (특정 부분으로 스크롤하기) - Open Link (링크 열기) (대상이 영상인 경우) - Play Video (비디오 재생하기) - Pause Video (비디오 일시정지하기) - Toggle Play/Pause (트리거 작동 시마다 재생과 일시정지를 번갈아가면서 실행하기) - Mute Video (영상 음소거하기) - Unmute Video (영상 음소거 해제하기) - Toggle Mute/Unmute (트리거 작동 시마다 음소거와 해제 번갈아가면서 실행하기) 액션은 프레임과 프레임 간에 커넥션 연결 시, 기본적으로 Navigate to로 설정됩니다. 또, 내가 커넥션을 준 대상이 프레임인지, 영상인지 등에 따라 특정 액션들이 보이거나 보이지 않습니다. # 3. 데스티네이션 (Destination) 데스티네이션은 **설정한 액션의 대상**을 가리키는데요. 커넥션을 연결해서 인터랙션을 만들게 되면, 연결한 대상이 데스티네이션으로 자동으로 설정됩니다. 예를 들어서 Frame 1으로부터 시작해서 Frame 2로 커넥션을 연결했다면, Frame 2가 데스티네이션이 되는 것이죠. 데스티네이션은 프로토타입에서의 화면, 즉 프레임이 될 수도 있지만, 팝업 같은 걸 표현하기 위한 용도로 Overlay라는 액션을 주면, 프레임이 아닌 레이어들로도 지정할 수 있습니다. 이렇게 세 가지를 설정하면 인터랙션이라는 것을 잘 만들 수 있게 됩니다. --- # 애니메이션(Animation) 여기에 추가로 애니메이션을 설정할 수도 있는데요. Navigate to 액션을 기준으로 했을 때, 한 화면에서 다음 화면으로 넘어갈 때 어떤 식으로 전환될지를 설정하는 겁니다. 애니메이션은 아래와 같은 종류가 있습니다.

- Instant (별도 애니메이션 없이 바로 전환) - Dissolve (한 화면에서 다음 화면으로 부드럽게 블러되면서 전환) - Smart Animate (이전 화면과 다음 화면에서 변한 요소들이 무엇인지 계산해서 자동으로 애니메이션 생성) - Move In (다음 화면이 이전 화면 위로 움직이면서 들어옴) - Move Out (다음 화면이 이전 화면 위로 움직이면서 빠져 나감) - Push (다음 화면이 이전 화면을 밀어 들어오면서 전환됨) - Slide In (Move In과 Dissolve가 섞인 형태로 전환됨) - Slide Out (Move Out과 Dissolve가 섞인 형태로 전환됨) 또 그 외에도 어떤 방향으로 애니메이션이 작동할지(Direction), 얼마나 부드럽게 애니메이션이 작동할지(Ease)를 설정할 수도 있습니다. 더 구체적인 내용이 궁금하신 분들은 Figma의 공식 문서와 튜토리얼 영상을 참고해 주세요! --- ## 참고 자료 - 피그마 인터랙션 문서 - 피그마 인터랙션 영상 튜토리얼 - 피그마 프토로타이핑 101 강의