Atom 유저로서 패키지를 쓰고는 있는데, Sublime 쓰던 시절에는 블로그에서 여러 사람들의 추천패키지를 검색해서 쓸 수 있었던 반면 Atom 패키지에 대해서는 글을 찾기가 어려워 곤란함을 느꼈기에, 어느정도 사용에 익숙해졌으니 제가 직접 씁니다. 패키지 추천만 하면 (제가) 재미 없으니 잡설부터 들어갑니다. 아래부턴 구어체로…

잡설

얼마전까지만 해도 나는 sublimeText의 골수 유저였다. 처음 업계에 발 담글 때부터 사용해서, 처음 이직했을 때는 정품 라이센스도 구매했다. 회사에서 intelliJ로 서버도 띄우고 그래들 돌리고 걸프 돌리고 다 하지만, 도무지 익숙해지지 않는 UI와 어딘지 느리고 불편한 기능들 때문에 여전히 IDE 계열 툴은 서버 돌리는 용도 외엔 건드리지 않고 있다. (자랑은 아님)

그런데 회사에서 reactJS를 사용하게 되면서부터는 sublimeText가 자꾸만 불편하게 느껴지기 시작했다. 소괄호를 열고 엔터를 누르면 자동으로 indent가 소괄호 위치로 가있어서 다시 원하는 위치로 옮기는 일의 반복이었고, go to definition 기능이 있긴 하지만 이를 위한 검색 인덱싱에 시간이 너무 오래 소요되는 등등.

아무리 익숙한 툴이 제일이라지만, 익숙함을 넘어설만큼 짜증이 느껴질 때면 다른 툴을 찾아 나서는 것은 개발자의 숙명일까. 틈만 나면 가벼운 textEditor를 찾아 헤매기 시작했다. Brackets, Virtual Studio Code, Atom, Sublime Text 네 가지를 번갈아 쓰면서 어떻게든 Sublime Text를 벗어나기 위해 애를 썼다.

점점 각각의 툴에 익숙해지면서 사용빈도가 달라지고, 결국에는 Atom이 승리했다. 일단 Brackets는 어떤 명령이든 느릿느릿 수행하다가 뻗기 일쑤여서 성질만 자꾸 버렸다. VS Code는 프로젝트를 하나만 설정할 수 있다보니 여러가지 프로젝트를 왔다갔다 하기 힘들었고, 생각보다 패키지도 많지 않아 딱 원하는 기능을 찾지 못하는 경우가 잦았다. 한편 Atom은 업데이트가 매우 자주 일어나서 업데이트될 때마다 새로 적용된 기능에 깜짝깜짝 놀랐는데, Atom 자체 업데이트 못지 않게 커스텀하게 설치한 패키지들의 업데이트도 자주 이뤄져서, 확실히 흐름을 탄 것 같은 인상을 받았다(Atom Release Note - 지난 8월부터 마지막 업데이트인 9월 7일까지만 보자면, beta버전을 제외하고도 평균 3일에 한 번씩은 업데이트가 진행되었다). ‘SublimeText도 한참 업데이트를 자주 하던 시절이 있었는데, 그 시절엔 참 에디터 쓸 맛 났는데…’ 하는 생각이 들고 나니, 이제는 더 고민할 필요도 없었다. Sublime에 작별을 고하고 Atom으로 온전히 옮겨갔다. 이 때가 8월 중순 경이었다.

9월 7일 1.10.2 버전을 끝으로 현재까지 더이상 업데이트가 이뤄지고 있지 않지만, 바꿔 생각해보면 이제 어느정도 안정궤도에 올랐다는 뜻이기도 하다. 사실 7월 말까지만 해도 코딩을 하던 중간중간 언제 튕길지 모를 불안감이 늘 있었는데, 지금은 그런 걱정은 전혀 들지 않는다. 무심코 cmd-Q를 눌러 종료해도 다시 열면 예전 상태를 그대로 보존하고 있을 뿐 아니라, Project Plus 패키지를 설치하면 여러 프로젝트를 왔다갔다 해도 각 프로젝트의 현재상태를 정확히 재현해주며, 심지어 이전 프로젝트의 history까지 기억해서, 프로젝트를 넘나들면서 cmd+Zcmd+shift+z를 남발할 수도 있다! 이거 하나만으로도 이미 Atom을 쓸 가치가 차고 넘치지만, 그밖에도 훌륭한 패키지가 많다.

Atom?

아톰은 코딩, 디버그, 컴파일, 배포 등을 모두 수행하는 통합개발툴(IDE, Integrated Development Environment)은 아니고, 오직 코딩만을 위한 text editor이다. GitHub에서 제작하였으며, 2014년 12월부터 개발되어 2016년 9월에는 안정화 단계에 진입했다. Sublime Text처럼 패키지들을 개별적으로 설치하거나 삭제할 수 있고, 심지어 Atom의 코어기능도 패키지들로 구성되어 있어 이들에 대해서도 on/off할 수 있는 등, 커스터마이징의 자유도가 매우 높다. 2016년 10월 현재 등록된 패키지 및 테마의 수가 무려 5000개로, ‘이런 기능이 있으면 좋겠다’ 싶은 것들은 검색만 잘 하면 얼추 비슷한 패키지를 찾을 수 있을 만큼 패키지 제작 참여가 활발히 이뤄지고 있다.

패키지 추천

정말 좋은 패키지만 엄선해서 추천하는것보다, 그냥 내가 쓰는 패키지가 무엇무엇인지 전부 소개드리는 편이 낫겠다 싶어 a-z 순으로 전부 소개한다.

aligner

key - value 정렬을 해준다. align 관련해서는 다른 패키지도 많은데 이 패키지가 커스터마이징에 가장 용이한듯.

