개발개발 : 상황 단계

개발개발 | 2009/09/05 06:17 | 안데르센

상황 단계

플래시 혹은 플렉스 라는 작업 방법론을 통해서 도출되는 결과물은 swf 파일 입니다. 그 Shockwave Flash 라는 클라이언트 상에서 작동하는 인터렉티브 미디어 파일을 만들어내는 것이 바로 우리들이 하는 일이죠.

자, 우리가 목표로 하는 여러가지 툴들에 대해 총괄적인 이해를 하기 위해서는 바로 그 swf 가 만들어지고, 사용되어지는 상황들에 대한 이해가 필요합니다. 그 단계는 크게 세가지로 나눌 수 있습니다.


200909050415.jpg

여러가지 파일들을 작업하는 소스 단계와 해당 소스들이 mxmlc 라는 컴파일러를 통해서 컴파일 되는 단계, 그리고, 컴파일이 정상적으로 종료가 된 후 아웃풋 되는 swf 가 실제 구동되는 런타임 단계 입니다.

굉장히 기초적인 이야기지만 여러가지 툴들에 대해서 대략적인 이해를 하기 위해서는 이 각 단계들에 대해 이해하는 것이 매우 중요합니다.

디버깅

우선적으로 여기서 에러에 대한 구분을 할 수가 있는데요.


200909050431.jpg

소스가 컴파일 되는 과정에서 발생하는 오류가 컴파일 에러이고, 정상적으로 컴파일이 완료된 이후 swf 가 작동되는 과정 상에서 발생하는 오류는 런타임 에러 입니다.


200909050427.jpg

이런 단계별 에러에 대한 것은 위와 같이 레퍼런스 상에 따로 분리되어 기재되어 있습니다.

그리고, 이 에러 상황을 해결하는 행위를 디버깅이라고 하고, 그것을 도와주는 유틸리티를 디버거 라고 합니다.


200909050442.jpg

디버거는 위와 같이 컴파일 에러, 런타임 에러에 대한 에러 영역에 대한 확인이나 원인에 대한 안내, 런타임 상황에서 자원들의 변화를 감시하는 등의 역활을 합니다.

우리가 ActionScript 3.0 이라는 규칙이 까다로운 언어를 사용해야 하는 이유 중 하나는 바로 이런 디버거 라는 기계적 장치가 에러에 대한 원인을 파악하는데 있어서 인간이나 알아보는데 2.0 과 같은 규칙이 자유로운 코드가 아닌, 기계가 파악하기 쉽게 기계적 규칙이 까다롭게 적용된 3.0 같은 코드가 좋기 때문입니다.

2.0 보다 3.0 의 코딩이 좀 더 불편하긴 하지만, 디버거가 제공하는 오류 정보의 양은 2.0 보다 3.0 이 압도적으로 많습니다.


200909050449.jpg

이런 디버거는 Flex builder 나 FDT 의 경우에는 위와 같이 Eclipse 고유의 Debug 패널과 유사한 형태로 제공되고,


200909050453.jpg

Flash 의 경우엔 위와 같이 컴파일러 에러의 경우엔 compiler errors 패널로, 런타임 에러의 경우엔 output 패널로


200909050451.jpg

변수의 변화나 breakpoint 의 적용등엔 위와 같은 Debug 모드를 통해서 지원합니다.

이런 디버거를 적절히 잘 활용하는 것은 (특히 흔히 사용하지 않는 변수에 대한 감시 같은 기능을 잘 활용하는 것은) 에러 상황에 대한 보다 빠른 대응에 큰 도움을 주곤 합니다.

그리고, Flex builder 나 FDT 같은 고급 에디터들의 경우엔 이렇게 컴파일이나 런타임 상황 이전에 소스 레벨에서 에러를 체크해 주기도 하는데요.


200909050459.jpg

고급 (비싼) 에디터들의 경우 컴파일, 런타임 이전에 위와 같이 코딩을 진행하는 상황에서 바로 에러를 검출해주기도 합니다. 이런 소스 레벨에서의 에러검출은 작업에 대한 안정성을 향상시키는데 굉장히 큰 도움을 주죠. 컴파일 단계에서 발생할 수 있는 에러의 경우는 거의 대부분 발생하지 않게 해주고, 런타임 상의 에러 역시 많은 부분 미리 수정이 가능하게 해줍니다.

형상관리 및 버그리포팅

200909050547.jpg

엄청나게 복잡한 맵이 탄생했는데요.

소스의 파일과 텍스트 소스코드의 특징을 사용하는 SVN, CVS 와 같은 형상관리 툴과 Trac, JIRA 와 같은 스케쥴, 프로젝트 관리툴, 그리고, 버그에 대한 리포팅 역활을 담당하는 BugZilla 와 Trac, JIRA, 그리고 그와 같은 전반적인 툴들이 Eclipse 기반의 Mylyn 과 통합되어서 소스코딩에 영향을 미치게 되는 것까지 좀 더 견고한 작업환경을 구축하는데 중요한 여러가지 개념들이 적혀있는 맵입니다.

이런 기능들은 소스코드가 어떤 방향으로 발전해야 하는지에 대한 좀 더 객관적인 시각에서의 방향성을 제시해주게 되는데 큰 도움이 됩니다.

뭐 이 중, 이 강좌가 다룰 것은 SVN, Trac, Mylyn 인데요. 지금 당장 저 맵을 보면서 "엥?" 할 필요는 없구요. 천천히 하나 하나 다뤄나갈 것이니 일단 기능들이 어떤 단계의 보강을 위해서 존재하는 것인지 대략 살펴보기만 하면 될 것 같습니다.

빌드 자동화

200909050558.jpg

프로젝트가 커지고, 점점 Ctrl+Enter 따위로 컴파일 하기에는 그 분량이 너무 많아진다 싶을때쯤이 되면 빌드 자동화에 대한 요구가 생기게 됩니다.

