본문으로 바로가기

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

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 구문을 삭제하거나 수정해보길 권합니다.


신고

댓글을 달아 주세요

  1. BlogIcon wallel 2015.06.26 15:27 신고

    오호!

    이거 엄청난 물건이네요!

    매번 크롬 개발자도구에서 css/html 수정하곤 했는데. (잘못 링크를 누르거나 새로고침 누르면 폭망..)

    냉큼 설치해야겠습니다. :)

    • BlogIcon 흉내쟁이 2015.06.27 16:37 신고

      넵, 저도 유용하게 사용하고 있지만 역으로 임시로 수정한 것들이 에디터에 수정된 것 모르고, 저장누르고 종료하면 안드로메다에 정신이 가출하는 경우도 생기니 유의하세요 ㅎㅎ;

  2. 정글짐 2015.07.28 19:38 신고

    한글페이지에서 사용 시

    Emmet LiveStyle: [client] CSS parsing error at line 1, char 65: Unrecognized character '굴'
    body, td, p, input, button, textarea, select, .c1 { font-family:굴림; font-size:9pt; color:#333333; }

    메시지가 서브라임 터미널에 찍히는데.. 방법이 있을까요..
    영문페이지에서는 잘 됩니다..

    • BlogIcon 흉내쟁이 2015.07.28 19:48 신고

      우선 한글폰트명엔 따옴표를 하세요

    • 정글짐 2015.07.28 20:41 신고

      네이버 메인에서 실행해봤는데..

      Emmet LiveStyle: [client] CSS parsing error at line 33, char 179: Unrecognized character '돋'
      static.naver.net/search/images11/bg_atcmp_line3.gif) right -11px no-repeat;color:#2f3743;font:11px 돋움;letter-spacing:-1px}

      이런 메시지가 나오네요.. 아무래도 제 쪽의 문제 같습니다..

    • 정글짐 2015.07.28 20:44 신고

      제 쪽 서브라임 css에는 간단히 background:red 만 써보았는데도 저렇게 나오네요..

    • BlogIcon 흉내쟁이 2015.07.28 21:06 신고

      일단 라이브스타일은 CSS 구문 오류를 잡아내기에 CSS 기본 문법에 맞게 작성하셔야 합니다.

      또한, 정상적으로 서브라임텍스트 파일과 크롬(안정화버전)을 사용하셔야 됩니다(카나리아 버전 같은 건 안됨).

      서브라임텍스트와 연결(File mapping)이 정상적으로 되었는지 확인하셔요. 연결은 되는데 에러가 발생하는지 확인하세요.

      발생하는 에러를 저 또한 겪지 않는한 자세한 대답을 드릴수가 없네요.;; 자세한 문의는 직접 개발자에게 하셔야되겠죠.
      https://github.com/emmetio/livestyle-sublime/issues

    • 정글짐 2015.07.28 21:12 신고

      안정화버전을 사용해봐야겠어요

      문제가 해결되면 다시 찾아와 보고드리겠습니다.~

      감사합니다~~

티스토리 툴바