프로토타입에 생동감을 더하려면 Hover(호버) 효과나 클릭 효과를 추가하는 것이 좋습니다. 이번 글에서는 이 과정을 쉽게 정리합니다.
1. Hover 효과 설정하기
- 프로토타입 모드에서 오브젝트를 선택합니다.
- 파란색 원을 드래그하여 연결할 프레임을 지정합니다.
- Interaction Details 창에서 Trigger를 "While hovering"으로 설정합니다.
2. 클릭 효과 설정하기
- Trigger를 "On click"으로 설정합니다.
- Action은 "Navigate to"를 선택하여 원하는 화면으로 이동시킵니다.
- 애니메이션 타입(예: Smart Animate)도 지정할 수 있습니다.
3. 다양한 인터랙션 추가
- Swap with: 프레임을 교체
- Open Overlay: 팝업처럼 새로운 창 띄우기
- Close Overlay: 오버레이 창 닫기
4. 마이크로 인터랙션 활용 팁
작은 애니메이션도 사용자의 몰입감을 높일 수 있습니다. 너무 과한 효과보다는 자연스러운 전환을 추천합니다.
결론
Hover와 Click 효과를 추가하면 프로토타입이 훨씬 살아있는 느낌을 줍니다. 다음 글에서는 프레젠테이션용 프로토타입 최적화 방법을 소개하겠습니다.