단단한 일상을 위하여

영감기록(靈感記錄)/일상의 디자인

LottieFiles | 지엄한 애니메이션의 역할

ahgnodmik_ akdh 2020. 5. 27. 22:47
728x90

최근 디자인 트렌드는 매우 급격하게 변해가는듯 보인다. 많은 트렌드가 흐르듯 지나가고 복고풍이 자리잡고 뉴노멀이 생기고, 이미지에서 영상이 만들어 졌다 다시 이미지의 특별함이 살아나고 있는 빠르고 느림이 동시에 존재하는 시대라고 있다. 현업 전선에서 가장 빠르게 달려가진 않지만 2-3 티어에 머물러 선두를 바라보는 입장에서는 정말 피가 마를정도로 빠른 속도라고 해도 과언이 아닐듯 싶다.

LottieFiles.com 에서 변환된 Json to GIF

인하우스 디자이너의 경우, 없이 반복되는 디자인 업무에 지쳐 아스러져버릴듯싶도 한데 이에 비전을 가지고 자신 꿈과 목표를 위해 버티는 모습을 보면 도무지 존경스럽지 아니할 수가 없다. 그도 그럴것이 디자인트렌드는 정말 변화무쌍하고 실시간으로 트렌드가 업데이트 된다. 이를 따라가려면 당연히 리써치를 주기적으로(거의 매주)해야하는 것과 그에 맞춰 업무도 진행해야하며 크리틱과 컨펌도 받아야한다.

슬프다. 하지만 멋지다.

LottieFiles.com 에서 변환된 Json to GIF

아무튼

최근 Lottie 알게되었다. 쉽게말하면 화면상에 '자동재생되며 반복되는 '이다. 일반적인 GIF AVI 포맷이 아니라 목적과 표현방법에 적합하게 만들어진 '모션그래픽' 일종이다. 특히 UX/UI에서 발전하게 되었는데, Airbnb에서 bodymovin Plug-in으로 json 파일 작성이 가능해졌다. 개발자에게 특별한 코드를 섬세하게 표현하도록 굽신굽신 거리지 않더라도, Aftereffect 이용해 간단한 몇개의 키를 이용해 부드러운 움직임을 만들어낼 있게 것이다. 정말 아름답다.

LottieFiles.com 에서 변환된 Json to GIF

애니메이션은 생동감있게 만들어내며, 어플리케이션의 품질을 한층 끌어올린다. 조금 섬세하고 신경쓰기만 하면 어플이 살아움직이며 사용자의 집중도를 끌어낸다. Json 파일로 만드는 예술인 셈이다. Bodymovin 에서 직접 Lottie 플러그인으로 개선된 지금의 서비스에서는 가볍고 훌륭한 이미징이 가능하다.

LottieFiles.com 에서 변환된 Json to GIF

만약 GIF 형식으로 제작 되었다면 이리 가볍게 만들 수는 없엇을 같다. 해상도 지원도 안될 뿐더러 조금만 확대되어도 픽셀이 깨지고 수없이 많은 사이즈들을 만들어 냈어야 했을 테니까.. 상상만 해도 끔찍하다.

 

Lottie 장점을 알아보자.

  1. 가볍다.
  2. 디자이너가 간단하게 에펙으로 이용해서 제작이 가능하다.
  3. Json 코드로 바로 넘어오기 때문에 개발자의 손을 거치지 않고도 훌륭한 가성비를 낸다.
  4. 효과가 입증되면 한층 심오한 그래픽이 가능하다.
  5. 무료(Opensource)이다.

 

그럼 당연히 단점도 있겠지?

  1. 까다롭다. 부드러운 모션을 만들어 내려면 시간이 걸린다. 망칠수도 있다는 인내심이 필요
  2. 기본적인 형상 변경은 가능하지만 Effect 효과(특히 마스킹) 되고 안되고의 경계선이 묘하다.
  3. 복잡한 일러스트를 단순하게 만들고 직접 제작해야한다.

LottieFiles.com 에서 변환된 Json to GIF

/단점이 어찌 되었건, 분명 어플리케이션의 장점을 부각시켜준다는 점은 변하지 않는다.

활용만하면 영상을 진행하는 만큼의 역할을 톡톡히 해낼 것이라 믿어 의심치 않는다. 그리고 애니메이션 트렌드는 쉽게 가라앉지 않을것이다.

더 자세한건 여기서 살펴보십니다 : https://lottiefiles.com/

 

Featured animations from our community

Featured collection of Free Lottie Animations created with Bodymovin.

lottiefiles.com