PC나 태블릿과 달리 대부분의 임베디드 장치는 그래픽 콘텐츠를 저장할 메모리 공간이 제한되어 있습니다. 이러한 하드웨어 제약으로 인해 디자이너는 고품질 GUI(그래픽 사용자 인터페이스)를 설계하기가 어렵습니다. 이 Altia 개발자 블로그 시리즈 기사에서는 임베디드 장치 GUI에 효율적인 글꼴 사용을 구축하는 방법을 보여주기 위해 GUI 편집기인 Altia Design으로 만든 몇 가지 디자인 기술과 샘플 디자인을 제공합니다.

글꼴 처리 방법

Altia는 두 가지 방식으로 글꼴을 처리합니다. 첫 번째 방법을 사용하면 코드 생성 시 글꼴 글리프를 생성하고 다시 플래시 파일에 저장할 수 있습니다. 두 번째 방법을 사용하면 런타임 중에 필요할 때 글꼴 글리프를 생성하는 런타임 글꼴로 코드를 생성할 수 있습니다.

먼저 코드 생성 시 디자인에 필요한 모든 글꼴 글리프를 생성하는 더 간단한 옵션에 대해 설명합니다. 이렇게 생성된 글꼴 문자를 미리 렌더링된 글리프라고도 합니다. 디자인에 사용되는 모든 글꼴은 전체 문자 카탈로그를 플래시 자산에 추가해야 합니다. 또한 모든 글꼴의 모든 크기는 이 데이터를 reflash 데이터에 추가해야 합니다. 모든 글꼴에서 모든 크기의 모든 굵은 글꼴, 모든 글꼴의 모든 크기에서 모든 기울임꼴에 대해 동일합니다.

reflash/fonts 폴더를 보면 디자인에 사용 중인 글꼴의 수, 크기 및 변형을 볼 수 있습니다. 아래 이미지에서 이 디자인은 Arial Bold Italic 18, Arial Bold 17, Arial Italic 16, Arial Italic 17 및 Arial Normal 17을 사용하는 것을 볼 수 있습니다.

글꼴 파일

런타임 글꼴을 사용하는 두 번째 글꼴 처리 방법은 디자인에 사용된 글꼴 엔진의 소스 코드가 생성되어 하드웨어에 로드됩니다. 그런 다음 문자가 필요할 때 이 코드에서 글꼴 글리프가 생성됩니다. 이는 수만 개의 문자가 필요한 중국어와 같은 언어를 사용하는 경우 특히 유용할 수 있습니다. 프로덕션 GUI에 필요할 수 있는 모든 문자를 로드하는 대신 필요에 따라 각 문자가 생성됩니다.

그래서 어떤 방법을 선택합니까? 솔직히, 그것은 달려 있습니다. 런타임 글꼴은 일반적으로 글꼴 엔진 및 셰이퍼 코드의 크기가 생성된 글리프 글꼴 파일의 크기보다 작은 경우 권장됩니다. 이들이 같으면 미리 렌더링된 글리프(첫 번째 방법)를 사용하는 것이 좋습니다. 미리 렌더링된 글리프에는 런타임 글꼴 엔진과 동일한 CPU 및 RAM 요구 사항이 없기 때문입니다. 또한 올바른 렌더링 파이프라인이 사용되는 특수한 경우에 미리 렌더링된 글리프는 런타임 옵션보다 더 작은 인코딩 및 압축 형식을 갖습니다.

글꼴 범위

하드웨어 공간을 절약하는 또 다른 좋은 방법은 특정 글꼴 범위만 로드하도록 코드 생성을 위해 .gen 파일을 수정하는 것입니다. 단일 글꼴 크기를 사용하거나 시작 화면에 한 번만 입력하는 디자인이 있는 경우 유니코드 글꼴이 있는 ASCII 영문자 섹션만 로드하도록 소프트웨어를 프로그래밍할 수 있습니다. 이것은 하드웨어에 많은 공간을 절약할 수 있습니다!

화면의 글꼴 코드