이런 빌드자동화는 기본적으로 컴파일과 컴파일 된 결과물을 퍼블리싱 하는 과정을 기계적으로 자동화 시켜줍니다.

빌드 자동화 툴은 Action Script 개발의 경우는 크게 두가지를 씁니다. Ant 라는 Eclipse 와 궁합이 잘 맞는 상당히 편리한 빌드툴을 사용하던가, 아니면, shellscript 나 batch 등을 사용해서 직접 mxmlc 의 커맨드라인을 제어하는 방법 입니다. 이 두가지는 서로 장단점이 있는데요.

Ant 의 경우엔 Eclipse 라는 개발툴의 지원부터 시작해서 이미 FDT, Flex builder 상에서 Ant 에 대응하는 좋은 기능들을 이미 구현해놨지만, XML tag 형식으로 구성되어있어서 조금 분량이 많아진다거나 하면 아무래도 노가다량이 충분히 많아진다는 점이고,

Shellscript 의 경우엔 Ant 에서 사용할 수 없는 function 같은 script 적 표현을 사용해서 자동화 할 수 있기 때문에 보다 다채로운 표현이 가능하나, 아무래도 Eclipse 와 같은 에디터를 통해 지원되는 기능등은 없다는 것이 문제입니다. (Ant 보다는 좀 더 사용하기가 까다롭지만, 그만큼 다채롭기도 하죠...)

역시 이런 빌드 자동화에 대한 부분들도 하나 하나 세세하게 살펴보는 시간이 있을테니 일단 이런게 있구나 라면서 알아두면 될 것 같습니다.

프로그램이란 것은 필요에 의해 만들어진다...

인간이 만드는 모든 것은 결국 필요에 의해 만들어지지 않을까 싶습니다. 엄청 대단한 천재가 뜬금없이 나타나서 엄청 새로운 것을 만들어내는 것이 아닌, 기존에 아주 불편하던 것을 좀 더 편리하게 만드는 것... 그것이 바로 발명 이란게 아닐까 싶습니다.

swf 라는 결과물을 만들어내기 위해서 엄청나게 많은 툴들을 꼭 사용해야 하는 것은 아닙니다. 메뉴바, 배너 하나 만드는데 SVN, Trac 을 사용해서 형상관리나 프로젝트 관리 따위를 할 필요는 없고, 당연히 Ant 등을 사용한 빌드 자동화 따위도 필요없겠지요. 해당하는 툴들이란 "일이 너무 많아져서 버거워질때 그 업무량을 일정 부분 기계에게 할당하기 위해" 발명되어진 툴들이므로 자신의 작업분량을 줄이는데 도움이 되지 않는다면 사용을 구지 할 필요는 없습니다.

여러분이 어떤 툴을 이해하려고 할때 저와 같은 작업 단계에 대한 고려를 하면서 접근하는 것은 상당한 이해의 폭을 제공해줍니다. 어떤 툴도 그냥 만들어지지는 않았고, 결국 swf 를 만들어내는데는 저 세단계 중 한가지 단계의 작업을 보조하기 위해서 만들어진 것일테니깐요.

뭐 복잡하게 써놓긴 했지만, 그렇게 복잡하지도 않습니다. 그냥 소스 > 컴파일 > 런타임 이라는 swf 가 만들어지고 사용되어지게 되는 상황 단계를 이해하고 넘어가면, 앞으로 나올 여러가지 개발도구들에 대해 이해하는데 큰 도움이 될테니 꼭 기억해두도록 하세요.

논리와 감각, 원론과 응용

일단 눈으로 보고 차이를 이야기해보죠.

어떤 object 의 위치 x 를 10 에서 100 으로 옮긴다고 했을때를 생각해보죠.

200909011605.jpg

소스코드를 통해서 컨트롤 할때는 위와 같이 단순한 코딩으로 해결이 됩니다. (물론 Tweener 를 사용해서 그런것이고, 기본 기능만으로 통해서 코딩하면 보다 복잡해지겠죠.)

200909011609.jpg

하지만, 이렇게 애프터 이펙트와 같은 애니메이션 툴을 사용했을때는 좀 더 복잡하지만, 대신 사람이 손쉽게 이해할 수 있는 형태로 작업을 할 수 있게 됩니다.

보다 원론적인 논리에 가까운 형태의 작업은 Text 에 가까워지게 됩니다. 보다 인간의 감각기관이 인지하기 쉬운 형태의 응용 형태는 위와 같이 여러가지 다른 형태를 띄게 되죠.

이런 차이점은 서로 장단점이 존재합니다. 보다 논리적인 작업 형태는 보다 다채로운 작업을 가능하게 하지만 인간의 접근이 어려워지는 문제점이 있고, 보다 감각적인 작업 형태는 최초의 접근이 쉽고 인간의 감정이 보다 손쉽게 표현될 수 있지만 대신 그 작업 형태에 얽매이게 되는 한계성이 있죠.

이런 시각에서 바라보면 컨텐츠의 효율적인 구조와 흐름을 만들어내는 기획자와 서버사이드 쪽의 데이터 개발자, 디자이너와 플래시 개발자가 하는 일이 엇비슷 하면서 서로 다른 장단점의 작업 방식을 통해서 상호보완 되고 있다는 것을 알 수 있게 됩니다. (이런 차이점을 이해하게 되면 단순히 너는 포토샵 쓰니깐 저쪽팀, 넌 코딩하니깐 이쪽 팀 이라는 무식한 조직운영의 단점이 눈에 보이게 되죠.)

자... 여기서 중요한 것은 바로

감각적인 작업 형태가 가지는 "보다 손쉽게 표현될 수 있지만 대신 그 작업 형태에 얽매이게 되는 한계성"

입니다.

우리가 사용하는 Flash 를 비롯한 Flex builder 같은 툴들은 모두 "인간이 보다 쉽게 작업 할 수 있도록" 감각화된 편리한 기술들에 해당하게 됩니다. 그래서 "편리하지만" 대신 "얽매이게 만드는" 기술들 이기도 하죠.

