모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까? 를 통해 국,내외 주요 서비스들이 데이터를 로딩 하는 순간 사용자들을 붙잡아 두는 방법에 대해 소개했었는데요!
간략히 다시 정리하면 로딩 화면, 로딩 이미지, 로딩 프로그레스 등의 장치는 사용자가 지금 어떤 ‘상황’에 처해 있는지를 알려줄 수 있고, 사용자가 데이터를 보기까지 얼마나 기다려야 하는지 시각적으로 알려주는 역할을 하게 됩니다. 사용자의 이탈을 막는 역할까지 해내기에, 더없이 중요한 녀석이기도 하죠.
–
그럼, 이런 로딩 시 활용 가능한 리소스는 어떻게 만들고 활용할 수 있을까요? 그에 대한 답을 찾고자 열심히 구글링을 하다 우연히 발견한 서비스가 있습니다. 제목에서 이미 한 줄 소개를 마친, 로딩 이미지를 원하는 컬러에 따라 무료로 커스터마이징 할 수 있는 ‘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!”]
