About IDE

IDE에 대한 소개

여러분들은 혹시 IDE에 대해 들어보셨나요? 들어보신 분도 있고, 안들어보신 분도 있으실 것 입니다.

IDE란 Integrated Development Environment의 약자로, 우리말로 번역하면 통합 개발 환경입니다. 시중에 공개된 IDE는 그 종류만 수십가지가 넘으며, 그 중 대표적인 IDE로는 마이크로소프트 사의 Visual Studio, 이클립스 재단의 Eclipse, JetBrains사의 IntelliJ등이 있습니다.

하나의 응용(Application)을 개발하기 위해서 사용되는 언어는 IDE의 종류만큼이나 천차 만별이지만, 모두 한가지 공통점을 가지고 있습니다. 어느 언어를 막론하고 개발자는 언어에 맞는 적절한 IDE를 사용하여야 한다는 것 입니다.

사실 모든 소스는 텍스트 파일이므로 코드의 작성은 메모장으로도 가능하긴 합니다. 하지만! 개발 도구가 제공해주는 디버깅, 하이라이팅, 탐색 등의 여러 기능들은 개발자로 하여금 역량을 최대로 끌어낼 수 있도록 도와주기 때문에 현 시대에 있어 IDE를 사용하지 않고 단순 텍스트 에디터로 응용을 개발하는 것은 너무나도 비효율적인 행동입니다.

따라서 지금부터 본 글에서는 명품 웹 프로그래밍을 학습하는 독자들을 위하여 웹 개발에 최적화된 몇가지 IDE을 소개하고자 합니다. 반드시 이곳에서 언급하는 IDE들을 사용할 필요는 없습니다만, 여러 현업 종사자들의 의견을 종합하여 우수한 IDE를 소개하는 것이므로 되도록 아래의 IDE중 하나를 사용하는 것을 권고하는 바입니다.

참고로, 이곳에서 소개할 IDE는 텍스트 편집 기반의 개발 도구이며, 위지위그 편집기는 다루지 않습니다. 한 때 마크업을 손쉽게 할 수 있도록 도와주는 드림위버(Dreamweaver) 같은 위지위그 편집기가 유행하였으나, 자동으로 입력되는 코드들은 유연성과 효율성이 크게 떨어져 지금은 다시 하드코딩이 유행하고 있기 때문입니다.

내용이 방대한 관계로, 필요한 설명을 바로 찾아보실 수 있도록 링크를 걸어놓았습니다.

1. 서브라임 텍스트 (Sublime Text): 가볍고 강력한 개발도구. 편의기능을 모두 플러그인 형태로 분리함. 가장 보편적으로 사용되는 IDE

2. 비주얼 스튜디오 코드 (Visual Studio Code): 한글 완벽지원. 입문자가 사용하기 좋은 IDE

3. 아톰 (Atom): 내마음대로 튜닝이 가능한, 고급 개발자를 위한 IDE

1. 서브라임 텍스트 (Sublime Text)

서브라임 텍스트는 아주 가벼우면서도 강력한 개발 도구입니다. 시중에 배포되어있는 여타 IDE들이 기본적으로 제공하는 여러 편의 기능들을 모두 플러그인 형태로 분리시켰는데, 개발자는 내가 필요한 기능들만 확장하여 사용하면 되므로 매우 가볍고 강력한 나만의 툴을 만들 수 있습니다.

이와 같은 장점으로 인해 서브라임 텍스트는 국내, 외의 많은 개발자들이 이용하고 있으며, 기본적으로 하드 코딩을 겨냥하여 제작되었기 때문에 하드 코딩에 최적화된 다양한 편의 기능을 제공합니다. 가독성 향상을 위한 다양한 테마가 기본적으로 지원되고 있으며, 개발자 입맛에 따라 변경이 가능합니다. 단, 웹 개발에 발을 디딘지 얼마 되지 않은 초급자분들의 경우 서브라임 텍스트는 다른 IDE에 비해 사용이 다소 까다로울 수 있습니다. 운영체제의 경우 OS X, Windows 및 Linux등 다양한 운영체제를 지원합니다.

