CSS를 작성할 때 가장 낭비되는 시간은 아마도 새로고침을 하고 기다리는 1~2초일 것이다. 이 1~2초가 모여서 꽤 많은 시간이 낭비될 것이다. 그걸 개선해 주는 프로그램들이 있다.

CSSrefresh

내가 가장 오래 사용한 북마클릿이다. 꼼꼼히 읽어 보면 어떻게 사용하는지 알 수 있을 텐데, 로컬에서 작업할 때 js를 로딩해서 사용하는 방법도 있고, 그냥 북마클릿으로 사용하는 방법도 있다. CSS 변경 시각을 바탕으로 수정사항이 있으면 CSS를 다시 불러 온다.

ajax 방식을 사용하기 때문에 생기는 한계가 있다. 우선 다른 도메인에 있는 CSS는 새로고침할 수 없다. 또, ajax 호출을 계속 해대기 때문에 브라우저가 약간 느려지는 경우도 있다. 로컬 서버를 구축하지 않고 HTML을 파일시스템에서 열어서 수정하는 경우에도 작동하지 않는다.

하지만 대체로 훌륭하게 사용할 수 있다. 에디터에서 CSS를 수정했는데 나도 모르는 새 브라우저에 반영돼 있는 모습을 보게 되면 감탄한 거다.

ReCSS

오늘 CSSrefresh가 작동하지 않아서 사용하게 된 북마클릿인데, 계속 호출하는 게 아니라 누르면 CSS만 새로고침한다. CSSrefresh가 자동으로 계속 CSS를 리로딩하는 거라면 이건 누르면 한 번 리로딩하는 거다.

크로스도메인, 파일시스템에서 작동하는지는 테스트해보지 않았다.

LiveReload

프로그램을 설치하고 크롬 확장을 설치해서 작동하게 하는 프로그램이다. 맥용은 9.99$로 앱스토어에서 팔고, 윈도우용은 알파 버전으로 무료인 듯. 프로그램을 설치하고 확장 프로그램을 설치해야 한다.

Guard LiveReload

LiveReload 데스크톱 프로그램 설치 대신, 터미널에서 실행하는 루비를 사용하는 프로그램. LiveReload 확장과 함께 사용하면 되는 것 같다. 우선 파일 변화를 감지하는 루비 프로그램인 Guard를 설치해야 한다고.

Espresso

맥용 에디터인데 CSS 새로고침 기능을 내장하고 있다고. 사라고 돼 있는데, 그냥 다운받아도 제한 없이 쓸 수 있는 것처럼 나온다.

LiveStyle

SublilmeText와 크롬 확장을 연동해서 작업하는 놈. 위의 소개들은 에디터에서 고치면 브라우저가 자동으로 새로고침하는 거인 반면, 이놈은 크롬 개발자 도구에서 CSS를 고치면 에디터에 자동 반영되는 놈이다. 파일에 자동반영되는 게 아니라 에디터에 자동반영된다는 개념으로 이해해야 한다. 이 글을 쓰는 시점인 2013년 9월 9일 기준으로는 초기 버전이라 좀 불안정하다.