아... 그간의 삽질을 생각하니 안구에 습기가 차네요.
이렇게 단순한 문제였을 줄이야.

네, 예고했듯이 실버라이트의 TextBlock에서도 한글 폰트를 표시할 수 있다는 사실이 밝혀졌어요! 알려주신 꿍님에게 다시 한번 감사를.

http://gongdo.oranc.co.kr/Silverlight/Samples/ShowMeKorean/Index.html


보시다시피 웹에서도 한글 폰트가 잘 나와요.
하지만 이렇게 하려면 약간 번거로운 Downloader를 사용해야 하고 따라서 반드시 웹서버가 있어야만 동작한다는 문제점도 있어요.
그리고 한글 폰트는 비교적 용량이 큰편이라서 다운로드되기까지 시간이 어느정도 걸리니까 그 동안에는 한글이 ㅁㅁㅁㅁㅁ로 나오겠죠.

그래도 지금까지 동적으로 한글을 표시하는 방법은 Glyphs밖에 없었는데 더 사용하기 편리한 TextBlock에서 한글이 표시된다는 건 고무적인 일이죠!

너무 흥분해서 어떻게 성공했는지 얘기를 안했네요;;
일단은 기존의 Downloader를 사용하는 방법과 동일해요.
Downloader로 폰트 파일을 다운로드 받고 목표 TextBlock의 SetFontSource()메서드로 설정해준 뒤 FontFamily 속성을 폰트이름으로 설정해주면 되죠.

아니? 이거 예전에도 이렇게 해서 실패했잖아욧! 이라고 생각하셨죠?
네 핵심은 폰트이름을 한글로 지정하는게 아니라 영문이름으로 지정해야 한다는 것이에요.

그럼 폰트의 영문 이름은 어떻게 아느냐고요? 자자~ 다 그런 문제 때문에 아래 포스팅에서 WPF로 폰트 이름을 열거하는 애플리케이션을 만들어뒀으니 함께 쓰시면 될거에요.

소스는 워낙 간단해서 별다른 설명 없이 첨부했으니 받아서 테스트 해보세요 :)
신고
Posted by gongdo
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
Silverlight가 아직은 베타/알파 버전이라 많은 부분 부족함을 느끼고 있어요.
그 중에서 당장 가장 크게 느껴지는 문제점은 화면에 텍스트를 표시하는 TextBlock 엘리먼트에서 한글 폰트를 지원하지 않고 있다는 점인데요, http://uxkorea.net/blog_post_62.aspx 에 의하면 TextBlock 대신 Glyph 엘리먼트를 사용하면 한글 폰트도 사용 가능하다고 합니다. 테스트 해봤는데 잘 먹더군요.

하지만 Glyph는 TextBlock과는 그 성격이 약간 다른데요, 나중에 따로 포스팅 하겠지만 간단히 말해서 TextBlock은 일반적인 TextBox와 비슷하게 멀티 라인 텍스트와 텍스트 블럭내의 각각의 텍스트에 다른 폰트 설정을 추가할 수 있고 Glyph는 단순히 지정된 텍스트를 지정된 위치에 출력할 뿐입니다. 두 엘리먼트 모두 TrueType폰트만 표시가 가능하고요.

그래서 여러 라인을 출력할 때 Glyph는 각 라인마다 출력될 Top 좌표를 직접 계산해줘야 해서 보통 귀찮은게 아니에요. TextBlock은 멀티 라인을 사용할 때 각 라인은 기본적으로 폰트특성에 따라 자동 계산되죠.

구글링을 통한 대부분의 의견도 동아시아와 중동아시아의 폰트가 제대로 표시할 수 없다 였는데요, 일부는 특정 폰트가 정상적으로 표시된다는 의견도 있어서 테스트를 해봤습니다.

일단 시스템 내의 모든 TrueType 폰트 목록을 정리해서 테스트 페이지에 순서대로 영어, 숫자, 특수문자, 한글, 한자, 일본어, 중국어를 출력해보는거죠.
당연하겠지만 Silverlight는 웹 애플리케이션으로 사용자의 로컬 자원에 접근할 수 없어요. 폰트 목록 같은걸 가져오는건 동적으로 불가능해서 제 시스템에 설치된 200여개의 폰트 목록을 수작업으로 정리했습니다. ㅠ.ㅜ

