앱테나(Aptana)는 이클립스에 기반을 둔 오픈 소스 웹 개발용 IDE입니다. 앱테나에는 이클립스 플러그인과 독립적인 애플리케이션 2가지 버전이 있습니다. 최신 웹 개발환경이 잘 반영되어있으며, UI도 편리합니다. 파이어폭스 웹 브라우저와 연동한 자바스크립트 디버깅 능력도 우수하나, 이는 Firebug 툴이 더 편리하여 자주 쓰이지는 않을 듯 합니다.

• 래드레일스
  
  

앱테나(Aptana)는 오픈소스인 이클립스 프로그램을 기반으로 만들어졌습니다. 기존에 이클립스를 사용하던 사용자라면, 앱테나 플러그인을 설치하므로서 손쉽게 앱테나 개발환경을 설정할 수 있습니다. 설치는 이클립스의 소프트웨어 업데이트 기능을 활용하거나, 수동으로 파일을 복사해주면 되는데, 여기서는 소프트웨어 업데이트 기능을 활용하는 방법을 소개하겠습니다. 이클립스 프로그램을 실행하고 초기화면이 뜨면, 다음의 순서로 설치하도록 합시다.

1. 이클립스의 Help 메뉴를 클릭한 후, Software Updates > Find and Install을 클릭합니다.
2. Install/Update 창이 뜨면, Search for new features to install을 선택한 후, Next를 클릭합니다.
3. New Remote Site를 클릭하고, Name 란에는 Aptana, URL 란에는 http://update.aptana.com/install/3.2/을 입력한 후 OK를 클릭합니다.
4. Finish를 클릭합니다.
5. Updates 창이 뜨면, Aptana 항목에 체크한 후 Next를 클릭합니다.
6. Feature lincense 페이지에서 라이센스 동의 항목을 클릭한 후 Next를 선택합니다.
7. Installation 페이지에서 Finish를 클릭합니다.
8. Update Manager 창이 뜨고, 파일 다운로드가 진행됩니다. 다운로드가 완료되길 기다립니다.
9. 다운로드가 완료되면, Verification 창이 뜹니다. Install All을 클릭합니다.
10. 설치가 완료되면, 이클립스를 재시작해야 한다는 경고가 뜹니다. Yes를 눌러서 재시작 해줍니다.

새로 시작된 이클립스는 기존하고 특별히 다른 점이 없을 것입니다. 이제부터 앱테나를 사용하는 방법을 배워봅시다. 우선 Aptana Perspective로 변경하는 방법을 알아봅시다.

• 이클립스의 오른쪽 상단의 Perspective를 변경하는 버튼을 눌러봅시다. 창 모양에 +가 붙은 아이콘입니다.
• 기본적인 이클립스 자바 개발화면 이라면 Debug, Java, JavaBrowsing, Other의 팝업이 뜰 것입니다. Other를 클릭합니다.
• Open Perspective 창이 뜨면, Aptana를 선택하고 OK를 클릭합니다.

이제 이클립스가 앱테나에 최적화된 모양으로 변신했을 것입니다. 왼쪽 중간을 보면, 아래쪽 창이 File과 Project탭으로 나뉘어 있을 것입니다. File 탭은 나중에 살펴보기로 하고, 우선 Project 탭을 클릭합니다. 기존에 만들어놓은 많은 프로젝트들이 보일 것입니다. 새로 하나 만들어 봅시다.

• Project 창의 빈 공간에 우클릭 후 New > Project를 클릭합니다.
• New Project 창이 뜨면, General 밑의 Project를 선택한 후 Next를 클릭합니다.
• Project Name 란에 적당한 이름을 지어준 후 Finish를 클릭합니다. 저는 !HelloAptana라고 입력했습니다. 이를 기준으로 설명을 진행하겠습니다.

이제 왼쪽의 Project 창에 방금 만든 !HelloAptana라는 프로젝트가 보일 것입니다. 이제 html파일을 하나 만들어 봅시다.

• Project 창의 HelloAptana 위에서 우클릭 후 New > HTML File을 클릭합니다.
• File name 란에 적당한 파일이름을 입력하고 Finish를 클릭합니다. 저는 Hello.html 이라고 입력했습니다. Container 부분은 방금전에 !HelloAptana를 선택했기 때문에, 그냥 두시면 됩니다.

