TextMeshPro 는 글자를 미리 그림으로 구워 둔다

시안의 글자를 Unity 에 옮기면 미묘하게 어긋납니다. 굵기가 다르고, 자간이 벌어지고, 어떤 글자는 아예 안 보입니다.

Unity 의 글자는 TextMeshPro 가 그립니다. 그리고 TextMeshPro 는 폰트 파일을 그때그때 읽어서 글자를 그리지 않습니다. 쓸 글자를 미리 그림으로 구워 두고 그 그림을 붙입니다. 위의 어긋남은 거의 다 여기서 나옵니다.

글자는 미리 구워서 붙입니다

폰트 파일을 그대로 넣는 것이 아니라 폰트 에셋 을 만들어서 넣습니다. 만들 때 정하는 것은 세 가지입니다.

• 어떤 글자를 구울지. 목록에 없는 글자는 게임에서 안 나옵니다
• 아틀라스 해상도. 크면 글자 가장자리가 곱게 나오고 텍스처도 커집니다
• 패딩. 글자 그림 둘레에 두는 여백입니다. 좁으면 외곽선이나 그림자를 두껍게 줄 자리가 없습니다

글자는 픽셀 그대로가 아니라 가장자리까지의 거리 로 구워집니다. 그래서 같은 폰트 에셋 하나로 큰 제목과 작은 설명을 다 그려도 가장자리가 뭉개지지 않고, 외곽선과 그림자를 그림 없이 만들 수 있습니다.

한글은 글자 수부터 다릅니다

영문은 대소문자와 숫자, 기호를 합쳐 백 자가 안 됩니다. 한글은 초성 19, 중성 21, 종성 28 의 조합이라 현대 한글만 세어도 11,172 자입니다. 옛날부터 많이 쓰는 완성형 기준으로 추려도 2,350 자입니다.

그래서 한글 폰트는 굽는 방식을 골라야 합니다.

• 미리 다 구워 두기. 나올 글자가 정해져 있을 때 씁니다. 실행 중에 멈칫하는 일이 없는 대신 텍스처가 큽니다
• 그때그때 채우기. 처음 나오는 글자를 그 순간 아틀라스에 추가합니다. 유저 이름, 채팅, 외부에서 받아 오는 문구처럼 무슨 글자가 올지 모르는 곳에 씁니다
• 어느 쪽이든 없는 글자는 다른 폰트에서 찾아 옵니다. 그 폰트도 없으면 빈칸이 됩니다. 시안에 없던 특수문자나 이모지가 갑자기 빈칸으로 나오는 이유입니다

여기서 디자이너가 도울 수 있는 것이 큽니다. 화면에 나오는 고정 문구를 모아 주면 그 글자만 구울 수 있습니다. 텍스처가 몇 배로 줄어듭니다. 폰트를 고를 때 게임에 넣어도 되는 라이선스인지 같이 확인해 주면 더 좋습니다.

외곽선과 그림자는 그림이 아니라 머티리얼입니다

• 시안의 Stroke 2px 같은 값은 그대로 들어가는 칸이 없습니다. 글자 크기에 대한 비율로 다시 잡습니다. 그래서 글자 크기가 바뀌면 두께도 같이 바뀝니다
• 구울 때 준 패딩이 좁으면 두꺼운 외곽선이 잘립니다. 두꺼운 테두리를 쓸 거라면 미리 알려 주세요. 폰트 에셋을 다시 구워야 합니다
• 효과 값이 다르면 머티리얼이 하나씩 더 생깁니다. 같은 폰트를 쓰는 글자라도 스타일이 섞이면 나눠 그립니다. 화면에 쓰는 글자 스타일 종류를 줄이는 것이 그대로 이득입니다
• 반경이 큰 블러 그림자, 여러 겹 그림자, 글자 안쪽 그라데이션은 기본 기능으로는 안 나옵니다. 꼭 필요하면 이미지로 뽑는 편이 빠릅니다

굵게는 진짜 굵은 폰트가 아닐 수 있습니다

굵게 표시를 하면 Unity 는 먼저 굵은 웨이트의 폰트 에셋이 연결돼 있는지 봅니다. 있으면 그 파일의 글자로 바꿔 그리고, 없으면 원래 글자를 부풀리고 자간을 살짝 벌려서 굵은 척을 합니다. 기울임도 마찬가지로 진짜 이탤릭 폰트가 아니라 글자를 기울이는 처리입니다.

