–
로딩애니메이션은 사용자에게 적합한 피드백을 제공하거나 동적인 경험을 제공하는데 중요한 역할을 하게 됩니다. ‘서비스 뜯어보기’를 통해, 서비스가 로딩애니메이션을 활용하는 방법에 대해 한 번씩 작성한 적 있으며, 관련 콘텐츠를 제공하는 툴 역시 소개한 적 있는데요. 오늘은 또 하나의 로딩애니메이션 제공 툴을 알게 되어 소개하고자 합니다.
- 카모아/트립닷컴 – 로딩 애니메니션 활용 방법
- 네이버가 인증 요청 시 로딩 시간을 활용하는 방법
- 기다림의 시간을 긍정적인 경험으로! (트리플)
- 모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까?
–
오늘 소개할 서비스는 총 24개의 로딩애니메이션을 제공합니다. 처음엔 제공 수가 적은 건 아닐까 싶었는데, 살펴보니 우리가 상황에 따라 자주 사용하는 것으로 구성되어 있어 기본적으로 활용하기 좋겠다는 생각이 들었습니다.
먼저 제공되는 로딩애니메이션을 리스트 형태로 살펴볼 수 있어요. 리스트는 1열, 2열, 3열 등으로 구분해 볼 수 있어 (기본은 3열) 원하는 방식에 따라 둘러보기 좋습니다.
리스트에서 특정 로딩애니메이션을 클릭하면, 코드와 함께 상세 내용을 살펴볼 수 있습니다. 상세화면 오른쪽 하단 화살표를 통해 하나씩 넘겨볼 수 있는 기능을 제공하고 있어요. 다시 리스트로 돌아가지 않아도 자세한 내용을 이어볼 수 있습니다. 소스는 React, HTML, CSS 세 가지로 제공되며 클릭 한 번으로 손쉽게 복사할 수 있어요.
꼭 필요한 로딩애니메이션을 확인하고, 소스까지 알 수 있어 기본 내용을 바로 적용하기 좋은 곳입니다. 더 자세한 내용은 ‘링크’를 참고, 아래 내용을 함께 활용하시면 더 많은 도움을 받으실 수 있을거라 생각합니다!
- 종류에 따른 CSS 로딩 애니메이션을 살펴볼 수 있는 곳! : Whirl
- CSS, GIF, SVG, PNG까지! 로딩 애니메이션을 원하는 디자인, 컬러에 따라 커스터마이징 할 수 있다면?
–
제 첫 도서가 출간되었어요. 제목은 ’10년 차 IT 기획자의 노트’입니다. 뉴스레터와 이 블로그를 시작하게 된 이유는 사수 없이 일하는 어려움을 저보다 조금 늦게 출발한 분들이 덜 느꼈으면 하는 마음 때문이었는데요. 같은 맥락에서, 9개 노트(기록)를 바탕으로 기획과 PM의 주요 업무를 어떻게 하면 좋을지 정리한 내용입니다. 아래 링크를 통해 자세한 내용을 확인하실 수 있어요!
–
