프로토타이핑 툴에서의 애니메이션
애니메이션까지 직접 짜볼 수 있는 프로토타이핑툴이 우리 주변에 많이 등장했지만, 이런 툴들은 보통 일정 수준 이상의 ‘허들’을 갖고 있습니다. 프로토타입을 설계 하는데 있어 동적인 요소는 커뮤니케이션에 많은 도움이 되기에 앞선 툴들을 학습하거나 또 다른 방법을 고민하게 되는 것이 사실이죠. 저도 수없이 많은 프로토타이핑 툴을 활용하다 최근에는 어도비의 XD에 정착(?)해가고 있는데 요! 화면내, 화면에서 화면으로의 이동은 기본적인 기능이기에 어려움 없이 효율적으로 잘 활용하고 있지만 특정 애니메이션을 집어 넣기에는 아직 쉽지 않은 것이 사실입니다. 그래서 오늘은 간단하지만 앱 내에서 꼭 필요한, 마이크로 애니메이션들을 한 곳에서 확인하고 구매, 다운로드 할 수 있는 서비스를 소개드릴까 합니다.
디자이너가 만든 애니메이션 공유 서비스
오늘 소개드릴 서비스는 ‘Microanimations’입니다. 디자이너와 기획자 등등 앱을 기획하고 디자인하는 등의 업무를 진행하는 사람들에게 주어지는 시간은 그리 많지 않습니다. 한 가지 업무만을 진행하는 것도 아니고, 빠르게 테스트를 해봐야 하는 상황이 많기 때문이죠. 때문에 업무를 효율적으로 할 수 있도록(여기서의 효율이란 시간을 단축시켜 줄 수 있는) 도와주는 자신만의 툴을 잘 활용하거는 경우가 많습니다. ‘Microanimations’ 역시 비슷한 맥락에서 만들어진 서비스로, 마이크로 애니메이션들을 확인하고, 구매하고, 다운로드 하여 프로토타이핑 툴을 통해 바로 구현해볼 수 있도록 도와줍니다.
‘Microanimations’에는 다양한 종류의 애니메이션이 등록되어 있는데요! 햄버거 메뉴와 같이 자주 쓰이는 애니메이션은 물론 스크롤, 로딩, 기타 메뉴 등과 관련된 다양한 애니메이션을 확인할 수 있도록 구성되어 있습니다.
무료, 인기, 최신순 / 모바일, CTA, 노티 등의 태그 / 컬러를 통해 원하는 내용을 확인할 수 있죠.
마음에 드는 애니메이션이 있다면, 마우스를 올려보세요. 어떤식으로 동작되는지 상세페이지로 이동하지 않고도 바로 확인할 수 있습니다.
상세페이지에서는 리스트에서 보다 더 크게, 제공되는 컬러에 따라 애니메이션의 모습을 살펴볼 수 있으며 구매가 가능합니다. 하단으로는 연관 애니메이션을 함께 보여주고 있고요. 애니메이션을 구매했다면 ‘Gif’로 다운로드가 가능하며 압축을 풀어 프로젝트에 바로 활용할 수 있습니다. InVision, Marvel, Proto.io 등의 프로토타이핑 툴에서 대부분 Gif를 지원하기 때문이죠.
대부분 유료로 제공되고 있지만 기본적인 애니메이션의 경우 정보 입력 후, 무료로 다운로드 받을 수 있는 것도 있으니 확인해보세요 🙂 유료라 하더라도 가격은 3.00$로 비싸지 않으니 더더욱 매력적인 서비스라고 생각합니다! 마이크로 애니메이션이 필요하시다면 ‘Microanimation‘으로!
