[5강] 화면 디자인 연결 요소 3인방

트리거와 액션

• 플로우 : 프로토 타입의 흐름을 칭하는 말. 핫스팟과 종착점 연결로 커넥션이 만들어지면 자동으로 플로우 패널이 열린다.
  
  
• 플로우 구성 : 트리거+애니메이션+액션.
  · 트리거 : 액션을 시작하는 조건이나 이유, 계기. 이벤트라고 부를 수도 있다.
  ·액션 :  트리거로 인해 만들어지는 결과.
  ·애니메이션 : 트리거를 통해 액션을 실행시, 어떻게 실행할 지는 의미하며, 인터랙션 형태를 정한다.
  
  
• 트리거 종류 : 어떤 이벤트 발생하면 실행할 건지를 설정.
  · 온 클릭 : 클릭 또는 탭/터치했을 때 액션을 실행.
  · 온 드래그 : 드래그 시 액션을 실행.
  · while hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션 실행
  · while pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션 실행.
  · Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행.
  ·  Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행.
  ·  Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행.
  ·  Mouse down : 커서/마우스가 영역을 누르면 액션을 실행.
  ·  Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행.
  ·  After delay : 일정 시간이 지난 후에 액션을 실행.
• 액션 종류 : 프로토타입의 플로우의 목적지이자 트리거로 인해 만들어지는 결과를 어떻게 할지 설정.
  ·  Navigate to : 페이지(프레임)를 이동하는 액션.
  ·  Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션. 트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있다.
  ·  Back : 직전 화면으로 이동하는 액션. 뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있다.
  ·  Set variable : 변수를 특정 값으로 설정하는 액션. 트리거를 실행하면 변수를 원하는 값으로 설정할 수 있다.
  ·  Set variable mode : 변수를 특정 모드로 설정하는 액션. 트리거를 실행하면 변수를 원하는 모드로 설정할 수 있다.
  ·  Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션.
  ·  Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션.
  ·  Open link : 특정 URL을 여는 액션.
  ·  Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션. 다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용.
  ·  Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션.
  ·  Close overlay : 라이트박스을 닫는 액션

애니메이션 : 액션을 어떻게 실행할지를 결정

• 트리거는 시작하는 조건, 액션은 실행하는 내용.
• 
  애니메이션 종류
  ·   Instant : 별도의 애니메이션 없이 즉각 실행.
  ·   Dissolve : 페이드인/아웃이라고도 부르며, 천천히 흐릿해지면서 화면을 전환.
  ·   Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 만든다.
  ·   Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환.
  ·   Push : 현재 화면을 지정한 방향으로 밀면서 등장.
  
  
• 스마트 애니메이트 : 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능.
  이 원리를 이용하면 다양한 UI인터렉션을 구현할 수 있다.
  
  

스마트 애니메이트에서 가장 중요한 것
스마트 애니메이트가 제대로 작동하려면 반드시 작동하는 요소의 이름이 같아야 한다. 또한 프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 정상적으로 작동하지 않는다.

만약 제대로 움직이지 않는다면 반드시 이 2가지를 확인 :
1. 움직일 요소의 이름이 같은지
2. 레이어 구조가 동일한지

• 스마트 애니메이트로 조작할 수 있는 속성
  ·  크기(Scale) : 크기를 다르게 하면 커지게 하거나 작아지게 할 수 있다.
  ·  위치(Position) : 위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있다.
  ·  투명도(Opacity) : 레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있다.
  ·  회전(Rotation) : 요소를 자연스럽게 회전하게 만들 수 있다.
  ·  배경색(Fill) : 요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경할 수 있다.