Rev. 2.73

크로스-브라우저 이슈를 가지각색으로 안고있는 스타일시트를 다루는 작업은 클라이언트-사이드 개발자들을 매우 피곤하게 합니다. 코드를 수정하고 여러 브라우저에서 확인하고 다시 수정하고 확인하는 테스트 기반 코딩이 이루어지는 것이 보통입니다. 이러한 노고를 잘 알고있는 Andrew Davey씨는 이와 같이 더딘 개발 프로세스를 확실하게 개선시켜주는 Vogue를 만들었습니다.

Vogue는 현재 작업중인 HTML 페이지에 로드되어있는 스타일시트를 자동으로 감지하고 감시합니다. 그리고 감시 대상이 된 파일에 변동사항이 발견되면 브라우저의 새로고침 없이 해당 파일만 갱신하여 즉시 화면에 반영해 줍니다. 활용예를 들자면, IE9, 파이어폭스 그리고 크롬에 작업중인 페이지를 열어놓고 자신이 선호하는 편집기에서 스타일시트를 코딩하고 저장합니다. 늘 그랬듯이 각 브라우저별로 변경 내용을 확인하려는 순간 헉! 화면에는 방금 코딩했던 내용이 "새로고침"을 하지도 않았는데 이미 반영되어 있는 마법과도 같은 일이 발생합니다.

이를 조금더 활용하자면, 메인 모니터에는 편집기를, 서브 모니터에는 브라우저들을 한눈에 보이게 배치하합니다. 편집기에서 스타일시트를 코딩하여 저장하는 순간 모든 브라우저들이 조금전의 변동내역을 즉시 반영하는 상황을 경험할 수 있습니다. 뻥 아녜요; 이 2분짜리 스크린캐스트를 확인해 보세요.

설치 및 사용방법은 간단합니다. Vogue는 Node.JS로 구축된 실행형 모듈이며, Socket.IO 모듈에 기반하고 있습니다. 다음과 같이 npm을 사용하여 전역으로 설치합니다.

# npm install vogue -g
vogue@0.4.2 /usr/local/lib/node_modules/vogue
├── parseopt@1.0.0-2
└── socket.io@0.7.11

이제 작업중인 프로젝트의 경로(스타일시트 경로와 일치하는)로 이동하여 Vogue를 실행합니다.

# cd ./my-project
# vogue
Watching directory: /var/www/my-project
Listening for clients: http://localhost:8001/

끝으로, 스타일시트가 반영된 HTML파일에 아래와 같은 코드를 추가합니다.

<script src="http://localhost:8001/vogue-client.js" type="text/javascript"></script>

위 스크립트 태그를 추가하는 것 대신에 북마크릿과 같은 형태로 사용해도 무방합니다. 자, 이제 모든 준비를 마쳤습니다. 브라우저들에 작업중인 페이지를 열고 스타일스트 작업을 시작하세요! 작업 능률이 팍팍 오르겠지요?

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar