이클립스는 초기부터 자바 통합개발환경을 초월한 모든 툴들의 플랫폼이 되겠다는 계획 하에 시작된 것이기 때문에 FLEX Builder가 이클립스의 탄탄한 프레임워크를 기반으로 한다는 발표는 많은 사람들에게 환영을 받았다.

<그림 1> 이클립스와 FLEX Builder2 스플래시 이미지

여기서 잠깐, 이클립스는 공짜인데 FLEX Builder 2도 공짜로 안되겠니 하는 사람들에게 이클립스의 라이선스 정책을 언급하려고 한다. 처음에는 CPL(Common Public License) 로 시작했다가 EPL(Eclipse Public License) 로 변경되었다. 이클립스는 무료로 배포해도 그 위에서 동작하는 플러그인은 유료로 판매할 수 있고, 그 제품에 이클립스를 끼워 팔아도 되며, 이클립스 로고가 아닌 제품의 로고를 써도 된다.
다시 본론으로 돌아가자. FLEX 2 문법 배우기도 그리고 FLEX Builder 2에 익숙해지기도 벅찬데, 이클립스의 기술까지 배우는 것이 버거울 수 있겠지만, 여기서 읽은 내용은 이런 편한 기능이 숨겨져 있다 정도로 가볍게 읽고 넘어가길 바란다.

Builder의 용어 분석
Builder에 대한 용어부터 정리해보자. 툴은 개발하는 소스를 로컬에 두고 사용하게 되는데, 소스들이 모아져 있는 공간을 워크스페이스(workspace)라고 한다. 워크스페이스 안에는 여러 개의 프로젝트(project)들이 담겨질 수 있고, 각각의 프로젝트들은 다른 프로젝트를 참조할 수 있게 되어있다. 프로젝트를 참고하는 것이 물고 물리는 경우(사이클링이라고 한다)에는 프로젝트 빌드(컴파일)가 안되기 때문에 프로젝트 참조 설정시 주의해야 한다.
퍼스펙티브(perspective)라는 용어를 가장 많이 들을 것이다. 쉽게 말하면 작업 용도에 따른 레이아웃 세트라고 할 수 있다. 소스 코딩할 때, 디버깅할 때, 소스 버전관리 할 때, 각각 편한 창들의 배치를 묶어서 퍼스펙티브라고 한다. 우리말로 애써 번역하면 조감도(새처럼 높은 곳에서 바라본 모양)라고 할 수 있다.

 
<그림 2> 퍼스펙티브, 에디터, 뷰

퍼스펙티브 안에 들어가는 부속 창들은 성격에 따라 두 가지로 나뉘는 데 하나는 뷰(view)이고, 다른 하나는 에디터(editor)이다. 주로 에디터를 둘러싸고 있는 것이 뷰이다. 즉 창 중심에서 코딩이 이뤄지는 부분이고, 뷰는 에디터의 내용을 다각도로 보여주는 역할을 한다. 에디터와 상관없이 독립적으로 움직이는 뷰는 그리 많지 않다.
뷰는 종류가 굉장히 많은데, 소스 트리를 보여주며 윈도우 탐색기랑 유사한 네비게이터(Navigator) 뷰, 에디터에 있는 소스의 개요를 보여주는 아웃라인(Outline) 뷰, 우리가 흔히 말하는, 변수 값을 찍어 볼 수 있는 콘솔(Console) 뷰, 소스의 문제를 조목조목 잘 보여주고 더블클릭 하면 문제가 있는 소스를 에디터에 열어서 문제가 발생한 라인에 커서를 친절하게 위치시키는 프로블름(Problems) 뷰 등이 가장 대표적이다. 이외에도 많은 뷰들이 있지만 써가면서 익혀가길 바란다.
필자가 짧은 지면을 통해서 전하고 싶은 것은 FLEX Builder 2를 이용해 무언가를 만들 때 요긴한 단축키와 기능들이다. 주로 에디터에서 사용하는 팁들이 많이 다뤄질 것이고, 툴의 환경 설정을 보다 간편하게 할 수 있는 방법 몇 가지이다(이클립스 책을 사 봐도 찾기 힘든 내용이 조금 있다).

