[웹] HTML/CSS #3 :: 시작하기-웹 에디터

HTML과 CSS를 하기 위해 무엇부터 해야할까. 우선 에디터가 필요하다. 우리말로는 편집기다. 사실 아마 윈도우를 사용하는 사람 대부분은 에디터를 사용해봤을 것이다. 가장 대중적인 에디터는 메모장. 여러분이 아는 바로 그 메모장이다. 물론 웹 개발자들에게 대중적인 에디터는 아니다. 웹 개발자들은 좀 더 편한 에디터를 쓴다. 메모장으로 충분히 훌륭한 코딩이 가능하지만 다른 에디터를 쓰는 이유는? 편하니깐. 다른 툴을 쓴다고 실력이 떨어지고 메모장을 쓴다고 실력이 좋은 건 아니다. 그냥 다른 툴들이 작업시간을 훨씬 줄여주는 여러 기능을 갖고있을 뿐이다. 만약 웹 에디터로 코딩을 할 수 있지만 메모장으로 못하는 사람이 있다면 실력이 떨어진다고 볼 수 있긴 하다. 하지만 실력이 좋은 개발자라고 메모장을 쓰진 않는다. 왜? 다른 게 더 편하니깐.

따라서 웹 에디터를 설치하는 일이 HTML과 CSS를 공부할 때 가장 먼저 해야할 일이다. 웹 에디터가 주는 편의 기능 중 대표적인 것은 자동 완성이다. 자동완성에도 여러 종류가 있는데 그 중 대표적인 것이 emmet. 툴에 따라서 기본 옵션이기도 하고 별도 플러그인을 설치해야 하는 경우도 있다. 이 emmet을 설치하면 작성해야 하는 코드의 양이 반 이상 줄어든다. 기본적으로 HTML에는 여는 태그와 닫는 태그라는 것이 있다. 여는 태그로 지금부터 ~~~ 내용을 지정하고 닫는 태그로 ~~~ 내용은 여기까지야 라고 알려준다. 즉 같은 태그를(모양은 살짝 다르다) 두 번 써야 한다. 또 HTML 태그는 꺽쇠라고 하는 <> 모양으로 둘러쌓여 있다. 즉 <를 쓰고 태그 이름을 쓰고 >를 써야 한다. emmet을 활용할 경우 태그 이름만 쓰고 탭 키를 누르면 자동으로 꺽쇠와 닫는 태그까지 만들어준다. 처음에 직접 손으로 날코딩을 하다가 이 emmet을 활용하면 정말 놀라울 정도로 편하다.

또 다른 자동완성은 태그를 찾아주는 것. i만 입력하면 아래에 img라든가 다른 i로 시작하는 태그들을 알려준다. CSS에서는 bo만 입력해도 border, border-bottom, border-top 등의 태그를 알려주고. HTML 태그와 CSS 속성은 엄청 많기 때문에 이걸 다 외우는 건 은근히 번거롭다. 대충 어떤 기능이 있는지 정도만 알고 실무를 통해 자연스럽게 암기하는 것이 훨씬 효율적인 길. 에디터는 이걸 도와준다.

자동완성 말고 다른 편의기능이라면 문서의 구조화다. 태그, 속성 등을 색상으로 구별해 HTML 코드를 한 눈에 파악하기 쉽도록 도와준다. 또 아까 여는 태그와 닫는 태그가 있다 그랬는데 실무에서는 태그 안에 태그 안에 태그가 있기도 하다. 때문에 이 태그가 어디까지인지, 즉 닫는 태그가 어디있는지 찾기 어려울 때가 많다. 대부분의 에디터에서 태그를 클릭하면 이에 상응하는 닫는 태그를 찾아준다. 구간 파악을 용이하게 할 수 있다. 오타나 문법 오류를 찾아주기도 한다. 플러그인을 설치하면 더 다양한 기능을 제공하긴 하는데 난 딱히 사용하는 게 없어서 잘 모르겠다.

여기서는 웹 에디터라고 표현했지만 딱히 웹 전용 에디터가 있는 건 아니다. 있긴 한데 대부분은 웹 개발 언어 외에 다른 언어도 지원한다. 파이썬, 자바, C++ 등. 무료도 있고 유료도 있는데 아무래도 각각 장단점이 있다. 하지만 기능적으로 크리티컬한 차이는 없으니(기본적으로 에디터는 메모장이다) 디자인이 이쁘거나 적당한 걸 사용하면 된다. 몇 가지 웹 에디터를 소개해보고자 한다.

1. Dreamweaver

어도비 드림위버다. 일단 이건 확실히 웹 전용이다. 지원되는 언어는 HTML, CSS, JavaScript, PHP 등 웹에서 사용하는 언어가 전부다. 드림위버의 장점은 라이브뷰, 단점은 유료다. 나는 어도비 구독자라 무료처럼 썼는데 생각해보니 유료 프로그램이었다. 드림위버는 화면을 분할해서 한 쪽에는 코드를, 한 쪽에는 코드의 미리보기를 실시간으로 보여준다. 이거 진짜 편하다. 다른 에디터를 쓰면 매 번 브라우저에서 새로고침해서 확인해야 하는데 번거롭다. 드림위버를 듀얼 스크린으로 쓰면 최고의 퍼포먼스가 나올 것이다. 듀얼 스크린을 지원하는지는 나도 안 해봐서 모르겠는데 아마 해주겠지.. 또 다른 단점은 프로그램이 무겁다는 건데 분명 다른 메모장 수준의 에디터에 비해 무겁긴 하지만 내 컴퓨터로는 아무 무리없이 돌아가서 단점인지 잘 안 느껴진다. 

2. Visual Studio Code

비주얼 스튜디오는 마이크로소프트의 IDE다. 그 중에서 에디터만 따로 뽑아서 무료로 배포한 게 비주얼 스튜디오 코드. 웹 언어 뿐만 아니라 Python, C, C++, Go, Objective-C, Swift, Java 등등 다 지원한다. 가볍게 쓰기 좋은 에디터다. 나는 교재 예제 풀 때 이걸 사용한다.

3. Brackets

어도비에서 만든 에디터다. 드림위버랑은 다르다. 오직 에디터 뿐이다. 장점 무료. 단점 모르겠다. 사실 비주얼 스튜디오 코드랑 디자인 빼고 뭐가 다른지 잘 모르겠다. 무료 에디터들은 대부분 다 고만고만한 듯. 

4. Notepad++

메모장은 영어로 노트패드다. 즉 메모장++. 가장 가볍고 심플한 에디터. 좀 올드한 UI이긴 한데 쓰다보면 뭔가 있어보일 것 같기도 하다. 개인적으로 디자인이 제일 맘에 든다. 투박한 느낌이 오히려 날코딩하는 실력자처럼 보일 것 같은 허세.

5. Sublime Text 3

이것도 많이 쓰이는 무료 에디터. 사실 맨 위에 드림위버를 빼고는 다 고만고만해서 뭘 설명해야할 지 모르겠다. 내가 아직 잘 모르는 걸 수도 있지만 내가 사용하기엔 그랬다. 그냥 이런 게 있다는 것 정도 알면 되겠다.

일단 추천하는 것은 웹용으로는 드림위버. 무료 에디터 중에는 가장 예뻐보이는 것. 웹 에디터를 설치하고 옵시다.