다양하게 활용되는 애니메이션

웹에서도, 앱에서도 애니메이션의 활용도는 점점 높아지고 있습니다. 정적인 화면을 동적으로 만들어주는 것을 넘어, 유저가 어떤 행동을 했는지에 대한 명확한 피드백을 줄 수 있기 때문이죠. 이와 관련하여 ‘지금 써보러 갑니다’에서도 애니메이션과 관련된 다양한 내용을 공유드린 적 있는데요! 오늘은 애니메이션과 관련된 매력적인 서비스를 알게 되어 추가 내용을 전달드릴까 합니다.

 

애니메이션을 직접 짜고, 다운로드 받을 수 있다면!

오늘 소개드릴 서비스는 ‘Animista’입니다. 다양한 효과가 미리 적용되어 있어, 원하는 효과를 선택한 후 상세 옵션을 선택하면 나만의 애니메이션을 만들 수 있도록 도와주는 서비스죠. 별도의 프로그램 없이 웹 상에서 바로 사용 가능한 서비스이기도 합니다.(모바일에서는 사용 불가)

 

‘Animista’에서 우리가 사용 가능한 메뉴는 위의 이미지와 같습니다. 먼저 ‘Basic, Entrances, Exits, Text, Attention, Background’ 등 여섯가지로 구성된 애니메이션 성격을 선택할 수 있습니다. 그 중 하나를 선택하면 ‘Scale-up, Scale-down, Rotate, Flip, Swing’등 어떤 효과를 활용할 것인지를 정할 수 있죠. 이후, 오브젝트와 지속시간 등의 세부옵션을 선택해주면 화면에서 바로 어떻게 적용되었는지 애니메이션의 모습을 확인해볼 수 있습니다.

 

*모든 과정을 녹화할 수 없어, ‘Animista’에서 제공하는 기본적인 효과만을 녹화해 Gif로 저장한 모습(활용한 프로그램 : Bukket)

 

마음에 드는 애니메이션이 완성되었다면, 스크립트를 바로 다운로드 받아서 적용해볼 수도 있으며(첫 번째 이미지), 즐겨찾기에 추가해놓고 언제든 다시 확인할 수 있습니다(두 번째 이미지). 크롬에서 사용하는 경우 CSS로 다운로드 받을 수 있고, 원하는 곳에 복사해 붙여 넣기를 할 수도 있습니다.

 

‘Animista’의 진짜 매력

지난주에 ‘Animista’를 발견하고는 며칠동안 열심히 서비스를 활용해봤습니다. 개인적으로 운영하고 있는 설치형 블로그나 웹페이지에도 적용해볼만한 애니메이션이 있는지 확인해보고 싶기도 했고, 쉽게 애니메이션을 만들 수 있기에 게임을 하듯 서비스에 녹아들 수 있었기 때문이었죠. 며칠간 써본 ‘Animista’의 가장 큰 매력은 쉽다는 점이었습니다. 물론 아주 세세하고 매끄러운 애니메이션으로 활용하는(예를 들면 앱 토글과 같은) 것은 힘들지만, 실제 서비스에 ‘Animista‘에서 구성한 애니메이션을 일부 적용하는데에는 어려움이 없었습니다. 우리가 프로토타이핑 툴을 활용해 커뮤니케이션을 하는 것처럼, 애니메이션 적용을 위한 하나의 툴로 활용하는 것도 가능할 것 같고요. 디폴트로 적용되어 있는 다양한 카테고리와 효과들이 워낙에 잘 구성되어 있어 가능한 일이 아닐까 싶습니다. 

 

함께 보면 좋은 내용