ATOM이란?

ATOM은 Github에서 제작하여 배포하는 opensource TextEditor이다. 현재 주로 사용되는 비슷한 툴중에는 Sublime Text, Visual Studio Code, Brackets 등이 있다. 모두 주로 프론트 엔드 프로그래밍에 쓰이는 녀석들인데, NodeJS가 뜨면서 현재는 사용도가 많이 늘어난 툴이다. 먼저 각각의 특징을 살펴보자.

1. Sublime Text

TextEditor 중에는 꽤나 역사가 깊은 녀석이다. Python기반으로 구현되어 있으며 역사가 깊은 만큼 많은 플러그인들이 있다. 기본적으로는 유료툴이라는게 단점이다. 국내에서는 TextEditor 중에서는 꽤나 사용자 층이 두터운 편이라고 할 수 있다.

2. Visual Studio Code

이름에서 보면 알듯이 마이크로소프트사에서 만든 TextEditor이다. ATOM과 마찬가지로 Electron기반으로 구현되었으며, 나름 마이크로소프트의 푸쉬로 많이 성장한 상태이다. 거기다가 C++/C# 언어지원이 다른 TextEditor보다는 빵빵한 편이다. 마이크로소프트 답지 않게 맥과 리눅스도 지원하며 에디터 자체도 오픈소스 이다. extension도 나름 많이 확보하였다.

3. Brackets

Adobe에서 제작한 TextEditor이다. Adobe사에서 제작한 만큼 PhotoShop과의 연동이 가장 큰 장점이다. 또 다른 장점으로는 자체적으로 라이브로드 기능을 지원한다는 점. 하지만 왠지 이런저런 경쟁에서 밀리는 편이다. 의외로 TextEditor비교글에서 언급도 안 되는 경우도 많을 정도. 사실 지원기능을 볼 때 프론트단 프로그래밍보다는 퍼블리싱에 더 어울리는 느낌이다. 다만 현재 프론트단도 React나 Angular가 붙으면서 이게 어울리지는 의문이지만.

4. ATOM

위에서 적었듯이 Github에서 제작한 녀석이다. Visual Studio Code와 마찬가지로 Electron기반으로 이루어져 있다. ATOM은 플러그인을 Package로 칭하는 데 역시 꽤나 많은 Package가 있다.

그래서 왜 ATOM인가?

사실 각각의 TextEditor에 우열을 가리기란 힘들다. 어차피 확장프로그램의 경우 대부분 비슷하게 지원되고 있으며, 이런저런 필요한 확장프로그램을 깔다보면 비슷해진다. 다만 내가 ATOM을 쓰는 이유는 일단 무료이며 Visual Studio Code보다 확장 프로그램 지원이 빨랐기에 쓰게 되었다. 어차피 자기에게 맞는 툴을 사용하는 게 가장 좋을 것이다.

ATOM의 추천 패키지들

말이 추천 패키지들이지 사실 내가 쓰는 패키지들이다. 이 외에도 찾아보다보면 많은 유용한 패키지가 있기에 한번 찾아보고 사용해보길 추천한다.

1. Activate Power Mode

ATOM 패키지의 알파이자 오메가이며 엄청난 다운로드 수를 자랑한다. 심지어 Package Install 페이지에서 가장 위에 자리한다! 기능은 타이핑을 하면 화면이 흔들리고 파티클이 뿌려진다. 그게 전부이지만 메마른 여러분의 개발에 한줄기 다이나믹함을 제공한다. 다만 화면이 흔들리는 기능을 쓰다보면 멀미가 올 수 있으므로 어지러우면 설정에 들어가서 화면흔들림 옵션을 끄자.

2. JSHint

javascript의 문법을 체크해준다. 이 패키지를 깔면 후두둑 뜨는 빨간줄에 맨붕을 하거나 “이 패키지는 해로운 패키지다.”라는 생각을 하거나 둘중에 하나일 것이다. 의외로 문법 체크를 까다롭게 하지만 익숙해지면 빨간줄이 거의 없는 코딩을 할 수 있다. 다만 React의 경우 기본적으로 DOM구문에서 빨간줄을 뱉어내는데 이는 설정에서 jsx지원에 체크해주면 해결할 수 있다. 그리고 es6문법 또한 기본적으로 지원되지 않는데, 이는 프로젝트에 .jshintrc 파일을 만들어서 설정해주면 된다.

3. Terminal-Plus

어떻게보면 현재 프론트단 개발에 필수적인 패키지지만, Windows에서 제대로 지원이 안 된다. 기능은 터미널을 따로 띄울 필요없이 ATOM에 터미널을 사용할 수 있는 패널을 만들어준다. 화면어지럽게 따로 터미널 화면을 띄우지 않고 ATOM화면 내에서 터미널 명령을 처리할 수 있다는 점에서 아주 유용한 패키지이다.

4. Emmet

ATOM용 Emmet 패키지다. HTML DOM을 작성할 때 일일이 DOM을 적어줄 필요없이 간단한 구문으로 DOM을 자동생성 해준다. 데모는 여기를 참조하자. HTML DOM구문 작성을 할때 타이핑을 줄여줌으로써 여러분의 손가락의 건강을 지켜주는 고마운 패키지이다.

5. PlantUML Viewer

PlantUML을 작성할 때 미리보기를 하는 패널을 보여준다. PlantUML은 UML다이어그램을 그리는 Language 중 하나인데, 텍스트로 치다보니 미리보기가 없으면 일일이 빌드해가며 확인해야 되는 불편함이 따른다. 그러므로 이 패키지를 깔면 작성이 꽤나 편해진다.

6. JavaScript Snippets

자바스크립트의 스니펫을 제공한다. 예를들어 cl을 치면 console.log가 찍히는 식이다. 가끔씩 억지로 스니펫이 먹혀 원하는 코드를 칠 때 불편한 점도 있지만 많이 편한 점도 있다. 역시 여러분의 손가락 건강을 위해 까는 걸 추천한다.