하지만, 우리가 개발 환경을 만들어나가는데 있어서 중요한 여러가지 기술들은 모두 Adobe 에서 만든것은 아닙니다. 그렇기에

우리들이 그 많은 기술들을 정상적으로 활용하기 위해서는 "편리하지만 얽매이게 만드는" 기술 보다는 "좀 불편하더라도 원론에 가까운 논리적 형태의" 기술로 내려갈 필요가 있습니다.

mxmlc 를 이해하는 것은 일단 Flash 냐 Flex builder 냐 FDT 냐 Flash Develop 이냐 어쩌고 하는 툴에 대한 제약사항에서 벗어나는데 가장 중요한 일이 됩니다.

서론이 길었네요. 시작해 봅시다.

Flex SDK 다운로드 받기

구글을 통해 "flex sdk download" 등을 검색하면 Flex SDK 다운로드 받을 수 있는 링크들이 제시되게 됩니다. 링크들을 통해서 Flex SDK 의 Release 최신 빌드를 다운로드 받도록 합니다.

(앞으로의 모든 강좌에서는 링크가 제공되지 않고, 검색 키워드만이 제공되게 됩니다.)

제가 받은 버전은 3.4.0.9271 입니다. SDK 는 zip 형태로 압축되어 있는데 압축을 풀어서 적당한 곳에 놓아둡니다.

200909011645.jpg

제 경우에는 위처럼 data 드라이브에 setting 폴더에 넣어두었습니다.

200909011651.jpg

많은 윈도우 사용자들을 위해서 윈도우로도 진행을 해보도록 하겠습니다. 윈도우에서는 C 드라이브에 setting 폴더 내에 넣어두었습니다.

SDK 를 적절한 위치에 두었으면 해당 위치에 대한 경로를 인식하고 있어야 합니다. 맥킨토시로 진행하는 경우의 경로명은 "/Volumes/data/settings/flex_sdk_3.4.0.9271" 이 되고, 윈도우의 경우엔 "C:\settings\flex_sdk_3.4.0.9271" 가 되게 됩니다.

mxmlc 를 통한 기초적인 소스코드 컴파일 하기

우리는 이제 평소에 굉장히 쉽게 해오던 것들을 굉장히 어렵게 하게 될 것입니다. 강좌를 보시는 동안 "이게 뭔짓이여..." 하는 분들도 있으실텐데, 그런 분들이 있으시면...

200909011709.jpg

그냥 따라오세요... 오빠를 믿어요~

200909011734.jpg

일단 적절한 코딩을 해놓은 뒤에 (한 번 개고생 해보자는 의미로 메모장 같은 프로그램을 사용해서 코딩하는 것을 추천합니다.)

200909011727.jpg

테스트 폴더를 만들어서 저장을 하도록 합니다.

200909011731.jpg

윈도우의 경우는 위와 같이 저장했습니다.

200909011736.jpg

그리고, 터미널을 열고 위와 같이 입력합니다. 명령어를 분석해보면

/Volumes/data/settings/flex_sdk_3.4.0.9271/bin/mxmlc
:: mxmlc 의 경로를 지정합니다.

/Volumes/data/Test/src/MXMLCTest.as
:: 컴파일 할 as class 의 경로를 지정합니다.

-o /Volumes/data/Test/mxmlcTest.swf
:: -o 는 "output" 을 의미하고, 생성할 swf 의 경로를 입력해줍니다.

이렇게 세가지로 나눌수 있습니다. 대충 쉽게 이야기해서 mxmlc 의 커맨드라인 입력은

(mxmlc 의 경로) (as 소스코드의 경로) (이후 부터는 -? 의 옵션 입력들)

이렇게 세가지로 규칙화 되게 됩니다.

200909011737.jpg

그러면 위와 같이 flex-config.xml 을 로딩한다는 메세지가 뜨고, 최종적으로 mxmlcTest.swf 가 만들어졌다는 메세지가 뜨면서 mxmlc 가 종료되게 됩니다.

200909011741.jpg

해당 위치에 가보면 mxmlcTest.swf 가 만들어진 것을 확인할 수 있고

200909011751.jpg

실행해 보면 위와 같이 throw new Error 에 대한 구문이 실행되게 됩니다.

만일 위와 같은 구문들이 등장하지 않는다면 구글에서 "flash debug player download" 로 검색해서 플래시 플레이어 제거 프로그램과 플래시 디버그 플레이어를 다운 받고, 제거 프로그램으로 기존의 플레이어를 삭제한 뒤에 디버그 플레이어를 설치하도록 합니다. (매우 기초적인 사항이니 삽질을 하더라도 꼭 자기 손으로 다운받고 설치하는 방법을 익혀두도록 합니다.)

200909011801.jpg

윈도우의 경우는 위와 같이 도스창을 열어서 진행하면 됩니다. 경로명이 C:\ 형식으로 시작된다는 것 이외에는 동일한 사용방식을 가지고 있으므로 앞으로 진행될 강좌에서는 따로 윈도우용 스크린샷이 없더라도 감안해서 적용하시면 됩니다.

좀 더 많은 mxmlc 옵션 이해하기

200909011834.jpg

MXMLCTest.as 에 코드를 추가시켜 줍니다. 추가시키는 코드들은 TweenMax 를 통한 트위닝과 커스텀 클래스를 통한 ColorBox 입니다.

200909011823.jpg

ColorBox.as 의 코드입니다.

200909011825.jpg

그리고, 각기 파일들의 위치는 위와 같이 잡아주도록 합니다.

200909011826.jpg

기존대로 소스를 컴파일 하려고 하면 에러가 발생하게 됩니다.

이 에러들이 바로 우리가 Flex builder 나 FDT, Flash 등을 통해서 컴파일을 진행할때 뜨는 컴파일 에러의 원본 입니다. 이렇게 SDK 를 통해 발생되는 에러메세지를 FDT 나 Flex builder 는 콘솔창을 통해서, Flash 의 경우는 컴파일 에러 창을 통해 정리된 형태로 보여주게 되는거죠.