환경설정 편하게 하기(설정항목 검색)
Builder의 폰트를 바꾸거나 배경색을 바꾸거나 하는 등의 튜닝이 필요한 경우 환경설정 메뉴로 들어가서 조절할 수 있다.
메뉴 줄의 [Window | Preferences ]를 선택한 경우에 <그림 3>와 같은 창이 뜨고 여기에서 자신의 기호에 맞게 환경을 바꿀 수 있다. 그러나 메뉴가 너무 많다. 영어로 되어있다. 너무 힘들게 보이지만 여기에서 첫 팁이 나온다.
 
<그림 3> [Window | Preferences] 화면

‘+’ 를 눌러서 메뉴를 확장하면 하위 설정 메뉴들을 볼 수 있다. 어느 세월에 그 많은 정보를 찾을 수 있을까? 놓치지 말아야 할 것은 좌측 상단에 있는 입력 칸이다. ‘type filter text’를 눈 여겨 보기 바란다. 예를 들어 글꼴 설정이 궁금해 font라고 한 글자씩 입력해보면 <그림 4>처럼 하단의 메뉴들 수가 줄어들면서 후보 설정 메뉴들이 보이게 된다. 검색 가능한 설정 메뉴라니, 환상적이다.
 
<그림 4> 검색어 ‘fo’로 필터링된 메뉴

코드 힌트/코드 자동 완성 (ctrl+spacebar)
점의 미학이라고 들어봤는지 모르겠다. 자바에서 객체지향의 징표로 .(마침표)를 쓰고 있다. 인스턴스에 들어있는 모든 정보는 점을 통해서 노출이 된다. 통합개발환경 에디터의 좋은 점은 이 점을 찍을 때 친절하게 자동으로 목록을 노출시켜주고, 타이핑에 따라 노출되는 항목들이 걸러진다.
이런 기능을 코드 힌트 또는 코드 어시스트라고 하는데, 게을러지기 딱 좋다. 마치 요즘 사람들이 휴대폰의 편리한 기능 때문에 전화번호 몇 개 못 외우고 있는 상황과도 같다. 그렇다고 전화번호 외우려고 애써 손으로 꾹꾹 누르는 것처럼 프로그램을 배울 생각은 하지 않기 바란다.
Builder의 에디터는 주로 mxml을 다루기 때문에 ‘<’로 시작한다. 에디터에서 키보드로 ‘<’을 입력하면 바로 반응을 보이는데, 경험에 따르면 ‘<mx:’로 시작하는 태그를 쓸 때 ‘mx:’(namespace라고 한다)를 생략하고 바로 태그를 써도, 엔터 키만 치면 되는 센스를 갖고 있다.

 
<그림 5> 코드 힌트 #1

여기서 끝이 아니다. ‘<scr’ 치고 엔터 키를 치고 ‘>’ 로 닫아주면 <그림 6>과 같이 세트로 코딩해 준다. 하여간 세상 많이 좋아졌다. FLEX Builder 2가 좋은데 안 쓰면 ‘안습(안구에 습기 차는 우울한 상태)’이다.

 
<그림 6> 코드 자동 완성. 여는 태그 입력시 자동으로 닫는 태그 코드 자동 생성

코드 힌트 창이 그리울 땐 ‘ctrl+<spacebar>’를 쳐보면 현재 커서가 있는 위치에서 보여줄 수 있는 모든 가능한 코드들이 나열될 것이다.

빨리 찾기/이동하기(ctrl+K,ctrl+J)
프로젝트에 있는 소스들을 읽는 것을 소스 네비게이션이라고 한다. 한 소스 내에서 변수의 선언된 위치, 사용되는 곳 등을 따라가야 할 경우가 있고, 이 소스에서 저 소스로 그리고 다시 좀 전에 봤던 파일의 위치로 돌아가는 기능이 있다면 소스들 사이를 항해하기가 수월해진다.
 
<그림 7> 영역 선택 후 ctrl+K를 누르면 커서 뒤에 있는 같은 단어로 이동한다

