Brackets 설치와 확장 기능 셋업 - HTML/CSS 코드 에디터

Brackets - HTML/CSS

Brackets(브라킷츠)는 코드 에디터로

다양한 프로그래밍 언어의 소스코드 편집에

사용할 수 있지만 HTML/CSS 코딩을 할 때

가장 많이 쓰이는 에디터입니다.

Brakets의 고유 기능인 실시간 미리보기에서

HTML/CSS 파일을 수정할 때 완벽한 실시간

미리보기가 지원되므로 프론트엔드

디자인하기가 수월합니다.

비주얼 스튜디오 코드에도 라이브 서버가 있지만

저장 후 리프레시 방식이라 그 느낌이 안납니다.

서버를 리부팅 하는 방식이 아니라

HTML 문서의 요소들의 변화를

nodejs에 DOM객체로 연동시켜

조작하는 방식 같은데 예를 들어

코드 에디터에서 마우스를 이용해서

background를 바꾸면 브라우저에

그 값을 실시간으로 전달하여

반영하는 식입니다. 프론트엔드는

하나 수정하고 결과 보고 진행했는데

이렇게 하면 거의 그래픽 프로그램처럼

사용할 수 있습니다. 왜 이것을 만든

기업이 그래픽 프로그램의 대명사인

어도비사인지 이해할 수 있습니다.

(어도비 포토샵에서 하던 방식을 구현한 듯)

프론트엔드에서는 이런 사소한 부분이

디자인 감각을 변화시켜 생산성과

품질에도 영향을 끼칠 수 있는 부분입니다.

요즘 추세는 언어에 구애받지 않는

비주얼 스튜디오 코드를 가장 많이

사용하긴 하는데 HTML/CSS 코딩에는

Brackets 가 특화된 부분도 있어서

한번 쯤 사용해봐도 좋을 것 같습니다.

(물론 atom이나 sublime text 등 다른

에디터에서도 비슷한 세팅이 가능하다)

범용 에디터는 개인의 취향도 있기 때문에

뭐가 좋다 나쁘다 절대적인 차이가

크지 않다고 봅니다. 이런 도구들은

작업의 생산성을 높여주는 것이지만

그걸 사용해서 어떤 결과물을 만들지는

사용자에게 달려있습니다.

(A가 B보다 낫다는 호불호의 문제일지도 모릅니다)

*어도비는 2021년9월 지원을 중단한다고

발표했습니다...만 오픈소스 이므로 알아서

fork 해가라고 공표한 상태입니다.

(어도비 직원들은 프로젝트를 진행하지 않겠다는 말)

이런 경우 나중에 좀 시간이 지나고

버전업이 필요할 때 오픈소스 커뮤니티에서

이어받는 경우가 많습니다.

어도비는 자신들과 파트너십이 되어 있는

MS의 비주얼 스튜디오 코드로 프로젝트를

migrate 하라고 권장하는데요

Brackets를 계속 사용할지 말지는

이제 알아서 판단할 문제인 것 같습니다.

Brackets 설치

Brakets는 아래의 웹사이트에서 다운로드 받을 수 있습니다.

어도비에서 오픈소스로 개발되었으며

HTML, CSS, Javascript롤 사용해서 만들었습니다.

https://brackets.io/

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

brackets.io

깃허브에 소스코드와 최근 소식이 올라와 있습니다.

https://github.com/adobe/brackets

GitHub - adobe/brackets: An open source code editor for the web, written in JavaScript, HTML and CSS.

An open source code editor for the web, written in JavaScript, HTML and CSS. - GitHub - adobe/brackets: An open source code editor for the web, written in JavaScript, HTML and CSS.

github.com

브라킷츠를 설치해보겠습니다. (윈도우11)