에러를 잡기 위해서 좀 더 옵션들을 추가해보도록 하겠습니다.

200909011832.jpg

추가적인 옵션들을 살펴보도록 하죠.

-sp /Volumes/data/Test/src2/
:: 외부에 마련된 ColorBox 가 존재하는 src2 폴더를 컴파일에 포함시킵니다.

-library-path /Volumes/data/Test/libray.swc
:: (TweenMax 가 들어있는) swc 라이브러리 파일을 컴파일에 포함시킵니다.

이렇게 추가적인 옵션들을 통해서 컴파일 시키면 정상적으로 컴파일이 진행되게 됩니다.

200909011840.jpg

swf 파일을 실행시켜 보면 지정된 트윈 애니메이션이 실행되고, 종료시에 지정한 throw new Error 가 뜨게 됩니다.

이와 같은 -sp 나 -library-path 와 같은 기능들은 여러가지 툴들에서 다양한 형태로 감각화 되어있습니다.


200909011940.jpg

Flash 에 존재하는 Publish Settings/(Script Settings... 버튼 클릭)/Advanced ActionScript 3.0 Settings 의 기능이나

200909011900.jpg

FDT 에 존재하는 Source, Library 기능들이 바로 그것이죠.

Flex builder 와 Flash Develop 역시 마찬가지의 기능들이 비슷한 다른 형태로 구현되어 있습니다.

이런 부분은 추가적으로 -external-library-path 에 대한 옵션도 있지만 해당 부분이나 이와 관련된 더 자세한 내용들은 추후에 설명하도록 하겠습니다. 오늘은 mxmlc 에 대한 전반적인 옵션들을 이해하려고 하는 것이니깐요.

200909011906.jpg

추가적으로 swf 의 기본적인 모양에 대한 옵션들도 존재합니다. (위에 스펠링 틀려서 꽤 다시 쓴 흔적들이...;;;) 분석해보면

-default-size 800 600
:: width 800 height 600 pixel 의 사이즈로 swf 를 만듭니다.

-default-frame-rate 31
:: 기본 fps 를 지정합니다.

-default-background-color 0xffffff
:: swf 의 기본 배경색을 지정합니다.

이 부분은 굉장히 익숙한 옵션들일 겁니다.

200909011909.jpg

Flash 에서 가장 기본적으로 지정하는 Document Properties 의 내용이기 때문이죠.

원론적인 컴파일러에 대한 이해도가 작업환경 확장의 기본

FDT 를 비롯한 Flash Develop 같은 다양한 소스코딩 툴과 SVN, Trac, Mylyn 등의 소스코드 관리 및 작업관리 툴, 그 외에 Ant, Maven 과 같은 엄청난 시간을 절약해주는 빌드 자동화툴 등 플래시 개발이 고도화 되면서 점점 많은 기존에 있던, 그리고, 새로 나오는 보조 도구들이 생기고 있습니다.

하지만, 시작 부분에도 말했듯이 모든 작업환경들이 Adobe 라는 기업에서 만들어지는 것은 아니고, 각자의 방식에 의해서 개발됩니다. 그렇기에 Flash 와 호환성이 없는 툴이 있을수도 있고, 또 극단적으로 해당 툴들을 사용하기 위해서는 Flash 로 작업되어서는 안되는 경우도 있죠.

여러분들이 그 많은 보조 도구들을 이용해서 자신의 작업을 좀 더 자동화 시키고, 공정화 시켜서 고퀄리티와 보다 빠른 작업시간을 가지길 원한다면 여러분은 특정한 툴에 얽매여서는 안됩니다. 가장 기본적인 소스코드 레벨과 컴파일러 레벨의 작동을 이해해야만 그 다양한 툴들을 필요에 따라 사용할 수 있게 됩니다.

그리고, 다수의 작업자들이 가지는 작업환경을 배려하면서도 통합을 가능하게 하기 위해서 역시 가장 최하위에 존재하는 컴파일러에 대한 이해가 필요하죠. 이에 대한 원론적인 이해가 없다면 "Flash 로 개발한 작업물을 Flex builder 를 사용하는 내가 어떻게 작업하라는거야!" 라는 소리를 할 수 밖에 없게 되는데, 사실 자랑스럽게 할만한 이야기는 아니다 라고 말씀드리고 싶습니다.

앞으로의 모든 수업은 이 Flex SDK 레벨의 원론적인 내용들을 바탕으로 진행되게 됩니다. 지금껏 Flash 나 Flex builder 등 툴에 많이 의존해오던 분들은 적응에 상당히 많은 어려움을 겪으시게 될텐데 도움이 될테니 열심히 따라오라고 말씀드리고 싶네요.

다음 시간엔 오늘 배운 mxmlc 에 대한 내용을 바탕으로 FDT 를 분석해보는 시간을 가지도록 하겠습니다.

ps . 개그컷에 속지말자. 알고보면 훈남이다.

200909011713.jpg

개발개발 : 시작하며

개발개발 | 2009/09/01 15:25 | 안데르센

강좌를 시작하며

이 강좌는 제가 운영하려 하는 스터디 그룹에서 다룰 Flex SDK, FDT, Ant, Trac, Mylyn 과 같은 개발환경 툴들에 대한 내용을 다루게 됩니다.

스터디 시간 동안 쓸데없이 강의하면서 날려먹을 수 있는 시간을 아끼고, 좀 더 "기술을 어떻게 활용하면 좋을 것인가?" 나 모르는 부분에 대한 상호 스터디를 활발하게 하는 것이 좋겠다 싶어서 시작하는 것이죠.

혼자서도 글 보면서 배울수 있는 부분과 모여서 논의하면서 배울수 있는 부분에 대한 구분을 확실하게 해서 효율성을 높이고자 하는 의도에서 스터디 계획의 일부를 강좌로 빼려고 합니다.

