by Glenn Lee

Basic for web 디자이너를 위한 코딩 에디터
2017년 11월 4일에 업데이트됨

by Glenn Lee

Brackets 찬양글 디자이너가 쓰기에 가장 좋은 코드에디터 Brackets

바야흐로 코드 에디터 춘추전국시대입니다.
대체적으로 심플, 파워풀을 동시에 추구 하는 것이 요즘 에디터들의 트렌드 인데요
그중에서도 디자이너 시선으로 가장 쓰기 좋은 Brackets라는 에디터를 소개합니다.
저희 빔캠프의 메인 코드에디터로도 활약하고 있습니다!

우선 윈도우즈 사용자, 맥 사용자 모두 문제 없이 사용 할 수 있습니다.
다만, 원도우즈에서의 동작 보다 맥에서의 동작이 좀 더 원활한 느낌입니다.

Sublime Text, Atom, Visual Studio Code등 요즘 유행하고 있는 형태의 에디터들은 대부분
프로그래머, 엔지니어 타겟으로 여러 언어를 개발하기 위한 범용성과 확장성에 초점이 맞춰졌다면
Brackets는 온전히 웹디자이너, 웹프론트엔드 개발자의 용도에 집중 하였습니다.
공식웹사이트의 "understands web design"이라는 마지막 문장이 Brackets의 특징을 제일 잘 말해 주고 있습니다.

장점

  • Adobe느님이 내려준 축복이다!
  • 한글도 문제없다!
  • 가볍고 빠르다.
  • 디자이너를 만족 시킴
  • 업데이트가 꽤나 부지런하다.
  • 다양한 확장프로그램으로 더욱 활용도있게

단점

  • FTP/SFTP 기능, 기본 지원되지 않음
  • HTML, CSS, JavaScript 작성에 포커스가 맞춰져 있기에 범용 에디터로서는 한계가 있음

설치하기

Brackets의 특장점

Adobe느님이 내려준 축복이다!

Brackets는 원래 Adobe Edge Code라는 제품이였지만 오픈소스 프로젝트로 공개되었습니다.
디자이너들과 너무나 익숙한 Adobe가 지원하기에 더욱 믿음이 갑니다. 실제로 PSD미리보기나 컬러피커 같은 기능은 Adobe가 느껴지게 하네요

한글도 문제없다!

요즘 트렌디한 에디터들중에 몇몇은 한글입력문제를 안고 있습니다. 2% 부족한 한글지원으로 사용하기 꺼려졌었는데요. Brackets는 아무런 문제없이 한글지원이 됩니다. 중요한 부분이지요!

가볍고 빠르다!

전체 프로그램이 약 57메가 정도 되네요. 예전 드림위버 같은 무거운 프로그램을 생각하면 깃털 수준입니다. 프로그램 자체가 가벼운 것도 있지만 제공되는 기능 자체가 빠른 코드편집을 목표로 하고 있습니다.
좀 더 자세한 소개를 해드릴께요!

모든 단축키 설명은 맥 운영체제 기준입니다! 윈도우즈 사용자 분들은 Command 대신 Ctrl을 이용해 주세요

1. 실시간 미리보기 기능

오른쪽 상단 번개 모양을 누르면 크롬 브라우저가 바로 실행됩니다.
주소를 보시면 127.0.0.1로 시작 되지요! 자체 웹서버가 실행되었습니다.
이제 Brackets의 편집화면과 크롬 브라우저는 연결 되었습니다.
실시간으로 편집되는 모습을 볼 수 있습니다.

2. 빠른수정 기능

색상코드를 클릭하고 Command+E를 누르면 어디서 많이 보아오던 컬러피커가 등장합니다.
태그이름 또는 클래스를 클릭하고 Command+E를 클릭하면 곧바로 CSS를 편집 할 수 있습니다.

3. 멀티커서 기능

빠르다 빠르다 못해 이제는 커서가 여러개입니다.
원하는 단어를 선택 후 Command+B를 누르면 같은 단어를 찾아 선택해줍니다. 그리고 바로 수정! 또는 Command키를 누른 채로 원하는 곳을 클릭하면 원없이 커서가 만들어집니다.

4. 자동완성 기능

요즘 자동완성 기능이야 흔한 기능이지만 HTML, CSS JavaScript, 정말 많이 쓰게 되는 jQuery 자동완성까지 기본 지원합니다. 속도도 빠르고 자동완성 이후에 커서 위치 라던지 꽤나 디테일한 부분에서 쫙 들어 맞는 느낌입니다.

5. 몇몇 유용한 단축키들

원하는 영역 선택 후 Command+D하면 바로 해당 선택영역을 복제해 넣을수 있습니다.
또한, 그냥 Command+D하면 한줄 자체가 복제되어 들어갑니다.Command+/하면 주석(Comment)이 적용됩니다.
원하는 블럭 지정 후 Command+[ Command+] 하면 블럭 내어쓰기, 들여쓰기가 자유롭습니다.

모든 단축키 설명은 맥 운영체제 기준입니다! 윈도우즈 사용자 분들은 Command 대신 Ctrl을 이용해 주세요

디자이너를 만족시킴

역시 그래픽 소프트웨어의 명가 Adobe답게 군더더기 없는 매끈한 모습입니다.
더불어 테마기능을 이용하면 전기세(?)도 아끼고 간지도 나는 검정배경 테마도 사용 할 수 있습니다.
이미지 파일 대상으로 미리보기 기능도 제공합니다! 저 체크표시! 우리 눈에는 투명으로 보이지요? :D
색상 미리보기도 지원하네요! 코드에만 집중 할 수 있는 심플한 형태인데도 디자이너를 위한 기능을 놓치지 않았습니다.

업데이트가 꽤나 부지런하다.

오픈소스 프로젝트이므로 당연한 장점인지도 모르겠네요
업데이트가 꽤나 빠른 편입니다. 이 글을 작성하고 있는 시점 이후에도 많은 기능들이 추가 되겠지요? 계속적으로 지켜봐야 할 것입니다.

사실 장점은 더 있습니다

오픈소스 프로젝트이므로 실력있는 세계의 개발자들이 Brackets에서 추가되는 일종의 확장프로그램(extensions)을 개발, 배포하고 있습니다. 자세한 내용은 다음 레시피를 기대해 주세요!

Brackets의 소소한 단점

윈도우에서 많이 쓰는 EditPlus에는 직접 서버에 접속하여 파일을 연 후, 저장하면 실시간으로 업로드되는 기능이 있습니다. 많은 사람들에게 사랑 받는 기능입니다만 Brackets는 제공되지 않습니다.

다만 Brackets 확장프로그램을 설치함으로서 가능하기는 한데
서버에 직접 접속하여 파일을 여는 것이 아닌 로컬과 서버의 파일싱크에 초점이 맞춰져 있어 쓰기 불편하네요
이 단점은 작업자의 스타일에 따라 단점이 아닐수도 있습니다.

Brackets가 모든 Coding작업에 적합하다고 생각지는 않습니다.
경량화에디터의 한계는 분명히 있으며 할 수 있는 작업이 웹 프론트엔드 개발로 한정 된 것이 사실입니다.
물론 어떤 도구를 쥐어줘도 200% 활용하시는 분들이 있기 마련이지만요 :)
단점을 적고 보기 디자이너 입장에서 본다면 단점이 아닐수도 있겠네요!

설명은 이쯤이면 되었습니다! 바로 설치해서 사용해 보세요!