모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까? 를 통해 국,내외 주요 서비스들이 데이터를 로딩 하는 순간 사용자들을 붙잡아 두는 방법에 대해 소개했었는데요!

간략히 다시 정리하면 로딩 화면, 로딩 이미지, 로딩 프로그레스 등의 장치는 사용자가 지금 어떤 ‘상황’에 처해 있는지를 알려줄 수 있고, 사용자가 데이터를 보기까지 얼마나 기다려야 하는지 시각적으로 알려주는 역할을 하게 됩니다. 사용자의 이탈을 막는 역할까지 해내기에, 더없이 중요한 녀석이기도 하죠.

그럼, 이런 로딩 시 활용 가능한 리소스는 어떻게 만들고 활용할 수 있을까요? 그에 대한 답을 찾고자 열심히 구글링을 하다 우연히 발견한 서비스가 있습니다. 제목에서 이미 한 줄 소개를 마친, 로딩 이미지를 원하는 컬러에 따라 무료로 커스터마이징 할 수 있는 ‘Loading.io’입니다.

 

이렇게 많은 리소스가 있다니!

로딩 시 활용 가능한 사례들이 이렇게 많이 모여있는 곳은 보지 못했기에 더 정신없이 둘러본 서비스인데요! 기본적으로 GIF, SVG, PNG 포맷으로 제공 되고 있으며 아주 복잡한 내용이 아닌 이상 CSS까지 지원 되고 있습니다. 무료와 유료로 나뉘어 제공되고 있고요.

 

리스트를 통해 지원하는 포맷과 라이선스, 무료와 유료 여부를 확인 할 수 있습니다. 탐나는 리소스가 정말 많네요.

 

리스트를 통해 마음에 드는 리소스를 발견했다면! 상세 페이지로 이동해 컬러, 속도, 크기, 배경컬러, 다운로드 포맷 등을 입맛대로 설정할 수 있습니다. 설정값 아래로는 샘플 들을 확인할 수 있죠. 비슷한 로딩 이미지들을 함께 볼 수도 있습니다.

 

회원가입 없이 자유롭게 둘러보는 것은 가능하지만, 포맷에 따라 다운로드나 스크립트를 복사하려면 가입을 해야합니다. 구글 계정으로 로그인이 가능해 복잡한 과정은 없네요!

 

포맷에 따라 어떻게 적용할 수 있는지를 상세히 설명해주기에 원하는 내용이 있다면 쉽게 적용해볼 수 있습니다. 실제 적용 가능한 수준의 퀄리티가 눈에 띈다는 점도 매력적이지만, 우리 서비스에선 어떻게 적용할 수 있을지에 대한 여러 힌트를 얻을 수 있다는 점이 좋은 곳!

자세한 내용은 이 곳을 참고해주세요!

 

한성규님의  ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한번 더 소개합니다.

 

 

[fbcomments url=”http://ec2-13-125-22-250.ap-northeast-2.compute.amazonaws.com/2019/04/18/servicereview-css-gif-svg-png/” width=”100%” count=”off” num=”5″ countmsg=”wonderful comments!”]