강좌의 목적 : 개발 환경의 변화...

이 강좌의 목적은 쉽게 이야기해서 "플래시도 좀 사람답게 개발해보자." 입니다.

그리고, "할머니도 하는 액션스크립트" 라는 강좌 때와는 틀리게 스터디 그룹까지 하려고 하는 것은 "사람답게 개발할 수 있는 환경" 이라는 것은 "개인의 기술력" 을 갖추는 것 만으로는 해결되지 않는 사항들이기 때문입니다.

제대로 된 개발환경 위에서 개발을 진행하는 것과 그렇지 않은 환경에서 개발을 진행하는 것은 수치적으로는 말하기 어렵지만, 체감한 바로 적어도 2배 ~ 3배 이상의 차이를 보이게 됩니다.

"우왕~ 두배에~~"

할지도 모르겠지만, 실제적으로 업무량에 대한 처리 효율이 2배까지 차이가 날 수 있다는 것이고, 이런 차이는 바로 "업무량" 에 직접적으로 영향을 끼치며, 그 업무량은 다시 "인간다운 생활" 이나 "보다 고퀄리티의 결과물" 을 만들어내는데 영향을 끼치게 되죠.

하지만, 말했다시피 이런 개발환경은 "개인의 기술력" 과는 다르게 "조직 전체" 의 보다 나아가서는 "시장의 표준" 에 의해서 결정되는 사항들입니다. 아무리 개인이 할 수 있어도 조직이, 시장이 변하지 않는다면 아무런 의미가 없다는 것이죠.

전 프리랜서 입니다. 상당히 오래되었죠... 그래서 여기저기 많은 곳에서 일을 하는 편인데, 까놓고 이야기해서 대형의 플래시, 플렉스 어플리케이션들은 "증오" 위에서 개발된다 싶을 정도로 프로젝트 진행에 있어서 트러블이 심한 편입니다. 끝내고 나서 마음이 개운한 다른 일들과는 틀리게 대체적으로 언제나 지랄맞은 결과가 나오게 되죠.

개발주체인 서버사이드 그룹의 클라이언트 개발에 대한 이해부족과 마찬가지의 디자이너들에 대한 플래시 개발 프로세스에 대한 이해부족, 그리고, 개발자들 끼리도 표준화 되지 않는 개발환경의 문제가 심각하죠. 요구사항 자체가 달나라 꿈꾸는 소리로 넘어오는 경우가 많고, 주변은 "그게 뭔데? 멍~~" 뭐 이렇고, 달나라 꿈꾸는 소리를 아무리 막아도 막아도 작업량은 드럽게 많고... 유지보수를 넘길라고 해도 표준기술 자체에 대한 시장 이해력이 없기 때문에 상당히 고통스럽죠. 여러가지 직업을 가지고 있지만, 플래시, 플렉스 개발만큼 이해관계에 의한 고통이 심한 직업은 겪어본 적이 없습니다...

(아 씨발... 정말 다 때려쳐 버리고 싶어... 이 개노므 플래시고 나발이고...)

이 부분은 개인의 능력이 얼마나 올라가냐를 넘어서 시장의 개발환경 자체가 변화되어야 해결될 수 있는 부분이지 않을까 싶습니다. 아니... 직접적으로 이런 개발환경의 변화가 해결책이 되지는 않겠지만, 적어도 해결책을 마련할 수 있는 리소스의 확보는 가능해지기 때문이죠.

말은 뻔드르하게 하지만, 사실 까놓고 이야기해서 저 자신은 "반 디자인에 반 개발" 을 섞어서 하는 혼혈종 이기 때문에 원론적인 지식에 있어서 "전문적인 개발자" 보다는 딸리는 편입니다. 그래도... 아는 것이라도 공유해보고자 강좌와 스터디 그룹을 시작합니다.

아... 졸라 진지한 분위기...;;; 글 쓰면서 먹는 초코파이가 콧구멍으로 삐져나올 것 같아... "할머니도 하는 액션스크립트" 를 읽어본 사람들은 알겠지만, 내가 이렇게 진지한 캐릭터가 아니라서...;;;

어쨌든 시작합니다~

태그 : 개발개발

Eclipse Ant Task

인큐베이팅 되던 Ant Task 가 Eclipse 에 공식적으로 포함되기 시작한지도 꽤나 시간이 흐른것 같습니다. Eclipse 에 기본 포함되기 때문에 Flex builder 나 FDT 모두 build 시에 Ant 를 사용하는 것을 적극적으로 지원하고 있습니다.

   

Ant Task 꺼내기

   

Ant task 는 FDT 나 Flex builder 나 기본적으로 꺼내져 있는편이지만 (Flex builder 는 잘 사용하지 않아서 정확하지 않음) 만일 Ant task 가 나와있지 않다면 Eclipse 의 View 를 새롭게 꺼내도록 합니다.

   

   

Ant task view 가 보입니다.

   

   

선택을 하면 위에 Flash Explorer 아래 보이는 것처럼 Ant task 가 보이게 됩니다.

   

기본적인 Ant build file 만들어보기

Ant 는 XML 형식의 문법이기 때문에 HTML 처럼 손쉽게 사용할 수 있을겁니다. 그리고, Ant editor 도 지원을 하기 때문에 작업 편리도가 높은 편이죠.

   

   

HTML 이 <html><head></head><body></body></html> 의 기본 구조를 가지고 있다면 Ant build file 은 위와 같이 <project><target></target><target></target></project> 의 구조를 가지고 있습니다.

   

   

Ant task 로 가서 Add Buildfiles 를 누릅니다.

   

   

그러면 위와 같이 build file 을 선택할 수 있는 창이 뜨게 됩니다. 테스트로 만든 test.ant 를 선택하도록 합니다.

   

   

