스킨 개발환경 구축하기 - Brackets를 설치하다.

티스토리 스킨 제작을 위한 개발환경 구축하기 - 무료 개발 프로그램 Brackets 설치

올해 목표 중에 하나가 바로 블로그 주제에 맞는 스킨을 만들고 무료로 배포하는 겁니다. 물론 대략 적으로 스킨은 2~3개 정도 만들 예정이고 어떻게 서비스를 진행할까 생각도 하고 있습니다. 물론 처음 혹은 2번째까지는 무료로 제공하고 다음부터는 기부를 받는 형식으로 운영을 할까 생각하고 있습니다. 물론 아직 만들지 않았기 때문에 계획뿐이겠죠.

본인은 대학교 4학년때 HTML+CSS를 처음으로 다루어보고 프로젝트도 진행을 했는데요. 개인적으로 응용프로그램 제작은 정말로 재미있고 적성에 맞아서 잘 하겠지만 웹 프로그램은 아무래도 디자인도 같이 만들어야 해서 생각보다 정을 붙이기는 힘들더군요. 그럼에도 불구하고 이렇게 만드는 이유는 생각보다 괜찮은 스킨들은 전부다 유료로 진행을 하기 때문에 쉽게 바꿀 수가 없더군요.

물론 엄청난 시간을 투자해서 만든 스킨을 판매한다는 것은 당연하다고 생각을 합니다. 저 역시 스킨을 구매해서 블로그를 수정하고 싶지만 조금만 공부하면 충분히 만들 수 있는데 굳이 구입을 해서 적용을 해야 되나 생각을 하다가 이렇게 제작을 하기로 결심하게 됐습니다.

무료 개발 프로그램 Brackets

일단 웹 개발을 하기 위해서는 그 환경을 구축해야 합니다. 저 같은 경우는 웹을 전문적으로 하는 프로그래머가 아니기 때문에 따로 개발환경을 모르는데요. 전에는 Aptana studio3라는 프로그램을 사용했지만 다시 설치해서 사용하려고 하니까 정이 가지 않더군요. 물론 기능도 재대로 사용하지 못하고요. 그래서 이번에 새롭게 알아본 프로그램을 설치해서 진행하려고 합니다.

우연히 제가 많은 웹 개발 프로그램을 알아보다가 발견하게 바로 “Brackets” 입니다. “Brackets” 같은 경우는 Adobe에서 개발하고 무료로 배포하고 있는 개발도구 입니다. 무엇보다 웹 개발을 하는데 있어서 유용한 기능을 가지고 있고 가볍게 구동되기 때문에 개발을 하기에는 딱 좋은 프로그램입니다.

가장 큰 특징을 살펴보면, 일단 “실시간 미리보기” 기능이 있어서 파일을 수정하거나 변경된 내용들이 미리보기 창에서 즉시 반영이 되어서 보여집니다. 또한 HTML/CSS/JavaSript에만 집중을 했기 때문에 다른 개발도구와 다르게 가볍고 전문적입니다. 이외에도, 다양한 플러그인을 추가할 수 있고 SCSS/LESS 등을 지원합니다. 마지막으로 가장 큰 장점은 해외에서 개발된 툴이지만 “한글”을 지원한다는 점입니다.

무료 개발 프로그램 Brackets 설치 및 설정

무료 개발 프로그램 Brackets 다운로드 및 설치

그럼 설치를 시작해보겠습니다. 우선 위에 사진 혹은 아래 링크를 클릭해서 Brackets 공식 홈페이지를 접속해주세요.

◆ Brackets 공식 홈페이지 : http://brackets.io

홈페이지에 접속을 하면 위에 그림과 같이 “Download” 버튼이 보입니다.

파일을 받고 설치를 진행하면 됩니다. 직접 설치를 해보니 생각보다 간편해서 따로 과정을 적지 않을게요.

무료 개발 프로그램 Brackets 관리자 권한 실행 설정

프로그램 설치가 완료되면 그 다음은 프로그램 설정을 해야 합니다. 기본적으로 윈도우에서는 대부분이 사용계정 보완이 걸려 있습니다. 사용자 계정 혹은 보안을 낮추어 주거나 직접 프로그램 속성으로 이동을 하여 항상 “관리자 권한으로 프로그램 실행”을 설정합니다.

프로그램을 설치 후 실행을 하지 말고 “C:\Program Files (x86)\Brackets”로 이동을 해서 설정을 합니다. “Brackets” 실행 파일을 우 클릭해서 속성항목으로 간 후에 “호환성” 탭으로 이동을 합니다. “호환성” 탭 맨 아래를 보시면 “관리자 권한으로 이 프로그램 실행”이라는 박스를 볼 수가 있는데요. 체크를 한 후에 “확인”을 누르세요. 그 다음에 프로그램을 실행 해보겠습니다.

무료 개발 프로그램 Brackets 설정

웹 개발도구 “Brackets”를 열심히 찾아 본 결과 대부분의 사용자들이 2가지 플러그 인을 추천하더군요. 바로 “Emmet”과 “Beautify”입니다.

“Emmet”는 약속된 기호 및 형식을 이용하면 HTML 코드를 생성하는 플러그인입니다.

“Beautify”는 줄 바꿈이나 들여쓰기를 자동정렬해주는 플로그 인입니다.

시작할까요? 위에 사진을 보면 우측 맨 위에 번개 모양 아래 블록 같은 모양의 아이콘을 볼 수가 있습니다. 바로 플러그인 설치 장소입니다. 일단 블록 아이콘을 눌러주시면 위에 검색화면이 나타납니다.

“검색”에서 “Emmet”를 적고 검색을 하고 플러그 인이 나타나면 “설치”를 눌러 진행합니다.

두 번째로는 “Beautify”를 검색하고 파일 목록 중에서 가장 위에 있는 파일을 설치합니다.

설치를 마무리하며....

대학교 때에 개발을 하고 거의 기억도 나지 않을 정도의 시간이 지났는데요. 얼마나 잘 만들지는 모르겠지만 항상 시작이 반이라고 생각하고 있습니다. 물론 저의 개인적인 스킨을 위해서 시작하는 개발이지만 차후에 정말로 실력이 좋아지면 다른 분들에게도 도움이 되면 좋겠네요. 간간히 티스토리 스킨 개발에 관한 글도 작성할 예정입니다. 감사합니다.