Hand-coding Flash
[[여기서 '손코딩(hand-coding)'이란 디자이너나 IDE를 통하지 않고 개발자가 바닥부터 직접 코드를 작성하는 행위를 말합니다.]]
제가 주로 사용하는 언어들은 대게 변변한 IDE가 없습니다. 그리고, 간혹 IDE가 잘 되어있는 언어를 사용할 때도 손코딩을 즐깁니다. 예를 들어, 남들은 Visual Studio를 사용해서 폼을 디자인한 후 윈도우 프로그래밍을 할 때 저는 MS에서 무료로 배포한 VS Express 버전(리소스 디자이너가 없습니다)과 WTL을 사용해 손코딩했습니다. 애초에 제대로 된 IDE가 없는 PHP, HTML, JS, Python은 말할 것도 없죠. 사실 쓸만한 IDE들은 비싼 것도 이런 성향을 굳히는데 큰 도움(?)이 되었습니다. ^^
여하튼, 그렇다보니 IDE가 참 잘되어있는 Flash도 손코딩으로 할 수 있는 방법을 자연스레 찾게 되었습니다. 그러던 차에 FlashDevelp이라는 훌륭한 플래시 개발환경을 찾게 되었죠. 하지만, 손코딩만으로 할 수 있는 Flash에는 한계가 있더군요. 그래서 별 흥미를 느끼지 못하고 있었습니다. 여기까지가 좀 오래된 이야기입니다.
그렇게 손코딩 Flash를 잊고 지내다가 몇달 전쯤 Flex SDK 4가 출시되었다는 소식에 오래전에 했던 삽질을 기억해내고 다시금 도전해보고 싶었습니다. 지금 팀에서 하고 있는 일과 약간연관이 있던 것도 동기가 되었습니다. 그리고 관련 자료를 찾던 중에 하드 코딩 Flash에도 리소스를 추가할 수 있다는 사실을 마침내 알게 되었습니다! Flex SDK 2에서도 가능했는지는 모르겠지만, 어쨌거나 ActionScript 3를 지원하는 Flex SDK 4에서는 가능하더군요.
이젠 뭔가 할 수 있겠다라는 생각이 들었습니다.
How to embed a resource
ActionScript에서는 다음과 같이 리소스를 포함할 수 있습니다.
[Embed("assets/bullet_red.png")]
private var bulletRed:Class;
심볼로 직접 등록할 수도 있습니다.
[Embed(source="assets/bullet_orange.png", symbol="BulletOrange")]
private var bulletOrange:Class;
변수가 아닌 상수로도 등록이 가능하죠.
[Embed(source="assets/bullet_purple.png", symbol="BulletPurple")]
const BULLET_PURPLE:Class;
잘되는 것을 확인하고 기뻐할 새도 잠시, 새로운 과제가 머리속에 떠올랐습니다.
"그럼 글꼴은? 한글은?"
[adsense]
How to embed a font
글꼴을 포함하는 방법 자체는 생각보다 쉬웠습니다.
[Embed(source="assets/arial.ttf", fontName="Arial", mimeType="application/x-font-truetype")]
private var fontArial:Class;
문제는 그 다음이었습니다. 여기까지 써놓고 문제가 있다고 하면 이렇게 말씀하시는 분들이 계실지도 모르겠습니다.
"다 끝난 거 아냐?"
그랬으면 정말 좋겠지만, 현실은 그렇지 못합니다. 한글이 표현할 수 있는 글자 수는 11172개로 영문에 비할 바가 아닙니다. 당연히 파일 용량도 어마어마하게 차이가 나죠. 간단한 예로 영문 파일인 Arial.ttf는 358KB인 반면, 한글 파일인 Malgun.ttf는 4.13MB 입니다. 물론, 영문도 한글도 용량이 작은 파일들이 있지만 아무리 작은 한글 파일도 최소 몇백 KB는 필요합니다. 거기에 이미지나 음악까지 포함하면 1MB는 우습죠. 어떤 홈페이지에 접속할 때마다 메가바이트 단위로 다운로드 받는다고 생각해보세요. 끔찍하죠.
"하지만 Flash 파일들이 그 정도까지는 안 크던데?"
제가 방법을 계속 찾은 이유도 여기에 있습니다. Flash IDE를 통해서 글꼴을 포함시키면 Flash에서는 필요한 글자만 뽑아서 임베딩 시킵니다. 처음에는 글꼴 파일에서 사용할 글자들만 따로 추출해 크기가 작은 글꼴 파일을 만드나 싶었는데, 아무리 생각해도 다른 방법이 있을 것만 같았습니다. 그리고 마침내 방법을 찾았습니다.
[Embed(source="assets/arial.ttf", fontName="Arial", mimeType="application/x-font-truetype", unicodeRange="U+0020,U+0041-U+005A,U+0061-U+007A")]
private var fontArial:Class;
글꼴을 포함시킬 때 unicodeRange를 써주는 것이 가장 중요합니다. 겨우 속성값 하나 때문에 꽤 상당한 시간을 삽질로 보냈습니다. OTL 이 속성을 사용해 컴파일을 해보니 파일 크기가 확실히 줄었음을 확인할 수 있었습니다.
이제 이걸로 뭘 만들어볼까요? ^^
혹시 용량은 얼마나 줄어 들었을까요?
[아.. 이건 퀴즈인가? ㅎㅎ ]
포함하는 글자 수에 따라서 다릅니다. ^^
대충 글자 수에 비례해서 용량이 줄어들거나 늘어난다고 보시면 될 것 같습니다.
행복한고니의 생각...
손코딩 ActionScript에 글꼴을 포함하는 방법...