대충 보면 알 수 있습니다. project.@name 은 build 의 타이틀이 되게 되고, project.@default 로 지정된 target.@name 은 default task 로 취급이 되어서 이 build 를 실행할때 기본적으로 실행되는 task 로 지정이 되게 됩니다. (이 부분은 나중에 이야기를 하죠.)

   

build 환경변수 만들기 <property>

   

환경변수는 두가지 종류가 있습니다. 파일경로를 지정하는 location 과 어떤 값을 지정하는 value 로 구분됩니다.

   

   

property 는 위에서 보는 것처럼 ${value name} 의 형식으로 사용이 가능합니다.

   

   

위에 보이는 build 를 더블클릭 해서 실행시키면

   

   

이렇게 console 에 내용이 뜨게 됩니다.

   

Properties file 로 분리시키기

하지만 위와 같이 build file 안에 property 를 포함시켜 버릴 경우 많은 문제점들이 생기게 됩니다. 일단 두 대의 컴퓨터에 각각 다른 Flex SDK 의 위치를 build file 안에 포함시킬 수 없다는 것부터 시작해서 말이죠.

   

보통 ant build file 을 만들때는 *.properties 형태로 환경변수 파일을 따로 만들게 됩니다.

   

   

properties 는 위처럼 name=value 의 형태로 작성하게 됩니다.

   

   

그리고, 그렇게 만들어진 properties 파일은 위에서 처럼 불러들여 사용할 수 있습니다.

   

위에 properties 파일에 정의한 output.asdoc 을 아래에서 ${output.asdoc} 으로 사용하는 것을 볼 수 있습니다.

   

Target Group

만든 target 들을 그룹으로 묶어서 일괄 실행 시키는 새로운 target 을 만들수도 있습니다.

   

   

위와 같이 depends 를 통해 여러개의 target 들을 하나로 묶어줄 경우 해당 target 은 한 번의 클릭만으로 여러개의 작업들을 일괄적으로 처리하게 됩니다.

   

예제 : ASDoc 퍼블리싱

뭐 위에까지 설명을 했으면 더이상 별달리 알아야 할 게 없습니다. 사용법 자체가 단순하기 때문이죠. 그리고, 특별히 필요한 기능들이 있을땐 구글을 뒤져보면 다른 사람들이 공개한 task 들이 있으니 긁어다 사용하면 됩니다.

   

이 아래부터는 개인적으로 사용하는 기능들을 소개해 보도록 하겠습니다.

   

   

8번째 라인은 ${output.asdoc} 폴더를 지웁니다.

9번째 라인은 새롭게 폴더를 만들죠.

   

11 번째 exec 은 properties file 에 정의된 asdoc.exe 를 지정하고

12 번째 라인부터는 전달할 변수들을 지정하게 됩니다.

-source-path 는 asdoc 으로 퍼블리싱할 소스의 최상위 디렉토리를 지정하고

-doc-sources 는 뭔지 잘 기억이 안나네요...;;;

-library-path 는 참조해서 사용하는 swc 라이브러리들의 폴더 위치를 지정합니다.

-window-title 이나 -main-title 은 문서에 표시할 내용을 지정하고,

-output 은 document 를 퍼블리싱 할 폴더를 지정하게 됩니다.

   

그 아래쪽에 delete, mkdir, copy 는 개인적으로 문서를 두군데의 폴더로 퍼블리싱 하기 때문에 만든 행동들입니다.

   

이렇게 대충 코딩하고 Ant task 에서 더블클릭하면 간단하게 현재 코딩중인 소스들의 document 가 나오게 됩니다. 다만, ASDoc 자체가 예외에 대해 굉장히 깐깐하기 때문에 소스상에 이상한 부분이 있으면 그냥 죽어버리므로, 코딩습관을 깐깐하게 들여야 합니다. (예를 들어 Fla 의 라이브러리에 지정된 Bitmap 같은것을 new 로 생성할때... ASDoc 을 위해서는 getDefinitionByName 을 사용하는 것이 좋고, MovieClip 내부의 instance name 을 가져올때도 getChildByName 을 사용하는 것이 좋습니다.)

   

예제 : SWC 라이브러리 컴파일

   

31 번째 라인은 flex sdk 의 compc.exe 를 지정합니다.

-o 는 만들 swc file 의 위치와 파일 이름을 지정하게 됩니다.

-l 은 참조할 swc 라이브러리의 폴더를 지정하고,

-sp 는 기본 source-path 를 지정하고

-is 는 source-path 에서 swc 에 포함시킬 package 를 지정하게 됩니다.

   

예제 : FTP 업로드

   

60 번째 라인에서 업로드할 폴더와 서버 주소, 아이디, 패스워드를 지정합니다.

62 번째 라인에서 포함시킬 파일들을 지정하게 됩니다.

63 번째 라인을 보면 알다 시피 (*) 와일드카드를 사용해서 규칙에 해당하는 모든 파일들을 포함시킬 수 있습니다.

폴더내의 모든 폴더와 파일들을 대상으로 할 경우엔 <include name="**/*.*" /> 이렇게 하면 됩니다.

   

하지만, 이렇게 코딩하고 Ant task 에서 더블클릭을 하면 에러가 나게 되는데요. FTP 를 사용하기 위해서는 확장 라이브러리가 필요해서 입니다.

   

   

Eclipse 환경설정에 들어가서 위의 Ant runtime 에 commons net 라이브러리와 jakarta oro 라이브러리를 Add External JARs... 를 통해 포함시켜줘야 합니다. 검색하면 손쉽게 구할 수 있는 라이브러리 들이니 다운받아 포함시키도록 합니다.

   

예제 : FDT 일괄 컴파일, 브라우저 디버깅

뭐 Flex task 를 사용하기도 하는데 개인적으로는 FDT 를 사용하기 때문에 FDT task 를 자주 사용하는 편입니다.

   

   

   

위와 같은 properties 를 참고하는 ant build 입니다.

   

   

대충 projectname 은 현재 eclipse project name 을 지정해주고, main class 는 swf로 컴파일 할 as class 를 지정합니다.

