[Mac App] Aptana Studio 3 :: 앱타나 스튜디오 3로 자바스크립트 공부/개발 환경 만들기

 - Aptana Studio 3

 Aptana Studio 3 (앱타나 스튜디오 3)는 이클립스 기반의 훌륭한 웹 개발 툴입니다. 이클립스 기반이기에 플러그인 형태로도 설치가 가능하지만, 통째 IDE 형태로 다운로드하는 편이 속 편한 것 같네요. 이클립스 기반이기에 윈도우즈, 맥, 리눅스용으로 모두 지원됩니다.

 앱타나를 설명하기 위해 앱타나 스튜디오 웹사이트의 설명을 조금 빌려오겠습니다.

The world’s most powerful open-source web development IDE just got better. Rebuilt from the ground-up. It's now much faster, customizable and includes new features to help you be more productive.

(번역): (앱타나 스튜디오 3는) 세상에서 가장 뛰어난(파워풀) 오픈-소스 기반의 웹 개발 IDE입니다. 처음부터 완전히 새로 설계되었습니다. 이제는 보다 빠르고, 커스터마이징하였고, 당신을 보다 생산적으로(효율적으로) 도와줄 새로운 기능들을 탑재하였습니다.

 - 출처: 앱타나 스튜디오 3 공식 홈페이지

Aptana Studio 3.2.2 is our code base and complete environment that includes extensive capabilities to build Ruby and Rails, PHP, and Python applications, along with complete HTML, CSS and JavaScript editing.

(번역): 앱타나 스튜디오 3.2.2는 우리의 코드를 기반으로 Ruby, Rails, PHP, Python 등의 애플리케이션 제작과 완벽한 HTML, CSS, JavaScript 편집을 하는 데에 광범위한 가능성을 가지는 완벽한 환경을 지원합니다.

 - 출처: 앱타나 스튜디오 3 공식 다운로드 페이지

 어쨌든, 그러합니다.

 사실 저번주에 SK T아카데미에서 자바 스크립트(Java Script) 기초 교육을 청강했고, 그 강의에서도 앱타나를 사용하였습니다. 그 이야기도 할 겸, 블로그에 올려야지..하고 캡쳐 이미지를 떠 두었던 것을 일주일 째 썩히고 있다가 문득, 한 분께서 이메일로 때마침 맥에서 자바 스크립트 공부를 하기 위한 툴을 물어오셨습니다. 답장은 드렸지만, 이참에 정리해봐야겠다..싶더군요.

 그래서 포스팅합니다. ;)

 이 글은 앱타나 스튜디오 3과 파이어폭스(Firefox) 웹브라우져를 이용해 자바 스크립트를 공부하기 위한 준비 과정을 소개하고 있습니다. 이 포스트대로 따라오신 후에 각자 자바 스크립트 공부에 매진하시면 될 것 같네요. :)

 어쩌면, 프로그래밍에서 가장 어려운 것은 개발 환경 만들기..라는 말이 있더군요. 한 걸음 한걸음 저와 함께 가면서 받침대를 만들어 보아요. :)

 - 앱타나 스튜디오 3 다운로드와 설치

 앱타나 스튜디오 3은 당연히 공식 홈페이지에서 다운로드하도록 합니다. 아래 링크를 따라 들어가세요. :)

 [Link] Aptana   Download Aptana Studio 3.2.2

 

 위와 같은 모습을 만납니다. 자동으로 Max OS X, 인텔이라고 뜨는군요. 이름과 이메일 주소를 적고 싶으면 적고, 아래의 파란색 [DOWNLOAD APTANA STUDIO 3] 버튼을 클릭합니다.

 그럼, 페이지가 넘어가면서 다운로드가 시작됩니다.

 그리고 다운로드한 파일의 압축을 해제하고, 폴더 째로 애플리케이션 폴더로 이동시킵니다. 그리고 'AptanaStudio3'라는 파일을 실행시킵니다. 이 부분은 자세히 설명할 필요 없겠지요. :)

 실행시키면, 자바 런타임이 필요하다고 합니다. 예전 맥에는 기본으로 설치되었었는데, 아마 라이언부터 기본 설치가 아니라지요? [설치] 버튼을 누르면, 설치를 진행합니다. 역시 그닥 어렵지 않으므로 자세한 설명은 패스합니다. :)

 앱타나 스튜디오 3도 이클립스 기반이고, 이클립스는 자바 기반이기 때문에 자바 런타임이 필요합니다.

 이제 진짜 실행됩니다. 계속해서 이야기하듯, 이클립스 기반이기 때문에 처음 실행 후, Workspace(워크스페이스; 작업공간)을 물어보는 것도 똑같습니다. 즉, 이클립스를 다뤄보신 분이라면, 친숙한 화면인 셈이지요.

 작업 공간은 앞으로 만들 프로그램(여기서는 웹사이트) 프로젝트를 저장할 기본 위치라고 할 수 있습니다. 위의 영어를 조금 번역해보면..