1) 다운로드 및 설치

현재 서브라임 텍스트는 Sublime Text2와 Sublime Text3, 두가지 버전으로 배포되고 있습니다. 2는 안정성이 보장된 정식 버전이고, 3은 다양한 신기능을 도입한 베타버전입니다. 3이 비록 베타 버전이긴 하나 우수한 기능들을 여럿 제공하고 있으므로 3의 사용을 추천합니다. 서브라임 공식 홈페이지에서 다운로드가 가능하며, 웹 페이지 중앙에 있는 Download for XXX(OS 이름)를 눌러 다운로드를 시작하고 설치를 진행하면 됩니다.

설치가 모두 완료됬다면 서브라임 텍스트를 실행해주세요. 그럼 아래와 같은 화면과 함께 서브라임 텍스트가 실행될 것 입니다.

↑ 그림 1 - 서브라임 텍스트 실행화면

2) 코드 작성

본격적으로 코드를 작성하기 위해서 제일 먼저 해야 할 작업은 워크스페이스 만들기 입니다. 워크스페이스는 작업 공간이라고 불리는 폴더이며, 앞으로 개발하는 프로젝트가 저장될 최상단 폴더입니다. 여러 프로젝트는 워크스페이스로 분류하여 관리합니다.

서브라임 텍스트는 워크스페이스(작업공간)와 하위 패키지를 만드는 방법이 따로 없습니다. 직접 폴더를 생성하여 계층 구조를 만들어야 합니다. 우선 원하는 경로에 워크스페이스 폴더를 만들어 주세요. 그 다음, File > Open Folder 메뉴를 선택하신 후 방금 만든 워크스페이스 폴더를 선택해주세요. 새로운 서브라임 텍스트 프로세스가 열릴텐데, 기존 프로세스는 닫아주시기 바랍니다.

여기까지 따라오셨다면, 아래 그림 2처럼 좌측 사이드바가 나타났을 것 입니다. 이제 이 폴더는 워크스페이스로 쓰이게 됩니다.

↑ 그림 2 - 워크스페이스 지정

다음은 하위 패키지를 생성할 차례입니다. 워크스페이스 폴더를 오른쪽 클릭하여 New Folder를 누릅니다. 서브라임 텍스트 창 하단에 Folder Name: 이라는 텍스트필드가 하나 나타나는데, 이곳에 사용할 패키지 이름을 입력하신 후 엔터를 눌러주세요. 그럼 이제 워크스페이스 하위에 패키지가 생성됩니다.

이제는 소스 파일을 생성해 봅시다. 생성한 하위 패키지를 오른쪽 클릭한 이후 New File을 눌러 새로운 파일을 생성해주세요. untitled라는 페이지가 하나 생성되는데, File > Save As... 혹은 Ctrl + Shift + S 단축키를 통해 다른 이름으로 저장을 합니다. 지금은 html 확장자로 저장하여 html 파일을 생성해봅시다. 파일의 이름은 이름은 마음대로 하셔도 좋지만, 서브라임 텍스트는 소스 파일의 확장자를 통해 사용 언어를 감지하고 편의기능을 제공하기 때문에 확장자는 꼭 알맞게 입력해주시기 바랍니다.

↑ 그림 3 - 소스 파일 생성

이제 웹 개발에 필요한 기초 준비가 모두 완료되었습니다. 소스 파일을 열고, html을 입력하고 tab키를 한번 눌러주시면 서브라임 텍스트가 html 개발에 필요한 기본태그를 자동으로 완성해줍니다. 다른 웹 프로그래밍 언어도 이와 같은 방식으로 생성하여 작성하시면 됩니다.

↑ 그림 4 - html 입력 (좌) / 그림 5 - html 입력 후 tab 키를 통해 기본태그 자동완성 (우)