debug="true" 로 해놔야지 trace 등이 정상적으로 출력되는 디버그용 swf 가 만들어지게 되고,

target 은 퍼블리싱할 swf 파일의 위치, 이름을 지정하게 됩니다.

   

24 번째 라인의 startDebugger 는 현재 프로젝트에 대한 디버그 감지를 활성화 한다는 뜻입니다.

그렇게 디버거를 활성화 시키고, 25 번째 라인에서 browse 를 하면 웹브라우저를 통해서 지정한 localhost 웹서버의 문서가 뜨면서 디버깅이 시작되게 됩니다.

   

이런 디버깅 기능을 FTP 업로드와 함께 사용할 경우 번거로운 작업들 없이 한 번의 클릭만으로 컴파일 --> FTP 업로드 --> 디버깅을 한꺼번에 할 수 있죠. swc 컴파일과 asdoc 퍼블리싱도 같이 묶어 버리면 매우 편리합니다.

   

   

그 외에 FDT 가 지원하는 Ant 기능들은 help 에서 볼 수 있습니다.

   

   

   

   

이 내용은 http://ssen.name/recipe 에서 볼 수 있습니다.

playerGlobal.swc

우리가 사용하는 3.0 에서 flash. 으로 시작되는 패키지들은 모두 playerGlobal.swc 라는 라이브러리 파일에 들어있습니다. Flex SDK 를 열어보면 frameworks/libs 폴더 안에 들어있습니다.

flash 의 경우 fl. 이라는 패키지들이 같이 포함되어 있고, flex 의 경우엔 mx. 이라는 패키지들이 같이 포함되어있죠.

이 fl 이나 mx 라는 것들은 콤보박스 같은 UI 콤포넌트들과 Easing 같은 모션그래픽 같은 기능들을 포함하고 있고, (mx 의 경우엔 그 분량이 fl 과는 비교할 수 없을 정도로 방대합니다.) 소스가 공개되어 있어서 파일 경로만 찾는다면 내부 소스를 확인할 수도 있습니다. 어느정도 수준이 되면 공부하느라고 자주 찾아보게 되는 소스들입니다.

flash.data.*
AIR 에서 사용됩니다. SQLite(에스큐라이트)를 다루는데 필요한 기능들이 들어있습니다.

flash.desktop.*
AIR 의 desktop application 을 제작하는데 필요한 여러가지 기능들이 모여 있습니다. OS 의 system tray 나 AIR application 에 대한 update, Clipboard 접근 등의 기능을 지원합니다.

Clipboard 의 경우 text 에 한해서 web application 에서도 사용할 수 있습니다.

flash.display.*
보 통 가장 많이 사용하는 MovieClip, Sprite, BitmapData 등 화면에 표시되는 기능들을 포함하고 있습니다. 최근 벡터그래픽 드로윙이 개편되어서 Graphics 로 시작되는 Class 들이 엄청나게 늘어났는데, 이것들은 무시해도 됩니다.

보 통 기초단계에서 꼭 봐야할 기능은 DisplayObject, InteractiveObject, DisplayObjectContainer, Sprite, MovieClip, SimpleButton 정도이고, 이것들을 떼고 좀 더 고급 화면표시를 배우고자 할때 BitmapData, Bitmap, Shape 등을 봐줍니다. 그렇게 기초적인 디스플레이 기술들에 알게 되면 Stage 의 Event.RESIZE 와 stageWidth, stageHeight 등을 통해 전체 플래시 어플리케이션 정렬법 등을 배워두면 됩니다.

이 후 MovieClip 에 대한 고급제어가 필요할때 FrameLabel, Scene 등을 보고,
벡터 그래픽 드로윙을 할때는 flash.geom.Matrix 와 함께 Graphics... 로 시작되는 것들과 JointStyle, CapsStyle 등을 보고,
비트맵 드로윙을 할때는 역시 flash.geom.Matrix 와 함께 BitmapData 를 봐주고,
swf 들을 여러개로 분해해서 어플리케이션을 구성할때 Loader 등을 봐주도록 합니다.
(드로윙을 할때 Matrix 를 이해못하면 여러모로 어려움을 많이 겪게됩니다.)

최근엔 Shader 에 관련된 기능들도 많이 나왔는데, 이건 저도 아직 안써봐서 뭐라 말하기 어렵네요.

flash.errors.*
여 러가지 Error 들이 포함되어 있습니다. 기초 레벨에선 자주 사용되지 않지만, 공용 라이브러리 등을 만들때나 네트워크 작업을 할때 부터는 조금씩 사용하게 됩니다. debug player 를 깔고 웹서핑을 할때 종종 뜨는 경고창들이 바로 이 Error 들을 알려주는 것입니다.

직접 만든 Custom Error 들을 꼼꼼하게 사용하면 다른 개발자가 라이브러리를 사용할때 큰 도움이 되게 됩니다.

flash.events.*
ActionScript 3.0 의 핵심중에 하나라고 볼 수 있는 IEventDispatcher 와 EventDispatcher, Event 를 포함한 패키지 입니다. 이야기한 세가지를 이해하지 않으면 ActionScript 3.0 의 가장 최하 기본을 모른채 공부하고 있다고 할 수 있을겁니다.

뭐가 이야기한 세가지는 꼭 봐둬야 하며, 나머지 Class 들은 여러저기 사용되는 event 들입니다.

보통 UI 구성시에는 MouseEvent, KeyboardEvent, TextEvent 를 꼭 봐둬야 하고,
Loader, URLLoader 등의 웹자원 활용 기능을 만들땐 ProgressEvent, NetStatusEvent, IOErrorEvent 등을 봐둬야 합니다.
Timer 를 돌릴때 사용되는 TimerEvent 도 있습니다.

flash.external.*
html 의 javascript 와 통신하는데 사용하는 ExternalInterface 가 들어있습니다.

flash.fileSystem.*
AIR 에서 desktop 의 file, directory 등을 읽고, 쓰고 하는 기능들을 만드는데 사용합니다.

