과거 Ajax를 필두로 웹 기술이 진화하면서 많은 웹 애플리케이션이 개발돼서 공개되고 있는데, 이런 곳엔 소위 ‘Loading spinner (Activity indicator)’를 쓸 일도 많아졌다. 이는 요청한 작업이 정상적으로 처리 중임을 알려주는 것으로 사용자 경험 측면에서 아주 중요한 요소 중의 하나이다.
이런 효과를 나타내려고 과거엔 animated gif 이미지를 주로 썼지만, 브라우저의 CSS3 Animation과 Transforms 지원 상황이 호전되면서 지금은 더 효과적인 대체수단으로서 선택적으로 CSS가 사용되고 있다. 이런 추세에 맞춰 CSS spinners를 만들어주는 도구도 생겨났는데 대표적으로 CSS load.net이 있다.
CSS에서 제공하고 있는 다양한 효과와 함께 개발자의 상상력만 더하면 아주 멋진 효과를 구현할 수가 있는데, 아래는 CSS3 Animation, Transforms와 함께 중첩된 text-shadow 효과를 써서 구현해 본 예 (animated GIF 이미지).
현재 최신 버전의 Firefox, Chrome 그리고 Safari만이 CSS3 Animation과 Transforms 모두를 지원하기 때문에, 그 외 브라우저에선 아직 대체 이미지의 사용이 불가피하다. (차기 버전인 IE 10과 Opera 12에선 모두 지원 예정.)
“CSS3를 써서 구현한 Loading Spinner”에 달린 3개의 댓글
멋진데요. ㅎㅎ
재미있네요. 🙂
흥미로써는 좋은데 실제 사용성은 어떨지 모르겠네요. 이미지 보단 쉽게 조작 할 수 있다는 장점은 있는데.. 초기 제작은 이미지보다 어려울 것 같아요.. 브라우저별 지원도 그렇고..
아.. Web 관련 게시물을 전부다 읽었어봤어요. 아주 많은 도움이 되었어요. 감사합니다. 🙂
브라우저 지원 상황이 최대 걸림돌이지만, 말씀하신 것처럼 작은 용량을 차지하면서도 나중에 조작과 수정이 간단하다는 장점이 있죠. 최근 많은 휴대용 기기가 고해상도 display를 달고 나오면서 이런 곳에 사용된다면 여러 해상도의 이미지를 준비할 필요 없이 항상 또렷한 효과를 보여줄 수 있으니까 더 큰 이점으로 다가올 것 같습니다.
부족한 글 보시면서 크게 흉보지 않으셨으면 좋겠네요. 😛