에디트 플러스나 울트라 에디트라는 막강 편집기에 뒤지지 않는 소스 탐색 기능을 에디터에서 지원한다. 예를 들면 <그림 7>과 같이 검색하려는 단어를 선택한 후에 ‘ctrl+K’를 눌러보면 소스 하단의 같은 단어로 커서의 위치가 이동한다. 파일의 끝까지 갔을 때는 ‘ctrl+shift+K’를 동시에 눌러보면 뒤로 검색이 된다.
편집기에서 ‘ctrl+J’를 누르면 검색모드로 변경된다. 상태표시줄 가운데에 <그림 8>과 같이 XX고 나오는데, 이 때 타이핑을 하는 문자에 따라 커서의 위치가 매칭되는 단어로 이동하게 된다. 역시 XX를 반복해서 누르면 같은 단어 위치로 이동하게 되는데, 파일의 끝을 지나게 되면 다시 처음부터 검색해준다.

 
<그림 8> 검색 모드로 전환한 경우 상태표시줄

우리가 다 알고 있는 ‘ctrl+F’도 물론 지원된다. <그림 9>와 같은 창이 나타나는데, 옵션을 따로 설명하지 않겠지만 주의 깊게 보면 의외로 괜찮은 것이 많다.

 
<그림 9> 찾기(Find)와 바꾸기(Replace)

창 넓게 쓰기 (ctrl+M)
Builder의 창을 보면 섹션별로 나눠서 쓰기 때문에 좁다는 생각이 들 수 있다. 그래서 잘 보지 않는 뷰들을 닫아버리거나 좁혀놓고 에디터를 넓히고 작업을 하는 경우가 있는데, 그럴 필요 없다. 크게 보기를 원하는 뷰나 에디터를 클릭하고 ‘ctrl+M’을 누르면 창 전체로 확대된다. 원위치 하려면 다시 ‘ctrl+M’을 누르면 된다. <그림 10>과 같이 마우스로 해당 뷰의 탭을 더블 클릭해도 같은 효과가 나타난다.

            <그림 10> 창 넓게 쓰기

복사&붙이기는 이제 그만(alt+↓/alt+↑, ctrl+alt+↓/ctrl+alt+↑)
프로그래머나 디자이너 할 것 없이 컴퓨터를 사용하는 모든 사람들에게 친숙한 말이 있다. 카피 앤 페이스트, 컨트롤 씨 브이, 즉 복사해서 붙여놓은 다음 기호에 맞게 수정하는 일련의 작업이다. 과도한 컨트롤 씨 브이는 왼손 새끼손가락의 기형을 불러 일으킬 수 있기 때문에 조심하는 게 좋은데 FLEX Builder 2의 에디터는 더 좋은 기능을 선사해주고 있다.
커서가 있는 줄을 쉽게 옮길 수 있는데, 단축 키는 ‘alt+↓’ 또는 ‘alt+↑’이다. 여러 줄을 선택한 후에 이동 단축키를 누르면 선택한 영역이 쉽게 위 아래로 이동하게 된다.
이 선택영역을 복사할 수 있는데, 단축키는 ctrl이 추가되어 ‘ctrl+alt+↓’ 또는 ‘ctrl+alt+↑’이다.

<그림 11> 쉬운 영역 복사/붙이기

파일 쉽게 부르기(ctrl+shift+R, <f3>, alt+좌우화살표)
파일이 많아지면 파일을 찾아서 열기가 쉽지 않게 된다. 이 때 요긴하게 파일을 찾아서 열 수 있도록 도와주는 것이 ‘ctrl+shift+R’이다.
일단 이 단축키를 누르게 되면 <그림 12>와 같이 창이 뜨고 입력하는 글자에 따라 매칭되는 파일 목록이 하단에 뜬다. in folders에는 폴더명이 나오는데, 같은 이름의 파일이 여러 폴더에 있을 경우 폴더들의 목록이 나타나 선택할 수 있게 되어있다.

 
<그림 12> 파일 부르기

