본문으로 바로가기

한번 쯤은 브라우저의 개발자도구들에서 임시로 수정한 내용들이 바로 저장되었으면 하는 바램이 있었을지도 모릅니다. 그 시발점에 있는 플러그인을 소개합니다.

Emmet LiveStyle 소개

Emmet LiveStyle은 새로운 세대의 실시간 양방향(에디터↔브라우저)의 CSS 편집을 위한 플러그인이다. 현재는 Chrome, Safari과 서브라임 텍스트에서 작동한다. 위 동영상은 LiveStyle의 가장 강력한 기능을 보여준다. SASS/SCSS/LESS 에서도 작동한다.

LiveStyle 특징

  • 즉시 업데이트 : 어떤 파일을 저장하거나 페이지를 다시 로딩할 필요없이 변경사항이 반영된다.
  • 로컬 파일이 필요치 않다.
  • 크로스플랫폼
  • 멀티 뷰와 멀티 디바이스를 지원한다. 다른 창에서 같은 페이지를 열고 그것들 모두 즉시 업데이트가 가능해진다. 가령, 브라우저 창을 다른 크기로 두개를 띄워두고 한 개를 수정하면 두 개의 창이 모두 반영되어 반응형 디자인을 구상할때 편리해진다.
  • 멀티 사이트 업데이트를 지원한다. 가령, 데스크탑 및 모바일 버전 같은 CSS를 공유하지만 다른 웹사이트인 경우 실시간으로 편집이 가능하다.
  • 매우 쉬운 설치 : 어떤 복잡한 매핑이나 패턴등이 필요없이 단지 LiveStyle 브라우저 창 하나와 편집기와 연관된 CSS 파일을 열면 된다.

Emmet LiveStyle 설치

아래에서는 Sublime Text와 Chrome의 플러그인을 설치하는 방법에 대하여 다룬다.

서브라임 텍스트 플러그인 설치

  1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
  2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
  3. live를 입력하여 LiveStyle이 검색되면 선택한 후, 엔터를 눌러 설치한다.

이 플러그인을 설치하면 자동적으로 PyV8 바이너리를 다운로드하는데 만일 자동적으로 다운로드하는데 문제가 생긴다면 수동설치하라.

만일 이미 Emmet이나 TernJS 확장을 설치했다면, 최신버전의 버전으로 업데이트하라. LiveStyle에 대한 업데이트를 포함하고 있기때문이다.

Google Chrome 확장 설치

크롬 웹스토어에서 직접 LiveStyle을 설치한다. 설치하면 개발자모드(F12)에 LiveStyle 이라는 마지막 패널이 추가된다.

Safari 확장의 경우는 Safari extension을 참고하라.

Emmet LiveStyle 사용법

실시간으로 CSS 편집을 사용하려면 :

  1. 서브라임 텍스트를 실행하고 CSS 파일을 열거나 새로 하나를 만든다.
  2. 수정하고 싶은 페이지를 크롬 브라우저로 방문한다.
  3. 개발자도구를 열고 LiveStyle 패널에 Enable LiveStyle을 활성화한다.
  4. 활성화 됬을때, 왼쪽에 페이지의 외부의 스타일시트의 목록과 오른쪽에 편집기 파일의 목록을 볼 수 있다. 단순히 편집기 파일을 선택하면 브라우저 하나와 연결된다.

에디터의 파일 목록들은 에디터에서 생성하거나 열고 닫는 파일들을 자동적으로 매순간마다 체크하여 업데이트해 준다.

간혹 LiveStyle이 연동되지 않는 경우가 발생합니다. 이때는 콘솔창을 열고(Ctrl + `) 에러 메세지를 확인하고 문제가 발생하는 CSS 구문을 삭제하거나 수정해보길 권합니다.