폰트 예제 - 템플릿

개요

무료 LVGL 폰트 템플릿이나 임베디드 UI용 다국어 텍스트 예제를 찾고 있나요? 이 PicoPixel 프로젝트는 변환된 LVGL 폰트, 문자 체계별 폰트 선택, 크기, 색상이 480 x 480 화면에서 어떻게 함께 쓰이는지 보여 줍니다.

이 템플릿은 키릴 문자, 중국어, 일본어, 그리스어, 아랍어, 한국어, 히브리어, 태국어, 벵골어 등 여러 비라틴 문자 체계를 한곳에서 보여 줍니다. 영어 텍스트만 표시하는 것이 아니라 번역된 라벨을 표시해야 하는 ESP32 대시보드, 설정 화면, 키오스크 UI, 웨어러블 메뉴, 스마트 디바이스 인터페이스의 출발점으로 사용할 수 있습니다.

핵심 교훈은 단순합니다. LVGL 폰트는 데스크톱 웹 폰트와 다릅니다. 변환된 LVGL 폰트에는 사용자가 선택한 글리프와 크기만 들어갑니다. 중국어, 일본어, 한국어의 경우 보통 UI가 실제로 표시할 정확한 문자만 포함해야 합니다. 그렇지 않으면 누락된 문자가 빈 사각형으로 표시될 수 있습니다. 전체 흐름은 PicoPixel guide to working with LVGL fonts를 참고하세요.

포함 내용

480 x 480 다국어 타이포그래피 화면으로, 간결한 폰트 테스트 캔버스로 설계되어 있습니다.
보이는 텍스트 예제 9개가 키릴 문자, 중국어, 일본어, 그리스어, 아랍어, 한국어, 히브리어, 태국어, 벵골어를 다룹니다.
문자 체계별 라벨 레이어가 레이어 패널에 이름으로 표시되어 어떤 텍스트 객체가 어떤 언어에 속하는지 쉽게 알 수 있습니다.
변환된 폰트 에셋 10개가 실제 LVGL 프로젝트에서 여러 폰트 패밀리와 크기가 필요할 수 있음을 보여 줍니다.
이미지 의존성이 없으므로 비트맵 스크린샷이 아니라 텍스트 렌더링에 집중합니다.
혼합 폰트 크기에는 작은 본문 스타일 라벨과 더 큰 표시용 텍스트가 포함됩니다.
혼합 색상으로 어두운 배경에서 각 문자 체계를 쉽게 확인할 수 있습니다.
캔버스 안의 폰트 리마인더가 두 가지 큰 규칙을 강조합니다. 대상 언어를 지원하는 폰트를 선택하고, UI가 실제로 사용하는 문자를 포함하는 것입니다.
Create Font 패널 예제가 번들 폰트, 업로드, 폰트 크기 프리셋, Letters, Asian, 고급 옵션을 보여 줍니다.

자산 스냅샷

에셋 패널에서는 이 템플릿이 폰트 중심 PicoPixel 템플릿으로 표시됩니다.

이미지: 0, 미리보기는 편집 가능한 텍스트 객체로 만들어져 있습니다.
색상: 0, 색상은 디자인의 라벨에 직접 적용되어 있습니다.
폰트: 10, 여러 문자 체계, 크기, 폰트 패밀리를 보여 주기에 충분합니다.
위젯: 0, 예제가 텍스트와 폰트 에셋에 집중되도록 유지합니다.

보이는 폰트 에셋에는 다음이 포함됩니다.

Gothic A1 48
M PLUS 1p 60
Noto Sans Arabic 32
Noto Sans Bengali 32
Noto Sans Cyrillic 48
Noto Sans SC 32
Noto Sans Thai Bold 32
Open Sans Greek 48
Open Sans Hebrew 48

스크린샷의 목록은 스크롤 가능하므로 프로젝트에는 보이는 행 외에 폰트 에셋이 하나 더 있습니다. 중요한 패턴은 각 문자 체계가 필요한 글리프를 실제로 포함하는 폰트를 사용한다는 점입니다.

레이어 구조

