어도비에서 만든 브라켓(Brackets)이라는 텍스트 에디터는 2012년에 나와서 아직 개발 중이지만 안정적으로 작동하고 오픈소스로 개방돼있어서 무료로 사용할 수 있습니다. 혁신적이라 할 만큼 기존의 텍스트 에디터에서는 볼 수 없는 여러가지 새로운 기능들이 있습니다. 반면에 당연히 있어야할 기능은 없는 경우도 있습니다. 이 에디터의 특징은 웹사이트를 만드는 언어인 HTML, CSS, 자바스크립트로 만들어졌기 때문에 원할 경우 이들을 수정해서 다른 기능을 추가할 수도 있습니다. 하지만 되도록이면 확장 프로그램을 개발해서 사용할 것을 권장합니다. 대부분의 경우 이러한 프로그램을 플러그인이라고 하는데 어도비에서는 확장 프로그램(Extensions)이라고 하더군요. 브라켓 에디터가 계속 개발 중이니 첨부되거나 확장 프로그램으로 개발될 것으로 생각합니다. 이 글에서는 어도비의 브라켓이라는 에디터의 사용법을 알아보겠습니다.
우선 프로그램을 내려받으려면 아래의 링크로 이동합니다.
파란색의 버튼을 클릭하거나 다른 버전을 받으려면 링크를 클릭합니다. 아직은 윈도우 버전과 OSX 버전만 있습니다.
설치 후에 프로그램을 열면 위와같은 단순한 스킨의 화면이 나타납니다. 기본 파일은 브라켓에 관한 소개 내용인데요 코어 파일에 속해있어서 수정 후 저장은 안됩니다. 대부분의 에디터에는 여러가지 파일을 편집하기 위해서 탭 기능이 있지만 여기는 탭이 없고 파일을 클릭하면 바로 열리는 형태입니다. 탭이 필요 없죠. 파일 메뉴에서 프로젝트 폴더를 열면 기존의 다른 프로젝트 폴더가 사라지지만 폴더 이름(위의 경우 Getting Started)를 클릭하면 선택할 수 있습니다. 가장 큰 단점은 두개의 화면으로 분리하는 기능이 아직 없습니다. 메뉴를 보면 처음에는 몇가지 기본만 있습니다. Themes나 Emmet은 확장 프로그램을 설치해서 생긴 것입니다. 우측의 세로 바를 보면 두개의 아이콘이 있습니다. 번개 아이콘은 미리보기 기능이고 폴더 아이콘은 확장 프로그램을 설치하는 기능을 합니다. 그러면 우선 멋진 스킨으로 변경해보겠습니다.
브라켓은 기능을 추가하려면 확장 프로그램(Brackets-Extensions)을 설치해줘야 합니다. 아래의 링크로 이동합니다.
https://github.com/adobe/brackets/wiki/Brackets-Extensions
Theme으로 검색하면 두개의 스킨(테마)가 나옵니다. 두번째 것이 스킨이 더 많습니다. 링크를 클릭하면 해당 사이트로 이동합니다. 주소창에서 URL을 복사합니다.
에디터의 폴더 아이콘을 클릭하면 확장 프로그램 매니저 화면이 나옵니다. Install from URL... 버튼을 클릭하고 입력 박스에 붙여넣은(Ctrl+V) 다음, Install 버튼을 클릭하면 설치됩니다. 대부분의 확장 프로그램은 에디터를 재가동 하지 않아도 되지만 어떤 경우는 다시 시작해야 할 수도 있습니다. 설치된 후에는 메뉴에 Themes라는 항목이 새로 만들어집니다. 십 수개의 스킨이 있으니 원하는 것을 선택하면 됩니다. 같은 방법으로 젠코딩이 가능한 Emmet을 설치하세요. 빠른 코딩을 위해서는 필수 플러그인이죠.
다른 확장 프로그램에 대해서 간단하게 알아보겠습니다.
Minifier - 코드를 축약형으로 만들 수 있는 플러그인입니다.
Beautify - 코드를 축약형에서 일반 보기로 전환할 수 있는 플러그인입니다.
위 두가지는 같이 설치해 사용하는 것이 좋습니다.
파일을 열고 메뉴에서 Edit-Minify Javascript를 선택하거나 단축키 Ctrl+M을 누르면 축약형으로 전환되고 파일이름에 min이 추가된 파일이 새로 만들어집니다. Javascript 이름이 들어가 있지만 스타일시트도 가능합니다. 이렇게 변환된 것을 이번에는 Beautify를 선택하면 다시 정상으로 변환됩니다. 파일이름은 그대로 min이 들어가 있습니다.
CanIUse - 각종 웹프로그래밍 언어가 개발 단계에서 웹브라우저에 얼마나 적용되고 있는지 알아볼 수 있는 기능입니다. 이곳에 가면 자세히 볼 수 있습니다.
캔아유즈 플러그인을 설치하고 Ctrl+Alt+U를 누르면 하단에 창이 나옵니다. Flexible Box 레이아웃 모듈이 어디까지 사용 가능한지 알아보기 위해 검색창에 flex로 검색을 했습니다. 녹색의 영역을 보니 IE는 11에서 사용 가능하고, 파이어폭스는 22, 크롬은 26 버전부터 가능합니다.
이밖에 다양한 확장 프로그램이 있으니 둘러보고 설치해 사용하시면 됩니다. 다음 글에서는 독특한 기능에 대해 알아보기로 하겠습니다.