최초 설치 상태의 서브라임 텍스트는 굉장히 가볍고 실행속도가 빠릅니다. 그러나 아무리 가벼운 것이 좋다고 해도 이 상태로는 메모장에서 개발하는 것과 거의 다름이 없으므로, 플러그인이라는 것을 추가로 설치해야 합니다.

3) Package Controller 설치

위에서 플러그인에 대해 잠깐 언급하였는데, 플러그인이란 무엇일까요?

플러그인이란 메인 프로그램에 추가되는 확장 기능입니다. 예를 들어 서브라임 텍스트의 기본 버전은 HTML 태그 작성시 여는 태그를 자동으로 닫아주는 기능이 없는데, 자동 태그닫기 플러그인을 설치함으로써 서브라임 텍스트에 태그를 자동으로 닫아주는 기능을 부여할 수 있습니다.

그렇다면 서브라임 텍스트에 플러그인을 추가하려면 어떻게 해야 할까요? 서브라임 텍스트는 패키지 컨트롤러라는 것을 통해 플러그인을 관리(추가/삭제)합니다. 패키지 컨트롤러는 플러그인 관리 외에도 많은 기능을 가지고 있지만, 우선 지금은 플러그인을 설치하기 위해 필요한 도구 정도로 기억해주시면 될 것 같습니다. 서브라임 텍스트의 기본 버전은 패키지 컨트롤러가 설치되어있지 않은데, 서브라임 텍스트의 사용을 위해선 반드시 설치되어야 하는 도구이므로 이것을 설치하는 방법에 알아보도록 하겠습니다.