Select a workspace
Aptana Studio 3 stores your projects in a folder called a workspace.
Choose a workspace folder to use for this session.

(번역): 워크스페이스를 선택하세요. 앱타나 스튜디오 3은 당신의 프로젝트를 워크스페이스라 부르는 폴더에 저장합니다. 지금 앞으로 사용할 워크스페이스 폴더를 지정하세요.

 [OK] 버튼을 클릭하면, 다음으로 넘어갑니다.

 이 윈도우는 앞으로 앱타나를 실행할 때마다 등장합니다. 굳이 워크스페이스의 위치를 바꿀 것도 없고, 앞으로 바꾸지 않을 거라면, 'Use this as the default and do not ask again'(번역: 이를 기본으로 사용하고, 다시는 물어보지 않습니다.)의 체크박스에 체크하고, [OK] 버튼을 클릭합니다. 물론, 설정에서 워크스페이스 위치를 바꿀 수도 있습니다.

그럼, 앱타나 스튜디오 3이 실행됩니다. 뭐, 첫 실행 모습은 제 앱타나와 다를 수 있습니다~ :)

 - 불여우와 앱타나를 붙여서 자바스크립트 개발 환경 만들기

 앱타나 스튜디오 3은 웹브라우져, 파이어폭스만(?) 지원합니다. 둘 다 오픈소스 기반이기 때문에 그런가 싶기도 하네요.

 여하튼, 그래서 앱타나 스튜디오는 준비되었고, 이제 파이어폭스를 준비합니다. 하지만, 사실 웹개발한다고 하는 분 치고 파이어폭스 설치 안한 분 계시나요? 웹개발에 최적화되어 있어서 크롬은 메인 웹브라우져라 해도 개발용으로는 파이어폭스를 쓴다는 사실.. 다들 알고 계시..

 앱타나 스튜디오 3을 실행합니다. (설명을 위해 어둠 모드에서 다시 깔끔 모드로 돌아왔습니다.:) )

 아마 첫 실행에서는 스타트 홈페이지가 보일텐데요. 위의 모습은 프로젝트를 생성하고, HTML 템플릿 파일을 생성한 모습입니다. 한번 또 날 잡고, 앱타나를 소개하는 글이 필요할지 모르겠네요.

 위의 모습은 [File] - [New] - [Web Project] - Basic Web Template 을 연 모습입니다. 프로젝트 이름은 임의로 설정해주시고요.

 위와 같이 준비되었으면, 아주 간단한 index 페이지를 만드는 데에 필요한 기본적인 코드는 마련된 셈입니다. (있을 거 다 있죠. 헤드, 바디 등등..) 이제 실행해서 웹브라우져에 띄워봅시다.

 실행은 위의 메뉴 아이콘들 중에서 벌레 옆의 세모 모양 아이콘을 클릭해도 좋고, 메뉴 막대 [Run] - [Run]으로 하셔도 좋습니다. 물론, 단축키는 '[Shift] + [Command] + [F11]' 입니다.
 만약, 맥북을 사용중이시라면, [F11]을 눌렀을 때, 스피커 볼륨이 낮아지겠지요. 그래서 다시 단축키 조합은 '[Shift] + [Command] + [fn] + [F11]'가 되겠습니다.

 나중에 자바스크립트 공부를 할 때는 디버깅이 필요합니다. (제가 디버깅을 설명할 필요는 없겠지요?ㅎㅎ'')
