자바스크립트 시작하기 - Brackets

출판을 하거나 웹디자인을 하려면 html, css도 중요하지만, 웹의 밋밋함을 개선하기 위해서는 자바스크립트를 알아야 한다. 여기서는 자바스크립트를 공부하기 위해 필요한 환경을 구축해 보기로 한다.

자바스크립트를 공부하기 위해 인터넷을 뒤져보면 정말 자료가 많다. 그래서 이것저것 공부를 하다보면 한 번쯤 내가 뭐하고있나 싶을 때가 있다. 다른 언어와 달리 자바스크립트가 좀 더 이런 경향이 있다. 그 순간 자신이 아는 것을 하나하나 따져볼 때, 아직도 자바스크립트를 html의 어느 곳에 넣어야 하는지부터 헷갈리는 경우도 많이 있을 것이다. 이런 현상의 원인은 적절한 공부환경을 설정하지 않고 이리저리 환경을 옮겨다녀서 그렇다고 본다. 특히 취미로 공부하는 경우에 이것이 심하다. 

웹에서 자바스크립트를 설명할 때 사용하는 환경으로 FireFox라는 브라우저를 이용해서 설명하는 것이 있는데, 이 환경에서 공부하면 자바스크립트를 익힐 수 있을지는 몰라도 실제 웹페이지에 이것을 삽입했을 때 어떻게 변하는지에 대한 궁금증이 생기지 않고 마치 다른 하나의 언어를 배운 것 같은 상태가 되므로 개인적으로 권장하지 않는다. 그래서, 공부할 때는 소스코드를 직접 html에 집어넣어서 연습하는 것을 추천한다.

이 환경을 위해서 필요한 프로그램으로 나는 Brackets라는 프로그램을 추천한다. 혹시 관심이 있어서 Youtube와 같은 동영상 공유사이트를 다녀봤다면 소스수정과 동시에 웹브라우저의 내용이 바뀌는 영상을 본 적이 있을 것이다. 이 영상을 만드는 데 사용된 텍스트 에디터가 Brackets다. Brackets는 현재 대다수가 사용하는 윈도우, 맥, 리눅스 모든 곳에서 설치되고, 무료다. 게다가 어도비사의 지원을 받으므로 프로그램 유지도 안정적이다. 앞서 말했듯이 크롬 브라우저에 한정돼 있기는 하나 실시간 미리보기 기능을 지원한다. 또한, html코드는 들여쓰기가 애매해질 때가 많은데, 이것도 자동으로 잡아준다. 나중에 html이나 css를 추가로 공부하려면 더더욱 좋은 환경이 Brackets다. 홈페이지는 다음과 같다.

http://brackets.io/

여기에 접속하면 접속하는 사람의 운영체제를 자동으로 인식해서 다음과 같은 화면이 나온다.

이미 설치해야 할 프로그램이 메인화면에 선택이 되어 있으므로 그냥 다운로드 버튼을 눌러서 다운받고 설치하면 된다. 설치는 거의 선택의 여지가 없는 클릭 몇 번으로 끝나는데, 시간은 좀 걸릴 수 있다.

설치가 끝나고 실행을 하면 다음과 같은 보안경고가 뜬다. 액세스 허용을 해줘야 한다.

그러면 다음과 같은 초기화면이 나타난다.

html파일이 열려 있는데, 잘 보면 Brackets 설명서다. 이 설명서를 가지고 미리보기 연습을 해보자. 우선, 다음 그림에서 보이듯이 파일메뉴를 열면 실시간 미리보기 메뉴가 보인다. 클릭한다.

그러면 다음과 같이 안내화면이 프로그램 위에 뜬다.

 "확인"버튼을 누른다. 그러면 다음 그림과 같이 크롬 브라우저가 뜬다.

실시간 미리보기가 잘 되는지 테스트를 해야 하는데, 이 배치는 좋지 않다. 그래서, 다시 Brackets를 활성화 하고 [Windows 키]와 [왼쪽화살표키]를 누르거나 Brackets의 프로그램 제목바를 마우스로 드래그해서 화면 왼쪽으로 가서 놓으면 다음과 같은 화면으로 변한다.

그럼 화면의 오른편에 Brackets를 제외한 모든 프로그램이 미리보기로 작게 나타나는데, 그 중 크롬을 클릭하면 다음과 같은 화면이 된다.

이제 화면이 반으로 나눠져서 왼쪽에는 Brackets가, 오른쪽에는 웹브라우저가 자리를 잡는다. 왼편 소스코드의 아무곳이나 마우스로 클릭을 하면 오른편 화면이 흥미롭게 변할 것이다. 여기저기 클릭해 보고, 글자도 지웠다썼다를 하면서 오른편 화면이 변하는 모습을 확인하기 바란다. 그리고, 현재 나온 문서는 메뉴얼이므로 한 번 읽어보기를 바란다. 기계번역 같지만 읽을만 하다.