Daily UI #076 Loading

Daily UI Challenge

#076 Loading

 

이번 과제는 로딩 ui 만들기.

모션, 애니메이션에는 영 자신이 없어서 항상 이미지 위주의 작업을 해왔는데

이번 과제는 확인하자마자 '아, 더이상 피할 수 없구나..' 라는 생각을 했다.

 

대부분의 작업을 피그마로 하고 있기 때문에, 피그마 내에서 모션 작업을 할 수 있는지 그 방법부터 찾아보았다.

 

위의 플러그인을 사용하면 피그마에서 간단한 key frame 애니메이션 작업 및 gif 로 추출도 가능하다고 했다!

(2초 이내의 모션 및 1개의 프로젝트만 무료로 가능. 추가 작업은 결제를 해야한다고 한다.)

 

요런 식으로 한땀한땀.. 장인정신으로 작업했다.

 

이게 첫번째 작업물. 너무 투박하고 모션의 밀도, 퀄리티 자체가 마음에 들지 않아서 아예 지우고 다시 작업했다.

 

 

그렇게 다시 작업한 로딩 ui. 

약간 매직 아이 느낌으로 만들었다. 

 

각각의 원들에 투명도와 크기를 다르게 주고, 프레임마다 width, height 값이 105% 순차적으로 확대되도록 키프레임을 하나하나 넣어주었다. 사실 노가다가 심해서 그렇지 기능 자체가 어려운 모션은 아니었다.

 

텍스트 부분은 그냥 넣으면 재미없어서 투명도 정도만 변하도록 했다.

사소한 것에도 조금 손을 봐주면 전체적인 퀄리티 자체가 좀더 올라가는 느낌이다.

 

모션도 은근 재밌네.. 

프로토파이나 애프터이펙트도 공부해봐야지.