한글 폰트 임베드 용량 줄이기

참고 : http://dofaf.tistory.com/26

개요
사실 폰트 임베딩은 FLASH 6버젼 시절 부터 있었지만 이 부분에 대해 잘 아시는 분이 의외로 많지 않은듯 싶어 이번 포스트를 기확하게 되었습니다.
아시는 분은 아시다시피 폰트 임베딩 기술은 폰트 자체를 FLASH 에 포함시켜 SWF 파일로 제작하는 기술인데 이렇게 하면 특정 폰트가 설치되지 않은 사용자도 원래 폰트로 보여진다는 장점이 있습니다. 단점은 바로 용량인데 윤고딕540 폰트를 임베딩 하려면 최소 2.3Mbyte 정도가 추가된다는 점 입니다. 이번 포스트는 바로 이런 문제를 해결하는 방안에 대한 내용입니다.

문자열 범위(유니코드에 대한 이해)
FLASH 나 FLEX 는 문자를 유니코드로 처리합니다. 유니코드는 전세계 모든 문자를 표시할 수 있는 현재로썬 가장 진보된 문자열 구조로 멀티바이트 문자열 표현에 가장 최적화 되어 있다고 볼 수 있습니다. 이 덕분에 한가지 인코딩 만으로 한글, 중국어, 프랑스어등 모든 문자를 표현 가능하죠.

FLASH, FLEX 에서 포함 시키고 싶은 글자의 유니코드 범위를 지정 해주는 것만으로 결과물의 용량은 매우 줄어들게 됩니다. 이게 가능한 이유는 지정된 유니코드 범위의 폰트 정보를 추출하여 이것만 포함하고 SWF 로 컴파일 하기 때문입니다. 가령 한글 전체를 포함하려면 유니코드 범위를
"U+0020-U+007E,U+1100-U+11F9,U+3000-U+303F,U+3131-U+318E,U+327F-U+327F,U+AC00-U+D7A3,U+FF01-U+FF60"
까지로 지정하면 됩니다. FLASH 일 경우 동적텍스트 필드나 입력텍스트 필드를 선택한 후 포함이라는 버튼을 클릭하여 해당 문자 범위를 선택하면 되고 FLEX 일 경우는 CSS 파일에 해당 범위를 직점 코딩 해주시면 됩니다.
아래는 FLEX 에서 CSS 파일에 한글 기본 유니코드 범위를 입력한 소스입니다.

/* COMMON.CSS */
@font-face {
src: url("YD_YGO540.TTF");
fontFamily: "YD_YGO540";
unicodeRange:
/* 한글전체 */
U+0020-U+007E,U+1100-U+11F9,U+3000-U+303F,U+3131-U+318E,U+327F-U+327F,U+AC00-U+D7A3,U+FF01-U+FF60
}

사용방법

<mx:Label x="0" y="0" text="" id="lblSubject" fontFamily="YD_YGO540" fontSize="18" height="20" width="362" color="#FFFFFF" text="윤고딕 540 폰트에 포함된 모든 한글 폰트 정보를 이용해 폰트깨짐 현상없이 표현이 가능합니다." />

기계도 아니고 개발자가 유니코드 범위를 어떻게 알수 있냐고 대뜸 짜증부터 내시는 분이 있으시라 봅니다.
다행이도 ADOBE 에서 정리해둔 유니코드 테이블이 제공됩니다.
FLEX 설치 폴더 sdks플랙스 버젼(필자는 3.0)frameworksflash-unicode-table.xml 파일 안에 모든 유니코드 범위가 친절히 정리돠어 있습니다.
주의 할 점은 파일 안에 정리되어 있는 데이터에서 유니코드 범위가 하나로 지정 되어 있는 것을 U+D78C -> U+D78C-U+D78C 이런식으로 범위형 구조료 변환 한뒤 CSS 파일에 적용해야 한다는 점입니다.

결론
사실 이 소스를 보고 아시는 개발자분은 짜증을 내셨었더랬죠. 포함해야할 유니코드 범위를 찾는 것도 상당히 귀찮을 뿐 아니라 알 수 없는 유니코드 범위를 이해하라는 것 자체도 부담스럽기 때문이죠
하지만 부담스러울 정도로 길어지는 코딩도 2.3Mb 에서 450kb 이하로 줄어드는 용량을 확인해 본다면 얼마나 값진 작업인지 이해 하시리라 봅니다. 특히나 세미포탈급 이상의 사이트라면 용량이 매우 민감해지는데 디자인, 사용 편의성등을 생각하면 개발자에게 아주 매력적인 능력이 될것 입니다.