Home 디자인 UX/UI 종류에 따른 CSS 로딩 애니메이션을 살펴볼 수 있는 곳! : Whirl

종류에 따른 CSS 로딩 애니메이션을 살펴볼 수 있는 곳! : Whirl

3127

상황 별 로딩 애니메이션 활용은 사용자 경험에 중요한 역할을 합니다. 특정 버튼을 눌렀는데, 아무런 변화가 없다면 사용자 입장에선 문제가 있다고 느낄 수 있으며, 로딩 애니메이션은 이런 상황에서 ‘준비’중이라는 피드백으로 활용할 수 있기 때문입니다. 더 나아가 우리 서비스만의 ‘정체성’을 담아낼 수 있는 역할을 하며, 서비스에 대한 전반적인 완성도를 높여줄 수 있다고 생각합니다.

로딩 애니메이션과 텍스트를 함께 활용하기도 하고, 상대적으로 긴 준비가 필요한 경우 기능에 대한 안내를 제공하기도 하며, 낯선 기능은 경우 가이드가 포함되는 경우도 있는데요. 이처럼 로딩 애니메이션은 활용도가 높으며, 사용자에게 다양한 피드백과 안내를 제공할 수 있습니다.

오늘 소개할 서비스 역시 로딩 애니메이션과 깊게 연관되어 있는데요. ‘Whirl’은 종류 별 다양한 CSS 로딩 애니메이션을 웹상에서 확인, 활용할 수 있도록 도와주는 서비스입니다. 처음 이곳을 방문했을 때, 로딩 애니메이션의 ‘종류’에 놀랐어요. 그만큼 다양한 종류를 제공하고 있기 때문입니다. 위 이미지는 제공하는 종류의 일부로 실제로는 더 다양한 내용을 확인할 수 있습니다. 각 애니메이션은 깃헙으로 이동해 코드를 살펴볼 수 있어요.

구성은 매우 간단합니다. 원하는 종류를 선택하면 해당 애니메이션을 바로 볼 수 있어요. 또 ‘Lucky Dip!’ 버튼을 클릭해 랜덤으로 제공되는 로딩애니메이션도 확인할 수 있습니다. 텍스트 링크로 적용된 ‘Grab the CSS on Github’를 클릭하면 해당 로딩 애니메이션에 대한 정보를 깃헙 내 자세히 들여다볼 수 있습니다.

위 이미지는 ‘워터폴’에 해당하는 로딩 애니메이션을 확인, 깃헙에서 상세 내용을 살펴본 모습입니다. 원하는 종류의 로딩 애니메이션을 살펴보고, CSS 구성까지 살펴볼 수 있어 더 유용하게 느껴지는 공간입니다.

‘Whirl’에는 총 108개의 로딩 애니메이션이 등록되어 있습니다. 하나씩 다 살펴본 건 아니지만, 이 정도 숫자를 한곳에서 볼 수 있다는 점도 이곳에서만 느낄 수 있는 매력이 아닐까 싶습니다.

각 로딩 애니메이션을 뜻하는 내용이 텍스트에 잘 담겨 있어 선택 과정도 어렵지 않습니다. 당장 적용이 필요한 내용을 먼저 찾아 확인하는 과정을 활용할 수 있습니다.

웹상에서 활용할 로딩 애니메이션의 종류와 구성 내용을 살펴봐야 하는 상황이라면 특히 유용한 곳이라고 생각합니다. 아래 내용과 함께 살펴보시면 로딩 애니메이션과 관련해 더 많은 도움을 받으실 수 있습니다. ‘Whirl’에 대한 더 자세한 내용은 링크를 참고해주세요!

http://13.125.82.244/loading-io/