과거 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 데모 페이지

연초에 있었던 기상청의 개편으로 한 동안 멈춰버린 날씨 예보만 보여주던 바깥 날씨 위젯이, 이번 판올림으로 드디어 온전한 동네 예보를 지원하게 되었다. 8)
이번에는 동네 예보를 지원하기 위해 많은 부분을 뜯어고치면서 전국의 날씨 관련 지역 데이타를 모으는데만 지루하고 많은 시간이 소요되었지만 – 읍/면/동 동네 이름의 영어 주소 변환 작업은 결국 중간에 포기 😐 – 덩달아 전국 3,500 여개의 자세한 동네 날씨를 표시할 수 있게 된 것은 그나마 다행으로 생각한다.

위젯의 특성상 작은 공간 안에 다양한 날씨 정보를 효과적으로 표시해 줄 수 있는 방법을 찾다가 WebKit이 지원하는 CSS Animation 기능을 적용해서 JavaScript의 도움 없이도 멋진 애니메이션 효과도 구현할 수 있었다. 또한 공개된 글꼴들 중 Eraser Dust라는 놈을 CSS3의 Web Fonts 기능을 이용해 위젯에 심어놓으면서 칠판 배경에 잘 어울리는 날씨 정보를 표시할 수 있었고, 뿐만 아니라 곳곳에 사용된 CSS3에 정의되어 있는 border property들은 한층 만족스러운 디자인을 이끌어내는 데 많은 도움이 되었다.

아마도, 브라우저의 호환성 걱정 없이 새로운 웹 기술들을 마음껏 실험해 볼 수 있다는 것이 위젯 개발만이 주는 재미와 장점이 아닐까 생각된다.