과거 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 데모 페이지
얼마 전 무료로 공개된 Tuts+ Premium 코스인 30 Days to Learn jQuery 영상에서 따온 요령으로, Python의 내장된 간단한 웹 서버를 현 작업 디렉터리에서 실행시키는 명령인데 다음과 같이 쓰일 수 있다.
터미얼을 열고,
cd /some/test/directory
open http://localhost:8000 && python -m SimpleHTTPServer
편한 것이 굳이 일반 웹 서버를 실행시킬 필요 없이, 예를 들어 ajax call 실험용으로 간단한 테스트만 할 때 손쉽게 사용할 수 있다. PHP와 Python 그리고 Ruby의 한 줄 내장 웹 서버 실행(이)란 제목의 글 마저 읽기 →
최근 공식 배포된 iOS 5.1에서와 마찬가지로 차기 OS X 10.8 Mountain Lion의 기본 한국어 시스템 서체로 ‘애플 산돌 고딕 네오(AppleSDGothicNeo)’가 추가되었다는 소식은 이미 널리 알려진 사실이다. 그동안 애증의 대상이었던 AppleGothic 글꼴의 새로운 대안으로 떠오르면서 많은 사람이 반가움을 표시하고 있는 상황.
그런데 새로 추가된 글꼴도 비스듬히 누운 이탤릭 스타일을 제대로 표시해주지 못한다는 얘기는 또 아쉬울 수밖에 없다. 비록 이탤릭 스타일로 표시된 한글이 영문 글꼴의 멋스러운 형태를 보일 순 없더라도, 가령 <em> 태그 속에 표시된 한글이 그저 시스템이 일률적으로 눕혀놓아서 밋밋하게 표현된다면 이 또한 차별의 느낌을 지울 수가 없는 것이다.
그렇다면 웹에서라도 예전 한글 고문서에서나 볼 수 있었던 성조를 나타내는 기호인 방점을 흉내 내서 강조점의 형태로 표시해주면 어떨까 하는 생각이 들었다. (물론 강조점으로 굳이 방점을 빌려 와 쓸 필요는 없고 적당한 기호를 선택해서 쓰면 된다.)
오로지 CSS만 써서 표현해 보려 했으나, 아쉽게도 CSS에서 쓸 수 있는 Pseudo Elements 중에 ::every-letter와 같은 것은 존재하지 않기 때문에 JavaScript의 힘을 빌려 jQuery plugin인 Lettering.js를 사용했다. CSS를 써서 옛 한글의 강조점 찍어주기(이)란 제목의 글 마저 읽기 →
PHP 5.4.0이 배포되었다는 소식. 과거 호환성 면에서 큰 차이는 없으나, 자세한 사항은 Backward Incompatible Changes 문서에서 확인할 수 있다. 새로운 기능 말고도 성능 향상과 줄어든 메모리 사용량은 반가운 소식.
Mac 시스템에선 php-osx.liip.ch에서 제공하는 binary package 덕분에 터미널에서 다음 한 줄로 간단하게 설치할 수 있다.
curl -s http://php-osx.liip.ch/install.sh | bash -s 5.4
PHP 설정 파일의 위치는 /usr/local/php5/lib/php.ini에 있으며, 설치 환경에 맞게 설정해주면 된다.
관련 참고 문서: PHP 5.4 is Here! What You Must Know | Nettuts+
그냥 입력된 숫자를 통화 표기 형태의 숫자로 바꿀 때 유용.
JavaScript에서의 사용 예:
var one_million = '1000000.00'.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');