위의 예에서 글꼴 범위를 조작하는 것이 얼마나 간단한지 알 수 있습니다. 첫 번째 줄에서는 문자 범위 [\32-\127]만 로드합니다. 두 번째 줄에서 문자 범위는 프로젝트에서 지정된 특정 글꼴에 적용됩니다. -Arial-medium-r-normal-_-170. 이 글꼴은 영향을 받는 유일한 글꼴이므로 이 글꼴에는 하드웨어에 로드된 미리 결정된 인쇄 가능한 문자만 있습니다. 세 번째 줄은 위의 글꼴이 포함된 특정 패밀리의 모든 글꼴에 제한을 적용합니다. %FONTRANGEFLAG%는 최대 1024개의 선택 항목(예제에서 1024개의 다른 대괄호 범위)을 지원하며 이러한 선택 항목은 문자 또는 문자 코드일 수 있습니다. 이러한 행은 동일한 .gen 파일에서 함께 사용되지 않습니다. 그것은 단지 세 줄의 예입니다.

글꼴 최적화 결과

다음 리플래시 파일 크기는 이 기사의 매우 간단한 테스트 디자인에 적용됩니다. 그것들이 당신의 디자인에 어떻게 영향을 미칠지 아는 유일한 방법은 당신의 GUI 프로젝트에서 이 테스트를 사용하는 것입니다.

예 A에서는 13개의 다른 글꼴을 볼 수 있습니다. 두 번째 디자인인 예제 B는 단일 글꼴을 사용합니다. 예 A의 reflash .bin 파일 크기는 73kB입니다. 예제 B는 하나의 글꼴만 사용하고 굵게 또는 기울임꼴을 포함하지 않으며 .bin 크기가 24kB입니다. 예제 B에 대한 코드를 생성하고 .gen 파일에서 %FONTRANGEFLAG% * [\32-~]를 사용하면 .bin 크기가 2kB로 줄어듭니다!

글꼴 특수 이미지
예제 A
글꼴 특수
보기 B

이 정도의 최적화는 GUI의 전체 사용자 경험에 영향을 미칠 수 있다는 점에 유의하는 것이 중요합니다. 디자인과 메모리 사용량의 적절한 균형을 유지하는 것이 중요하므로 조기에 자주 테스트해야 합니다. 그 테스트의 일부에는 디자인에 사용된 모든 글꼴이 필요한지 여부를 이해하는 것이 포함될 수 있습니다. Altia를 사용하면 개발 중에 사용자 테스트를 쉽게 수행할 수 있으므로 하드웨어에 도달하기 전에 균형을 찾을 수 있습니다. 피드백을 구현하는 것도 빠릅니다!

글꼴 범위를 사용하면 .bin 파일 크기도 크게 달라질 수 있습니다. 이 또한 신중하게 이루어져야 합니다. 지정된 글꼴 범위에 포함되지 않은 문자를 GUI에서 사용하면 오류가 발생합니다. 테스트를 개발 프로세스의 일부로 만들어야 하는 또 다른 이유입니다!

마지막으로 GUI 디자인을 최소한의 글꼴로 줄이면 놀라운 RAM 절약 효과를 얻을 수 있습니다. 이 예제에서 한 것처럼 글꼴 사용량을 줄이는 것이 이치에 맞지 않을 수도 있지만, 이것은 디자인 팀이 메모리 사용량에 실제로 영향을 줄 수 있는 영역입니다.

결론

임베디드 장치용 고품질 GUI를 설계하는 동안 설계자가 RAM 공간 및 CPU 사용 문제로 실행되는 것을 방지하는 데 도움이 되는 여러 가지 방법이 있습니다. 임베디드 GUI를 위한 이러한 글꼴 디자인 기술은 고려해야 할 몇 가지에 불과합니다.

Altia는 가장 낮은 하드웨어에 강력한 그래픽을 구현하는 것을 전문으로 합니다. 우리의 GUI 전문가는 적은 시간과 노력으로 고품질 그래픽을 만들고 구현하는 강력한 기술을 보유하고 있습니다. 자유를 느껴 데모 신청 메모리 제약이 있는 하드웨어를 위한 흥미롭고 풍부한 GUI를 만드는 방법에 대해 우리 팀과 함께 논의하십시오.