디버그는 벌레 모양 아이콘으로 실행하고, 단축키는 실행에서 [Shift]키만 빼주면 됩니다.

 런이든 디버그든 둘 중 하나를 실행하면, 아래와 같은 윈도우를 만납니다.

 Notification
 Studio requires Firefox 1.5 or greater for JavaScript debugging support.
 Firefox could not be found at the default locations on this computer.
 If you wish to debug JavaScript, please create a debug configuration with the correct Firefox path or download it from http://www.getfirefox.com/
 Never ask again

 (번역) 알림
 스튜디오는 자바스크립트 디버깅을 지원하는 파이어폭스 1.5 버전 혹은 그 이상을 필요로 합니다.)
 이 컴퓨터에서 기본 위치로 지정된 파이어폭스를 찾을 수 없습니다.
 자바스크립트를 디버그하길 원한다면, 정확한 파이어폭스 위치를 디버그 설정에서 지정하거나 http://www.getfirefox.com/에서 파이어폭스를 다운로드하길 바랍니다.
 다시는 묻지 마세요

 파이어폭스가 설치되어 있찌 않으면 만나는 윈도우입니다. 결국 파이어폭스를 설치하도록 합니다. 위의 설명대로 파이어폭스는 [Link] http://www.getfirefox.com/에서 다운로드하도록 합니다.

