가볍고 편리한 개발 도구 Brackets

Brackets

얼마 전 정말 별 상관없는 내용에 대해 구글링하다가 우연히 MIT 라이선스의 다중 플랫폼(Linux, OS X, Windows) 지원 웹 개발 도구 Brackets(brackets.io)를 알게 되었습니다. 최근 이래 저래 자주 사용하게 된 Node.js를 다루는 데에도 아주 편리해 보여서 바로 설치해 사용해 보고 짧은 사용 경험을 정리해 봤습니다.

Brackets

Live Preview

최근 웹 개발 도구 추세에 빠질 수 없는 실시간 페이지 갱신 기능을 Brackets 역시 가지고 있습니다. Visual Studio의 Page Inspector 만큼의 강력함은 아니지만 Live Preview라는 이름에 걸맞은 기능은 갖추고 있습니다. 오른쪽 상단의 번개 모양의 아이콘을 클릭하면 Chrome에서 작업중인 페이지가 열립니다. Live Preview 가 활성화되면 편집기에서 마우스 커서가 위치한 HTML 요소가 브라우저에 강조되어 표시되며 HTML 코드를 편집하면 실시간으로 브라우저에 반영됩니다.

JSLint 지원

JSLint는 컴파일러 검증을 받지 못하는 동적 언어의 단점을 어느 정도 극복해주는 좋은 도구입니다. Production 환경에 Javascript 코드가 배포되기 전에 반드시 분석 작업을 거치는 것이 권장됩니다. Brackets는 Javascript 파일에 대해 파일이 저장될 때마다 자동으로 JSLint 분석을 수행하여 개발자로부터 배포 또는 디버깅 전에 매번 수작업하는 수고를 줄여줍니다.

Brackets-JSLint

Extension Manager

요즘 여타의 소프트웨어 못지 않게 IDE에게 있어서 모듈 확장 기능은 매우 중요합니다. Brackets 역시 이러한 기능을 제공합니다. File -> Extension Manager 메뉴를 선택하면 확장 모듈을 관리하는 화면이 보여집니다. 저는 JSLint 보다는 JSHint를 사용한 코드 분석을 선호하기 때문에 JSHint 확장을 설치해 보겠습니다. Available 탭의 오른쪽 위 검색 텍스트 상자에 ‘jshint’라고 입력하면 맨 위에 제가 원하는 확장이 보여집니다. Install 버튼을 누르면 설치가 시작됩니다.

Brackets-ExtensionManager

Quick Docs & Quick Edit

CSS 편집을 하는데에 있어서 Brackets의 Quick Docs와 Quick Edit는 매우 편리한 기능입니다. 스타일 항목 컨텍스트 메뉴에서 Quick Docs를 선택하면 스타일 항목에 대한 설명이 편집기 중간에 나타나고 esc키를 누르면 사라집니다. 또 Quick Edit 메뉴를 사용하면 색상 스타일 항목 값을 편리한 편집기를 사용해 수정할 수 있습니다.

확장 기능

Brackets는 많은 확장 모듈을 가지고 있습니다. 유용하다고 생각되는 것들 몇 가지를 소개합니다.

Brackets Git

Brackets Git을 설치하면 Brackets에서 간단한 Git 작업을 할 수 있습니다. 오른쪽 Git 아이콘을 누르면 화면 아래쪽에 소스 변경 내역이 나타나고 여기서 commit과 push 등의 작업을 할 수 있습니다. 여기에 더욱 편리한 기능은 코드를 commit 하기 전에 코드 검사 결과(Javascript 코드의 경우 JSLint 또는 JSHint)에 오류가 있을 경우 알려준다는 겁니다.

Brackets-Git

Theseus – Javascript Debugger

Theseus는 Javascript 디버깅 기능을 제공하는 멋진 확장입니다. 디버깅 모드가 시작되면 Javascript 함수가 몇 번 실행되었는지와 각 실행 시 데이터 스냅샷이 기록됩니다. Visual Studio의 IntelliTrace가 생각나네요. 웹 클라이언트에서 실행되는 Javascript 코드는 Live Preview를 사용해 디버깅 할 수 있고, Node.js 디버깅은 node-theseus Node.js 패키지를 전역으로 설치하고 node-theseus 명령으로 응용프로그램을 실행하면 시작됩니다.

$ npm install -g node-theseus
$ node-theseus app.js

Brackets-Theseus

결론

결론적으로 꽤 맘에 들어서 당분간 사용하며 연구해 보고 싶습니다. Visual Studio의 강력함, Sublime Text의 가볍고 단순함과는 또 다른 매력을 가지고 있습니다. 제가 좋아하지만 매우 다른 성격의 저 두 도구의 중간 어디쯤 위치하는 느낌이네요. 가볍지만 충분히 편리합니다. 주위 프로그래머들에게 사용을 권장하고 싶고 아직 기본 기능도 확장 기능도 더 알아볼 것이 많기에 당분간 사용하는 재미가 좋을 듯 합니다. 흥미로운 IDE를 만난다는 것은 프로그래머에게 참 즐거운 일입니다.

Advertisements

가볍고 편리한 개발 도구 Brackets”에 대한 12개의 생각

  1. 곽연준

    저두 글 보고 Brackets 에디터 설치 후 따라해보았습니다.
    *.html 파일의 태그 중 하나에 커서를 올리고 (블럭 선택 없이 작동)
    Quick Edit (Ctrl + E) 해보니
    *.css 에 있는 관련된 스타일이 Quick Edit 팝업으로 떡 하니 나타나는데
    쫓아다닐 필요 없으니… 이 기능 많이 편리하군요.

    응답
    1. Gyuwon 글의 글쓴이

      네, 그 기능 정말 편리한 것 같아요. 스타일이 없을 경우는 생성해주기도 하더군요. 🙂

      응답
  2. 아아아아

    lighttable도 그렇고 어도비꺼도 그렇고 CodeMirror를 기반으로 한 덕분에 좀 느리거나 딜레이가 발생하죠, 대용량 텍스트면 특히. 자잘한걸 쓰는덴 별 지장없지만서도. 다들 기능은 분명 좋은데…. nodejs가 좀더 고성능이 되면 나아질까 싶기도 하지만….. 음.

    응답

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중