[IDE] 초보자용 프론트엔드 소스코드 에디터 '브라켓'

주변 개발자들이 가장 많이 쓰는 에디트 플러스(Edit Plus)나 서브라임 텍스트(Sublime Text) 등등등의 웹 개발툴은 초보자가 사용하기에는 어려움이 있다. 자신의 개발환경에 맞춰 초기 환경설정(나는 처음 HTML 입문할때 이게 제일 어려웠다..)을 해야하고 내가 코딩을 잘하고 있는지 보기위해 브라우저 화면을 띄워 놓고 매우 자주 F5번을 눌러봐야 한다. (F5번이 반질반질 해졌다)

지금 추천하는 브라켓(bracket)은 초보자에게 너무 매력적인 웹 개발 에디터(IDE -integrated development environment)다. 어도비의 오픈소스 프로젝트인 브라켓은 구글과 협업하여 만들어졌으며 크롬브라우저를 기반으로 하고 있다.

가장 큰 특징은 아래와 같다.

 - 크롬 브라우저를 통해 실시간으로 내가 코딩하고 있는 화면을 볼 수 있다.

 - 윈도우, 맥, 우분투(리눅스)등 OS 환경이 달라도 매우 동일한 인터페이스를 가지고 있어 어디서든지 비슷한 개발 환경을 빠르게 갖출수 있다.

 - 자동 완성 기능으로 정말 빠르게 코딩할 수 있다. (실제로 나같은 영문 독수리 타법에게는 진짜 정말 빠르다)

 - 다양한 테마와 플러그인을 지원한다.

 - MIT 라이센스를 적용하고 있어 공짜다.

반면에 단점도 있다.

 - 다른 IDE 툴보다 무겁다. (좀 무겁긴 한데 못쓸정도는 아니다. 못 쓸정도면 추천을 했겠는가)

 - 너무 편해서 다른 IDE 툴을 못쓴다. (실제 나의 이야기다)

다운로드

브라켓은 아래 링크에서 다운로드 받을 수 있다.

http://brackets.io/

- 브라켓 공식 사이트 화면 -

다운로드 브라켓을 누르면 다운로드가 시작되는데 사이트 접속할때 OS정보를 읽어 자동으로 OS에 맞는 설치 파일이 다운로드 된다.

테마 설정하기

브라켓은 다양한 테마를 제공한다 브라켓 화면 우측에 있는 레고 블록 모양 아이콘을 눌러보면 플러그인과 테마를 다운로드 받아서 바로 적용 할 수 있다. 내가 주로 사용하는 테마는 기본 테마인 Bracket Dark 다. 이것저것 설치해서 적용시켜 봤지만 개인적으로 기본이 가장 나은거 같다.

- 브라켓 확장 기능 관리자 화면 -

다운로드 받은 테마는 보기 > 테마 메뉴에서 적용하거나 변경 할 수 있다. 아마 처음에는 여러가지 테마를 적용해볼진 모르겠으나 분명 기본 테마로 돌아오게 되어있다.

주로 사용하는 플러그인

브라켓의 플러그인 중에 꼭 설치해야 하는 플러그인이 있다면 아래 2가지를 권장한다.

1. Emmet (젠코딩)

- Emmet을 검색하면 이렇게 나온다 - 

Emmet은 젠코딩을 위한 플러그인으로 다양한 기능을 제공한다. 예를들어 여러개의 div를 만들어야 한다면 div*3을 적고 [Tab] 키를 누르면 짠하고 div가 3줄 생겨난다.

div*3  //이렇게 쓰고 [Tab] 키를 누르면

<div></div>
<div></div>
<div></div> // 이렇게 만들어진다.

2. Beautify

- Beautify 를 검색하면 이렇게 나온다 - 

대부분의 IDE 툴에서는 엔터를 치면 줄바꿈과 간격을 자동으로 맞춰준다 하지만 처음부터 끝까지 정확하게 머리에 구상하고 적지 않는 이상 소스의 줄맞춤을 흐트러지기 마련이다. 특히 내 주변은 줄맞춤이 안 맞는걸 너무 심각하게 받아들이는 사람이 많다.

여튼 조금씩 소스코드에 손을 대다보면 특히, 붙여넣기를 자꾸 하면 더이상 손댈수 없을 정도로 줄이 흐트러질수 있는데 이럴 때 Beautify 플러그인을 설치하고

컨트롤 + A 를 누른 후

컨트롤 + 시프트 + L 을 누르면

아름답고 완벽하게 정리가 되버린다. 이 기능은 다른 곳에서 제이쿼리 소스나 HTML/CSS 소스를 퍼왔을때 빛을 발한다.

줄바꿈없이 적혀 있는 소스를 단번에 내가 보던 그 모양으로 바꿔준다.

참고로 자바스크립트(JavaScript), 제이쿼리(JQuery), HTML, CSS 만 지원한다.

실시간 미리보기

브라켓을 쓰는 가장 큰 이유인 실시간 미리보기 기능은 정말 간단한 방법으로 실행 한다.

화면 우측에 보이는 번개모양 아이콘을 클릭하면 크롬브라우저 새창이 실행되면서 미리보기가 제공된다.

에디터 영역에서 작성한 내용이 크롬브라우저에서 실시간으로 표시가 되면 엘리먼트나 클래스에 커서를 갖다 놓으면 자동으로 해당 영역이 푸른색 블럭으로 깜빡거리면서 표시된다. 짱이다.

사실 브라켓을 소개하고 있지만 주변 디자이너와 개발자는 브라켓 같이 자동완성 기능을 제공하는 에디터를 사용하지 말라고 권장한다.

자동완성 기능은 그만큼 엘리먼트나 속성들을 빨리 익히지 못하게 되고 내 작업환경이 아닌곳에서 작업하는 것이 매우 힘들다는 이유다.

만약 그래도 브라켓을 사용한다면..

다른거 안쓰고 그냥 계속 쭉 이거만 쓰면된다.