프리랜서를 위한 CSS, 자바스크립트 에디터(Editor)

CSS 및 자바스크립트 편집기로 어떤 걸 사용하시나요? 

블로그 스킨작업 등을 좀 하면서 CSS를 좀 많이 다루게 되는데, 티스토리 자체 에디터는 기능이랄 것이 없고, 바로바로 결과도 확인할 수 있으면서 마음에 드는 에디터가 없더라구요. 그러다 발견한 Brackets이라는 에디터를 소개해드리려고 합니다. 개인적으로 에디터를 사용할 때 가장 필요한 것은 일단 보기에 깔끔해야 하고, 직관적이어야 한다고 생각합니다. 

Brackets이라는 편집기는 자바스크립트, CSS로 만들어졌고, 아직 열심히 개발 중인 오픈소스 에디터라고 말씀드려야 할 것 같네요. 사용상에 큰 문제가 있는 것은 아니고 지속적으로 기능 등을 발전시켜나가고 있는 중입니다. 그럼 한 번 살펴보도록 하겠습니다.

다운로드 및 설치하기

Brackets 다운로드 바로가기

먼저 위의 링크를 통해 최신버전을 다운로드 받으세요. 글을 작성하는 현재 1.9 버전이 최신버전입니다. (이미지는 1.8버전 때 캡쳐했습니다. ^^)

Download Brackets 버튼을 클릭해서 설치파일 다운로드를 진행합니다. 다운로드가 완료되면, 설치파일을 실행시켜서 아래와 같이 설치를 진행해주세요.

사용하기

설치가 완료된 후, 아이콘을 실행하여 편집기를 실행하면 위와 같은 화면을 보실 수 있습니다. 개인적으로 하얀 바탕화면은 좋아하지 않습니다. 눈도 부시고 전력도 많이 소모하기 때문입니다. 그래서 어두운 계열의 테마로 변경해보도록 하겠습니다.

테마변경

위의 모습은 드라큐라 테마가 적용된 모습인데요, 어떻게 하면 이런 색상의 테마를 적용할 수 있는지 알아보도록 하겠습니다.

먼저 Brackets 창의 우측에 보면 버튼이 2개가 있습니다. 위에 있는 버튼은 실행버튼입니다. html파일의 경우 바로 기본 브라우저와 연동시켜서 실행시키게 되구요. 파일 내용을 변경하고 저장하게 되면, 자동으로 새로고침(Refresh)이 됩니다. 그리고 그 아래에 있는 두번째 버튼이 메뉴버튼입니다. 메뉴 버튼을 누르면 위와 같이 팝업창이 뜹니다. 첫번째 탭은 설치가능한 플러그인을 검색할 수 있습니다.

2번째 탭인 테마를 클릭합니다. 그리고 Dracula를 우측검색창에서 검색해주세요. 아마도 검색하지 않아도 화면 리스트에서 바로 보실 수 있을꺼에요. 그리고 우측에 있는 '설치'버튼을 클릭합니다.

설치가 완료되면, '설치됨' 탭에서 Dracula 테마가 설치된 것을 확인하실 수 있습니다. 이건 단지 테마를 설치만 해준 것이구요. 설치한 테마를 사용하겠다는 설정도 해주셔야 합니다.

상단 메뉴에서 보기 ▶ 테마를 선택합니다. 

그리고 팝업창에서 Dracula Official 테마를 선택하신 뒤에, 완료버튼을 눌러주세요.

위의 모습이 드라큐라 테마가 적용된 모습입니다. 태그나 키워드들의 색상이 단색도 아니고 선명하게 구분이 되어서 개인적으로 참 좋아합니다. 안드로이드 스튜디오도 이 테마를 사용하고 있구요.

참고로 제목에 '프리랜서를 위한'이라는 수식어구를 붙인 이유는 통계조사에서 Brackets을 이용하고 있는 사용자 수 중에서 개인사업자나 프리랜서가 압도적으로 높았기 때문입니다. 블로그용 에디터로 Notdpad++도 좋지만, Brackets도 충분히 이용할만한 편리함이 있는 것 같네요. 지속적인 발전을 기대해 봅니다. ^^

# Notepad++ 최신버전 설치 및 편리한 단축키 알아보기

본 글이 도움이 되셨다면

아래 ♡공감 버튼 클릭

부탁드립니다~