파이어폭스를 설치하고, 다시 디버그를 시작하면, 다시 아래와 같은 윈도우를 만납니다.

 Install Debugger Extension
 The Studio Debugger Extension for Firefox is not installed or an older version found. Do you wish to install/update it now?
 Remember my decision

 (번역) 디버거 확장 프로그램 설치
 파이어폭스용 스튜디오 디버거 확장 프로그램이 설치되어 있지 않거나 오래된 버전으로 탐색됩니다. 설치/업데이트를 지금 하길 원하나요?
 지금 선택을 기억하기

 역시 번역으로 설명을 날로 먹겠습니다. (...;;)

 설명대로 파이어폭스용 앱타나 스튜디오 디버거 확장 프로그램을 설치합니다. 그냥 [Yes] 버튼을 클릭하면, 알아서 진행합니다.

 Install Debugger Extension
 Firefox is still running. Please quit it to complete installation. It may be running as a background process.

 (번역) 디버거 확장 설치
 파이어폭스가 여전히 실행중입니다. 제발(;;) 완전한 설치를 위해 종료시켜주세요. 그러면, 백그라운드 프로세스에서 진행될 것입니다.

 파이어폭스가 실행되어 있다면, 위와 같은 메시지를 만나게 됩니다.

 독에서 파이어폭스 아이콘을 마우스 오른쪽 클릭하고, 완전히 종료시킵니다. (아시다시피 맥에서 프로그램의 빨간색 버튼은 종료가 아닌 가리기 버튼입니다.)

 그리고 다시 파이어폭스가 자동으로 실행(아마도..?)되면, 아래와 같은 모습을 만나게 됩니다.

 'Firebug1.8.3'(파이어버그 1.8.3)을 설치한다는 메시지입니다. 파이어버그는 앞으로 자바스크립트 디버그 확장과 더불어 필수적인 확장 프로그램입니다. (전반적인 웹 개발에 있어서도 반 필수적인 불여우용 확장입니다.)

 아쉽게도 파이어버그는 더 높은 최신 버전이 있으나 현재(2012.09.08)는 앱타나 스튜디오에서 1.8.3 버전만 지원하고 있습니다. 만약, 파이어폭스가 자동으로 확장 프로그램을 업데이트한다면, 디버깅이 불가능하므로 파이어버그를 삭제하고, 다시 설치하도록 합니다. (미리 조언(?)합니다.:) )

 [계속] 버튼을 클릭합니다.

 그러면, 다시 위와 같이 불여우 다시 시작이 필요하다고 하고, [Firefox 다시 시작] 버튼을 누를동 말동 하지만, 잠깐 누르지 말고, 그 옆의 탭을 볼까요?

 앞에서 설치를 진행했던 앱타나 디버거가 설치 허가 여부를 묻고 있습니다. 분명히 아까 설치한다고 했거늘..

 앞에서는 앱타나 스튜디오에서 물어보았던 것이고, 이번에는 파이어폭스에서 보안을 이유로 허가 여부를 사용자에게 물어보는 것입니다. '설치 허가' 체크박스에 체크해주고, [계속] 버튼을 클릭해 다음으로 진행합니다.

 그리고 확장 프로그램을 설치했으므로 파이어폭스를 재시작해줍니다.

 Install Debugger Extension
 The Studio Debugger Extension for Firefox was installed.

 (번역) 디버거 확장 설치
 파이어폭스용 스튜디오 디버거 확장은 이미 설치되었습니다.

 계속 메시지 윈도우가 등장하니, 지치는군요. :(

 앱타나 스튜디오에서 다시 디버그를 시도하면, 위와 같은 메시지를 뽑아냅니다. 여하튼, 어찌되었든, 모든 준비 과정은 완료되었습니다. :)

 지금까지 잘 따라오셨다면, 파이어폭스가 실행되면서 앱타나 디버거 확장이 작동되고요.

 원했던 페이지가 잘 실행됩니다. :)

 한편, 앱타나 스튜디오에서는 'Confirm Perspective Switch' 메시지 윈도우가 등장하는데, [Yes]를 클릭하면, 디버그 진행 페이지를 보여줍니다. 이는 앱타나 스튜디오 오른쪽 위에서 'Web' 탭을 클릭하면, 다시 에디터로 올 수 있으니, 참고하세요. :)

 - 자바스크립트의 헬로우 월드!

 자자.. 아주 잘 따라오셨습니다. 하나하나 캡쳐해서 설명하는 것도 쉽지 않네요.

 앞에서 모든 준비 과정을 끝냈지만, HTML 코드를 보시면, 자바스크립트 코드는 하나도 없어서 이게 잘 작동하는 건가..싶습니다. 확인해보지요.

 위의 이미지는 앞에서 했던 것처럼 HTML의 Body 영역에 'New Web Project Page'를 출력하도록 만든 것이지요. 순수 HTML 코드입니다.

 위 이미지는 스크립트를 선언하고(<script>) 자바스크립트의 문자열 출력 명령어인 document.writeln을 이용해 헬로월드를 찍어보았습니다. 그리고 디버깅!

 Debugger launching
 Debugger session is active. To start new debugger session, you must first close the existing session.

 (번역) 디버거 런칭
 디버거 세션이 이미 작동중입니다. 새로운 디버거 세션을 시작하기 위해서 이미 존재하는 세션을 먼저 닫습니다.

 말 그대로 앞의 디버거가 실행중이라는 메시지입니다. 파이어폭스를 종료 후, 다시 실행시켜 주도록 합니다. (이 방법 말고 디버거를 재시작하는 방법이 있는지 궁금하네요..)

 다시 디버깅해보면, hello world가 잘 출력되는 것을 볼 수 있습니다. 이 출력은 순수 자바스크립트 코드를 이용해 출력한 것이지요. :)

 여기까지 잘 따라하셨다면, 앞으로 위와 같은 방법으로 <script>, </script> 선언으로 자바스크립트 공부를 하시면 좋을 것 같습니다. 만약, HTML/CSS 에 대한 이해가 부족하시다면, 이 역시 앱타나 스튜디오와 함께 진행하면, 더 없이 좋겠지요. 개인적인 이야기지만, 저는 앱타나 스튜디오와 함께 블로그 스킨을 뜯어 고칩니다. (별로 한 건 없지만서도...)

 - 마무리

 장황하게 글을 끄적거리기는 했지만, 사실 저는 자바스크립트를 잘 알지 못합니다. 이제 배우고 공부하는 꼬꼬마 학부생일 뿐입니다. 하지만, 저와 같이 개발 환경을 꾸미는 것조차 어리둥절해서 하루 빨리 개발 공부를 하고 싶은 초보자들과 함께 이 글을 공유하고자 합니다.

 앞에서도 끄적거렸지만, 프로그래밍에서 가장 힘든 것은 어쩌면, 개발 환경을 꾸미는 일일 것입니다. 프로그램을 만들기 위한 지식보다 그것을 준비하는 준비물들이 초보자를 지치게 만들지요. 숙련된 개발자들조차 오랜만에 개발 환경을 구성하기 위해서는 이와 같은 문서를 참고해야만 할 정도로 쉽지는 않은 과정입니다.

 그러나 정말 프로그램 개발만큼은 '시작이 반이다'라는 말이 진리인지도 모르겠습니다.

 더 궁금하신 것이 있으면, 댓글과 이메일 등의 여러 방법으로 문의해주셔도 좋습니다. 제가 되는 한계까지 도움을 드리도록 노력하지요. 더불어 아직 부족한 저의 실력으로 이 글에서 지적하고 싶은 부분이 있다면, 과감히 지적 부탁드립니다. 다만, 건설적인 토론을 위해 작은 배려 정도 부탁드립니다. :)

 고맙습니다.
 행복하세요. :)

포스팅 끝.
2012년 9월 8일, 토요일.