프로토파이(Protopie)로 에러메세지 촉각효과 햅틱(haptic) 구현하기
저번 포스팅에서는 피그마에서 프로토타입으로 쓸 수 있는 효과인 Bouncy와 Custom Spring을 이용한 인터렉션을 개발자님께 전달해 구현해보는 시간을 가졌었어요 :)
👋🏻 이번에는 회원가입 같이 텍스트 필드가 쓰이는 화면에서 에러메세지를 띄울때 손에서 진동이 울리는 촉각효과 - 햅틱(haptic)을 같이 구현해볼거에요.
햅틱효과를 직접 경험해보기 위해 프로토파이(Protopie)✨라고 하는 툴을 사용할거에요!
프로토파이 툴이 처음이라면 아래 링크를 통해 다운받아 사용하실 수 있어요:
ProtoPie: Interactive Prototyping Tool (https://www.protopie.io/)
1. Formula로 "@"와 "."를 포함하지 않는경우 실행되는 조건 걸기
우선, 진동을 시각적으로도 느끼도록
흔들리는 애니메이션을 텍스트필드에 줄건데요, Protopie의 프로토타입 기능을 이용해 사용자가 '확인' 버튼을 눌렀을 때(Trigger를Tap으로 지정)Condition의Formula로 'textfield'에text가"@"를 포함하지 않을 경우와"."을 포함하지 않을 경우에 흔들림 효과가 적용되도록 조건을 주었어요.
2. 텍스트필드에 흔들리는 움직임 애니메이션 주기
조건을 걸었다면 이제 흔들리는 애니메이션을 구현하기 위해
Move를Response로 지정해 좌우로 움직이도록Position의X값을 조정하고Easing의 종류와Duration도 지정해주었어요. 미리보기를 통해 움직임이 자연스러운지 확인하며 진행하면 되요.
3. 진동효과 - 햅틱(Heptic) 주기
자연스러운 흔들림 애니메이션을 만들었다면 이제
Vibrate을 추가해서 진동효과를 줄 차례에요. 프로토파이(Protopie)에서는iOS와Android각 플랫폼의 다양한진동효과를 제공하고 있어요. 휴대폰으로 직접 진동을 느껴볼 수 있게Device의QR코드를 실행해 자연스러운 진동효과를 찾아보면 좋아요. 저는 iOS는Failure을, Android에는Default진동을 적용시켰어요:)
완성!!😊🙌 이제 개발자에게 전달할 차례인데요!
저희 팀은 프로로파이(Protopie) 무료버전을 사용하고 있기 때문에 개발자에게 정보 전달을 위해 일일이 들어간 기능을 캡쳐하고 프로토타입은 Protopie Cloud 공유 링크(아래 참조를 통해 볼 수 있게 전달하는 방식으로 진행했어요 ㅎㅎ;;
Protopie Cloud 공유 링크👉
(https://cloud.protopie.io/p/54dbec82f8aed511f5bcaa64?ui=true&scaleToFit=true&enableHotspotHints=true&cursorType=touch&mockup=true&bgColor=%23F5F5F5&bgImage=undefined&playSpeed=1&handoff=true)
어떻게 코드로 구현되었나요?😲 궁금하다면 아래 링크 클릭!
[UI/UX] 햅틱을 적용해 보기.
(https://velog.io/@r0_0r/UIUX-%ED%96%85%ED%8B%B1%EC%9D%84-%EC%A0%81%EC%9A%A9%ED%95%B4-%EB%B3%B4%EA%B8%B0)
[Flutter] 애니메이션 구현하기-②에러메세지 Haptic Feedback(햅틱)/좌우 이동(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-Haptic-Feedback%ED%96%85%ED%8B%B1%EC%A2%8C%EC%9A%B0-%EC%9D%B4%EB%8F%99)
