💎 앱개발 사용성 개선 프로젝트
1. 마이크로 인터렉션 개발자와 연습하기
어플 사용성 개선을 위해 사용성을 높여주는 micro-interaction을 추가해보려고 해요.
우선 디자이너인 저와 개발자님들의 첫 마이크로 인터렉션 구현에 앞서 어떻게 구현할 수 있을지 연습해보기로 했어요. 현재 구현되어있는 어플에서는 페이지가 넘어가는 슬라이드에 bezier 값(곡선그래프)을 주어 속도 조절을 조금 더 세밀하게 조정한 정도에요.
이번 연습에서는 피그마의 'Custom Spring' 과 'Bouncy'를 이용한 인터렉션을 적용하기 위해
간단한 UI element가 점진적인 속도로 크기가 커졌다가 확 줄어들며 바운스 효과를 주는 애니메이션을 구현해볼게요.
👉 마이크로 인터렉션 개발자와 연습하기 - 예제1
아래 영상 참고
- '
Custom Spring'을 이용해 UI 요소를 '점진적인 속도'로 크기 키우기
피그마(Figma)에서 'Smart animate' - 'Custom spring'을 이용해 직접 그래프 값을 조정해 속도를 조절할 수 있어요.
이번 예제에서는 첫번째 화면을 클릭했을때 UI element가 점진적으로 속도가 붙어 커지는 효과를 주기 위해 Custom Spring 값의 Duration을 380ms, Stiffness를 250, Damping을 31.6, Mass에 1값을 주어 진행했어요.
- '
Bounce'를 이용해 UI 요소의 크기를 '급격한 속도'로 줄이며 '바운스 효과' 주기
피그마(Figma)에서 'Smart animate' - 'Bouncy'를 이용해 바운스 효과를 줄 수 있어요.
1.에서 크기를 키운 UI element가 즉시 크기가 줄어들며 자연스러운 바운스 효과를 실행할 수 있도록 Trigger는 1.에서의 On Click과 달리 After delay를 지정하고
크기가 커진 즉시 실행되도록 최소 단위인 1ms를 지정했어요.
Bouncy의 Duration은 600ms를 주었습니다.
이제 디자이너가 전달해줄 프로토타입 애니메이션은 완성되었어요😀!
개발자님께 전달해서 실제로 이 프로토타입과 같은 자연스러운 인터렉션이 구현되는지 확인해볼까요?
아래 링크를 통해 개발자님이 코드로 직접 구현한 과정을 볼 수 있어요(●'◡'●)
Flutter 애니메이션 따라하기 01:
(https://velog.io/@r0_0r/Flutter-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-01)
[Flutter] 애니메이션 구현하기-①바운스:
(https://velog.io/@gyeore/Flutter-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-%EB%B0%94%EC%9A%B4%EC%8A%A4)
