본문 바로가기

Tech-tips/iOS Theme Bible

iOS 폰트 강좌 - 영문 폰트 만들기 (초간편, 초간단)

iOS 폰트 강좌 - 영문 폰트 만들기

iOS 폰트 제작 강좌 1. iOS 폰트 강좌 - TTC 풀기/ 다시 생성하기
2. iOS 폰트 강좌 - 영문 폰트 만들기
3. iOS 폰트 강좌 - 한글 폰트 만들기


이전 강좌에서 TTC 파일을 풀고 다시 묶는 방법과 폰트를 옮기는 방법을 알아보았다면, 이번강좌에서는 폰트의 upm을 맞추는 방법을 알아보겠습니다. UPM은 폰트의 크기를 말하는 용어입니다. 같은 표현으로 eM사이즈 라는 표현을 쓰기도 합니다.

디지털 활자로 Em은 한글자가 차지하는 넓이를 나타내게 됩니다. 왜 em이냐 하면 대문자 M의 넓이를 기준으로 모든 폰트를 만들기 때문이죠. 오픈타입 폰트에서 일반적으로 크기, 그러니까 UPM또는 em은 1000이 됩니다. 트루타입 폰트는 일반적으로 1024나 2048이 되고요.

그렇지만 왜 UPM사이즈가 중요한지 실감이 오지 않죠? 그래서 upm사이즈를 지정하지 않고 폰트를 한번 옮겨 보겠습니다.


iOS 영문 폰트 만들기


만약에 폰트의 upm을 맞춰주지 않고 다른 폰트에서 어떤 폰트로 복사를 하게 되면 이런 참사가 벌어집니다.

참고로 나눔명조의 upm은 1000, Helvetica의 UPM은 2048입니다.


iOS 영문 폰트 만들기


혹시나 해서 적용을 해보지만 역시나 글씨가 미니어처가 되어버리죠. 왜 이런 일이 발생할까요?

그 이유는 바로 나눔 명조의 upm은 1024이고 helvetica의 UPM은 2048이기 때문에 4분의1 폰트가 만들어져 버린 것 입니다.

그래서 폰트의 UPM을 맞게 수정해 줘야 원하는 결과물을 이끌어 낼 수 있습니다.

이제 부터 FontForge를 이용해서 폰트의 UPM을 쉽게 맞춰보도록 하겠습니다.


참고)FF가 윈도우 8.1이상에서는 워낙 불안해서 OS X에서 하도록 하겠습니다. 참고로 윈도7 이하에서는 비교적 안전하다고 합니다. 사실 리눅스를 써도 되는데 스크린 샷 찍기가 생각보다 번거롭기 때문에 OS X에서 합니다. 그리고 OS X의 폰트포지가 훨씬 이쁘기도 하고요 ㅋㅋ


강좌를 시작하기 전에, 폰트를 변환하시는 분들은 제가 직접 개조한 영문 폰트 파일을 사용하셔야 합니다. iOS7의 폰트 구조가 워낙 지저분하게 바뀌었기에 제가 임의로 손을 좀 대서 별 다른 설정없이 좀 더 쉽게 편집이 가능하도록 바꾸었습니다. 첨부된 최적화 폰트에서는 basic roman인 !에서 ~까지 와 키패드 폰트 에서 hangul compatible syllable만 변경 하시면 됩니다.


iOS7 optimized font.zip


사용방법은 역시 앞 강좌에서 설명드린것 처럼 ttc를 분해 해서 적용하시면 됩니다.


iOS 영문 폰트 만들기


일단 저번 강좌에서 했던것 처럼 ttc 파일을 분해하여 Helvetica.ttf 파일을 엽니다.


iOS 영문 폰트 만들기


그다음 Element > font info로 접근합니다.


iOS 영문 폰트 만들기


그러면 정보창이 뜨는데 General 탭으로 가면 이폰트의 크기를 볼수 있습니다. em사이즈가 나오네요. em사이즈가 모든 폰트 크기의 기준점이 됩니다.


iOS 영문 폰트 만들기


OS/2에서 수정해야 하는 부분은 Metrics와 sub/super입니다.

Metrics의 수치가 폰트의 크기를 지정하게 됩니다. 이 수치를 자신이 바꿀 폰트와 Helvetica의 수치와 모두 맞춰줘야 크기나 자간이 들쑥 날쑥하지 않고 올바르게 지정이 됩니다.


iOS 영문 폰트 만들기


sub/super에서는 자간과 줄 간격 등을 설정합니다.

좁은 폰트라던지 기울은 폰트라던지 자신만의 커스텀폰트를 만들때 이곳의 수치를 임의로 수정하면 됩니다.


