http://uxkorea.net/blog_post_62.aspx 이 글과 http://9eye.net/222 이 글에서 Glyphs를 활용한 한글 표시 기법에 대해서 알 수 있었고, http://gongdo.tistory.com/88 여기에서 TextBlock에서 사용가능한 한글에 대해 알아봤습니다.

어느 방법이든 현재로선 추가작업이 비교적 많이 필요하고 어차피 정식판이 나올때 즈음에선 수정이 안될래야 안될 수가 없는 문제라서 느긋하게 기다리면 될텐데요, 지금 이 시점에서 이런저런 예제를 만들어보고 있는 저로선 꽤나 골치아픈 문제네요. :(

우선 현재 상황(Silverlight 1.1 Alpha)에서 Glyphs와 TextBlock의 차이점을 짚어보도록 할께요.
구분 Glyphs TextBlock
텍스트 지정 UnicodeString Text
폰트 지원 FontUri;
폰트의 경로를 지정 (ex: "MALGUN.TTF", "http://aa.bb.cc/fonts/MALGUN.TTF")
FontFamily;
폰트의 패밀리 이름을 지정 (ex: "맑은 고딕")
다운로드 지원 미지원(정확하지는 않음) 지원, SetFontSource로 다운로드 받은 zip 패키지를 지정하고 그 안에 있는 폰트를 FontFamily속성에 지정할 수 있음.
한글 지원 FontUri를 한글 폰트로 설정하면 모든 폰트를 지원 다운로드된 폰트를 사용하여도 Arial Unicode MS만이 한글 지원
폰트 크기 FontRenderingEmSize;
Em 단위로 지정(Word 등에서의 단위)
FontSize;
픽셀 단위로 지정
폰트 색상 Fill;
Brush
Foreground;
Brush
기타 속성 지원
  • Indices; 어떤 역할인지 정확히 도큐멘팅 되지 않음.
  • StyleSimulations; 굵게, 이탤릭, 굵게/이탤릭만 지원
  • FontStretch; 1단계(50%)~9단계(200%)까지 늘이기
  • FontStyle; 이탤릭 지원
  • FontWeight; Thin에서 ExtraBlack까지 10단계 지원
  • TextDecoration; 밑줄 지원
  • TextWrapping; 텍스트 길이가 영역을 벗어날 때 자동 줄바꿈
기타 OriginX, OriginY로 시작 위치 지정 TextBlock내부에 <LineBreak>나 <Run>로 줄바꿈 또는 다른 폰트 속성으로 텍스트를 표현 가능

Glyphs는 TextBlock에 비해 상대적으로 표현 능력이 떨어지고 사용이 불편한데요, 다음과 같은 내용을 예로 들어볼게요.

이름 : 공공도
홈페이지 : gongdo.tistory.com
전화번호 : 000-000-0000
뭐 너무나도 일반적인 문장이죠? 이걸 Glyphs로 표현한다고 생각해보죠. 대충 이렇게 될 거에요.
<Glyphs Canvas.Left="0", Canvas.Top="0", FontUri="Malgun.ttf" FontRenderingEmSize="10" StyleSimulations="Bold" UnicodeString="이름" />
<Glyphs Canvas.Left="25", Canvas.Top="0", FontUri="Malgun.ttf" FontRenderingEmSize="10" StyleSimulations="None" UnicodeString=" : 공공도" />
<Glyphs Canvas.Left="0", Canvas.Top="25", FontUri="Malgun.ttf" FontRenderingEmSize="10" StyleSimulations="Bold" UnicodeString="홈페이지" />
<Glyphs Canvas.Left="100", Canvas.Top="25", FontUri="Malgun.ttf" FontRenderingEmSize="10" StyleSimulations="None" UnicodeString=" : gongdo.tistory.com" />
...생략...
네, 위치를 일일히 수동으로 지정해야 하고 똑같은 속성을 몇 번이나 다시 써야 하죠? 이거 손으로 코딩이 가능할까요? 저라면 GG치겠어요.
http://9eye.net/222 에 의하면 Office 2007 제품군의 XPS로 저장하기 기능을 사용하여 어느 정도 편해질 수는 있어요.
위와 같은 예제를 워드 2007로 만들어 보죠.

참 쉽죠? 그리고 XPS로 저장한 뒤에 XPS의 압축을 풀고 Documents\1\Pages\1.fpage를 메모장에서 열어보죠.


...이젠 별로 안쉽죠? 저 엄청난 양의 코드를 보세요(덜덜덜). Copy&Paste는 별 문제 안되겠지만 내용을 바꾼다고 생각해보세요.

네, Glyphs의 문제는 고정된 디자인을 만들기는 그렇게 어렵지 않지만 이걸 동적으로 내용을 바꾸기엔 너무나도 부담스럽다는 거에요.
사실 Glyphs 자체가 이런 동적인 문자열 포매팅을 위한 클래스도 아니지만요.
Glyphs는 위치가 정해진 텍스트를 딱 한 줄로 표현할 때만 사용하는 게 올바른 사용 방법일 것 같습니다.

그럼 TextBlock으로는 위의 예제를 쉽게 작성하고 쉽게 변경할 수 있을까요? 예제 코드를 만들어보죠.
<TextBlock x:Name="form" FontFamily="Arial Unicode MS" FontSize="15">
    <Run FontWeight="Bold" Text="이름ABC" />
    <Run Text=" : " />
    <Run x:Name="formName" Text="공공도" />
    <LineBreak />
    <Run FontWeight="Bold" Text="홈페이지" />
    <Run Text=" : " />
    <Run x:Name="formHomepage" Text="gongdo.tistory.com" />
    <LineBreak />
    <Run FontWeight="Bold" Text="전화번호" />
    <Run Text=" : " />
    <Run x:Name="formPhone" Text="000-000-0000" />
    <LineBreak />
</TextBlock>
문장의 의미가 좀 더 명확해졌고 각 텍스트의 위치는 자동으로 계산되어 배치되며 LineBreak로 줄 바꿈도 가능해요. 또 개별 요소들도 x:Name을 지정할 수 있으니 코드-비하인드에서 원하는 내용의 수정도 덜 괴롭겠구요.
한번 실행해 볼까요?


아뿔싸... 이런 낭패가! Bold가 안먹네요. Thin, ExtraBlack, 및 이탤릭 등 어떤 속성도 제대로 적용되지 않더군요.
불행중 다행은 폰트 사이즈는 개별 설정이 된다는 점.


보시다시피 폰트 사이즈가 달라져도 폰트 배치는 자동으로 된다는 걸 확인할 수 있어요.
TextBlock이 스펙대로의 동작만 정확히 하고 폰트 문제만 해결된다면 상당히 해피해질텐데 정식판은 아직 멀었을까요. 휴우휴우.

결론을 내려보자면 아직은 텍스트의 동적이고 구조적인 표현은 불가능하진 않지만 어차피 정식판에서 쉽게 해결 될 수 있는 문제이기 때문에 그렇게 노력을 들여 구현할 만큼의 가치는 전혀 없다는 겁니다.
꼭 지금 당장 Silverlight로 한글을 표현해야 한다면 가급적 단순한 출력의 레이아웃을 잡고 Glyphs를 활용하는게 좋을 것 같고, 가장 좋은 방법은 정식판에서 TextBlock이 정상적인 작동을 하길 기다리는 것일 것 같네요.


보너스.
현재 TextBlock에서 한글을 표시할 수 있는 Arial Unicode MS 폰트는 무려 22메가나 돼요.
이걸 다운로드 하라고 하는건 거의 자살행위나 마찬가지겠죠?
그래서 워드와 XPS 출력을 이용해 필요한 글자만 들어있는 odttf 파일을 추출해봤어요.
여기서 사용가능한 글자의 목록은 아래와 같습니다.
  • 모든 Unicode 한글 문자와 자음/모음
  • 일반적인 한글 폰트에서 지원하는 기호와 특수문자
  • 키릴 문자
  • 일본어 히라가나/가타가나
위 내용을 포함하도록 패키징해보니 단지 1.6메가로 완성되더군요!
게다가 이걸 압축해보면 500kb도 안나옵니다. 굉장히 고무적이죠!
하지만 이 odttf에는 한자는 한글자도 안들어갔어요.
한자는 폰트 밀도가 높아서인지 19메가에 달하고 압축해도 14메가정도더군요.
그래서 한자는 뺐습니다.
어쨌든 받아서 테스트 해보실 분은 아래 파일을 받으세요.
한글일반.zip

일반적인 한글 표현을 위한 odttf


Posted by gongdo


티스토리 툴바