레이어 패널은 언어 체크리스트처럼 구성되어 있습니다. Screen 1 아래에서 각 라벨은 보여 주는 문자 체계나 언어 이름으로 지정되어 있습니다.

Cyrillic - RU
Chinese
Japanese
Greek
Arabic
Korean
Hebrew
Thai-na
Bengali

이 구조 덕분에 파일을 레퍼런스로 쓰기 좋습니다. 어떤 언어가 올바르게 렌더링된다면 해당 라벨, 폰트 에셋, 크기, 색상, 텍스트 값을 확인하고 같은 접근을 자신의 PicoPixel 프로젝트에 복사할 수 있습니다.

CJK 폰트와 누락 글리프

중국어, 일본어, 한국어 폰트는 전체 문자 집합이 매우 크기 때문에 LVGL에서 특별한 주의가 필요합니다. 가능한 모든 글리프를 포함하면 임베디드 프로젝트에 몇 메가바이트가 추가될 수 있으며, 이는 작은 디바이스에는 대개 너무 큽니다.

CJK 텍스트에는 PicoPixel의 Create Font 패널에서 Asian 옵션을 사용한 다음, 인터페이스가 표시할 정확한 문자를 Symbols 필드에 추가하세요. 화면에 나타날 수 있는 모든 라벨, 버튼, 메뉴 항목, 경고 메시지, 단위, 상태 문자열을 포함해야 합니다.

WARNING

나중에 UI가 폰트를 만들 때 포함하지 않았던 중국어, 일본어, 한국어 문자를 표시하면 LVGL이 해당 문자 대신 빈 사각형을 렌더링할 수 있습니다. 번역 텍스트가 바뀌면 Symbols 필드를 업데이트하고 폰트를 다시 만드세요.

자세한 절차는 Working with fonts, 특히 중국어, 일본어, 한국어 섹션에 있습니다.

각 문자 체계에 맞는 폰트 선택

모든 폰트가 모든 언어를 지원하는 것은 아닙니다. 라틴 폰트는 영어에는 완벽해 보여도 아랍어, 히브리어, 태국어, 한국어, 일본어, 중국어 글리프를 포함하지 않을 수 있습니다. 이 템플릿은 렌더링하려는 문자 체계에 맞게 설계된 폰트 패밀리를 사용하는 더 안전한 방식을 보여 줍니다.

간체 중국어에는 Noto Sans SC 또는 다른 CJK 지원 폰트를 사용합니다.
일본어 텍스트에는 일본어 지원 폰트를 사용합니다.
한국어 텍스트에는 Gothic A1 같은 한국어 지원 폰트 또는 다른 한글 폰트를 사용합니다.
아랍 문자 텍스트에는 Noto Sans Arabic을 사용합니다.
히브리어에는 Open Sans Hebrew 또는 다른 히브리어 지원 폰트를 사용합니다.
그리스어에는 그리스 문자 지원 폰트를 사용합니다.
러시아어와 다른 키릴 문자 텍스트에는 키릴 문자 지원 폰트를 사용합니다.
태국어와 벵골어 라벨에는 각각 해당 문자 체계를 지원하는 폰트를 사용합니다.

Create Font 패널에서 Letters 드롭다운은 그리스 문자, 키릴 문자, 히브리 문자, 아랍 문자, 태국 문자 등 비 CJK 문자 체계 범위를 제어합니다. Asian 드롭다운은 CJK 글리프 세트가 훨씬 크기 때문에 별도로 제공됩니다.

TIP

폰트를 만들기 전에 폰트 미리보기 필드를 사용하세요. 렌더링할 실제 UI 텍스트를 붙여 넣으세요. 미리보기에 사각형이 보인다면 내보내기 전에 해당 언어를 지원하는 폰트로 바꾸세요.

LVGL에 잘 맞는 이유

이 템플릿이 유용한 이유는 임베디드 하드웨어에서 LVGL이 실제로 폰트를 다루는 방식과 맞기 때문입니다.

