논리와 감각, 원론과 응용
일단 눈으로 보고 차이를 이야기해보죠.
어떤 object 의 위치 x 를 10 에서 100 으로 옮긴다고 했을때를 생각해보죠.
소스코드를 통해서 컨트롤 할때는 위와 같이 단순한 코딩으로 해결이 됩니다. (물론 Tweener 를 사용해서 그런것이고, 기본 기능만으로 통해서 코딩하면 보다 복잡해지겠죠.)
하지만, 이렇게 애프터 이펙트와 같은 애니메이션 툴을 사용했을때는 좀 더 복잡하지만, 대신 사람이 손쉽게 이해할 수 있는 형태로 작업을 할 수 있게 됩니다.
보다 원론적인 논리에 가까운 형태의 작업은 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 형태로 압축되어 있는데 압축을 풀어서 적당한 곳에 놓아둡니다.
제 경우에는 위처럼 data 드라이브에 setting 폴더에 넣어두었습니다.
많은 윈도우 사용자들을 위해서 윈도우로도 진행을 해보도록 하겠습니다. 윈도우에서는 C 드라이브에 setting 폴더 내에 넣어두었습니다.
SDK 를 적절한 위치에 두었으면 해당 위치에 대한 경로를 인식하고 있어야 합니다. 맥킨토시로 진행하는 경우의 경로명은 "/Volumes/data/settings/flex_sdk_3.4.0.9271" 이 되고, 윈도우의 경우엔 "C:\settings\flex_sdk_3.4.0.9271" 가 되게 됩니다.
mxmlc 를 통한 기초적인 소스코드 컴파일 하기
우리는 이제 평소에 굉장히 쉽게 해오던 것들을 굉장히 어렵게 하게 될 것입니다. 강좌를 보시는 동안 "이게 뭔짓이여..." 하는 분들도 있으실텐데, 그런 분들이 있으시면...
그냥 따라오세요... 오빠를 믿어요~
일단 적절한 코딩을 해놓은 뒤에 (한 번 개고생 해보자는 의미로 메모장 같은 프로그램을 사용해서 코딩하는 것을 추천합니다.)
테스트 폴더를 만들어서 저장을 하도록 합니다.
윈도우의 경우는 위와 같이 저장했습니다.
그리고, 터미널을 열고 위와 같이 입력합니다. 명령어를 분석해보면
/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 소스코드의 경로) (이후 부터는 -? 의 옵션 입력들)
이렇게 세가지로 규칙화 되게 됩니다.
그러면 위와 같이 flex-config.xml 을 로딩한다는 메세지가 뜨고, 최종적으로 mxmlcTest.swf 가 만들어졌다는 메세지가 뜨면서 mxmlc 가 종료되게 됩니다.
해당 위치에 가보면 mxmlcTest.swf 가 만들어진 것을 확인할 수 있고
실행해 보면 위와 같이 throw new Error 에 대한 구문이 실행되게 됩니다.
만일 위와 같은 구문들이 등장하지 않는다면 구글에서 "flash debug player download" 로 검색해서 플래시 플레이어 제거 프로그램과 플래시 디버그 플레이어를 다운 받고, 제거 프로그램으로 기존의 플레이어를 삭제한 뒤에 디버그 플레이어를 설치하도록 합니다. (매우 기초적인 사항이니 삽질을 하더라도 꼭 자기 손으로 다운받고 설치하는 방법을 익혀두도록 합니다.)
윈도우의 경우는 위와 같이 도스창을 열어서 진행하면 됩니다. 경로명이 C:\ 형식으로 시작된다는 것 이외에는 동일한 사용방식을 가지고 있으므로 앞으로 진행될 강좌에서는 따로 윈도우용 스크린샷이 없더라도 감안해서 적용하시면 됩니다.
좀 더 많은 mxmlc 옵션 이해하기
MXMLCTest.as 에 코드를 추가시켜 줍니다. 추가시키는 코드들은 TweenMax 를 통한 트위닝과 커스텀 클래스를 통한 ColorBox 입니다.
ColorBox.as 의 코드입니다.
그리고, 각기 파일들의 위치는 위와 같이 잡아주도록 합니다.
기존대로 소스를 컴파일 하려고 하면 에러가 발생하게 됩니다.
이 에러들이 바로 우리가 Flex builder 나 FDT, Flash 등을 통해서 컴파일을 진행할때 뜨는 컴파일 에러의 원본 입니다. 이렇게 SDK 를 통해 발생되는 에러메세지를 FDT 나 Flex builder 는 콘솔창을 통해서, Flash 의 경우는 컴파일 에러 창을 통해 정리된 형태로 보여주게 되는거죠.
에러를 잡기 위해서 좀 더 옵션들을 추가해보도록 하겠습니다.
추가적인 옵션들을 살펴보도록 하죠.
-sp /Volumes/data/Test/src2/
:: 외부에 마련된 ColorBox 가 존재하는 src2 폴더를 컴파일에 포함시킵니다.
-library-path /Volumes/data/Test/libray.swc
:: (TweenMax 가 들어있는) swc 라이브러리 파일을 컴파일에 포함시킵니다.
이렇게 추가적인 옵션들을 통해서 컴파일 시키면 정상적으로 컴파일이 진행되게 됩니다.
swf 파일을 실행시켜 보면 지정된 트윈 애니메이션이 실행되고, 종료시에 지정한 throw new Error 가 뜨게 됩니다.
이와 같은 -sp 나 -library-path 와 같은 기능들은 여러가지 툴들에서 다양한 형태로 감각화 되어있습니다.
Flash 에 존재하는 Publish Settings/(Script Settings... 버튼 클릭)/Advanced ActionScript 3.0 Settings 의 기능이나
FDT 에 존재하는 Source, Library 기능들이 바로 그것이죠.
Flex builder 와 Flash Develop 역시 마찬가지의 기능들이 비슷한 다른 형태로 구현되어 있습니다.
이런 부분은 추가적으로 -external-library-path 에 대한 옵션도 있지만 해당 부분이나 이와 관련된 더 자세한 내용들은 추후에 설명하도록 하겠습니다. 오늘은 mxmlc 에 대한 전반적인 옵션들을 이해하려고 하는 것이니깐요.
추가적으로 swf 의 기본적인 모양에 대한 옵션들도 존재합니다. (위에 스펠링 틀려서 꽤 다시 쓴 흔적들이...;;;) 분석해보면
-default-size 800 600
:: width 800 height 600 pixel 의 사이즈로 swf 를 만듭니다.
-default-frame-rate 31
:: 기본 fps 를 지정합니다.
-default-background-color 0xffffff
:: swf 의 기본 배경색을 지정합니다.
이 부분은 굉장히 익숙한 옵션들일 겁니다.
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 . 개그컷에 속지말자. 알고보면 훈남이다.