aligner

atom-beautify

코드를 예쁘게 정렬해준다. 지원언어가 엄청 많으며, 각 언어별로 커스터마이징도 할 수 있다.

요런걸
atom-beautify1

요렇게!
atom-beautify2

atom-ternjs

javascript 자동완성기능을 제공하는데, ES6, Node.js, jQuery, AngularJS 문법까지 지원한다.

auto-detect-indentation

아톰은 setting -> packages -> [language XXX] 에서 각 언어별로 탭사이즈를 지정할 수 있는데, 거기서 지정한 탭사이즈가 곧 Tab키를 눌렀을 때 몇 칸을 띄울건지를 의미하진 않고, Tab키에 의해 벌어질 간격은 setting -> Editor -> Tab Length 에서 지정한 길이가 모든 파일에 적용된다. 예를 들어 Editor의 Tab Length를 4로 설정했다면, language CSS의 Tab Length를 2로 설정해도 Tab키를 누르면 4칸이 띄워진다. 읭? 싶은데, 이 패키지가 그 아쉬움을 해소해줌. 언어마다 탭 사이즈를 자동으로 파악해서 세팅해준다.

근데 그걸로 끝이 아님. 서브라임은 기본적으로 indentation 방침을 변경할 수 있는 메뉴가 우측 하단에 존재했는데 아톰엔 그게 없다. 이 패키지를 설치하시면 우측 하단에 탭사이즈 및 Space인지 Tab인지를 표시해주고, 누르면 바꿀 수 있다.

column-select

서브라임에서처럼 여러줄을 동시에 선택할 수 있게 해준다. 이런 기능이 없으면 작업 능률이 현저히 떨어지는데, 의외로 이 기능을 구현 안해놓은 에디터가 많아서 서브라임을 쉽게 놓지 못했던 시절이 있었다. 사용법은 ctrl+shift+up / down이다. 미리 블록을 잡은 다음에 위아래로 움직이면 해당블록만큼 위쪽/아래쪽의 영역이 함께 선택된다.

column-select

emmet

설명이 필요 없을 듯.

git-control

프로젝트별로 git을 gui로 관리할 수 있다. 아쉬운 점이라면 badge표시가 안됨.

git-control

git-time-machine

현재 파일에 대한 git history를 볼 수 있다. 생각보다 유용함.

git-time-machine

goto-definition

현재 커서 위치의 함수/메소드가 정의된 위치로 이동한다!

go-to-definition

goto-last-edit

마지막으로 수정한 위치로 커서를 이동시켜준다.

highlight-line

현재 작업중인 줄의 배경색을 바꿔준다.

highlight-line

highlight-selected

선택된 내용과 일치하는 내용들을 highlight 해준다.

highlight-selected

language-babel

JavaScript, ES2015, ES2016, ESNext, JSX 문법 패키지

language-markdown

markdown 문법 패키지

markdown-preview-plus

markdown 미리보기. 단축키를 누르면 우측패널에 미리보기가 토글된다. 미리보기패널이 열려있는 상태에서는 md파일 수정중에 저장시마다 미리보기 내용이 자동으로 refresh된다. 수식도 표현 가능한 것 같은데 써볼 일이 없어 모름.

markdown-preview-plus

markdown-writer

markdown에 이미지 삽입 / 테이블생성 등을 좀더 편리하게 할 수 있게 도와준다.

markdown-writer

minimap

서브라임처럼 우측에 미니맵을 보여준다.

minimap-cursorline

미니맵에 현재 커서의 위치를 표시해준다. 색상변경도 가능.

minimap-hide

포커스된 패널만 미니맵을 보여준다.

open-in-browser

그냥 브라우저에 띄워주는 용도.

open-terminal-here

Atom 안에 터미널 띄우는거 다 써봐도 생각보다 제대로 동작하는게 많지 않아 개인적으로 아직까지는 그냥 현재폴더에 대해 별도로 터미널 앱을 실행해주는 게 제일 낫다. 우측패널로 띄우거나 하단에 터미널 탭을 생성하는 편이 좋은 분들은 다른 패키지를 검색해보시길.

pigments

색상에 관련한 정보가 있으면 그 줄에 색상을 표시해주는데, 표시 방법이 다양하다. 팔레트를 열어 색상 선택할 수도 있고, 프로젝트 내의 색상정보를 한데 모아서 볼 수도 있다!! 굉장한 패키지.

pigments

project-plus

아톰을 쓰면서 가장 만족하는 패키지. 강추! 패키지를 설치하면 여러 프로젝트를 왔다갔다 해도 각 프로젝트의 현재상태를 정확히 재현해주며, 심지어 이전 프로젝트의 history까지 기억해서, 프로젝트를 넘나들면서 cmd+Zcmd+shift+z를 남발할 수도 있다.

project-plus

seti-icons

트리바 아이콘 그림 표시

seti-icons

sublime-block-comment

1
/* */

요런 주석처리를 토글해준다. 이게 당연한 것 같은데 찾는 패키지마다 전부 생각대로 동작하지 않길래 이 패키지를 찾는데 한참 걸렸었던 기억이…

swackets

요건 개인적으로 짱 맘에 드는데, 사실 있어도 그만 없어도 그만인 거긴 함..
기능은, 매칭되는 중괄호 세트별로 각각 다른 색상을 부여해서 표시해줌. 말그대로 스웩

swackets

sync-settings

atom의 설정파일을 gist에 백업하거나 복원한다. gist 설정이 좀 귀찮은데, 혹시라도 생길 위험에 대비해서 한 번 설정해두면 좋은 듯.

마치며

아톰 쓰세요 여러분~! 좋은 패키지 있으면 추천좀 해주세요~~ 끗