공지 : 파워플 킥오프 모임을 참고해 주세요. http://blog.jidolstar.com/680


이전부터 많은 지면을 할당하여 원더플(wonderfl.net)에 관련된 글을 많이 적었습니다. 제 블로그에 꽤 많은 Flash 개발자들이 다녀가시기 때문에 이제 원더플을 모르시는 분은 거의 없을 듯 합니다.

아시다시피 원더플은 웹에서 직접 코딩하고 컴파일되어 결과를 사이트에서 바로 확인할 수 있다는 장점이 있습니다. 여기에 SNS기능도 곁들여서 세계적으로 많이 애용되고 있는 사이트입니다. 저는 이 때문에 칭찬을 아끼지 않았죠.

하지만 원더플은 중요한 한계점이 있습니다. Flex든 ActionScript든 딱 한개의 문서만 만들 수 있습니다.  현업에서 실제로 더 중요시 되는 것은 아키텍쳐와 설계 부분에 대한 부분입니다. 그러므로 원더플의 이런 구조로는 이런 요구를 수용하기에는 부족할 수 밖에 없지요. 가령, 제 경우만 하더라도 이전에 Flex로 제작해 놓은 3D 게시판이나 상용에서 사용할 만한 이미지 에디터, 천문프로그램 정도의 코드를 원더플에 개시하기에는 너무 역부족이였습니다.

파워플(Powderfl)이란?!


지금 소개해드리고자 하는 것은 원더플의 한계를 극복하면서도 더욱 파워풀하게 Flex, ActionScript 3.0 코드를 공유할 수 있는 파워플(powderfl) 프로젝트입니다.

파워플은 ActionScript 코드를 웹에 개시하고 보여주며 소스를 공유하는 것까지는 원더플과 비슷한 컨셉입니다. 하지만 파워플은 원더플처럼 웹에서 직접 코딩할 수 있는 조악한(?) 에디터를 대신 Flash Builder를 에디터로 삼고 그 결과를 SVN으로 전송해주면 원더플과 똑같이 SWF 애플리케이션을 웹에서 볼 수 있도록 합니다.

이 아이디어는 애초부터 hika님으부터 나온 것이고, 저는 프로젝트 명만 정했습니다. ^^
Powerfl(Power + Flash) 프로젝트 명은 제가 생각해도 너무 잘지은듯.... ^^ 마침 도메인도 다 비어 있었다는 ㅋㅋ


파워플 개요
앞서 말씀드렸듯이 파워플은 원더플의 한계점을 극복하기 위해 Flash Builder를 에디터 삼는데서 시작합니다. 이에 대한 대략적인 개요는 다음과 같습니다.

  1. 서버에 계정을 만들면 svn레포지토리를 할당받는다.
  2. 로컬에서 레포지토리 싱크를 하면 서버측 swc를 전부 내려받고 기본적인 폴더 구조를 내려받는다.
  3. 로컬에서 개발한 후 커밋하면 훅스크립트( http://www.javajigi.net/pages/viewpage.action?pageId=110395394 )를 이용하여 자동으로 서버측에서 컴파일을 일으킨 후
  4. 원더플과 마찬가지로 swf를 웹에 게시한다.
  5. 커밋로그를 작성할 때 다양한 매크로를 지원하여 swf에 대한 기술을 손쉽게 하고 서버가 swf를 컴파일한 후 swf에 대한 자세한 분석레포트를 같이 올린다.
  6. svn에 커밋된 내용은 웹에서 완전히 보고, 수정하고, 삭제할 수 있으며 기존 원더플 방식을 웹에서 파일을 새로 만들어 편집하는 것도 가능하게 한다.
  7. 상대방의 svn 중 원하는 패키지를 import할 수 있게 되어 유저가 작성한 라이브러리를 캡슐화한 상태에서 공유할 수 있다.
  8. 유저는 자신의 swf를 구동하는 도중에 몇개라고 썸네일을 생성해낼 수 있다.
  9. 서버에서 생성된 swf 및 썸네일은 전부 로컬로 다운로드 받을 수 있으며, 특정 유저의 레포지토리를 zip파일로 내려받을 수 있다.

대략적으로 보면 에디터를 Flash Builder 뿐 아니라 웹에도 에디팅이 되게 하고 SVN이 되기 때문에 어떤 에디터를 써도 무방하다는 것을 알 수 있습니다. 그만큼 파워플! 한거죠 ㅋ


파워플은 왜 필요한가?
일단 한국에서 뭔가 설계, 아키텍쳐, 기술을 공유하는 것은 너무 어렵습니다. 딱히 그 이유에 대해서 말씀드릴 필요는 없고, 이런 개발 환경에서 개발자들이 힘을 합해 파워플과 같은 사이트를 만들어 운영하기 시작하고 활성화 되면 어도비에서도 한국에 대한 관심을 가지기 시작할 겁니다. 뭔가 시장이 활발한 것을 보여줘야 어도비도 반응할 것이고 '어도비는 일본만 좋아해'라며 부러운 시선을 가지지 않아도 될겁니다. 

파워플은 아마도 개발자들이 참여하는 만큼 초반부터 영어로된 사이트가 되지 않을까 생각합니다. 정상적으로 만들어져서 운영이 된다면 한국개발자뿐 아니라 일본, 미국 개발자들도 유용하게 쓸 수 있는 사이트가 되지 않을까요? 만약 그렇게 정말루~ 된다고 생각해보세요.

그리고... 파워플이 활성화 되서 어도비 공식 기술 사이트로 선정되었다고 생각해보세요. 정말 뿌듯할 겁니다.

카페나 블로그에서 정보 공유하는 것을 뛰어 넘어서 우리도 뭔가 이런 일을 누군가는 해야만 한국 Flash 발전이 있을 것이고 이러한 활동이 Flash에만 국한되는 것이 아니라 관련 업종에도 영향을 주어 여러 벤치마킹한 사이트들이 많아진다면 그 또한 즐거운 일입니다.

파워플의 특성상 유용한 공개 프레임워크들이 많이 올라올 수도 있을 겁니다. 특이하고 멋진 아키텍쳐로 이루어진 애플리케이션도 경험할 수 있을 겁니다. 다른 개발자들과 함께 협업을 통해 함께 쓸 수 있는 결과물을 도출할 수 있을 겁니다. 그리고 우리도 Flex 5 만들 수 있지 않을까요?


파워플 개발 팀원 모집

파워플 서비스가 오픈되려면 다음과 같은 분야의 다양한 노가다를 필요로 합니다.
  • 리눅스 서버 셋팅 (아마도 데비안이 후보)
  • 아파치를 다양한 mod와 합체하여 최적화 컴파일설치
  • 서비스는 php로 작성
  • db는 mySQL..오라클 꼴보기 싫으면 pSQL이나 mSQL 쓸지도..
  • svn설치 및 아파치 연동
  • svn 훅스크립트 작성을 위한 리눅스 스크립트…냐 아니면 펄이나 파이썬이냐..아니면 php냐..
  • mxmlc와 mod연동
  • 웹사이트 제작
  • 위의 모든 서비스를 웹사이트에 인테그레이션
  • rss 및 다양한 웹배포수단 연동모듈작성
  • 예상컨데 자바나 c계열 소켓서버의 브릿지를 통해 as3 socket에서 인증을 처리해주고 아파치웹서버에 접근할 수 있게 해줄 예정(귀찮은데 펄데몬으로?)
  • 기타 워드프레스 인테그레이션도 하고 싶은…ㅋㅋㅋ

어떤 분야든 좋습니다. 함께 하실 분을 찾습니다.


현재 맴버


제작일정
  • 모집마감 : 없음(언제라도 들어와만 주신다면 감사할 따름 ^^;)
  • 프로젝트 런칭 및 킥오프미팅 : 아직은 미정이지만 4월 20일정도
  • 오픈 예정 : 6월? ㅎㅎ 과연

관련글
신규 프로젝트 팀원 모집


어쨌거나~~ 한번 정도 만나서 이와 관련된 이야기를 해보고 진행하는 것은 꽤 생산적인 일이 될겁니다.
우리도 원더플과 같이 멋진 국제 기술 사이트를 만들어 보자구요!
참여하실 분은 주저말고 신청해주세요. 단, 어느 부분에 있어서 하고 싶다는 것을 적어주시면 더욱 좋습니다.
여러분의 참여가 한국 개발 현실을 바꿀 수도 있습니다. ^^

이미 사비 들여서 도메인도 구입해 두었습니다.
powerfl.com, powerfl.net, powerfl.co.kr

도메인도 샀으니 해야만 합니다. ^^

많은 참여 부탁합니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/673)
Flash Builder 4 Plugin을 설치후 기존 프로젝트로 열었을때 황당한 문제에 봉착했다. 아래 그림처럼 툴바에 Run, Debug 버튼이 없어진 것이다.


한번도 이런적이 없어서 몇시간 당황했는데, 해결방법은 이외로 간단했다.

