티스토리 뷰

WindowsPhone

[WP7 개발 기초] 폰트 속성에 대한 이해.

생각많은 소심남 2012. 3. 13. 18:24
지난 포스팅에서는 Border라는 개념을 알아봤습니다. 그러면 어떤 걸 가지고 TextBlock을 꾸밀 수 있는 지에 대한 고민이 필요하겠네요. Properties를 유심히 보신 분이라면 아시겠지만 Font를 수정할 수 있는 속성은 총 5개가 있습니다.

- FontFamily : 글자체
- FontSize : 글자의 크기
- FontStretch : 글자의 수축 확장 표시
- FontStyle : 글자의 비스듬함 설정
- FontWeight : 글자의 볼딕 처리 설정

이중에서 몇가지는 값이 고정되어 있는 것도 있고, 수정해도 값이 변하지 않는 수치들이 있습니다. 이를 직접 해보고자 합니다.  

 
저는 이렇게 글을 써봤습니다. 하지만 결과물은 분명히 짤릴겁니다. 가로에서 표현할 수 있는 글자 수는 제한되어 있으니까요.
 


이때 가독성을 높이기 위해서 해야 될 작업이 바로 줄 바꾸기인데요. 그때 쓰는 코드가 LineBreak입니다.
 


이런식으로 바꿔준다면
 


줄도 자신이 원하는 만큼 바꿀 수 있습니다.
다음으로 보여드릴 기능은 바로 Run이라는 겁니다. 앞에서 소개했던 LineBreak와 더불어서 Run은 ContentProperty의 inline속성에 속합니다. 이를 이용해서 다양한 효과를 낼 수 있습니다. Run 사용예시를 보도록 합니다.
 


이렇게 자신이 적용하고 싶은 글자나 맥락을 Run 태그안에 집어넣으면 결과가 적절하게 나옵니다.
 


참고로 지금 MSP간의 간격이 별로 없는게 느껴지시나요? 책에서는 이를 버그라고 언급하고 있습니다. 물론 실제로 디버깅해보면 정상으로 나옵니다.
 


눈썰미가 있으신 분은 글자가 커졌는데 그렇게 깨지는 느낌을 못받으셨을 겁니다.  이는 기본 폰트 자체가 벡터형이이기 때문입니다. 벡터형 데이터는 그 데이터안에 그림에 대한 모든 정보가 담겨 있기 때문에 크게 늘려도 이미지나 폰트가 깨지는 현상이 나타나지 않습니다. 

다음으로 보여드리는 건 FontFamily입니다. 물론 앞에서 언급했었지만 글자체를 수정하는 항목입니다. 그런데 문제가 있습니다. 우리가 앱을 만드는 이상 한글을 써야 하는데 글자체에 따라서 한글이 적용되지 않는 글자체가 존재한다는 겁니다. 이는 폰트를 만드는 회사에서 한글에 대한 정보를 입력하지 않은 거겠지요. 물론 이 문제는 조금 기다려야 될 듯합니다.

기본적으로 FontFamily에 없는 font를 사용했다던가 기본 글씨체를 쓰기 위해 font를 지정하지 않았다면 기본으로 FontFamily는 Portable User Interface 라는 글자체로 고정됩니다. 이 글자체는 직접 실행시켜보시면 아시겠지만 윈도폰에서 가장 많이 볼 수 있는 글자체인 'Segoe WP'라는 것을 확인할 수 있습니다. 아까 배운 Run 기능을 사용해봅니다.
 


위 코드에서 우리가 주목해서 볼 점은 Portable User Interface 글자체가 Segoe WP와 같은가? 또 한글을 사용했을 때 글자체가 영어와 똑같이 폰트 변화가 있는 건지 말입니다.


보이시나요? 알다시피 PUI 글자체도 Segoe와 똑같습니다. 그리고 한글은 폰트 변화의 적용을 받지 않네요..
 
여기에 PUI는 사전에 정의된 리소스로 글자체에 효과를 줄 수 있습니다. 다음은 정의된 리소소로 주는 효과입니다.


 밑줄쳐진 부분의 PhoneFontFamilyNormal이라고 되어 있는 부분을 위처럼 고치면 Segoe WP SemiBold의 효과와 동일하게 줄 수 있습니다. 이런 방법은 전체 폰트의 스타일을 수정할 때 사용하면 좋겠지요.
여기에서는 총 4가지 효과를 줍니다.

- PhoneFontFamilyNormal : 기본형

- PhoneFontFamilyLight :


- PhoneFontFamilySemiLight:


- PhoneFontFamilySemiBold: (bold는 없네요..)



이런 식으로 폰트의 스타일 바꾸는 방법을 중점적으로 다뤄봤습니다. 이와 연관해서 Inline형 속성인 LineBreak와 run의 사용 방법에 대해서도 간단하게 언급했습니다!
 

댓글