오픈소스 편집기인 Brackets(브라켓)에 대해서 알아보자.
업데이트시 정식 버전이 아닌 관계로 변경되는 파일에 대한 update가 되는 것이 아닌 프로그램을 새로 다운받아서 덮어써야만 한다.
조금 귀찮긴 한데 그냥 덮어쓰면 잘된다.
플러그인이 버전을 따르는게 있는데 이 경우 플러그인도 업데이트를 수동으로 해주면 된다.
상관은 없는 이야기지만 얼마전까지 Android Studio도 새로 받아 덮어써야 했는데 지금은 업데이트 기능이 잘 동작한다.
조금만 기다리면 편리하게 업데이트가 되는 날이 오지 않을까 생각한다.
비슷한 프로그램으로 Adobe 에서 Brackets 기반으로 만든 Edge Code(엣지코드)도 있으니 참고하면 좋을 것 같다.
장점에 대해서 알아보자.
1. Quick Edit 기능 - CSS와 Javascript 에 대해서 빠른 수정 기능을 제공
2. 실시간 미리 보기 - 페이지 수정 후 저장하고 F5누르던 노가다를 할 필요가 없다.
3. 하이라이트 기능 - Editor 에서 현재 수정하는 부분이 어디 영향을 끼치는지 실시간 미리 보기 시 보여준다.
4. Bootstrap, JQM, Color Picker(색선택기), beautify(정렬), AngularJS Code Hints 외 정말 많은 플러그인이 제공된다.
5. Quick View - 이미지나 Color 값에 대해서 Editor 에서 어떤 색인지 또는 이미지 인지 확인이 가능하다.
아래 캡처 화면을 보면 이해하기가 용이할 것이다.
에디터에서 Cmd/Ctrl + E 를 누르면 아래와 같이 js 또는 css에서 해당되는 부분을 바로 수정이 가능하다.
에디터 우측 상단의 노란색으로 나타나 있는 버튼(실시간 미리보기)버튼을 누르면 디버그 모드로 Chrome 브라우저가 띄워진다.
아래가 실시간 미리 보기로 Chrome 브라우저가 띄워진 모습이며, 현재 커서가 있는 위치는 Chrome 상에서 하이라이트가 된다.
만약 CSS를 수정중이라면 해당 Style class에 해당되는 부분이 모두 하이라이트 된다.
예를들면 P 태그에 style을 Quick Edit로 수정하고 있다면 페이지내 P 태그들이 모두 하이라이트 된다.
아래와 노란색 실시간 미리보기 밑의 버튼(확장기능 관리자)를 누르면 플러그인 설치 및 확인, 테마 변경이 가능하다.
아래는 설치된 플러그인 리스트를 보여주고 있다.
결론적으로 일반 개발자가 퍼블리싱 데이타를 받아서 개발하는 상황이라면 사용할 필요가 없을것 같으며,
퍼블리셔가 사용한다면 참 좋을 것 같으며
개발자가 개인블로그나 홈페이지를 만들기에도 부족함이 없이 훌룡하며
반응형웹을 만드는데 있어서도 보다 신속하게 만들 수 있을 것 같다.
