요즘 개발자들.. 특히 프론트엔드 개발자에게 인기를 끌고 있는 개발툴인 서브라임텍스트를 설치하고 난 다음 기본적으로 설치해야 하는 프러그인와 세팅방법을 포스팅 하려고 합니다.

서브라임텍스트 설치

서브라임텍스트는 현재 안정버전인 Sublime Text 2 버전과 베타 버전인 Sublime Text3 가 있습니다.
저는 앞으로 Sublime Text 3을 사용할 것이므로 이것을 설치하겠습니다.
먼저 해당 사이트에 접속을 해서 윈도우용 서브라임텍스트를 다운받아 설치합니다.

설치는 그냥 설치하라는데로 설치하면 문제 없습니다.

기본 설정하기

설치를 하고나면 “어.. 이게 뭐야” 라고 할정도로 아주 단순한 검정화면만 나옵니다. 마치 윈도우 메모장의 블랫버전 같습니다.
그러나 숨어있는 기능은 정말 어마어마합니다. 그래서 이 서브라임에디터를 사용하는 사람이 그렇게 많은 것입니다.

PACKAGE CONTROL 설치

먼저 패키지 컨트롤러를 설치해야합니다. 패키지 컨트롤러는 수많은 서브라임텍스트의 서드파티나 플러그인 프로그램들을 편하게 설치할 수 있게 해주는 기능을 합니다.

https://sublime.wbond.net/installation#st3 에 접속하면 설치하는 코드가 버전별로 있습니다.

  1. 먼저 Sublime Text Console 을 엽니다. (단축키: Ctrl+`, 메뉴: View > Show Console menu)
  2. console 에 아래의 내용을 복사 합니다.
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

  1. 재부팅을 합니다.

PACKAGE 설치하기

이제는 패키지컨트롤러를 이용해서 패키지를 설치하는 방법입니다. 패키지 종류만 다를뿐 모든 패키지에 공통적으로 사용되어지는 방법입니다.

  1. Sublime Text Command Pallet를 엽니다. (단축키: Ctrl-Shift-P, 메뉴: Tools > Command Pallet)
  2. install를 입력하면 해당 글자가 포함된 명령어의 리스트가 나오는데 이때 Install Package 선택 합니다.

  3. Package Control 창에 설치할 패키지명을 입력하고 설치합니다. 여기서는 emmet을 선택하여 설치합니다.

기본 환경설정

기본적으로 보기좋게, 사용하기 좋게 하기 위한 기본설정입니다.

Preferences > Settings-User

{
    "bold_folder_labels": true,
    "caret_style": "phase",
   "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
    "draw_minimap_border": true,
    "draw_white_space": "none",
    "fade_fold_buttons": false,
    "font_face": "Consolas",
    "font_size": 11,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Markdown",
        "Vintage"
    ],
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    "save_on_focus_lost": false,
    "tab_size": 4,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true
}

기본 설치 플러그인 종류

BracketHighlighter

Preferences > Package Settings > Bracket Highlighter > Bracket Setting-user

{
    "bracket_styles": {
        "angle": {
        "color": "entity.name.class",
        "style": "outline"
        },
        "tag": {
        "color": "entity.name.class",
        "style": "outline"
        },
        "default": {
        "color": "entity.name.class",
        "style": "solid"
        }
    }
}

SideBarEnhancements

SFTP

  • URL : http://wbond.net/sublime_packages/sftp
  • 서브라임텍스트와 같이 성장했다고 할 수있는 대표적인 플러그인이다.
  • 개발자 입장에서 SFTP에 한번 사용해봤다면 다른 FTP프로그램은 불편해서 사용할 수 없게 만드는 마성의 매력을 가지고 있다.
    사용법이 생소해서 처음 이해하기는 조금 어려울 수 있으나 학습해서 익힐만한 충분한 가치가 있다.

DocBlockr

  • URL : https://github.com/spadgos/sublime-jsdocs
  • javascript등 문서에 주석을 효율적으로 달 수 있다. 프로 프로그래머라면 주석은 착실히 달아야 한다.
  • /** 입력하고 Enter를 치면 주석이 자동으로 달린다

AutoBackups

  • URL : https://github.com/akalongman/sublimetext-autobackups
  • 이름에서도 알수 있듯이 편집하고 있는 문서에 대해서 자동으로 백업을 해주는 플러그인 이다.
    프로라 할지라도 편집하다 날려먹으로수도 있으니 꼭 Backup하는 습관을 들이자. 그것이 힘들다면 Auto의 힘을 빌려도 된다.

SublimeCodeIntel

  • link : https://github.com/SublimeCodeIntel/SublimeCodeIntel
  • 웹 에서 쓰이는 대부분의 언어(JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP)에 대해서 변수를 찾아주는 기능을 한다.
  • 변수명에 대고 ALT+Click 또는 CTRL+F3 을 누르면 변수가 지정되어 있는 파일로 자동으로 이동해 준다.
  • ctrl + j 키를 누르면 심볼로 이동한다.

SublimeLinter

  • URL : https://github.com/SublimeLinter/SublimeLinter
  • 코딩할때 실시간으로 문법을 검사해 준다. 초급때 문법을 개을리 했었다면 이 플러그인을 설치하는 것이 쪽팔림을 방지 할 수 있다.
  • 해당기능을 사용하기 위해서는 먼저 node.js가 설치 되어 있어야 한다.

프론트엔드 개발을 위한 플러그인 종류

Emmet

  • URL : https://github.com/sergeche/emmet-sublime
  • ZenCoding을 아시는가? ZenCoding이 발전하여 Emmet이 되었다고 보면 된다. 간단한 단축키를 사용하여 효율적인 코딩이 가능하다.
    약간의 규칙만 익히면 높은 생산성의 코딩이 가능하다.

Prefixr

HTML-CSS-JS Prettify

FuzzyFilePath

  • URL : https://packagecontrol.io/packages/FuzzyFilePath
  • 이미지나 파일의 경로를 자동으로 알려주는 플러그인
  • Ctrl+Alt+Space : inserts filepaths relative, overriding possible settings
  • Ctrl+Shift+Space inserts filepaths absolute, overriding possible settings


출처: http://jos39.tistory.com/243 [JOS39 블로그]

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% 활용하시는 분들이 있기 마련이지만요 :)
단점을 적고 보기 디자이너 입장에서 본다면 단점이 아닐수도 있겠네요!

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

태그 쓰기 목록

LOGIN

SEARCH

MENU NAVIGATION