fonts 사용하기

왜 fonts를 변환해야 하나요?

노트북에서 font file(.ttf 또는 .otf)은 각 글자를 수학적 곡선으로 설명합니다. 컴퓨터는 원하는 크기에서 그 곡선을 부드럽게 그릴 충분한 성능과 메모리가 있습니다.

작은 디바이스(ESP32, smartwatch chip, 작은 display controller)는 보통 그렇지 못합니다. 즉석에서 곡선을 다시 그릴 메모리나 처리 능력이 부족합니다. 그래서 LVGL은 다른 방식을 사용합니다. 곡선 대신 각 글자를 고정 크기의 미리 그린 작은 그림(bitmap)으로 저장합니다. 이것이 디바이스가 처리하기 훨씬 가볍습니다.

PicoPixel은 이 변환을 대신 해 줍니다. font를 만들 때 원본 font file을 가져와 LVGL이 필요로 하는 bitmap format으로 바꾸며, 원하는 letters와 sizes만 골라 넣습니다.

이것이 fonts가 디바이스에서 실제 비용을 갖는 이유이기도 합니다. 각 글자, 각 크기가 메모리를 조금씩 차지합니다. 이 가이드의 대부분은 그 비용을 작게 유지하는 것, 즉 실제로 사용하는 characters와 sizes만 포함하는 방법에 관한 것입니다.

Bundled fonts와 직접 가져온 fonts

font를 만들 때 시작점은 두 가지입니다.

• Bundled, 바로 사용할 수 있는 인기 있고 잘 테스트된 fonts 모음입니다: Noto Sans, Roboto, Open Sans, Montserrat, Poppins, Inter, Lato, Nunito, Source Sans 3 등. 안전한 선택이자 좋은 기본값입니다.
• Upload, 직접 .ttf 또는 .otf 파일을 가져옵니다. 특정 brand font가 있거나 bundled fonts가 지원하지 않는 언어를 다룰 때 사용합니다.

어느 쪽을 선택하든 live preview가 있어 직접 텍스트를 입력하고 만들기 전에 정확히 어떻게 보일지 확인할 수 있습니다.

font 만들기

Create Font panel을 열면 짧은 양식이 보입니다. 각 부분은 다음 역할을 합니다.

1. Pick your font, Bundled font(Regular 또는 Bold 같은 weight 포함)를 고르거나 Upload tab으로 전환해 직접 파일을 선택합니다.
2. Font Name, 프로젝트 font list에 표시될 이름입니다. 여러 개를 쓸 예정이라면 특히 기억하기 좋은 이름을 붙이세요.
3. Size (px), font의 pixel size입니다. 여러 크기를 한 번에 선택할 수 있습니다(16, 22, 32 같은 편리한 presets가 있습니다). 각 size는 따로 생성되므로 정말 사용할 것만 고르세요.
4. Letters, 포함할 character set을 선택합니다: Standard(basic English), Latin, Greek, Cyrillic, Hebrew, Arabic, Thai 등. PicoPixel에 어떤 언어의 letters가 필요한지 알려 주는 곳입니다.
5. Asian, Chinese, Japanese, Korean을 위한 별도 옵션입니다. 특별한 처리가 필요하며 아래 its own section에서 다룹니다.

세밀한 조정을 위한 Advanced 영역도 있습니다. Bits per Pixel(각 글자에 쓰는 회색 단계 수, 높을수록 부드럽지만 공간을 더 사용합니다. 4가 좋은 기본값)과 정확한 character ranges 또는 symbols를 직접 지정하는 fields가 있습니다. 대부분의 사람은 건드릴 필요가 없습니다.

Right-to-left scripts: Arabic & Hebrew

Arabic과 Hebrew 같은 언어는 오른쪽에서 왼쪽으로 읽고, 글자도 특별한 처리가 필요합니다. 다행히 Create Font panel에서 바로 설정할 수 있으며, 손으로 설정할 것은 없습니다.

1. Letters dropdown에서 Arabic 또는 Hebrew를 선택합니다. 중요한 단계입니다. 해당 script에 맞는 character set을 포함하라고 PicoPixel에 알려 줍니다(basic English letters도 함께 포함되므로 numbers와 Latin text도 작동합니다).
2. PicoPixel은 해당 script용으로 만들어진 font, 예를 들어 Noto Sans Arabic을 제안합니다. 글자가 들어 있지 않은 평범한 Latin font보다 제안된 것(또는 script-aware font)을 사용하세요.
3. live preview를 확인합니다. 글자가 거기서 올바르게 렌더링되면 괜찮습니다. 상자가 보이면 선택한 font가 script를 지원하지 않는 것이므로 다른 것을 고르세요.

Chinese, Japanese & Korean

CJK는 Chinese, Japanese, Korean의 일반적인 약어입니다. 이 언어들은 characters가 매우 많기 때문에 특별합니다. Korean은 약 11,000개, Chinese는 20,000개가 훨씬 넘습니다. 모든 character는 미리 그려져 디바이스에 저장된다는 점을 기억하세요. 전체 CJK font를 포함하면 메가바이트 단위가 될 수 있고, 대부분의 임베디드 디바이스에는 맞지 않습니다.

해결책은 실제로 사용하는 characters만 포함하는 것입니다. 일반적인 인터페이스는 서로 다른 characters를 백 개 정도만 표시할 수 있고, 비교하면 아주 작습니다.

방법은 다음과 같습니다.

1. Asian dropdown에서 Korean, Chinese, 또는 Japanese를 선택합니다.
2. Symbols field(Advanced 영역)를 찾아 인터페이스가 실제로 표시할 텍스트를 붙여 넣습니다. 모든 label, button, message를 포함하세요. PicoPixel은 거기서 찾은 각 character에 대해서만 glyph를 포함합니다.
   • 시작을 돕기 위해 PicoPixel은 선택한 언어의 일반적인 인터페이스 단어("Settings", "Confirm", "Cancel" 등)를 이 field에 미리 채웁니다. 자신의 텍스트를 추가하세요.

이렇게 하면 몇 메가바이트가 될 수 있던 font가 몇백 킬로바이트로 끝날 수 있습니다.

정리: 사용하지 않는 fonts 삭제하기

Fonts는 공간을 차지하고, 실험하다 보면 더 이상 필요 없는 것들이 쉽게 쌓입니다. 예를 들어 16px와 22px 중 무엇이 더 나은지 몰라 둘 다 만들어 시험할 수 있습니다. 결정한 뒤 다른 하나는 불필요한 무게입니다.

PicoPixel은 이를 쉽게 처리합니다. assets의 Fonts 영역에는 Delete Unused Fonts 버튼이 있습니다. 프로젝트의 모든 widget을 스캔하고 실제로 아무것도 사용하지 않는 fonts를 찾아 한 번의 클릭으로 제거합니다. 남은 것을 치우고 필요한 fonts를 위한 공간을 확보할 수 있습니다.