한글은 부풀린 굵기가 특히 티가 납니다. 획 사이가 메워져서 뭉개집니다. 시안에서 Bold 나 Medium 같은 웨이트를 썼으면 그 웨이트의 폰트 파일도 같이 넘겨 주세요. 웨이트마다 폰트 에셋을 따로 굽고 연결해 두면 시안 그대로 나옵니다.

자간과 행간은 기준이 다릅니다

• 자간의 단위는 글자 크기의 백분율입니다. TextMeshPro 의 자간 값 100 이 글자 크기 한 배입니다. 시안의 자간이 퍼센트로 적혀 있으면 그 숫자를 그대로 넣으면 되고, 픽셀로 적혀 있으면 픽셀 ÷ 글자 크기 × 100 으로 바꿔서 넣습니다
• 행간은 줄 높이 자체가 아니라 기본 줄 높이에 더하는 값입니다. 시안의 행간 60 을 그대로 넣으면 줄 사이가 두 배 가까이 벌어집니다. 넣을 값은 (원하는 줄 높이 − 폰트의 기본 줄 높이) ÷ 글자 크기 × 100 입니다
• 기본 줄 높이는 폰트마다 다릅니다. 폰트를 바꾸면 자간과 행간을 다시 맞춰야 합니다

이런 계산을 매번 하기 싫으면 시안에 자간은 퍼센트로, 행간은 원하는 줄 높이 픽셀로 적어 주세요. 옮기는 쪽에서 계산할 거리가 줄어듭니다.

상자에 글이 안 들어갈 때

시안에서는 문구 길이를 디자이너가 정하지만, 게임에서는 유저 이름이 들어가고 번역이 들어가고 숫자가 늘어납니다. 안 들어가는 순간 무엇을 할지는 네 가지 중에서 고릅니다.

• 줄바꿈 을 끄면 아무리 상자가 높아도 한 줄로만 놓습니다. 한 줄짜리 값에만 끕니다
• Overflow 는 상자 밖으로 그대로 넘칩니다. 경고도 없고 다른 요소와 겹칩니다. 기본값이라 사고가 제일 많이 납니다
• Ellipsis 는 들어가는 데까지 두고 마지막을 … 로 바꿉니다. 이름이나 아이템처럼 끝이 잘려도 되는 것에 씁니다
• Truncate 는 자른 표시 없이 끊습니다. 잘렸는지 아닌지 유저가 알 수 없으니 거의 안 씁니다
• Auto Size 는 글자 크기를 줄여서 맞춥니다. 편해 보이지만 화면마다 글자 크기가 달라집니다. 같은 줄에 놓인 두 글자의 크기가 다르게 나오는 화면은 대개 이것 때문입니다

그래서 상자는 가장 긴 경우를 기준으로 잡는 것이 안전합니다. 시안을 넘길 때 이름이 가장 길 때, 숫자가 가장 클 때, 번역이 가장 길 때의 예시 문구를 하나씩 같이 주면 그 자리에서 확인하고 넘어갈 수 있습니다.

시안을 넘길 때 적어 주면 좋은 것

정리

• TextMeshPro 는 쓸 글자를 미리 그림으로 구워 두고 그 그림을 붙입니다. 구울 때 안 넣은 글자는 화면에 안 나옵니다
• 한글은 현대 글자만 11,172 자라 굽는 범위를 정해야 합니다. 고정 문구 목록을 주면 그 글자만 구울 수 있습니다
• 외곽선과 그림자는 그림이 아니라 머티리얼 값입니다. 패딩이 좁으면 두껍게 못 주고, 스타일 종류가 늘면 글자를 나눠 그립니다
• 굵게는 굵은 폰트 파일이 연결돼 있을 때만 진짜 굵은 글자입니다. 없으면 원래 글자를 부풀립니다
• 자간 값 100 이 글자 크기 한 배이고, 행간은 기본 줄 높이에 더하는 값입니다. 시안 숫자를 그대로 넣으면 안 맞습니다
• 상자에 안 들어갈 때의 처리는 넷 중에 고르는 일입니다. 정해 두지 않으면 기본값대로 그냥 넘칩니다