소스를 볼 때 유용한 단축키 중의 하나는 변수나 함수 또는 클래스의 선언된 위치를 알려주는 기능이다. 예를 들어 <그림 13>에 보면 18번 줄에 커서를 <comp:CustEvDispatcher_wt2 위에 놓고 f3를 누르면 컴포넌트 파일(CustEvDispatcher_wt2.mxml 파일)이 열리게 된다. 같은 줄의 custEv NameHandler 위에서 f3를 누르면 함수가 선언된 11번 줄로 커서가 이동하게 된다.

 
<그림 13> f3는 파일의 선언된 위치를 찾아준다

커서가 이곳 저곳 옮겨 다닐 때 바로 전에 작업한 곳으로 이동할 필요가 있다. 그 때 브라우저의 Back/Forward 기능과 같은 것이 ‘alt+←/alt+→’이다.

파일 히스토리(compare , replace file)
Builder 2에서 지원하는 기능 중 막강한 것은 파일 히스토리 기능이다. <그림 14>와 같이 해당 파일의 마우스 오른 버튼을 눌러 나오는 컨텍스트 메뉴에 [Compare With | Local History]를 보면 <그림 15>와 같이 저장된 시점을 알려주는 창이 뜬다.
하단의 좌측은 현재 에디터에 있는 내용이고 우측 하단의 소스는 상단의 시점에서 저장된 소스의 내용이다. 소스 맨 우측의 세로줄에 보면 소스의 변경이 일어난 부분이 표시되고, 클릭을 할 경우 해당 위치를 보여준다.
눈치가 빠른 분은 Compare With 아래 Replace With 메뉴가 보일 것이다. 이전 저장 시점의 파일로 복원시켜주는 기능이다. 바로 전에 저장했던 파일로 돌리거나 파일을 비교해 보고 이전 저장한 시점 중에서 선택해서 되돌릴 수 있다.

 
<그림 14> 파일 히스토리 비교

 
<그림 15> 시점에 따른 파일 히스토리 비교

요약
지금까지 FLEX Builder2의 편리한 기능에 대해서 살펴봤다. 혹시 자바 개발자이면서 이클립스를 사용하고 있다면 여기의 팁들이 동일하게 적용되므로 시험해보기 바란다. 또한 퍼스펙티브, 에디터, 뷰와 같은 FLEX Builder 2의 주요한 용어들을 살펴봤다. 환경설정에 있는 항목들을 빨리 찾을 수 있는 메뉴 필터링 기능을 통해 검색할 수 있다.
에디터에는 편리한 기능들이 많이 있는데, 우선적으로 현재 커서의 위치에서 코드를 안내해주는 코드 힌트와 자동 완성 기능(ctrl+<spacebar>), 선택 영역과 같은 단어를 검색해주는 기능(ctrl+K), 검색모드에서 타이핑에 따라 점진적으로 커서의 위치를 옮겨주는 기능(ctrl+J), 창을 넓게 쓸 수 있도록 뷰나 에디터를 확장해주는 기능(ctrl+M), 복사/붙이기/이동을 편하게 해주는 기능(alt+↓/alt+↑, ctrl+alt+↓/ctrl+alt+↑)들을 살펴봤다. 또한 변수, 함수, 클래스, 컴포넌트 등의 선언된 위치로 바로 이동하는 f3 단축키도 있었고, 파일의 히스토리를 이용하는 법도 알아보았다.
마지막으로 두 가지만 더 얘기하려고 한다. 수많은 단축키의 목록을 볼 수 있는 ‘ctrl+shift+L’이다. 약간의 탐구정신을 갖고 있다면 단축키의 쏠쏠한 재미를 배워볼 수 있을 것이다. 다른 한 가지는 f1인데, Help에 나와있는 예제 코드는 복사해서 바로 사용할 수 있을 정도로 잘 정리되어 있다. 작은 팁들이지만 FLEX Builder 2를 이용해서 작업할 때 큰 효과를 맛보시길 바라면서 글을 맺는다.

출처: adobe Flex 공식싸이트(http://www.adobeflex.co.kr)