atom editor (아톰 에디터) 설치 가이드 | HTML 기본 플러그인 설치 (에밋(emmet) 외

이 문서는 웹개발을 위한 텍스트 에디터 아톰을 설치합니다.

설치 후 웹페이지를 개발하기 위한 기본 확장 프로그램(플러그인 패키지) 3개를 설치하고 테스트를 해보겠습니다.

설치 환경은 윈도우10입니다.

아톰은 다양한 프로그래밍을 할 수 있는 IDE 로 비주얼 스튜디오 코드와 함께 많은 프로그래머들이 사용하고 있습니다. 또한 깃허브에서 제작한 오픈소스 무료 소프트웨어 입니다.

바로 아톰 웹사이트에 접속해서 다운로드 합니다. 2020년 12월 현재 1.53 버전이네요.

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

용량은 180메가 정도 되고 64비트 용입니다. 파일을 실행하면 설치가 진행됩니다. 별다른 옵션을 설정할 필요가 없으니 설치 과정이 수월합니다.

처음 실행하면 팝업창이 하나 뜨는데 Yes를 클릭해줍니다. Atom 안에 탭들이 몇게 열려있습니다. 지금은 필요하지 않으니 이 패널들을 모두 닫아 둡니다.

File 메뉴에 Open Folder 를 열어서 프로그래밍에 사용할 폴더를 선택합니다. 폴더는 적당한 위치에 새로 생성합니다. 여기서는 Programming\Atom 이란 폴더를 만들었습니다.

이제 추가 패키지들을 설치할 차례입니다. 추가 패키지들은 Atom 안에서 코딩을 쉽고 편하게 해주는 다양한 기능을 가진 확장 프로그램입니다.

1. 첫번째로 설치할 것은 웹개발자들에게 핵심적인 도구인 에밋 emmet 입니다. file -> setting 를 열고 +install 을 클릭 한 다음 emmet 으로 검색합니다. 380만회나 다운로드 된 것을 볼 수 있습니다. Install 버튼을 누릅니다.

emmet 은 HTML 과 CSS의 작성 시 자동완성 기능을 제공합니다. 자동완성에 대하여는 패키지의 설치를 끝내고 알아 보겠습니다.

2. 다음은 atom-html-preview 입니다. HTML 파일을 작성하고 파일을 열어볼 필요없이 atom 에서 실시간으로 결과를 확인할 수 있습니다. 160만회나 다운로드 받았다는 것은 전세계의 많은 사람들이 사용한다는 의미입니다. 마찬가지로 Install 버튼만 누르면 설치가 됩니다.