스피너는 UI의 요소인데, 사용자가 어떤 액션을 취하고나서 결과가 화면상에 반영되기까지, 원격으로의 요청이나 컴퓨터가 무언가를 처리하고 있다고 알려주는 기능을 한다. 그냥 쉽게 말해서 로딩걸려있을 때 사용자 행동을 막고 뺑글뺑글 도는 그런거다.
이게 과연 사용자 경험에 도움이 되느냐는 여기에서 논외로 한다. 왜냐하면 사실 이런거 안 나오고 바로 결과가 나오도록 설계하는게 더 좋기 때문이다(물리적인 네트워크 레이턴시를 극복할 수는 없으므로 로딩 시간을 줄이기 위해서는 보통 꼼수를 쓴다. 실제 데이터를 미리 불러놓거나 혹은 더미 데이터를 표시하여 마치 미리 불러진 것 처럼 보이는 것들이다. 이는 나중에 따로 논하자). 어쨌거나 결과가 나오기까지 시간이 걸린다면 아무 표시가 없는것보다는 있는게 낫다. 화장실에 휴대폰 안 들고 갔을 때 읽는 샴푸 성분같은 존재다.
어쨌든 이런것을 구현하는 유용한 방법으로는 Animated Gif를 그냥 통으로 삽입해주거나 CSS3 스펙의 animation 기능을 이용하여 아이콘이나 요소를 계속 돌리는 방법이 있다. 나도 맨날 이런것들 주워다가 썼는데, 어느날 문득 타일 서비스에는 잘 만들어진 타일 로고를 돌려보는건 어떨까 생각이 들었다.
그래서 만들었다.
소스를 공개하는 것도 좋지만, 이런 것은 대부분 노가다 코드이고, 아예 나오는 모습을 예측해보는 것이 더 중요할 것 같아서 툴 페이지로 만들었다.
자사의 서비스 로고를 투명 PNG로 작업하여, 여기에 업로드하면 멋있게 3D로 회전하는 자신만의 로더(스피너)를 만들 수 있다.사용자는 어차피 로더가 어떻게 생겼건 좋아하지 않으니 관여치 말자
나만의 3D 로더 만들기 : https://tyle.io/labs/loader
