IOS와 안드로이드를 포함한 모바일앱은 물론 웹에서도 사용 가능한 애니메이션 라이브러리 ‘LOTTIE FILES’

 

 

다양한 UI 디자인 사례는 물론, 코드까지 확인할 수 있는 ‘BUILDING-BLOCKS’

 

 

위의 두 서비스는 모두 웹과 앱에서 사용 가능한 다양한 ‘Interaction’ 및 ‘UI Components’를 쉽게 활용할 수 있도록 도와줍니다. 특히 ‘LOTTIE FILES’의 경우 에어비앤비에서 운영하는 것으로 잘 알려진 곳이기도 하죠. 기존에는 ‘노가다(?)’를 통해 인터랙션들이 탄생했다면, 이제는 여러가지 서비스와 툴을 활용해 전보다 더 간단하게 적용할 수 있는 환경이 갖춰진 것입니다. 오늘은 앞서 소개한 서비스들과 더불어 서비스에 꼭 필요한 마이크로 인터랙션을 금방 구현할 수 있도록 도와주는 라이브러리 하나를 전해드리고자 합니다.

 

 

마이크로 인터랙션(Micro Interactions)?

댄 새퍼의 ‘마이크로 인터랙션(디테일에 강한 디자인)’에 따르면 제품 또는 서비스에서 한 가지 사용 사례에 해당하는 짧은 순간, 혹은 한 가지만 수행하는 작은 기능을 뜻합니다. 예를 들어 페이스북에서 콘텐츠를 보고 여러 감정 중 하나를 선택해 반응하거나, 스마트폰 잠금화면에서 바로 카메라를 실행하는 것이 해당됩니다. 좋은 마이크로 인터랙션은 매력적이고 독창적으로 유저에게 다가가 사용자 경험을 끌어 올릴 수 있지만, 반대로 지루하거나 끔찍하게 느껴지는 경우 서비스 전체에 영향을 끼칠 수 있습니다. 이런 마이크로 인터랙션은 아래와 같은 상황에 먼저 적용할 수 있고요.

 

  • 하나의 작업을 수행할 때
  • 기기들을 서로 연결할 때
  • 단순한 정보를 주고 받을 때
  • 진행 중인 기능을 조정할 때
  • 설정을 바꿀 때
  • 간단한 내용을 작성하거나 확인할 때
  • 어떤 기능을 켜거나 끌 때

 

이처럼 제품과 서비스에서 중요한 역할을 하는 ‘마이크로 인터랙션’은 다양한 방법으로 표현될 수 있는데요! 그 중에서도 오늘 소개드릴 ‘Micron.js’는 다채로운 ‘효과’를 통해 ‘마이크로 인터랙션’을 적용할 수 있도록 도와줍니다.

 

 

 

 ‘Micron.js‘는 ‘라이브러리‘의 성격을 띄고 있습니다. 자바스크립트로 구현된 CSS 애니메이션들로 구성되어 있죠. 우리가 이곳을 통해 확인 할 수 있는 애니메이션 종류는 총 12가지입니다. 먼저 애니메이션들을 하나씩 살펴보겠습니다.

 

 

 

 

 

 

 

 

서비스를 이용하며, 한 번쯤은 마주쳤을 내용들로 구성이 되어 있다는 점을 확인할 수 있는데요! 12가지가 많은 숫자는 아니지만, 기본적으로 어디든 활용 가능한 인터랙션들을 넣어두었다는 생각이 들었습니다. 

 

 

 

이렇듯 기본적이지만 꼭 필요한 라이브러리를 제공해주는 ‘Micron.js’가 매력적인 이유는 네 가지로 압축할 수 있는데요! 

  1. 정말 쉽게, 우리 서비스에 적용 가능
  2. CSS 파일을 통해 소유하고 있는 인터랙션을 추가할 수 있음
  3. 개별 인터랙션 효과(속도와 같은)를 직접 조절
  4. ‘MIT License’로 제공되기 때문에 상업적으로, 무료로 활용할 수 있음

 

1번의 경우, 원하는 마이크로 인터랙션들을 기획자와 디자이너는 문서와 샘플(프로토타이핑 툴 등을 활용하여)로 만들어 개발자에게 전달하고 이 과정에서 여러가지 이유로 시간이 지연되는 경우가 많기에 더욱 반갑게 느껴지는 매력이었습니다. 4번도 정말 반가운 내용이었고요.

 

 

 

홈페이지에서 기본적인 내용 확인이 가능하지만, 깃허브(Github)를 통해 더 자세한 정보를 확인할 수 있으니 서비스와 제품에 필요한 인터랙션이 필요한 분들이라면 많은 도움이 될 수 있을거라 생각됩니다 🙂