이번에는 시스템에 설치된 폰트를 사용하여 윈터보드 폰트를 교체하는 것이 아니라, 시스템에 "직접" 폰트를 설치해서 사용하는 방법을 알아보겠습니다. 이 방법은 상당히 발전한 방법 중 하나입니다. 제가 생각하기에 가장 리스크가 적고 벽돌의 염려가 없는 방법이기도 하고요. 테마 파일만 몇개 만들어 놓으면 기분에 따라서 여러가지 폰트를 바꿔서 사용할 수도 있습니다.
이 강좌를 통해서 외부 폰트를 시스템에 추가하는 방법을 보여드릴것이고요, 옛날 방식인 TTC 교체 강좌도 보여드릴겁니다. TTC교체 강좌도 일반 카페나 블로그에서 보시던것과는 다릅니다. 사실 TTC를 쉽게 푸는 방법에 대해서는 거의 정보를 찾을수가 없어서 그냥 스스로 연구해서 해결했습니다. TTC 강좌를 왜 따로 하냐면, Helvetica Neue UI 폰트는 기존 윈터보드가 다룰수 있는 폰트영역을 벗어나기 때문입니다.
본격적으로 강좌를 시작해보겠습니다. 이번강좌에 사용할 폰트는 나눔 고딕 펜글씨 입니다.
아이펀박스로 /System/Library/Fonts에 들어갑니다. 그러면 CGFontCache@2x.plist라는 파일을 보실수 있습니다. 이 파일이 폰트정보를 담고 있는 파일 입니다. 이 파일을 수정해서 커스텀 폰트를 추가하면 시스템 어디서든지 사용할 수 있습니다. 뿐만 아니라 폰트이름을 실제 이름과 똑같게 적용하면 특정한 폰트가 적용된 패이지를 볼때 그 폰트가 적용된 모습을 볼수 있습니다. 예를 들면 나눔고딕을 Nanum Gothic 이라는 이름으로 추가하게 되면 네이버 접속시 그대로 적용되는 모습을 볼 수 있습니다. (사실 폰트명은 한글로 해야 윈도에서 인식하는데 OS X에 기본으로 설치된 나눔 고딕은 영문 이름으로 인식하더군요)
CGFontCache@2x.plist를 열어보시면 알 수 없는 외계어 투성이 입니다. 그렇게 겁먹을것 까지는 없는 간단한 xml 문서이므로 찬찬히 뜯어봅시다.
첫번째 key는 Aliases입니다. 시스템폰트를 관리 하는 부분입니다. 예를들면 더 이상 쓰이지 않지만 하위 호환을 위해 남겨놓은 AppleGothic 같은경우에는 시스템 상에서 보이지 않게 숨기고 있는것을 보실수 있습니다.
두번째 key는 Names 입니다. 이 부분에서 폰트의 이름과 경로를 지정하게 됩니다. 이 부분이 핵심입니다. 여기서 폰트를 여러개 추가해서 아래의 TraitMappings 에서 하나의 Family로 구성할수 있습니다. 보통 폰트 패밀리는 같은 성질의 폰트를 모으는 경우가 많은데 이 경우에는 굳이 같지 않아도 명령어로 같은 Family로 만들수 있습니다.
<key>해당폰트이름</key>
<string>폰트경로</string>
다음과 같은 구조로 만들어지게 되며, 이때 쓰인 폰트이름이 아래에서 Family를 구성할때 사용됩니다.
세번째는 TraitMappings 입니다. 이 부분에서 패밀리 적용이 이루어지게 되고 여기서 만들어진 이름이 시스템에서 통용됩니다. 예시로 Times New Roman의 구성을 설명해드리겠습니다.
<key>Times New Roman</key>
<dict>
<key>Bold</key>
<string>TimesNewRomanPS-BoldMT</string>
<key>Bold-Italic</key>
<string>TimesNewRomanPS-BoldItalicMT</string>
<key>Italic</key>
<string>TimesNewRomanPS-ItalicMT</string>
<key>Plain</key>
<string>TimesNewRomanPSMT</string>
</dict>
iOS가 시스템에서 미리 포함시킬수 있는 폰트스타일은 일반 폰트, 일반 이텔릭, 굵은 폰트, 굵은 이텔릭 4가지를 추가 할수 있습니다. 각각 Plain,Italic,Bold-Italic,Bold의 속성을 key에 입력하고 위에 Name에서 정해주었던 이름을 String 사이에 넣으면 됩니다. 그러니까 Plain에 들어갈 폰트 경로는 위의 Name에서 TimesNewRomanPSMT에 지정되어 있겠죠.
순서도 상관이 있는데, Bold를 먼저 Plain을 맨마지막에 씁니다. 사실 모든 폰트가 볼드 스타일이나 이텔릭이 있는것이 아니기 때문에 없는 경우에는 항목을 건너뛰지만, 순서는 틀리지 않고 넣어줘야 합니다.
TraitMappings 부분의 얼개를 정리해보자면,
<key>폰트패밀리 이름</key>
<dict>
<key>폰트 성질</key>
<string>위쪽에서 지정한 세부 폰트이름</string>
</dict>
요렇게 됩니다. 세부 폰트 이름은 위의 Name에서 반드시 정해준 것이어야 합니다. 안 그러면 오류 납니다!!
이제 본격적으로 커스텀 폰트를 추가해보도록 하겠습니다. 사실 경로만 찾을수 있다면 폰트는 어디 위치해도 별 상관이 없습니다. 저는 시스템 폰트 폴더안에 별도의 경로를 하나 만들어서 거기에 나눔 펜 글씨를 넣도록 하겠습니다.
Font의 Cache 폴더 아래에 Custom이라는 폴더를 별도로 만들어 넣고 거기에 폰트를 추가하였습니다.
CGFontCache@2x.plist 파일을 열어 수정합니다. Plist 파일은 Notepad++나 Sublime text, Coda 에서도 잘 읽히며 보통 왠만한 상용 에디터에서는 다 읽히니 편한 것을 사용하세요.
Name 항목에는 NanumPen과 NanumBrush의 경로를 추가하였고, TraitMappings 아래에는 Nanum Pen Script 폰트 패밀리를 추가했습니다. 나눔 팬글씨 자체가 볼드체나 이텔릭 체가 없기 때문에 펜글씨를 일반폰트로, 붓글씨를 볼드 폰트로 지정해보겠습니다.
<!-- Name 아래 -->
<key>NanumPen</key>
<string>/System/Library/Fonts/Cache/Custom/NanumPen.ttf</string>
<key>NanumBrush</key>
<string>/System/Library/Fonts/Cache/Custom/NanumBrush.ttf</string>
NanumPen과 NanumBrush의 경로를 추가한 모습입니다.
<!--TraitMappings 아래 -->
<key>Nanum Pen Script</key>
<dict>
<key>Bold</key>
<string>NanumBrush</string>
<key>Plain</key>
<string>NanumPen</string>
</dict>
Nanum Pen Script 라는 새로운 폰트 패밀리를 하나 만들고 아래 Plain 속성에는 나눔팬, Bold 속성에는 나눔 붓 글씨를 추가한 모습입니다.
폰트가 제대로 로드 되는지 확인해보기 위해서 간단한 웹페이지를 하나 만들었습니다. font-family를 Nanum Pen Script로 정했습니다. 나눔 고딕 팬 폰트는 이미 제 컴퓨터에 설치 되어있지만 정식 폰트 명이 아니기 때문에 윈도에서는 나눔 팬 폰트로 보이지 않습니다. 영문 부분에는 b 속성을 적용하여 붓글씨가 실행되게 했으나 역시 에디터 상에서는 확인이 안됩니다.
아이폰에 해당 html 파일을 열어 정상적으로 로드 되는지 알아 보겠습니다.
첫번째는 폰트를 추가 하기 전에 찍은 스크린샷입니다. 두번째는 폰트를 추가 한 후에 찍은 스크린샷입니다. 폰트가 바뀐것을 확인 할수 있고 영문과 한글 폰트가 다른것도 파악하실수 있습니다. bold 속성과 plain 속성이 정확하게 들어갔다는 뜻이지요.
강좌는 여기서 끝납니다. 기초 강좌에서 알려드린 방법대로 자신이 만든 폰트 패밀리 명을 시스템 폰트 패밀리 명대신 입력한뒤에 테마를 저장하여 윈터보드에서 불러오면 끝입니다.
윈터보드의 info.plist 에서 외부 폰트를 불러오기 위해서는 명령어가 꽤 많이 필요합니다. 그것은 다음 강좌에서 설명드리곘습니다.
강좌에서 사용된 파일들
CGFontCache@2x.plist
CGFontCache@2x.plistCustom 폴더 - 안에 나눔 펜글씨와 붓글씨가 들어있습니다. Font/Cache 폴더 안에 넣어주세요.
Custom.zip