인터넷 상의 자원을 활용하는 flash.net.* 과 비교해보면 재밌습니다.

flash.filters.*
DropShadow, BlurFilter 들을 만드는데 사용합니다. DisplayObject.filters 와 같이 봐두고, 비트맵 드로윙 등을 할때도 사용할 수 있습니다.

쓰는건 무지 쉽지만, 막 쓰면 성능에 치명적인 영향을 미치게 되므로 절제가 필요한 기능입니다.

flash.geom.*
왜곡, 변형 등의 기능들을 포함합니다.

기초단계를 지나기 시작하면 Matrix, Point, Rectangle 을 매우, 매우 자주 사용하게 됩니다. 행렬, 거리계산 등의 수학적 지식이 뒷받침 되어야지 보다가 머리털 빠지는 일이 없습니다.

flash.html.*
AIR 에서 사용됩니다. HTMLLoader 가 Sprite 를 상속받은걸 보면 알겠지만 Flash 내부에서 HTML 객체를 만들고 컨트롤 하는데 사용됩니다.

flash.media.*
Sound, Video 등을 다루는데 필요한 기능들이 모여있습니다. Camera 나 Microphone 처럼 입력되는 멀티미디어 데이터를 다루는데도 사용되구요.

flash.net.*
서버 데이터 연동, swf 로드무비, 이미지 웹에서 불러오기 등의 인터넷 자원 연동을 할때 꼭 필요합니다.

기 초적으로 navigateToURL(), sendToURL(), URLLoader, URLRequest, URLVariables 는 꼭 봐줘야 하고, 조금 지나서 파일 업로드, 다운로드 기능을 사용할때는 FileReference 정도를 보게 됩니다.

시 간이 좀 지나면 네트웍 게임등을 만들때 사용하는 Socket, cookie 와 비슷하게 사용할 수 있는 SharedObject, swf 들끼리 서로 통신하는데 필요한 LocalConnection 등을 보게 되기도 합니다. 고급기능들이니깐 기초단계에서는 자주 사용되지 않습니다.

flash.printing.*
프린터를 통해서 출력하는데 필요한 기능들이 포함되어 있습니다.

flash.sampler.*
저도 사용해보지는 않았는데, 디버깅 상황에서 좀 더 상세한 정보들을 수집하는데 사용되는 것 같습니다. (아마도...)

Object 하나가 얼마의 memory 를 사용하는지를 알 수 있기도 하고... 뭐 여러모로 배워두면 좋을것 같은데, 나온지 얼마 안되서 저도 아직 잘 모르네요.

flash.system.*
보안에 관련된 기능들을 다루게 됩니다. cross domain 작업등을 하다보면 자주 접하게 됩니다.

Loader 를 통해서 불러온 swf 에서 Class 를 뽑을때 사용하는 ApplicationDomain 도 있습니다. 자원의 분리, 재활용을 할때 한번쯤 보게 되는 Class 입니다.

flash.text.*
TextField 로 대표되는 flash 의 text 기능을 다룰때 보게 되는 매우 중요한 패키지 입니다.

기본적으로 TextField 와 TextFormat 등을 보게되고, embed font 등을 만질때는 Font 도 자주 접하게 됩니다.

조금 고급제어를 하게 되면 TextLineMetric 등을 통해서 TextField 상의 행, 열 등을 만지게 되기도 합니다.

최 근엔 FTE(flash text engine) 라고 부르는 flash.text.engine.* 기능이 추가되어서 앞으로 점점 사용도가 줄어들 기능입니다. Flex4 gumbo 정도 부터는 FTE 를 확장한 flashx.text.* 의 패키지로 구성된 text layout framework 가 TextField 를 대체하게 될 것입니다. undo, redo, rich edit, data formatting 등을 지원하므로 내년 정도엔 지금은 html 에 밀려 뜸한 flash 를 사용한 rich text application 을 자주 보게 될겁니다.

flash.text.engine.*
위에서 이야기한 FTE 입니다. flash 에서 text 를 제어하는 새로운 방식이지만, TextField 처럼 손쉽게 사용하기는 무리가 있습니다.

flash.ui.*
마 우스 오른클릭을 하면 나오는 context munu 에 대한 커스터마이징이나 마우스 포인터 모양 바꾸기, 비밀번호 입력등에서 실수하기 쉬운 키보드의 caps lock, num lock 등이 활성화 되어있는지를 알아내는등의 기능을 만드는데 필요합니다.

flash.utils.*
최고수가 사용하는 막강 무공중 하나인 ByteArray 나 EnterFrame 대신 사용할 수 있는 Timer, 대리자를 만들때 사용하는 Proxy 등이 있습니다.

기 초레벨에서는 디버깅시에 유용한 getQualifiedClassName(), getQualifiedSuperClassName() 등은 꼭 알아두는게 좋고, 뭐 성능테스트 같은걸 하려면 getTimer() 를 알아두는 것도 좋습니다. (getTimer() 로 알아낸 시간 두개를 b-a 형식으로 빼서 얼마의 시간이 소요되는지를 테스트 하게 됩니다.)

Timer 놔두고 interval 을 사용하는 분은 없을거라 믿습니다.

flash.xml.*
최상위의 XML 을 사용하면 딱히 볼 일 없습니다. 2.0 버전때 사용하던 xml 컨트롤 입니다.

Top Level
기초단계에서는 flash.display 나 flash.net, flash.text 등을 자주 보게 되지만, 중급을 넘어서면서 부터는 여기를 무지하게 자주 보게 됩니다.

Vector, Array, XML, String, RegExp, Math, Date 등의 "우하하 기초~" 하면서 웃다간 캐작살 나기 쉬운 심오한 세계들이 존재하는 Top Level 이니, 왠만큼 조금 한다 싶을때 부터는 꼼꼼하게 공부하는게 좋은 내용들이 많습니다.
이전 1 2 3 4 5 ... 16 다음