LVGL 폰트는 변환된 비트맵 에셋이므로 선택한 각 크기가 별도로 생성됩니다.
선택한 글리프만 포함되므로 펌웨어 크기를 제어할 수 있습니다.
문자 체계별 폰트는 누락 글리프를 줄여 특히 비라틴 언어에서 유용합니다.
여러 크기를 함께 사용할 수 있어 제목, 본문 라벨, 작은 캡션이 각각 적절한 폰트 에셋을 사용할 수 있습니다.
라벨은 계속 편집 가능하므로 내보내기 전에 샘플 텍스트를 자신의 번역으로 바꿀 수 있습니다.
프로젝트는 표준 LVGL 8.x UI 코드로 내보내지며 라벨에 필요한 폰트 에셋도 포함합니다.

런타임 패턴

내보낸 뒤에도 라벨은 펌웨어에서 계속 업데이트할 수 있습니다. 정확한 생성 심볼 이름은 PicoPixel 객체 이름과 폰트 이름에 따라 달라지지만, LVGL 패턴은 익숙합니다.

lv_label_set_text(ui_status_label, "Settings");
lv_obj_set_style_text_font(ui_status_label, &ui_font_noto_sans_32, 0);

번역 텍스트의 경우 lv_label_set_text에 전달할 수 있는 모든 문자가 내보낸 폰트에 포함되어 있는지 확인하세요. 이는 CJK 문자열과 초기 디자인 캔버스에 보이지 않는 동적 상태 메시지에서 특히 중요합니다.

사용자화 아이디어

무료 LVGL 타이포그래피 템플릿으로 사용한 뒤 자신의 제품에 맞게 조정하세요.

샘플 인사말을 실제 번역된 UI 라벨로 바꿉니다.
인터페이스에 실제로 필요한 문자 체계와 크기마다 폰트를 하나씩 만듭니다.
내보내기 전에 사용하지 않는 폰트 크기를 줄여 펌웨어를 더 작게 유지합니다.
같은 텍스트 레이아웃으로 여러 폰트 패밀리를 비교한 뒤 하나를 선택합니다.
아랍어, 페르시아어, 히브리어 또는 다른 RTL 인터페이스용 오른쪽에서 왼쪽 라벨을 추가합니다.
언어 선택, 설정, 온보딩, 알림용으로 별도의 번역 화면을 만듭니다.
실험 후 Delete Unused Fonts를 사용해 참조되는 폰트 에셋만 남깁니다.

프로젝트로 내보내기

PicoPixel에서 템플릿을 열고 폰트 에셋을 확인한 뒤, 샘플 라벨을 자신의 텍스트로 바꾸고 부족한 폰트를 만든 다음 내보내세요. 중국어, 일본어, 한국어를 다룬다면 폰트를 만들 때 정확한 UI 문자열을 Symbols 필드에 붙여 넣으세요.

ESP32 프로젝트에서는 보통 다음 흐름을 따릅니다.

UI가 지원해야 하는 언어를 선택합니다.
각 문자 체계와 크기에 맞는 LVGL 폰트를 만듭니다.
중국어, 일본어, 한국어의 경우 UI가 표시할 정확한 문자를 포함합니다.
이 템플릿의 샘플 라벨을 실제 UI 텍스트로 바꿉니다.
PicoPixel UI를 LVGL C로 내보냅니다.
내보낸 UI와 폰트 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 추가합니다.
LVGL과 디스플레이 드라이버가 준비된 뒤 ui_init()을 호출합니다.

단계별 폰트 작업 흐름은 Working with fonts를 참고하세요. 템플릿 가져오기와 열기는 How to use PicoPixel templates를 참고하세요.

가장 적합한 용도

이 템플릿은 다음을 위한 명확한 출발점이 필요할 때 잘 맞습니다.

LVGL 다국어 텍스트 예제
중국어, 일본어, 한국어용 CJK 폰트 설정
ESP32 번역 UI 프로토타입
폰트 변환 테스트
누락 글리프 디버깅
오른쪽에서 왼쪽 및 비라틴 문자 체계 확인
국제화된 설정 화면
키오스크, 웨어러블, 대시보드, 스마트 디바이스 인터페이스

폰트예제

개요