iOS 영문 폰트 만들기


TeX는 폰트의 여백의 크기를 지정하는 것입니다. 역시 이것도 맞춰줘야 합니다. 크기만 바꾸면 쏠림 현상이 일어날수 있습니다.


iOS 영문 폰트 만들기


나눔 명조 안에도 여러스타일이 포함되어있는데 일반 형을 우선 변환 할것입니다.


iOS 영문 폰트 만들기


폰트의 em 사이즈가 1024밖에 안되죠? 이것 때문에 폰트가 작게 나타나는 것 입니다.


iOS 영문 폰트 만들기


모든 수치를 맞춰주고 난뒤에 저장을 합니다. 앞의 강좌에서 한번 다루었기 때문에 빠르게 넘어갑니다. 간혹 General 에서 vertical metrics 가 체크 표시된 폰트가 있습니다. 주로 네오고딕 계열이 그렇는데요 이것도 마찬가지로 체크를 해줘야 합니다.


여기서 FontCreator로 작업을 할떄는 이런과정이 필요가 없는데 왜 FF에서는 이런것을 해줘야 하느냐? 라고 물으시는 분들이 계실겁니다. FontCreator 기능중에는 upm이 차이나는 폰트를 옮길때 보정을 해주는 기능이 있습니다. 그러나 이게 그렇게 완벽하지가 않기 때문에 upm이 똑같게 맞춰졌다면 어느정도 문제 없이 폰트가 뜨겠지만 만일 수치가 어긋나게 되면 글자가 아래로 밀리거나 하는 현상이 간혹 발생합니다.


iOS 영문 폰트 만들기


변환을 하게 되면 나타나는 글꼴 손실 경고인데 그냥 무시합니다.



변환중입니다. 한글 폰트의 경우 자수가 많아서 꽤 오래걸립니다.


iOS 영문 폰트 만들기


변환시 오류 메시지 잔뜩 뜹니다. 겁먹지 마세요.


iOS 영문 폰트 만들기


변환이 완료된 모습입니다. 겉모습으로는 이전과 차이가 없어 보입니다. 하지만…


iOS 영문 폰트 만들기


나눔 명조를 !부터~까지 드레그/선택후 오른쪽 마우스 클릭 copy 합니다. 그 다음 헬베티카에 가서 !부터~까지 동일 하게 선택한후 오른쪽 마우스 클릭 paste합니다.


iOS 영문 폰트 만들기


이번에는 크기가 맞게 들어갔습니다. 아까하고는 상황이 완전 틀리죠?


iOS 영문 폰트 만들기


저장합니다. Generate font


iOS 영문 폰트 만들기


true type > option > apple 에 체크


iOS 영문 폰트 만들기


경고창 무시하고 Generate 눌러줍니다.


iOS 영문 폰트 만들기


마찬가지로 Helvetica Bold도 만들어 줍니다.


iOS 영문 폰트 만들기


제가 이전 강좌에 보여드렸듯이 모든 파일을 다 꺼내서 TTC로 다시 묶습니다.


iOS 영문 폰트 만들기


이런 메시지가 뜰수도 있는데 그냥 넘어가도 상관없습니다.


iOS 영문 폰트 만들기


미리보기 화면 (OS X 기준)에서 폰트가 나눔 명조로 바뀐것을 확인할수 있습니다. 제가 맥에서 작업을 하는 이유도 굳이 아이폰에 넣어보지 않고도 맥에서는 TTC를 읽을수 있기에 바로 TTC의 완성 상태를 알 수 있다는 겁니다.

하지만 혹시나 문제 생길수 있으니 아이폰에 넣어 직접 확인을 해보았습니다.


아이폰에서 매우 유용하게 사용할수 있는 어플인 Typeface로 적용 상태를 확인해보도록 하겠습니다.


iOS 영문 폰트 만들기


예상대로 정상적용이 된것을 알수 있습니다.


iOS 영문 폰트 만들기


사파리에서도 정상적으로 뜹니다.

여기까지가 영문 폰트 변환 강좌였습니다.

한글폰트는 FF가 유니코드 문자 옮길때 심하게 깨지기 때문에 어쩔수 없이 FC로 작업을 해야 합니다. 그래서 한글폰트 변환 강좌는 별도로 하겠습니다.


iOS 폰트 제작 강좌 1. iOS 폰트 강좌 - TTC 풀기/ 다시 생성하기
2. iOS 폰트 강좌 - 영문 폰트 만들기
3. iOS 폰트 강좌 - 한글 폰트 만들기