방금 만든 Hello.html 파일의 편집창이 열렸을 것입니다. 기본적인 html 문서 내용이 기입되어 있습니다. body 태그 안에 Hello World라고 입력해봅시다. 실행은 이클립스 메뉴의 Run > Run을 클릭한 후, 좌측에서 Web Browser를 더블클릭하면 새로운 실행 설정이 나타납니다.

일반적으로 이클립스에 앱테나를 설치하면 HTML, CSS, JS등의 파일 포맷은 앱테나 편집기가 기본으로 설정될 것입니다. 그러나 이클립스가 워낙 범용적인 툴이고, 많은 인기 플러그인들이 있다보니, 사용자의 설치 내역에 따라서는 저 파일들의 편집기가 앱테나 하나는 아닐수도 있습니다. 예를들면, Eclipse WTP 나, Eclipse PDT, JSEclipse 등의 편집기와 겹치게 되는 거죠. 이런 경우 앱테나를 기본 편집기로 설정하는 방법은 다음과 같습니다.

• 이클립스 실행 후, 메뉴의 Window > Preferences를 클릭합니다.
• 좌측의 트리에서 General > Editors > File Associations로 이동합니다. 상단의 검색기능을 활용하여 File 이라고 치면 쉽게 찾을 수 있습니다.
• 오른쪽에 여러가지 파일 타입들이 열거될겁니다. 그중 앱테나를 기본 에디터로 설정하고 싶은 파일 형식을 고릅니다. 여기서는 웹 개발에 주로 쓰이는 *.css, *.htm, *.html, *.js 파일을 고르겠습니다.
• *.css 파일을 선택하면, 그 아래 Associated editors 란에 여러가지의 *.css 파일을 지원하는 에디터들이 나옵니다. 그중에서 Aptana CSS Editor를 선택한 후, 오른쪽의 Default 버튼을 누릅니다.
• *.htm, *.html, *.js 파일도 위와 같은 방법으로 차례차례 설정해 줍니다. 에디터 이름은 조금씩 다르지만 기본적으로 Aptana xxx Editor 입니다.
• 이제 OK 버튼을 눌러 설정을 저장합니다. 이후로는 위의 파일들을 기본적으로 앱테나가 열게 됩니다. 만약 잠시 다른 에디터로 열고 싶을 때에는, 파일 위에서 우클릭 후에 Open With를 통해서 선택하시면 됩니다.

앱테나의 아쉬운 점이라면, 파일 생성시 기본 인코딩 타입을 따로 설정할 수 없다는 것입니다. 그나마 다행스러운 점은 이클립스의 전역 설정을 따라간다는 것입니다. 우리 프로젝트의 대부분은 UTF-8을 사용합니다. 더불어 인터넷이든 프로그램이든 현재 유니코드 사용이 추세이니만큼 모든 텍스트가 UTF-8을 사용해도 문제는 없다고 봅니다. 이클립스에서 파일 생성시 파일 인코딩 설정은 다음과 같습니다.

• 이클립스 실행 후, 메뉴의 Window > Preferences를 클릭합니다.
• 좌측의 트리에서 General > WorkSpace를 선택합니다.
• 우측의 Text file encoding란의 Other를 선택한 후, 콤보박스에서 UTF-8을 선택합니다.
• OK를 눌러 설정을 저장합니다.
  
  

많은 사람들이 프로그램 코드의 가독성을 위해서 탭을 이용한 들여쓰기를 사용합니다. 요즘에는 수많은 툴에서 이를 지원하는데요, 문제는 툴마다 탭을 몇칸의 공백으로 보여줄 것인지가 제각각이라는 것입니다. 특히 소스코드를 여러 사람이 공유하는 경우, 각자 쓰는 툴에 따라 다르게 보이기 때문에 그들이 작성한 코드가 일관되지 않을 수 있습니다. 때문에 대부분의 코딩 컨벤션들을 읽어보면, 탭을 공백문자로 바꿔서 작성할 것을 권장합니다. 앱테나에서 탭을 공백문자로 쓰는 방법은 다음과 같습니다.

• 이클립스 실행 후, 메뉴의 Window > Preferences를 클릭합니다.
• 좌측의 트리에서 Aptana > Editors를 클릭합니다.
• 우측의 Formatting 란의 Insert spaces instead of tabs를 체크합니다.
• OK를 눌러 설정을 저장합니다.