출력할 텍스트 내용은
English 12345 한글문자열가나다라 ☆★○◎ 漢字家羅多螺 日本語にほんご 中国语你好吗
위와 같고요, 테스트한 동영상을 감상하시죠!


보시다시피 200개도 넘는 폰트 중에 한글을 지원하는건 Arial Unicode MS 뿐이었습니다.
요게 뭔가...하면 Wiki를 참고하세요. http://en.wikipedia.org/wiki/Arial_Unicode_MS
대략 특징을 요약하자면,
- 트루타입 유니코드 폰트
- 대부분의 Microsoft 코드 페이지를 지원
- 22메가!!
- Ascender Corporation에서 오직 MS에만 라이센스함

뭐 그나마도 지금 당장 써먹을 수 있는게 있으니 얼마나 다행인가 싶으시죠?

하지만 문제는 또 있어요.
역시 나중에 포스팅 할 꺼리지만(-_-) Silverlight는 폰트의 배포를 위한 다운로드 매커니즘을 지원해주고 있어요. 그래서 사용자의 PC에 내가 원하는 폰트를 배포하고 UI를 망치지 않고 표시해줄 수 있죠.

문제는 이 Arial Unicode MS 폰트의 크기가 무려 22메가에 달한다는 점이에요.
당연하죠. 웬만한 코드 페이지는 몽땅 표시해주는데 22메가면 오히려 작은 크기라고 할 수 있죠. New 굴림 폰트만해도 25메가나 되는데요 뭘.
그.러.나. 이게 웹을 통해 동적으로 배포된다고 생각해보세요. 22메가를 다운받을 동안 기다릴 사용자가 있을까요? 과연?

물론 1.0 정식 버전과 1.1(아마도)베타 버전에서는 이런 폰트 표시 문제가 해결될거라고 기대되지만, 아직도 문제는 더 있어요.
정식 버전에서 폰트 지원이 완벽하더라도 보통 한글 폰트는 용량이 무지하게 커요. 좀 예쁘다 싶은 폰트를 보면 죄다 5메가 이상이죠. 이건 한자 문화권의 어쩔 수 없는 문제이긴 하지만요.

하다못해 굴림/굴림체/돋움/돋움체/바탕/바탕체/궁서/궁서체/새굴림/맑은고딕 정도는 별도로 다운로드 받지 않더라도 세팅해서 사용할 수 있게 해줬으면 해요. 과연 어떻게 될까요? 저는 좀 비관적으로 보고 있지만요.


결론을 얘기해보자면 '한글은 현재 샘플/테스트용만 가능해요. 실제 서비스따위 아직은 무리라구요!'
airlover님의 트랙백에 의하면 Office에서 XPS문서로 저장했을 때 나온 결과물을 적절히 가공하여 Glyph와 .odttf라는 임시 폰트로 정리되어 용량도 비교적 작고 자유로운 편집(Office에서 편집하니까)이 가능하다고 하네요.

수작업이 좀 많이 들어가긴 하지만 이 방법이라면 실제 서비스도 가능하다고 봅니다. (다만 뭔가 디자인적인 수정이 생기면 괴롭긴 마찬가질 것 같아요.)

정말이지 MS 제품군간의 연동으로 얻을 수 있는 시너지란;;;

아래에 테스트에 사용한 프로젝트를 첨부했어요.
물론 100메가도 넘는 폰트들을 전부 첨부하지 못했고 저용량 폰트 몇개만 넣었어요.
테스트 하실 땐 프로젝트 폴더에 테스트하길 원하는 폰트들을 Fonts.zip으로 압축해서 복사해놓고 프로젝트의 Page.xaml.cs에서 _fontList 변수에 해당 폰트의 이름을 적어주세요.
테스트를 위해 날림으로 작성한 코드라 별도의 설명은 붙이지 않았으니까 양해해주시고 여기서 사용된 기술들은 정리해서 포스팅할 예정이에요. QuickStarts 시리즈부터 해야죠.;;
TestText.zip

TextBlock과 한글 문제 테스트 프로젝트

신고
Posted by gongdo


티스토리 툴바