Atom Editor 아톰 에디터 설치 및 설정

Atom Text Editor (아톰 텍스트 편집기) 설치 및 설정 편입니다.

웹 개발을 하고 싶어서 HTML과 CSS를 공부하기 시작했는데 코드들을 간편하고 빠르게 작성하기 위해 텍스트 에디터 (문서 편집기) 들을 둘러보던 중 Atom Text Editor가 눈에 띄었습니다. 아톰 에디터를 사용해보았는데요, 편리한 기능들을 제공하고 심플하면서 디자인도 좋은 에디터인 것 같았습니다. 지금부터 아톰 에디터 (이하 아톰) 설치 및 설정 방법을 알려드리겠습니다. 

[Atom 소개]

아톰은 편리한 텍스트 작성을 위해 Github에서 만든 프로그램입니다. 아톰 홈페이지의 소개를 보면 

"Atom is a text editor that's modern, approachable, yet hackable to the core-a tool you can customize to do anything but also use productively without ever touching a config file." 

(출처: atom.io 메인 페이지) 

이라고 되어있습니다. 현대적이고 사용하기 쉽고 동시에 원하는 데로 조작할 수 있는 강력한 에디터입니다. 아톰의 장점들을 꼽아보자면, 무료로 사용할 수 있고, 심플하고 직관적인 UI와 다양한 패키지들이 있습니다. 아톰은 가볍지만 다양한 플러그인/패키지들을 제공하기 때문에 강력하고 효과적인 툴로 사용하실 수 있습니다. 또한, HTML, CSS, JavaScript 같은 웹 기반 언어로 구현이 되었기 때문에 이런 웹 기술들을 배우면서 직접 원하는 것들을 쉽게 수정할 수 있습니다. 

[Atom 설치]

먼저 아톰 홈페이지 https://atom.io/로 들어가세요

▲ 이렇게 홈 화면이 뜹니다. 빨간색 버튼으로 되어있는 Download Windows Installer를 눌러주세요. 그러면 AtomSetup.exe 파일을 다운로드 받게 됩니다. 실행시켜서 아톰을 설치해주세요. 

▲ 이런 화면이 뜨면서 자동으로 설치가 완료됩니다.

[Atom 설정]

▲ Atom을 실행하시면 이렇게 시작화면이 뜹니다. 바로 Choose a Theme (테마 고르기)나 File ▶ Setting ▶ Themes 로 가시면 아톰의 테마를 변경하실 수 있습니다. UI Theme과 Syntax Theme에서 원하시는 테마를 조합하시면 됩니다. 마음에 드는 테마가 없으면 Setting ▶ Install 로 가셔서 패키지 검색 창 옆에 있는 Themes 를 누른 다음에 인기 있는 테마를 다운로드 받으시거나 직접 검색하셔서 찾으시면 됩니다. 

▲ Setting ▶ Packages 로 가면 설치되어있는 패키지들을 확인하실 수 있고 설정을 바꾸고 필요 없는 기능들은 비활성화시키거나 삭제시키실 수 있습니다. Setting ▶ Install 로 가셔서 검색 창 옆에 Packages를 누르시면 인기 있는 패키지들을 다운로드 받을 수 있고 원하는 패키지를 검색하셔서 설치할 수 있습니다.

[추천 패키지]

아톰을 처음 설치하시면 기본 패키지들과 함께 설 됩니다. Ctrl + \(역슬래쉬 키) 를 누르면 왼쪽에 디텍터리 구조를 볼 수 있게 해주는 창도 기본적으로 설치 되어있는 tree-view 패키지입니다. 이렇듯 패키지들을 설치하시면 가벼운 아톰 에디터를 강력한 툴로 변하게 할 수 있습니다. 그중에서 인기 있고 아주 간편한 패키지 몇 개를 소개해 드립니다.

• Emmet: 웹 개발을 위한 강력한 툴인데요, 간편한 자동완성은 물론이고 수식을 조합해서 반복적으로 입력해야 하는 코드를 한 줄로 완성 시킬 수 있습니다. http://docs.emmet.io/로 가시면 Emmet에 대한 사용법이 자세히 나와 있습니다. ▼

!를 입력한 후 tab 키만 누르시면 위처럼 기본적인 HTML 템플릿이 생성됩니다.

• Minimap: 코드가 아주 길어질수록 줄이 많아집니다. 이런 경우 어느 위치에서 코딩하는 지 알기 쉽지 않은데 Minimap을 설치하시면 오른쪽에 코드들이 아주 작게 적혀있고 해당 위치가 표시돼서 마치 코드들의 지도를 보는 것처럼 사용할 수 있습니다. ▼

• Linter: 코드를 작성하다 보면 오타들이나 문법적 오류들이 생기는 데요, 이런 실수를 할 때마다 Linter 패키지가 오류가 있는 부분을 가리키고 어떤 문제가 있는지 알려줍니다. Linter 패키지를 설치한 후 원하시는 프로그래밍 언어에 해당하는 패키지를 추가로 설치하시면 됩니다. (예: Linter-htmlhint) ▼

이외 여러 가지 패키지들이 있으니 마음에 들고 실용적인 패키지들이 있으시면 설치하셔서 마음껏 사용하시면 됩니다.

출처: http://plainthought.tistory.com/10 [PLAIN THOUGHT]