이제 탭 대신에 4칸의 공백이 삽입됩니다. 단, 기존에 작성한 코드에는 반영되지 않으며, 새로 작성하는 부분부터 적용됩니다. 기존에 작성한 코드의 탭을 스페이스로 변경하는 방법은 앱테나 사용 팁의 액션을 확인해주세요.

앱테나에서 HTML, CSS 파일등을 생성할 때의 기본적인 문서 내용을 미리 정의해둘 수 있습니다. 자주 쓰는 기본적인 내용을 미리 정의해두면, 파일을 만들때마다 매번 반복되는 작업을 줄일 수 있어 편리합니다.

• 이클립스 실행 후, 메뉴의 Window > Preferences를 클릭합니다.
• 좌측의 트리에서 Aptana > Editors > HTML Editor를 클릭합니다.
• Default extension for new HTML files (prefix with '.')란에 .html을 입력합니다.
• Default HTML file name란은 공란으로 합니다. (파일 생성 위저드에서 새 파일명을 입력하기 수월합니다.)
• Initial HTML file contents란에 문서 생성시 기본적으로 들어갈 내용을 작성합니다.
• OK를 눌러 설정을 저장합니다.

CSS, JavaScript, XML도 기본 템플릿 설정을 할 수 있습니다.

• 이클립스 실행 후, 메뉴의 Window > Preferences를 클릭합니다.
• 좌측의 트리에서 Aptana > Editors > xxx Editor를 클릭합니다.
• Initial xxx file contents란에 문서 생성시 기본적으로 들어갈 내용을 작성합니다.
• OK를 눌러 설정을 저장합니다.

액션은 여러가지 편리한 작업을 종합해놓은 기능입니다. 사람의 손으로 하기엔 불편한 많은 부분을 해결해줍니다. 기본 Aptana Perspective 화면에서 오른쪽 하단에 보면 기능들이 있습니다. 몇가지 편리한 기능들을 소개합니다.

• 문장 앞의 탭을 스페이스로(Actions > Editors > Leading Tabs To Spaces) - 각 문장 앞의 탭 문자들을 모두 4칸의 공백문자로 바꿔줍니다.
• 문장 앞의 스페이스를 탭으로(Actions > Editors > Leading Spaces To Tabs) - 각 문장 앞의 공백문자를 탭으로 바꿔줍니다.
• 자바스크립트의 선택한 문장을 주석 처리/해제(Actions > JavaScript > Toggle Comments) - 사용자가 선택한 만큼의 자바스크립트 코드를 주석으로 변환해줍니다.
  
  

앱테나에는 파이어폭스 웹브라우저를 위한 자바스크립트 디버그 기능이 있습니다. 사용 방법은 다음과 같습니다.

1. 프로젝트 내에서, 디버그 작업을 할 페이지를 선택해 우클릭 후, Debug As > JavaScript Web Application을 클릭합니다.
2. 파이어폭스 웹브라우저가 실행되고 잠시 후면, 해당 페이지가 앱테나 디버그 모드로 열리게 됩니다.
3. 페이지가 로드되고 나면, 실행중 생기는 에러는 앱테나 디버그가 잡아내게 됩니다. 혹은 스텝 단위로 디버그 작업을 원할 때에는 직접 에디터에서 브레이크 포인트(혹은 debugger; 라인)을 추가한 후 페이지를 리로드 하면 됩니다.
4. 스텝을 진행하는 기본적인 단축키는 F5(step into), F6(step over) 입니다.

편집중인 웹페이지를 웹브라우저로 실행하는 간단한 방법으로는 프로젝트내에서 해당 파일을 우클릭 한 후, Run As > JavaScript Web Application을 클릭하는 방법이 있습니다. 만약 자주 실행한다거나, 다른 브라우저로 실행하고자 하거나, HTTP/GET query가 필요하다거나 하면 Run Dialog를 통해 실행에 필요한 세부 설정을 해서 실행할 수 있습니다. 더불어 실행시 설정했던 옵션들을 특정한 이름으로 저장해놓을 수 있습니다. Run Dialog를 실행하는 방법은 다음과 같습니다.

• 이클립스 3.2 : Run > Run...를 클릭합니다.
• 이클립스 3.3 : Run > Open Run Dialog...를 클릭합니다.

디버그의 경우도 Debug Dialog를 통해서 편리하게 관리할 수 있습니다.

• 이클립스 3.2 : Run > Debug...를 클릭합니다.
• 이클립스 3.3 : Run > Open Debug Dialog...를 클릭합니다.
  
  

• Aptana