우선, 서브라임 텍스트를 실행한 상태에서 Ctrl + ` 혹은 View > Show Console 메뉴를 선택하여 콘솔 창을 띄웁니다. 콘솔창은 서브라임 텍스트 프로그램 하단에 있는, 흰색 바탕에 검은 색 글씨가 적혀 있는 창입니다. 콘솔 창을 띄웠다면, 패키지 컨트롤을 소개하는 웹페이지에 접속하여 화면 중앙에 있는 Sublime text3 박스 내부의 코드를 전체 드래그 하여 복사해주세요.

↑ 그림 6 - View > Show Console (좌) / 그림 7 - Sublime text3 박스 내부 코드 복사 (우)

복사를 완료하셨다면, 다시 서브라임 텍스트로 돌아와서 콘솔창에 복사한 내용을 붙여넣으신 후 엔터를 눌러 명령을 실행합니다.

↑ 그림 8 - 콘솔 창에 패키지 컨트롤러 설치 명령어 입력

그럼 콘솔창에 입력했던 명령어 정보가 출력되면서 패키지 컨트롤러가 설치됩니다.

↑ 그림 9 - 패키지 컨트롤러 설치

그림 9처럼 콘솔 창에 정보가 출력된 것을 확인하셨다면, 서브라임 텍스트를 재실행 해주세요. 별도의 재실행 기능은 없으므로 종료하셨다가 다시 실행해주시면 됩니다. 서브라임 텍스트가 다시 실행되었다면 Preferences > Package Control 메뉴가 추가되었는지 확인해주시기 바랍니다. 이 메뉴가 추가되어있다면 정상적으로 패키지 컨트롤러의 설치가 완료된 것입니다.

패키지 컨트롤러를 설치하였으므로, 이제 플러그인을 설치하는 방법에 대해 알아보겠습니다.

4) Plug-in 설치

아래 그림 11은 아까 만든 index.html의 <body>태그 내부에 <p>태그를 입력한 것입니다. 보시다시피 닫는 태그는 자동생성되고 있지 않습니다.

↑ 그림 11 - 닫는 태그가 자동으로 입력되지 않음

이제 자동 태그 닫기 플러그인을 설치하여 서브라임 텍스트로 하여금 닫는 태그를 자동으로 생성하도록 해보겠습니다.

플러그인을 설치하기 위해선 먼저 패키지 컨트롤을 실행해야 합니다. Preferences > Package Control 혹은 Tools > Command Pallet 혹은 단축키 Ctrl+Shift+P를 통해 컨트롤 파레트를 열어주세요. 그 다음, 중앙에 나타나는 텍스트필드 내부에 Install Package을 입력해주시기 바랍니다. 여기까지 따라오셨다면 아래 그림 6과 같이 2가지 메뉴가 나타날텐데, 여기서 Package Control: Install Package를 선택합니다.

↑ 그림 10 - Install Package 입력

검색 창 내부에 Auto Close HTML Tags를 입력합니다. 하나의 플러그인이 검색될텐데, 클릭하여 설치를 진행합니다.

↑ 그림 11 - 플러그인 검색 및 설치

그럼 서브라임 텍스트 가장 하단에 설치의 진행을 알리는 메세지와 함께 자동으로 플러그인의 설치가 진행됩니다. 설치 진행 세부내용은 콘솔 창에 모두 기록됩니다.

↑ 그림 12 - 플러그인 검색 및 설치

조금 기다리시면 설치가 완료됩니다. Package Control Messages라는 텍스트 창이 하나 자동으로 열리는데, 이것은 방금 설치 완료된 플러그인의 소개, 사용방법, 라이센스 등이 기록되어 있는 텍스트입니다. 내용을 숙지하셨다면 닫아주시면 됩니다.

그럼 다시한번 <p> 태그를 입력해보도록 하겠습니다.

↑ 그림 13 - 닫는 태그가 자동으로 입력됨

이제 닫는 태그가 자동으로 입력됨을 확인할 수 있습니다.

방금 설치한 자동 태그 닫기 플러그인 이외에도 수많은 유용한 플러그인들이 있습니다. 그러나 이곳에서 일일히 언급하기에는 무리가 있으므로, 관심이 있으신 독자분들은 인터넷 검색을 통해 정보를 좀 더 찾아보시기 바랍니다.

2. Visual Studio Code

두번째로 소개할 도구는 마이크로소프트(Microsoft) 사의 비주얼 스튜디오 코드(Visual Studio Code)입니다.

아마 대부분의 개발자분들은 이름부터 생소하지 않을까 싶습니다. 빌드 2015 컨퍼런스에서 최초 공개 된 이후로 출시된지 채 2년도 지나지 않았고, 국내에서는 아직 다른 IDE에 비하여 거의 정보가 알려진 것이 없기 때문입니다.

비주얼 스튜디오 코드는 비주얼 스튜디오에서 코드 에딧 기능만 묶어서 만든 프로그램입니다. 비주얼 스튜디오는 풍부한 기능을 제공하기 때문에 프로그램이 매우 무거운데 비해 비주얼 스튜디오 코드는 코드 에딧과 디버깅 기능만 가지고 있어 훨씬 경량화 되었습니다. 한가지 반가운 사실은, 기존의 비주얼 스튜디오 패밀리들이 윈도우 환경에서만 서비스를 제공했던 것과 달리 다양한 운영체제를 지원한다는 것 입니다. MS가 프로그램을 크로스 플랫폼으로 내놓은 것은 비주얼 스튜디오 코드가 최초라고 합니다. 사실 하나의 OS에서만 사용할 수 있는 프로그램은 아무래도 대중성이 좀 떨어지기 마련인데 이번엔 타 플랫폼 사용 유저를 인식하고 개발한 것 같습니다.

비주얼 스튜디오 코드는 한글을 완벽하게 지원합니다. 웹 개발 도구는 대부분 한글을 지원하지 않는데 영어로 된 메뉴와 설명들이 불편하셨다면 이 에디터를 적극 추천합니다. 웹 개발에 입문하시는 개발자분들이 사용하기 가장 좋은 에디터가 아닐까 생각됩니다.