먼저 툴바위에 마우스 오른쪽 버튼을 눌러 Customize Perspective 를 선택한다. 또는 메뉴에서 Window > Customize Perspective 를 선택하면 되겠다. 그럼 다음과 같은 창이 나온다. 여기서 Command 탭을 선택한다.

위 그림과 같이 왼쪽 Available command groups에 Launch를 체크한뒤 OK버튼을 누른다.



휴~ 이거 하나 알아낼려고 엄청 힘들었다. 별것도 아닌것이... ㅎㅎㅎ

Flash Builder 는 언제든지 다운받을 수 있다. 다음 링크를 참고바란다.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

글쓴이 : 지돌스타(http://blog.jidolstar.com/608)

독립형 FB4(Flash Builder 4)를 사용하지 않고 굳이 Eclipse에 FB4 plugin을 설치하는 이유는 독립형 FB4는 기능의 제약점이 있기 때문이다. 물론 FB4로도 충분히 개발이 가능하지만 Eclipse와 연동하는 것은 이 편이 실무에 더욱 적합하다. 그 이유는 hika님의 글 Flex Builder는 반드시 Plug in 으로 설치 글을 읽어보면 알 수 있다.

하지만 이러한 설치법은 처음 해보는 사람에게는 단순하지 않다. 한방에 설치하는 독립형 FB4에 비해 이것저것 고려할 것이 많은 것 같은 생각이 들기 때문이다. 이 글을 쓰는 목적은 FB4 plugin을 설치를 하는데 있어서 다소 어려움을 쉽게 극복하기 위한 방법을 소개하기 위함이다.

설치하는 대략적인 순서는 hika님이 매우 잘 설명해 주었다.
Flex Builder는 반드시 Plug in 으로 설치

그러나 더욱 자세한 방법은 Chocodonut님의 글대로 하면 되겠다.
Flex Builder 3 Professional Eclipse plug-in 설치

FB4도 위 글과 거의 동일한 방법으로 설치하지만 아래와 같은 몇가지 체크할 사항이 있다. (단, 본인은 Window XP환경에서 테스트 했음을 언급한다. Mac이나 Linux의 경우 아래에서 지적한 문제가 있을지는 테스트해보지 않았다.)

1. Eclipse는 Ganymede를 설치한다.
먼저, Eclipse버전은 Ganymede RC2 버전을 이용하기 바란다. 최신 버전인 Galileo는 제대로 설치되지 않는다.
http://www.eclipse.org/downloads/
에서 화면 오른쪽에 Older Versions를 선택한 뒤 Eclipse Ganymede SR2 Packages로 들어간다. 여기서 Eclipse IDE for Java EE Developers를 다운로드 받으면 되겠다. 아래 링크로 직접가도 되겠다.
http://www.eclipse.org/downloads/packages/release/ganymede/sr2

다운받은뒤 설치를 원하는 곳에 압축을 풀면 설치가 완료이다. 설치완료후 반드시 한번이상 실행해준다.

만약 Galileo버전을 사용하고 싶다면 굳이 말리지 않는다. ^^
다음 글을 참고한다.
http://blog.naver.com/joycestudy/100090900907


2. Eclipse실행시 JVM terminated. Exit code=-1 에러가 발생하는 경우
Eclipse 설치폴더에 eclipse.ini를 열어 다음과 같이 수정한다.
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256M
-vm
C:\Program Files\Java\jdk1.6.0_07\bin\javaw.exe
-Dosgi.requiredJavaVersion=1.5
-vmargs
-Xms40m
-Xmx512m

원래 eclipse.ini에서 수정된 부분은 -vmargs의 위치가 -Xms40m 바로 위로 이동된 것이며 추가된 부분은 -vm 부분이 들어간 것이다. 이때 javaw.exe 경로는 각자 jdk또는 jre 설치 경로를 따라 설정하면 되겠다. 이렇게 해도 같은 에러가 난다면 검색을 통해 다른 방법을 찾길 바란다.


3. Flash Builder 4 plug in을 설치시 반드시 Eclipse 설치경로를 지정해줄것!
FB4 plug in을 설치하면 중간에 Eclipse설치 경로를 지정하는 순서가 있다. 이 부분을 잊지 말고 Eclipse 경로를 지정하기 바란다.


4. FB4를 실행할때는 Eclise를 실행하거나 FB4에 설치된 Run FB Plug-in with alternate Eclipse를 실행한다.
FB4 plug-in에서 Run FB plug-in 을 실행하면 eclipse-host-distro의 Eclipse가 실행되므로 이것을 사용하지 말자.

5. 바로가기를 FB4 아이콘으로 바꾸기
일반적으로 Eclipse를 실행하기 위해 바탕화면에 바로가기를 만들거나 빠른실행아이콘으로 등록해서 사용할 것이다. 하지만 이 바로가기는 기본 아이콘이 이클립스이다. 그러므로 기존에 사용하는 이클립스 아이콘이 있다면 무엇이 Flash Builder이고 무엇이 Eclipse인지 잘 분간이 안갈터...

바로가기의 아이콘을 Flash Builder 아이콘으로 바꿔보자.
1. Flash Builder Plug-in이 설치된 폴더로 가서 eclipse-host-distro 폴더에 가면 Eclipse.ico 파일이 있다. 이것을 복사해서 Eclipse 설치 폴더에 복사한다.
2. 다음으로 바탕화면 또는 빠른실행아이콘을 선택해 마우스 오른쪽 버튼을 눌러 속성을 선택한다.
3. 아이콘 변경 버튼을 눌러 Eclipse 설치 폴더에 복사한 Eclipse.ico로 바꿔준다.

이제 근사하게 Flash Builder 아이콘을 가진 바로가기를 만들 수 있게 되었다.


6. 이전 워크스페이스를 열때 만약 Run, Debug 버튼이 사라진다면!
다음 글을 참고한다.
Flash Builder/Flex Builder의 툴바에서 Run, Debug Launch 버튼이 없어진 경우 해결법


7. 이전 워크스페이스의 SDK경로는 따로 빼자!
Flash Builder의 SDK가 아닌 기존에 원래 사용하던 SDK를 참조할 필요가 있는 경우가 있다. 이런 문제를 해결하기 위한 방법은 여러가지가 있겠지만 본인은 C나 D 드라이브로 SDK폴더를 따로 만들어 FB가 이 SDK를 참조하도록 하고 있다.

다음과 같이 진행한다.

1. C나 D 드라이브등에 사용할 SDK를 복사한다.(새 FB의 설치경로에 sdks에 있는 파일을 복사할 수 있다.)
2. FB를 실행한다.
2. 메뉴에서 Window > Preference를 선택한다.
3. 창이 뜨면 좌측에 Flash Builder를 열어 Installed Flex SDKs를 선택한다.
4. 우측에 Flex 3.4, Flex 4.0이 이전 FB버전의 경로를 참고하고 있을 것이다. 이를 C나 D드라이브에 복사한 SDK를 참조하도록 한다.


8. 기본 플러그인 설치는 기본!
독립형 FB4에는 설치되지 않는 플러그인이 Eclipse에는 언제든지 설치가 가능하다. 주로 협업이 이뤄지므로 SVN등을 설치해야하고 다양한 배포 경로를 확보하기 위해 ANT관련 설정이 필요할 것이다. C/C++개발을 위한 CDT, PHP개발을 위한 PDT등 플러그인을 제한없이 설치할 수 있으니 Eclipse의 FB4 plugin을 설치하는 편이 훨씬 득이라는 것을 느낄 수 있을 것이다.

다음글들을 참고하면 좋겠다.
Flex Builder 에서 Subversion(SVN) 사용하기
Flex Builder 3에서 ANT 사용하기
Maven 시작하기


정리하며
사실 위에 제시한 사항들은 개인적으로 사용하는 방법이다. 꼭 그렇게 따라할 필요 없으며 필요시 참조하면 무난할 것이라 판단한다.

실무에 종업하시는 분들은 왠만하면 FB4 플러그인을 사용하고 있다. hika님의 블로그에 실무를 통해 자주 사용하는 설정정보를 정리해두었으니 참고 바란다.

플래시를 위한 이클립스 기본 설정

다음 글들은 이외에 개발에 큰 도움이 되는 글이니 참고 바랍니다.
플래시 어플리케이션 개발하기
플래시 프로젝트 생성하기


다운로드
Flash Builder 및 갖가지 Adobe 제품군을 다운로드 받으려면 다음 링크를 참고하세요.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026

글쓴이 : 지돌스타(http://blog.jidolstar.com/607)


 

Flex Builder 또는 Flash Builder 에서 유용하게 사용할 수 있는 플러그인을 소개했습니다. 더 많을 것이라 생각하는데 함께 공유했으면 좋겠네요. 댓글, 트랙백 모두 환영합니다.

http://opencast.naver.com/FL188/8


참고로 Flash Builder는 아래 링크로 가서 다운받으세요.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 


글쓴이 : 지돌스타(http://blog.jidolstar.com/581)

 

위 그림은 Flex Builder 3(Flash Builder 4)의 Profiling(프로파일링) 기능에서 시간별 메모리의 상태를 보여주고 있는 것이다. 프로젝트를 하다가 저놈의 메모리가 도데체 왜 올라가는지 이해할 수 없었다. 분명 참조를 제대로 지워주고 있지 않으렸다!

 

등록했던 이벤트도 지워주고 자식들도 빼주고 붙여주면서 원인을 분석해갔다. 전체에서 부분으로 부분에서 전체를 훑어보면서 메모리의 변화를 계속 살펴봤다.

 

 

위 그림은 메모리가 정상적으로 반환되고 있는 모습이다. Flash Player에서는 참조관계가 root에 묶여 있거나 환형참조일때 가비지 컬렉션(Garbage Collection)으로 인식하여 어느 서점에 메모리에서 해지를 시킨다. 그래서 개발자는 참조를 잘 지워줘야 한다.

 

메모리가 비정상적으로 올라간 첫번째 원인은 이벤트 핸들러를 등록만 하고 지우지 않은데서 비롯되었다. 그래서 이벤트 핸들러를 약참조(weak reference)로 하도록 해서 해결했다. 약참조의 경우 소멸시점이 명확하지 않을때 유용하게 사용할 수 있다. 그리고 객체 중복 참조로 인해 메모리가 상승했는데 한쪽에서만 참조를 없애고 다른 한 곳에서는 삭제하지 않은 오류를 범했다. ㅡㅡ;

 

아~ Flex Builder에 이 기능이 없었다면 저걸 어떻게 찾을 수 있었을까? Flash Builder 4부터는 이 프로파일링 기능에 퍼포먼스 해석(performance analysis)기능 까지 추가 되고 개선되었다는데~~ 어찌하는지 해봐야 겠다.

 

Flex Builder에서 디버깅&프로파일링 하기 - 1부 -

Flex Builder에서 디버깅&프로파일링 하기 - 2부 -

 
Flash Builder는 아래 링크에서 다운로드 받을 수 있습니다.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

오늘 한국 Adobe RIA 공식사이트에서 발생된 ACC 뉴스레터를 이메일로 받았습니다. 

 

ACC는 Adobe Community Champion의 약어로 글로벌 정책으로 Adobe 각 제품군(Flash/Flex/AIR등)별 전문가들을 말합니다.  ACC 뉴스레터는 1개월에 한번씩 정기적으로 회원들에게 이메일을 통해 전송되며 한국 Adobe RIA 공식사이트에 가입하시면 받으실 수 있습니다.

 

제가 쓴 글을 비롯해 ACC분들의 글들이 올라왔습니다. 

 

ACC는 단순히 전문가만을 의미하지 않습니다. 또한 ACC라서 최상의 기술을 가지고 있는 것 또한 아닙니다. ACC가 아니더라도 드러내지 않는 실력 가지신 분들도 많답니다. 그럼 ACC는 어떤 사람들일까요?

 

제가 생각하는 ACC는 바로 Adobe 기술의 전도사입니다.

 

처음 Adobe 기술을 접하시거나 Adobe의 새로운 기술을 알고 싶고 때로는 토론하고 싶다면 ACC 분들과 적극적으로 커뮤니케이션을 유지하시면 좋겠다는 생각을 합니다.

 

한가지 조언드릴 것은 Adobe 기술도 나름 분야가 방대합니다. Flash, Flash Lite, Flex, ColdFusion, AIR, LiveCycle, BlazeDS 등등.. 아무리 ACC더라도 자신이 잘알고 해본 분야는 제한되어 있고요. 다 아는 것이 아닙니다. 그러므로 각각의 ACC의 전문분야를 잘아시고 목적에 맞게 대화를 하시는 것이 좋을 것 같습니다.

 

저의 경우 스타플(http://starpl.com)에 Adobe Flex/Flash 기술을 도입하면서 얻은 지식을 공유할 수 있습니다. Java분야나 ColdFusion, Flash Lite는 저도 잘 모릅니다. 그러므로 스타플에서 사용된 별지도, 별꾸미기, 위젯, 이미지에디터 등 Adobe RIA 기술에 국한되어 답변할 수 있을 것 같습니다. 같은 ACC지만 저도 다른 ACC의 도움을 받습니다. 그러므로 이 글을 보시는 여러분도 ACC와 소통하실때 그 부분을 잘 참고하시길 바랍니다.

 

또 한가지!

 

소통의 도구로 가장 좋은 것은 블로그입니다. 글 쓰는게 어려우신 분은 어쩔 수 없다지만 제가 생각할 때 블로그만큼 좋은 소통의 도구가 없습니다. 제가 ACC가 된 것도 블로그를 통해 기술을 공유하고 또한 소통하면서 얻은 타이틀입니다. 제가 잘해서 또는 이쪽에 탁월한 전문가이기 때문은 아니라는겁니다. ACC는 기술의 전도사라는 말을 기억하시면 이를 쉽게 이해할 수 있을겁니다.

 

제가 블로그를 강조하는 이유는 가령 이렇습니다. 일전에 제가 [ActionScript 3.0] Stage.invalidate()를 호출해도 Event.RENDER 이벤트가 발생하지 않는 문제 해결 글을 올렸습니다. 이 글을 올린데에는 단순히 지식전달 수준이 아닙니다. 지식전달만 목적이라면 블로그 할 필요없죠. 댓글을 보시면 답이 나옵니다. 서로 지식이 공유되고 있지요. 이게 파격적인 겁니다. 잘 모르더라도 잘 정리해서 글을 적으면 함께 고민하는 사람과 이야기할 수 있고 서로 알아갈 수 있습니다. 블로그는 댓글 기능만 있는 것이 아니라 블로그의 글끼리 묶어주는 트랙백(엮인글)이 됩니다. 또한 RSS발행을 통해 관심분야 사람들 유입경로를 만들어줍니다. 아직도 개발자인데 블로그 안하시나요? 공부하고 싶고 인맥을 구축하고 싶은데 블로그를 안하시나요? 실력이 없어서 또는 잘 모르는 지식 때문에 괜히 악플달릴까 고민하는 것은 좋지 않는 생각입니다. 틀리는 것을 부끄럽다고 생각하지 말아야 발전이 있는 것이니깐요. 블로그 하시는 것이 여러분의 실력을 키우는데 큰 도움이 되는 것을 강조하고 싶습니다. 적어도 저는 블로그의 혜택을 톡톡히 보는 사람중에 한사람이라 자신있게 강조합니다. ^^

 

ACC는 앞으로도 Adobe RIA 기술의 전도사로서 여러 활동을 할겁니다. 기대해주시고 기억해주세요. ^^

Flex, Flash, ActionScript, AIR....

Adobe RIA 기술을 처음 접해본 이들에게 이 용어들의 구분은 매우 생소하다. 앞에 3개는 모두 Flash Player에서 돌아가는 SWF파일을 만들어주는 툴 및 언어이다. AIR는 이러한 것을 확장해서 데스크탑 영역까지 애플리케이션을 제작할 수 있는 기술이라고 할 수 있다.

 

많이 헷갈리는 것중에 하나가 바로 Flex, Flash, ActionScript 의 구분이다. ActionScript는 Flex, Flash 애플리케이션을 개발하는 가장 핵심이면서 기반이 되는 언어이다. Flex는 ActionScript 3.0을 확장해 RIA를 지원하기 위한 일종의 프레임워크이다. Flash는 ActionScript 초기 시절부터 있는 일종의 툴로서 이펙트 및 다양한 효과를 제작하는데 적절하도록 구성된다. 결국 Flex, Flash의 태생은 ActionScript 이고 어떤 목적을 가지고 제작하느냐에 따라 Flex, Flash로 구분해서 개발한다. 물론 어떤 것을 선택하든지 결과물은 SWF이다.

 

재미있는 사실은 Flash는 뭔가 디자인 중심적으로 느껴지는 반면, Flex는 개발적이고 기술적으로 여겨는 풍토가 있다. Flash 개발자라고 말하는 것보다 Flex 개발자라고 하면 연봉협상에도 유리할지 모른다. 하지만 Flash 개발이든 Flex 개발이든 어떤 애플리케이션을 만드냐에 따라 선택이 달라지는 것이지 개발의 질이 달라지는 것은 절대 아니다. 여기서 선택이라는 것은 가령 이렇다. 기업솔루션을 구축해야하는 상황이면 서버 구성 및 데이타 통신, 데이터 관리, 각종 컴포넌트를 아낌없이 지원해주는 Flex로 개발하는 것이 좋다. 하지만 Google Map과 같이 Flex 컴포넌트를 전혀 사용하지 않는다면 Flash 기반이나 순수 ActionScript 기반으로 개발하는 것이 맞다.

 

Adobe에서 Flex Builder 3의 다음 버전을 Flex가 아닌 Flash Builder 4로 지정하기로 했다. Flash Builder 4는 현재 Flash CS4와 같은 툴이 아니라 지금의 Flex Builder와 같이 Eclipse기반으로 만들어진 툴이다. 또한 Flex 4 SDK(현 Flex Gumbo)를 기반으로 Flex 개발환경을 지원한다. 결국 그런거다. Adobe RIA기술의 핵심은 Flash다. 그리고 Flex도 결국 Flash다. 다만 Flex SDK를 기반으로 제작하면 Flex SDK로 만들어진 Flash 애플리케이션인 것이다.

 

차기 버전이 Flex Builder 4 대신 Flash Builder 4로 지정한 것은 여러모로 바람직해 보인다. 일단 같은 SWF 결과물을 만들어 준다는 암시를 지니기 때문에 의미전달이 쉬워진다. 겉모습은 전부 Flash이지만 개발방법은 선택하기 나름인 것이다. Flex SDK를 사용하면 그 사람은 여전히 Flex 개발자인 것이다. 앞으로 디자이너와 개발자간에 협력 도구인 Flash Catalyst는 Flash Builder와 매우 자연스럽게 연동이 된다. 그런데 어떤것은 Flex, 어떤 것은 Flash, 이렇게 되면 뭔가 섞일 수 없는 느낌이 든다.

 

2009년 6월 쯤에 1차 베타버전이 나오고 4분기면 정식 버전이 출시될 것이다. 아무튼 기존 보다 개발의 편의성을 극대화 시킬 수 있는 Flash Builder 4가 나오길 기대한다.

 

이것만은 기억하자.

이제 더 이상 Flex는 Flex Builder를 지칭하지 않는다. Flex는 Flex SDK를 지칭하며 그것을 이용해서 개발하는 툴은 Flash Builder 4인 것이다.

Flash Builder 4는 다음 링크를 통해 다운받으세요.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

Flex Builder에서 라이브러리 프로젝트를 구성하다가 컴파일시 "unable to export SWC oem" 에러가 발생하며 SWC를 생성하지 못하는 경우가 종종 발생한다. 대부분의 경우, 라이브러리 빌드 Assets 경로에 등록한 파일의 경로가 강제로 수정되거나 삭제되었을 때 발생한다. 이 에러를 해결하기 위해 다음과 같이 진행해보자.

 

이 Assets 경로는 SWC로 만들때 필요한 자원을 포함하기 위한 것으로 comps 컴파일러의 옵션중에 -include-file 을 주는 것과 동일하다.

 

만약 존재하는 asset이 Assets 리스트에 존재하는데도 불구하고 에러가 발생했다면

 

1. Project 메뉴 > Properties > Flex Library Build Path > Assets 탭

2. asset을 uncheck한다.

3. OK버튼을 누른다.

4. 다시 똑같이 돌아가서 해당 asset을 re-check한뒤 OK버튼을 누른다.

 

 

만약 존재하지 않는 asset이 Asset 리스트에 등록되어 있어 에러가 발생했다면 임시로 해당 asset을 추가하는 방법으로 해결한다.

 

1. New > File 에서  하나의 파일을 만든다.

2. Project 메뉴 > Properties > Flex Library Build Path > Assets 탭

3. 새로 만든 파일을 check한다.

4. OK 버튼을 누른다.

5. 다시 돌아가 새로운 파일을 uncheck한 뒤 그것을 삭제한다.

 

 

같은 에러가 발생한 분들에게 도움이 되었으면 한다. ^^

Flex Builder 3에서 ANT로 원하는 파일을 FTP로 전송하는 방법에 대해서 소개한다.

 

참고로 Flex Builder에서 ANT 환경을 구성하는 방법은 필자가 이전에 작성한 “Flex Builder 3에서 ANT 사용하기”를 읽어보면 되겠다.

 

ANT 환경에서 FTP를 이용하는 경우는 필자의 경우 asdoc등으로 만들어진 문서를 웹에 배포할 때였다. FTP는 ANT에서 기본적으로 제공하는 명령이 아니기 때문에 추가적으로 라이브러리를 설치해야 한다. 이 라이브러리는 Apache Jakarta프로젝트에서 개발한 Commons Net를 사용하면 된다.

 

FTP작업을 위한 환경 만들기

다음과 같은 순서로 환경을 만든다.

  1. Commons Net 2.0 Binary버전을 다운받아 압축을 푼다. 그리고 해당 폴더를 관리하기 편한 위치에 옮겨둔다.
  2. Flex Builder의 메뉴에서 Windows > Perferences를 선택하면 아래와 같은 창이 나온다. 왼쪽 메뉴에 Ant > Runtime을 선택한다. 그리고 Classpath 탭을 누르고 Ant Home Entries를 선택한다. 오른쪽에 Add External JARs… 버튼을 눌러 Commons Net안에 commons-net-2.0.jar와 commons-net-ftp-2.0.jar을 추가하도록 한다.

 

 

FTP 전송을 위한 ANT Script 작성

ANT 스크립트를 아래와 같이 작성한다.

 

<ftp server="${ftp.server}"
port="${ftp.port}"
remotedir="${ftp.dir}"
userid="${ftp.userid}"
password="${ftp.password}"
depends="yes"
binary="no"
>
<fileset dir="{dir.docs}">
<include name="**/*.html"/>
</fileset>
</ftp>

 

위 스크립트를 실행하면 아래처럼 비슷하게 Flex Builder 3의 Console창에 출력하며 전송이 될 것이다.

Buildfile: D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\build\as3utils.build.xml
asdoc.ftp:
[ftp] sending files
[ftp] transferring D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\docs\all-classes.html
[ftp] transferring D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\docs\all-index-A.html
[ftp] transferring D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\docs\all-index-B.html
[ftp] transferring D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\docs\all-index-C.html

[ftp] transferring D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\docs\style.css
[ftp] transferring D:\STARPL_DEV_02\Map\mapdev3\20090421\as3utils\docs\title-bar.html
[ftp] 75 files sent
BUILD SUCCESSFUL
Total time: 15 seconds

 

FTP 사용시 각종 옵션은 http://ant.apache.org/manual/OptionalTasks/ftp.html 를 참고한다.

 

 

이 글은 Flex Builder 3환경에서 ANT를 사용하여 개발의 효율성을 높이는 방법을 이해하는데 목적이 있다. 처음 ANT를 접하는 사람을 위해서 ANT가 무엇이고 사용해야하는 필요성도 언급한다.

 

ANT란?

 

ANT(http://ant.apache.org/)는 자바기반의 빌드 자동화 툴이다. 자바개발자라면 한번쯤은 사용해봤을 것이다. ANT는 일반 개발툴의 개발한계를 극복하는데 유용하다. ANT를 이용하면 여러가지로 분산된 일을 단 한번에 처리할 수 있고 또한 처리 순서를 쉽게 배치할 수 있어 매우 유용하다. 가령 어떤 작업을 처리를 위한 프로세스를 아래와 같이 한다고 하자.

 

  • build 폴더 생성
  • build 폴더 안에 classes 폴더 생성
  • src폴더 안에 있는 소스를 컴파일한 뒤 결과를 classes 폴더로 전송
  • 결과물을 테스트 공용 FTP 서버로 전송
  • 문서제작

 

위와 과정을 손수 하나씩 처리하려고 하면 귀찮기 짝이 없을 것이다. ANT는 이러한 처리를 단 한번에 처리할 수 있도록 해서 작업의 능률을 높여준다.

 

ANT는 ANT자체로도 충분히 사용할 수 있으나  Eclipse나 Flex Builder등에 플러그인으로 설치하여 사용할 수도 있다. ANT는 기존 개발툴에서 개발시 극복하지 못하는 상황을 해결해주는 좋은 도구이다.

 

ANT는 XML형태로 작성된 문서를 이용하며 기본적인 문법만 익히면 쉽게 활용이 가능하다. 여기서는 ANT에 대한 전반적인 지식을 다루기에는 무리가 있으므로 해당 문서를 검색하거나 관련서적을 구입해서 학습하면 좋겠다.

 

 

Flex Builder 3의 개발환경 이해하기

ANT를 사용하기에 앞서 Flex Builder 3의 개발 환경에 대해 어느 정도 이해가 필요하다. Flex Builder 3는 별다른 어려운 설정이 없이 Flex/AIR 프로젝트, 라이브러리 프로젝트, ActionScript 3.0프로젝트 등의 개발 환경을 구성해준다. Eclipse Flex Builder 3 Plugin을 설치해도 이와 동일하게 개발이 가능하다.

 

Flex Builder를 사용하지 않는다면 여러분은 다음과 같은 방법으로 콘솔 환경에서 컴파일을 해야한다. (이는 한가지 예시일 뿐이다.)

 

compc -namespace http://www.adobe.com/2006/foo manifest.xml -source-path .
	-include-namespaces http://www.adobe.com/2006/foo -include-classes mx.containers.MyWindow
	-include-file MyWindow.png mx/containers/MyWindow.png
	-output='MyWindow.swc'

 

아래는 위 컴파일시 사용되는 manifest.xml이다.

<?xml version="1.0"?>
<componentPackage>
	<component id="MyWindow" class="mx.containers.MyWindow"/>
</componentPackage>

 

위에서 compc 명령어는 Flex SDK의 bin폴더에 있는 컴파일러로 AS3 라이브러리의 결과물인 SWC를 만들 때 사용하는 명령어이다. Flex Builder는 개발자가 이런 명령에 대한 자세한 내용을 모르더라도 아주 간단하게 SWC를 만들 수 있도록 한다. Flex Builder를 사용하지 않으면 해당 명령어를 알아야 한다고 하니 Flex Builder가 고마워진다. ^^;

 

위처럼 SWC를 만들때 사용하는 라이브러리 프로젝트 외에 애플리케이션을 만드는 Flex 프로젝트나 ActionScript 3.0 프로젝트의 경우에는 mxmlc 명령어를 사용한다. mxmlc 명령어는 일반 애플리케이션 이외에도 CSS, 리소스 모듈, 모듈 등을 컴파일할 때도 사용한다. 또한 Class별 문서제작은 asdoc 명령어를 사용한다. Flex Builder를 이용하면 compc, mxmlc 등을 몰라도 최소한의 개발이 가능하다는 것을 아는 것이 중요하다.

 

compc, mxmlc, asdoc과 같은 명령어는 Flex Builder가 설치해 있는 MS Window 환경이라면 C:/Program Files/Adobe/Flex Builder 3/sdks/{Flex SDK 버전}/bin 폴더 내에 있다. 여기서 {Flex SDK 버전} 부분은 언제든지 Flex SDK의 다른 버전을 설치해 사용할 수 있다는 것을 의미한다. Flex SDK 다운로드 페이지에서 다운받아 여기에 복사한 뒤 사용하면 되겠다.

 

아래는 Flex Builder 3에 있는 Flex SDK들이다. 개발자는 필요에 따라 여기에 최신 SDK를 복사해서 사용한다.

 

 

아래는 각각 SDK폴더의 bin 폴더 내에 있는 명령어들을 보여준다. 여기에 위에서 언급한 mxmlc, compc등이 있다는 것을 확인하자. Flex Builder는 이들 명령어를 이용해 개발자가 구체적으로 알 필요 없이 내부적으로 SWF, SWC등과 같은 결과물을 만들어 낸다.

 

위 경로는 MS Window XP일 때이다. 다른 운영체제(Mac OS, Linux)의 경우는 다르다.

 

ANT를 언제 사용해야하는가?

Flex Builder 3가 개발의 편의성을 제공함에도 불구하고 Builder에서 제공하는 컴파일 방법만 이용하면 개발 규모 및 방향에 따라 개발의 한계에 도달할 수 있다. 예를 들어, 잦은 라이브러리 변경은 라이브러리가 수정될 때마다 그 라이브러리를 이용하는 프로젝트도 재컴파일하게 되어 결과물을 보여주므로 그만큼 결과를 보는데 오랜 시간이 걸리는 문제가 발생할 수 있다. 또는 Flex Builder 3에서 제공하는 컴파일 방식으로는 능동적으로 다른 프로젝트간에 결과물을 공유할 수 없다. 가령, 다른 프로젝트의 bin폴더의 swc를 참조해서 컴파일해야하는 경우나 만든 프로젝트 결과물을 FTP로 바로 올려야하는 경우, 또는 여러개의 SWF를 복사해서 다른 폴더에서 사용할 수 있도록 배치하는 경우는 Flex Builder 3에서 제공하는 기능만으로는 불가능하다.

 

몇가지 예만 들었지만 Flex Builder만으로 할 수 없는 일들이 종종 생긴다는 것을 이해하는 것이 중요하다. 이러한 이유로 개발 규모 및 방향에 따라 ANT를 도입하여 Flex Builder로만 개발할 때의 단점을 극복하여 능동적이고 가벼운 컴파일링 및 프로젝트간 컨텐츠 공유등을 할 수 있도록 한다.

 

ANT를 도입하게되면 Flex Builder가 하지 못하는 것을 극복하는 것은 사실이지만 개발 자체를 쉽게 해주는 것은 아니다. 왜냐하면 앞서 설명한 mxml, compc와 같은 명령어를 사용하는 방법을 익혀야하며 또한 ANT자체 문법도 익혀야하기 때문이다. 대신 앞서 설명한 한계를 극복하는데 ANT의 선택은 좋은 방법이 될 수 있다.  ANT를 분별없이 무조건 도입하면 오히려 개발 능률을 떨어뜨리게 된다. 그러므로 Flex Builder로 개발 한계에 도달했을 때만 도입하도록 한다.

 

Flex Builder에서 ANT 개발환경 구축하기

Flex Builder 3부터 ANT를 지원하고 있다. 이 말은 Flex Builder 3를 설치하면 ANT관련 Plugin이 설치가 되어 있다는 것을 의미한다. 아래는 Flex Builder 3의 plugins에 ANT가 설치되어 있는 것을 보여주고 있다. 

 

1. JDT(Eclipse Java Development Tools) 설치

 

Flex Builder 3부터는 ANT를 지원한다. 하지만 ANT를 사용하려면 Flex Builder에 JDT를 설치해야한다.  다음 문서에서 설명하는 것처럼 JDT를 설치하도록 한다.

 

Adding the ANT support in Flex Builder 3

 

또는

http://www.flex-tutorial.fr/2009/09/04/installer-ant-dans-flex-builder-3/

 

2. 설치된 ANT 확인

 

JDT를 설치한 후 Flex Builder를 재실행하면 Window->Other View에서 아래와 같이 Ant를 선택할 수 있다.

 

 

선택하면 Flex Builder에 아래와 같은 Ant View 창을 볼 수 있다. 이 창에 필요한 ANT XML문서를 놓아 사용하면 되겠다.

 

 

ANT에 관련된 설정은 Flex Builder 메뉴에서 Window->Preferences를 선택하면 아래와 같은 창이 나오고 좌측 메뉴에서 Ant를 선택하면 각종 설정을 할 수 있다. 대부분의 경우 기본설정으로 두면 되겠다.

 

 

 

Flex SDK 환경에서 ANT 개발 환경 구축하기

참고로 Flex Builder와 상관없이 Flex SDK로만 개발하거나 Flex Builder가 아닌 다른 개발툴을 사용하고자 한다면 아래와 같은 방법으로 환경을 조성하면 된다. (Window XP 기준)

 

1. Ant를 다운로드 받아 설치한다.

 

http://ant.apache.org/bindownload.cgi

 

현재 최신 버전은 1.7.1이다. C에 압축푼다.  그리고 C:/ant1.7.1에 설치한다. 다음으로 환경변수를 등록하는데 시스템 변수로 Path에 C:/ant1.7.1/bin;을 넣어주면 되겠다. 다른 운영체제의 경우는 환경변수 등록하는 방법이 다를 것이다.

 

 

환경변수 추가 후 다음과 같이 콘솔창 띄우고 ant 명령을 줘본다. build.xml이 없으므로 오류메시지 발생하며 정상적으로 실행된 것이다.

 

 

2. Flex SDK의 ant/lib 폴더에  flexTasks.jar를 Ant설치 폴더(C:/ant1.7.1)의 lib폴더에 복사한다.

 

3. build.xml를 구성하여 Flex,ActionScript 3.0로 개발된 것을 콘솔창에서 ant 명령을 이용해 컴파일 및 실행등을 하면 되겠다.

 

이에 대한 자세한 내용은 ANT관련 서적 및 Using Flex Ant Tasks(Flex 3) 문서를 참고한다.

 

Flex Builder 3 환경에서 ANT로 개발해보기

ANT를 이용해 mxmlc, compc, html-wrapper등을 이용하는 방법은 Flex Live docs의 Using Flex Ant Tasks 에 대부분 소개되어 있다. 그리고 Flex 컴파일러인 mxmlc, compc을 사용할 때 옵션은 Using the Flex Compliers문서에 대부분 나와 있다. 이 두 가지만 습득하면 ANT를 이용한 개발 방법은 대략 익히게 된다.

 

영어가 부족하다면 현 ACC(Adobe Community Champion)인 이만영님이 쓰신 Flex Ant Task를 이용한 자동화 빌드 구축하기 문서를 읽어보자. Flex Builder 2기준으로 만든 문서이긴 하지만 지금도 매우 유용하다.

Flex Builder에서 ANT를 이용한 개발은 소개한 문서만 익히면 어느 정도 알 수 있다. 중요한 것은 직접 따라 해보는 것이 중요하다.

 

여기서는 간단하게 Flex Builder 3에서 ANT를 활용하는 방법을 익혀본다.

개발목표는 여러 개의 위젯을 만들고 그 위젯을 로드하는 테스터 프로그램을 만드는 것이다. ActionScript 3.0 프로젝트로 개발할 것이다. 만들어진 결과물은 왼쪽 그림에서 보여주는 것과 같이 bin폴더에 들어가며 위젯의 경우 bin/widgets에 들어간다. 이러한 조건을 만족하도록 개발하려면 Flex Builder 3의 컴파일 기능만 가지고는 안 된다. 왜냐하면 Flex Builder 3에서 기본적으로 제공하는 컴파일 방식으로는 widgets폴더와 같이 다른 폴더에 들어가도록 만들 수 없기 때문이다. 이 조건 하나만으로도 수동작업을 해야 하는 개발의 어려움이 발생한다. 하지만 ANT를 사용하면 이 문제를 깔끔하게 해결할 수 있게 된다.

 

아래 예제 소스 다운로드 :  MyWidgets.zip

 

 

1. ActionScript 3 프로젝트를 만든다.

프로젝트 명은 MyWidgets 라고 하자.

 

2. src 폴더에 IWidget, AbstractWidget을 만들자.

IWidget는 init()함수만 선언한다.

package
{
	/**
	 * 위젯 인터페이스
	 */
	public interface IWidget
	{
		/**
		 * 초기화 함수
		 */
		function init():void;
	}
}

그리고 AbstractWidget는 IWidget을 구현하고 Sprite를 확장해서 만든다.

package
{
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;

	/**
	 * 위젯 추상 클래스
	 */
	public class AbstractWidget extends Sprite implements IWidget
	{
		/**
		 * 추상클래스 생성자
		 */
		public function AbstractWidget()
		{
			super();
			this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler );
		}

		/**
		 * @private
		 */
		private function addedToStageHandler( event:Event ):void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler );
			init();
		}

		/**
		 * @inheritDoc
		 */
		public function init():void
		{
			throw new Error("Override 정의해서 사용가능합니다.");
		}

	}
}

 

3. Widget 3개를 만들자.

이것은 네모, , 세모의 모양을 가지는 위젯이다. 위젯 이름은 각각 Widget1, Widget2, Widget3로 만든다. 이들 위젯은 모두 AbstractWidget을 확장해서 구현한다. 그리고 IWidget init()함수를 override한 뒤 해당 모양을 그려준다.

 

package
{
	import flash.display.Shape;
	import flash.events.Event;

	[SWF(width='100', height='100',backgroundColor='#000000')]
	/**
	 * Widget1
	 */
	public class Widget1 extends AbstractWidget
	{
		/**
		 * 생성자
		 */
		public function Widget1()
		{
			super();
		}

		/**
		 * @inheritDoc
		 */
		override public function init():void
		{
			var shape:Shape = new Shape;
			shape.graphics.clear();
			shape.graphics.lineStyle( 2, 0xff0000, 1 );
			shape.graphics.beginFill( 0xffffff, 1 );
			shape.graphics.drawRect( 0, 0, 100, 100 );
			shape.graphics.endFill();
			addChild( shape );
		}

	}
}

 

4. MyWidgets에 만든 3개의 위젯을 로드하는 프로그램을 만든다.

MyWidgets는 일종의 위젯 테스트용이다. IWidget을 구현한 어떤 위젯이든 올릴 수 있다. 인터페이스 IWidget은 다형성을 고려하기 위한 것이다. 동작방식은 단순하다. 숫자 1부터 3까지 키를 누르면 해당 위젯이 Loader를 통해 로드되어 렌더링된다.

 

package {
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.KeyboardEvent;
	import flash.net.URLRequest;
	import flash.system.ApplicationDomain;
	import flash.system.LoaderContext;

	/**
	 * 위젯 테스터
	 */
	public class MyWidgets extends Sprite
	{
		private var loader:Loader;
		private var loadedWidget:IWidget;

		private var widgetList:Array = [ 'Widget1', 'Widget2', 'Widget3' ];

		/**
		 * 생성자
		 */
		public function MyWidgets()
		{
			super();
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardEventHandler );
		}

		/**
		 * @private
		 * 키보드로부터 숫자를 받아 해당 위젯을 로드한다.
		 */
		private function keyboardEventHandler( event:KeyboardEvent ):void
		{
			var widgetNumber:int = event.charCode-48;
			if( widgetNumber < 0 || widgetNumber > widgetList.length ) return;

			var widgetURL:String = "widgets/" + widgetList[widgetNumber-1] + ".swf";
			if( loader == null )
			{
				loader = new Loader();
				addChild( loader );
			}

			var request:URLRequest = new URLRequest( widgetURL );
			var context:LoaderContext = new LoaderContext( false, new ApplicationDomain( ApplicationDomain.currentDomain ) );
			loader.load( request, context );
		}
	}
}

 

5. ANT를 구성한다.

프로젝트 폴더에 build폴더를 만들고 거기에 build.xml과 build.properties 파일을 만들고 다음과 같이 스크립트를 코딩한다.

 

아래는 build.properties이다.

# -----------------------------------------------------------------
# User-Defined Paths
#
# Modify these path values to reflect paths on your system
# -----------------------------------------------------------------

# The location of the Flex 2 SDK on your sytem.
flex3sdk.home.dir = C:/Program Files/Adobe/Flex Builder 3/sdks/3.3.0
flex3sdk.bin.dir = C:/Program Files/Adobe/Flex Builder 3/sdks/3.3.0/bin
flex3sdk.lib.dir = C:/Program Files/Adobe/Flex Builder 3/sdks/3.3.0/frameworks/libs

# Note that the locale dir uses the {locale} token at the end to specify the directory
# of language-specific files.  This is replaced by the compiler with the locale defined
# by the locale property below.
flex3sdk.locale = en_US
flex3sdk.locale.dir = C:/Program Files/Adobe/Flex Builder 3/sdks/3.3.0/frameworks/locale/{locale}

asdoc.exe = ${flex3sdk.bin.dir}/asdoc.exe
compc.exe = ${flex3sdk.bin.dir}/compc.exe
mxmlc.exe = ${flex3sdk.bin.dir}/mxmlc.exe

# The debug player is necessary here because it writes trace statements to a flashlog.txt
# file.  This allows us to examine the .txt file and determine the status of unit tests
# in an automated fashion.
flashDebugPlayer.exe = C:/Program Files/Adobe/Flex Builder 3/Player/10/win/FlashPlayer.exe

# -----------------------------------------------------------------
# Project Paths - DO NOT MODIFY
# -----------------------------------------------------------------
build.dir = ${basedir}/build
src.dir = ${basedir}/src
bin.dir = ${basedir}/bin
docs.dir = ${basedir}/docs

 

아래는 build.xml이다.

 

<?xml version="1.0" encoding="utf-8"?>
<project name="MyWidgets" basedir="../">

	<!-- 이 build 스크립트에서 사용할 variable 및 path 정의  -->
	<property file="./build/build.properties" />

	<!-- 해당 properties가 설정 되어 있는가 확인 -->
	<target name="properties">
		<fail unless="asdoc.exe">The "asdoc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="compc.exe">The "compc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="mxmlc.exe">The "mxmlc.exe" property must be set in ${build.dir}/build.properties.</fail>
	</target>	

	<!-- bin 폴더 생성 -->
	<target name="mkdir bin">
		<mkdir dir="${bin.dir}"/>
		<mkdir dir="${bin.dir}/widgets"/>
	</target>

	<!-- bin 폴더 삭제 -->
    <target name="clean">
        <delete includeEmptyDirs="true">
            <fileset dir="${bin.dir}"/>
        </delete>
    </target>	

	<!-- 모두 컴파일 -->
	<target name="complie all" depends="complie MyWidgets, complie widget1, complie widget2, complie widget3"/> 

	<!-- 위젯 테스터 컴파일 -->
    <target name="complie MyWidgets" depends="properties,mkdir bin">
		<exec executable="${mxmlc.exe}" dir="${basedir}">
			<arg line="'${src.dir}/MyWidgets.as'" />
			<arg line="-o '${bin.dir}/MyWidgets.swf'" />
		</exec>
    </target>	

	<!-- 위젯 테스터 실행 -->
	<target name="run MyWidgets" depends="complie MyWidgets">
		<exec executable="${flashDebugPlayer.exe}" spawn="yes">
			<arg line="${bin.dir}/MyWidgets.swf" />
		</exec>
	</target>

	<!-- 위젯 1 컴파일 	-->
    <target name="complie widget1" depends="properties,mkdir bin">
		<exec executable="${mxmlc.exe}" dir="${basedir}">
			<arg line="'${src.dir}/Widget1.as'" />
			<arg line="-o '${bin.dir}/widgets/Widget1.swf'" />
		</exec>
    </target>

	<!-- 위젯 2 컴파일 	-->
    <target name="complie widget2" depends="properties,mkdir bin">
		<exec executable="${mxmlc.exe}" dir="${basedir}">
			<arg line="'${src.dir}/Widget2.as'" />
			<arg line="-o '${bin.dir}/widgets/Widget2.swf'" />
		</exec>
    </target>

	<!-- 위젯 3 컴파일	-->
    <target name="complie widget3" depends="properties,mkdir bin">
		<exec executable="${mxmlc.exe}" dir="${basedir}">
			<arg line="'${src.dir}/Widget3.as'" />
			<arg line="-o '${bin.dir}/widgets/Widget3.swf'" />
		</exec>
    </target>

</project>

 

만들어진 build.xml은 우측 화면과 같이 Ant View에 드래그해서 붙여 넣는다. 이로써 ANT를 이용해 만들어진 ANT 스크립트를 실행할 수 있게 된다.

 

build.xml은 ANT에서 구동되는 스크립트이다. <project>로 감싸져 있고 <property>와 <target>이 존재한다. <property file="./build/build.properties" />는 build.properties를 로드해서 build.xml에서 사용할 property를 참고하는 역할을 한다. <target>은 하나의 실행단위라고 생각하면 되겠다. <target>은 고유한 name을 가진다. 이 name이 Ant View에 표시되며 표시된 name을 더블클릭하면 <target>에 정의된 코드가 실행되는 것이다.

 

<target> name이 mkdir bin은 bin 폴더와 bin/widgets 폴더를 생성한다. 여기서 ${bin.dir}은 변수로서 build.properties에 정의했다.

 

<target> name이 clean인 것은 만들어진 bin폴더와 widgets폴더를 지운다.

 

<target> name이 complie widget1인 것은 src폴더내에 Widget1.as를 컴파일하여 bin/widgets에 Widget1.swf라는 이름으로 출력하도록 한다. 여기서 Flex SDK에서 제공하는 mxmlc를 사용하게 된다. 어떤 mxmlc를 사용할지는 build.properties에 정의했다.

 

<target> name이 complie MyWidgets는 src폴더내에 MyWidgets.as를 컴파일해서 bin에 MyWidgets.swf라는 이름으로 출력한다.

 

<target> name이 complie all은 <target> name이 complie MyWidgets, complie widget1, complie widget2, complie widget3 로된 <target>을 전부 실행한다. 이처럼 target은 depends 옵션을 이용해 다른 target과 묶어서 실행이 가능하다.

 

<target> name이 run MyWidget은 MyWidget.as를 컴파일한 뒤에 bin/MyWidget.swf를 실행하도록 한다.

 

이것만 보더라도 ANT를 이용해서 프로젝트를 어떻게 관리할 수 있을지 대략적으로 느껴질 것이다. 이처럼 하나의 프로젝트에서 다양한 애플리케이션을 원하는 경로에 컴파일하여 출력할 수 있고 활용해볼 수 있다. ANT에서는 copy, delete등과 같은 명령어를 지원하므로 이들을 적극 활용하면 프로젝트 관리가 더욱간편해질 수 있다. 게다가 결과물을 FTP 전송, SVN 공유, 다른 프로젝트간에 연동도 아주 쉽게 적용할 수 있다. 지금 예제는 debug 용이 아니지만 원한다면 debug도 할 수 있게 꾸밀 수 있다. 또한 위젯들 간에 중복되는 클래스에 대한 최적화(Optimization) 과정이 들어간다면 더욱 깔끔하지 되지 않을까 생각한다. html-template에 대한 것도 모두 ANT로 개발이 가능하므로 자세한 내용은 Flex Live Docs를 참고하길 바란다.

 

Flex ANT Task 활용해보기

지금까지 mxmlc 명령을 구동하기 위해 build.xml에서 <exec>를 이용했다. 이것은 매우 범용적인  방법으로 mxmlc뿐 아니라 어떤 것이든 구동하는데 쓸 수 있다. 그러나 Flex 환경에서 개발할 때 <exec>를 이용해 mxmlc를 구동 하는 것은 복잡한 설정이 들어가는 경우 관리가 힘들어지는 경우가 발생할 수 있다. 다행히 Flex SDK에서는 더욱 간편하게 mxmlc를 사용할 수 있는 기능 제공하고 있다. Flex SDK에 보면 아래 그림과 같이 ant폴더가 존재하는 것을 확인할 수 있다. ant폴더에는 Flex전용 ANT 환경을 구성해주는 Flex ANT Task가 존재한다. 소스가 공개되어 있어서 ant/src에는 Java로 만들어진 소스가 있고 ant/lib에는 flexTasks.jar가 있어 ANT구성시 이 JAR를 활용하여 Flex 전용 ANT 환경을 구성할 수 있다.

 

 

기존 build.xml에서 <properties file=./build/build/properties/> 아래에 다음 코드와 같이 <taskdef>을 추가한다. 이 부분은 Flex SDK에 있는 flexTasks.jar를 활용해 <exec> 대신 <mxmlc>, <compc> 형태로 사용할 수 있도록 한다. <target> name compile MyWidgets인 부분을 찾아 <exec>부분을 주석처리하고 대신 <mxmlc>을 삽입한다.

 

<?xml version="1.0" encoding="utf-8"?>
<project name="MyWidgets" basedir="../">

	<!-- 이 build 스크립트에서 사용할 variable 및 path 정의  -->
	<property file="./build/build.properties" />

	<!-- Flex ANT Task 사용 -->
	<taskdef resource="flexTasks.tasks" classpath="${flex3sdk.home.dir}/ant/lib/flexTasks.jar"/>
	<property name="FLEX_HOME" value="${flex3sdk.home.dir}"/>

	..... (생략) ....

	<!-- 위젯 테스터 컴파일 -->
    <target name="complie MyWidgets" depends="properties,mkdir bin">
        <mxmlc
            file="${src.dir}/MyWidgets.as"
            output="${bin.dir}/MyWidgets.swf"
        >
        	<!-- Get default compiler options. -->
        	<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>

        	<!-- List of path elements that form the roots of ActionScript
        	class hierarchies. -->
			<source-path path-element="${FLEX_HOME}/frameworks"/>        

            <!-- List of SWC files or directories that contain SWC files. -->
            <compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
                <include name="libs" />
                <include name="../bundles/{locale}" />
            </compiler.library-path>

            <!-- Set size of output SWF file. -->
            <default-size width="500" height="600" />
        </mxmlc>
    	<!--
		<exec executable="${mxmlc.exe}" dir="${basedir}">
			<arg line="'${src.dir}/MyWidgets.as'" />
			<arg line="-o '${bin.dir}/MyWidgets.swf'" />
		</exec>
		-->
    </target>	

	..... (생략) ....

</project>

 

위 코드에서<taskdef> 아래에 <property>로 FLEX_NAME을 정의했는데 이것을 정의하지 않으면 <mxmlc>가 제대로 동작하지 않는다.

 

<mxmlc> 내부에 들어간 <load-config>, <compiler.library-path>, <default-size>등은 <mxmlc>를 구동하기 위한 설정들이다. 사실 이 프로젝트에서는 이러한 설정이 필요없다. 왜냐하면 <mxmlc>가 이러한 기본 설정을 내부적으로 대신 해주기 때문이다. 만약 설정에 변동사항이 존재한다면 이 설정들을 추가해서 수정하면 된다. 이외에도 많은 설정 옵션들이 있는데 자세한 내용은 Using Flex Ant TaskUsing the Flex Complier를 참고한다.

 

ANT를 이용해 ASDoc 만들어 보기

build.xml에 아래 코드를 추가하고 실행해보자.

 

<!-- ASDoc 만들기 -->
<target name="asdoc">
	<!-- Clean out the contents of the doc directory, without delete "docs" -->
	<!--
	<delete includeemptydirs="true">
		<fileset dir="${docs.dir}" includes="**/*" />
	</delete>
	-->
	<mkdir dir="${docs.dir}"/>

	<exec executable="${asdoc.exe}" spawn="no">
		<!-- Place the documentation in the "docs" directory -->
		<arg line="-o ${docs.dir}" />

		<!-- Specify the main source path as "src" -->
		<arg line="-sp ${src.dir}" />

		<!-- Document all of the classes in the "src" tree -->
		<arg line="-ds ${src.dir} " />

		<!-- Include the library name in the window title -->
		<arg line="-window-title 'ANT Widget Test' "/>
	</exec>
</target>

 

프로젝트내에 doc폴더가 생기고 그 안에 아래와 같이 Asdoc를 만들어진 문서를 볼 수 있을 것이다.

 

 

ANT를 이용하면 build.xml 문서 하나만 가지고 얼마나 많은 일을 한번에 처리할 수 있는가 알 수 있다.

 

 

Ant Contrib Task를 이용하여 반복 작업 줄이기

지금까지 만들어본 build.xml을 자세히 살펴보면 반복되는 작업이 있다는 것을 발견할 수 있다.  <target>의 name이 compile MyWidgets, compile widget1, compile widget2, compile widget3가 그것이다. 이들 <target>은 동일하게 mxmlc를 구동하면서 설정값도 동일하다. 이런 경우에는 하나의 <target name="compile">로 묶어주고 컴파일 대상을 번갈아가면서 <target name="compile">를 구동하게 하면 build.xml이 훨씬 간단해질 것이다. 하지만 기본 ANT와 Flex ANT Task만으로는 이런 작업이 불가능하다.

반복되는 <target>코드를 단순화 시키기 위해 주로 사용하는 것이 Ant Contrib Task이다. 이것도 Flex ANT Task와 마찬가지로 <taskdef>로 정의하여 사용할 수 있다. Ant Contrib Task는 http://ant-contrib.sourceforge.net/ 에서 제공하고 있다. 받아야하는 것은 ant-contrib-1.0b3.jar이다.

편의를 위해 아래와 같이 build에 복사해 두었다.

 

 

build.xml을 다음과 같이 수정한다.

 

<?xml version="1.0" encoding="utf-8"?>
<project name="MyWidgets" basedir="../">
	<!-- 이 build 스크립트에서 사용할 variable 및 path 정의  -->
	<property file="./build/build.properties" />

	<!-- Ant contrib 1.0b3를 사용한다 -->
	<taskdef resource="net/sf/antcontrib/antcontrib.properties">
		<classpath>
			<pathelement location="${build.dir}/ant-contrib/ant-contrib-1.0b3.jar"/>
		</classpath>
	</taskdef>		

	<!-- 해당 properties가 설정 되어 있는가 확인 -->
	<target name="properties">
		<fail unless="asdoc.exe">The "asdoc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="compc.exe">The "compc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="mxmlc.exe">The "mxmlc.exe" property must be set in ${build.dir}/build.properties.</fail>
	</target>	

	<!-- bin 폴더 생성 -->
	<target name="mkdir bin">
		<mkdir dir="${bin.dir}"/>
		<mkdir dir="${bin.dir}/widgets"/>
	</target>

	<!-- bin 폴더 삭제 -->
    <target name="clean">
        <delete includeEmptyDirs="true">
            <fileset dir="${bin.dir}"/>
        </delete>
    </target>	

	<!-- 모두 컴파일 -->
	<property name="compile_target_list" value="MyWidgets,Widget1,Widget2,Widget3" />
    <target name="compile all" depends="properties,mkdir bin">
        <foreach
            list="${compile_target_list}"
            param="compile_target"
            target="compile" />
    </target>

	<!-- 컴파일(단독구동 불가) -->
    <target name="compile">
    	<echo message="${compile_target}" />
		<exec executable="${mxmlc.exe}" dir="${basedir}">
			<arg line="'${src.dir}/${compile_target}.as'" />
			<arg line="-o '${bin.dir}/${compile_target}.swf'" />
		</exec>
    </target>	

	<!-- 위젯 테스터 실행 -->
	<target name="run MyWidgets">
		<exec executable="${flashDebugPlayer.exe}" spawn="yes">
			<arg line="${bin.dir}/MyWidgets.swf" />
		</exec>
	</target>

</project>

 

위 코드에서 <taskdef resource="net/sf/antcontrib/antcontrib.properties">부분은 Ant Contrib Task를 정의하는 부분이다. 기존 <target name="complie ...">과 같은 형태의 <target>은 모두 삭제하고 <target name="compile all">과 <target name="compile">를 만들었다. <target name="compile all">에 <foreach>를 이용해 반복하면서 MyWidgets,Widget1,Widget2,Widget3를 <target name="compile">에 대입해 구동하도록 짜여져 있다. 여기서 <foreach>는 Ant Contrib Task에서 지원하는 속성이다. 나중에 Widget4, Widget5, Widget6… 을 제작하는 일이 생기더라도 <property name="compile_target_list">value에만 추가하면 되기 때문에 작업이 훨씬 깔끔해졌다.

 

기존처럼 한개씩 컴파일하고 싶다면 build.xml에 다음 코드를 추가하면 되겠다.

 

<!-- MyWidgets 컴파일 -->
<target name="compile MyWidgets">
	<foreach list="MyWidgets" param="compile_target" target="compile" />
</target>	

<!-- widget1 컴파일 -->
<target name="compile widget1">
	<foreach list="Widget1" param="compile_target" target="compile" />
</target>	

<!-- widget2 컴파일 -->
<target name="compile widget2">
	<foreach list="Widget2" param="compile_target" target="compile" />
</target>	

<!-- widget3 컴파일 -->
<target name="compile widget3">
	<foreach list="Widget3" param="compile_target" target="compile" />
</target>

 

<target name="compile">를 그대로 사용하면서 한개씩 컴파일할 수 있도록 <foreach>를 그대로 사용했다.

Ant Contrib Task <foreach>외에도 <if>, <switch>등 유용한 것이 더 있다. 이에 대해서는 Ant Contrib Task 메뉴얼을 참고한다.

 

이렇게 기존 ANT를 보완하는 Ant Contrib Task를 사용함으로써 build.xml을 더욱 깔끔하게 만들 수 있게 되었다.


정리하기

지금까지 Flex Builder 3에서 ANT를 활용하는 방법에 대해서 간단한 예제를 통해 살펴보았다.  AS3 프로젝트가 아닌 라이브러리 프로젝트나 Flex프로젝트등에도 ANT가 매우 유용하게 쓰여질 수 있다는 것을 충분히 이해했다면 이 글의 목표를 달성한 것이라 생각한다.

 

Flex ANT를 최고의 학습 방법은 경험이다. 스스로 해당 자료를 찾아 직접해보는 것이 가장 중요하다.

Google Code Open Source Flex 프로젝트들이 꽤 있는데 SVN으로 Flex Builder에 등록해서 사용하다 보면 때때로 ANT를 사용한 소스를 접해볼 수 있다.  Flex ANT가 아니라 일반 ANT긴 하지만 as3corelib as3flexunitlib등이 그 예가 아닐까 생각한다.

 

실제로 실전 프로젝트에서 ANT는 매우 유용하다. 익혀두고 적절히 활용하면 몸과 마음이 편해지는 좋은 기술이겠다.

 

관련글

 

 



FDT를 이용해 순수 ActionScript 3.0 코딩의 세계로 빠져보기 위해 설치했다. Flex 프레임워크가 너무 무거워 ActionScript 3.0 코드로 주로 작성하게 될터인데 Flex Builder는 사용하기에 너무 부족한 면이 있는 것 같다. 그렇다고 해본적도 없는 Flash를 할 수 있는 것도 아니고… 그래서 선택한 것이 FDT이다.

 

http://fdt.powerflasher.com/

 

위 사이트에 가면 FDT를 다운로드 받을 수있다. 일단 30일 체험판이 있으니 사용해보고 정말 쓸만하다면 구입도 고려해볼 예정이다.

 

설치하고 실행하자마자  JVM terminated 에러가 떳다

 

 

 

이런 경우에는 설치 디렉토리내에 있는 자신의 컴퓨터 사양에 맞게 FDT.ini를 약간 수정하면 된다.

 

-vmargs
-Xmx512m
-XX:MaxPermSize=128m

 

잘 실행 된다. ^^

 

외관이 완전 이클립스다. Flex Builder 처럼 Eclipse를 가지고 만들었으니 당연하겠다.

 

 

 

Preferences를 살펴봤다. FDT에도 Flex SDK를 그대로 사용하는 것을 확인할 수 있었다. 더불어 Flex Builder에서는 못하는 AS2 코딩도 가능해진다.

 

 

FDT의 Code Style에서 Formatter를 보니 Braces({,})사용하는 방식이 맘에 안든다. 내가 사용하는 방식으로 바꿔야겠다. 아래 그림에서 Braces 탭을 선택해서 수정하면 되겠다.

 

 

 

FDT의 Core Libraries를 보니깐 여기에서 라이브러리를 등록할 수 있다는 것을 확인할 수 있었다.

 

 

새로운 Flash 프로젝트를 만들어보겠다.

 

 

 

Flash Player 9이하 환경에서  ActionScript 3.0으로 개발할 것이므로 Flex_3_SDK_0_Pure를 선택하면 되겠다.

 

역시 순수 ActionScript 3.0으로 개발할때 필요한 playerglobal.swc만 라이브러리로 등록된다.

 

 

 

직접 해보니깐 Flex Builder 3.0에서 보지 못했던 맘에 드는 구석이 많은 것 같다. 뭐 이미 FDT의 장점에 대해서는 구구절절 말하기 귀찮긴 하다. 사실 이제 처음 사용한거라 ㅎㅎ

 

 

FDT는 유료의 압박이 있는데 무료인 FlashDevelop 프로그램에 대해서도 관심을 가져볼려고 한다. 물론 FDT보다는 못하겠지만 많은 개발자가 즐겨 사용하는 것으로 알고 있기 때문에 관심이 간다.

 

선택의 폭이 넓어 좋다. ^^

 

 

 

+ Recent posts