텍스트 시작하기
UI 툴킷은 TextMesh Pro 기반의 기술인 TextCore를 사용하여 텍스트를 렌더링합니다. TextCore는 고급 스타일링 기능을 지원하며 다양한 포인트 크기와 해상도로 텍스트를 명확하게 렌더링할 수 있습니다. SDF(Signed Distance Field) 폰트 렌더링을 활용하여 변환 및 확대된 경우에도 선명하게 보이는 폰트 에셋을 생성할 수 있습니다.
이 예시에서는__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 빌더에서 텍스트 스타일 지정, 정적 및 동적 폰트 에셋 생성 및 적용, 리치 텍스트 태그 및 커스텀 스타일시트를 사용하여 텍스트 스타일 지정, UITK Text Settings 에셋을 생성하여 패널의 텍스트 설정을 관리하는 방법을 보여줍니다.
참고: 이 가이드는 데모 목적으로 런타임 UI를 사용합니다. 폰트 에셋 및 스타일시트 생성 지침은 에디터 UI에도 적용됩니다. 하지만 현재 릴리스에서는 에디터 UI의 기본 UITK Text Settings를 변경할 수 없습니다.
선행 조건
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 가이드입니다. 시작하기 전에 먼저 다음을 숙지하십시오.
UITK Text Settings 에셋 생성
런타임 UI로 시작하고 패널의 텍스트 설정을 관리하는 UITK Text Settings 에셋을 만듭니다. 또한 Resources 폴더와 하위 폴더를 생성하여 폰트 에셋과 커스텀 스타일시트를 저장할 수 있습니다.
- 런타임 UI 시작하기의 단계에 따라 간단한 런타임 UI를 생성합니다.
-
Assets폴더에Resources폴더를 만듭니다. -
Assets\UI Toolkit폴더를 오른쪽 클릭하고 Create > UI Toolkit > Text Settings를 선택하여UITK Text Settings.asset을 생성합니다.UITK Text Settings.asset의 인스펙터 창에는 폰트 에셋, 텍스트 스타일시트 에셋, 스프라이트 에셋, 컬러 그레디언트 프리셋의 기본 경로 이름이 표시됩니다. -
Resources폴더에Fonts & Materials와Text Style Sheets라는 두 개의 폴더를 만듭니다.
UI 빌더로 텍스트 스타일 지정
UI 빌더를 사용하여 토글 텍스트의 스타일을 볼드 및 이탤릭으로 지정하고 12px의 폰트 크기를 지정합니다. 자세한 내용은 USS로 텍스트 스타일 지정을 참조하십시오.
- UI 빌더에서
SimpleRuntimeUi.uxml을 더블 클릭하여 엽니다. - 토글 컨트롤의 인스펙터 창에서 Text를 선택합니다.
- Font Style 필드에서 B 및 I를 선택합니다.
- Size 필드에 12를 입력합니다.
정적 폰트 에셋 생성
정적 폰트 에셋을 만들고 버튼 컨트롤에 적용합니다. 정적 폰트 에셋의 경우 빌드에 소스 폰트 파일을 포함할 필요가 없습니다. 하지만 버튼의 표시 텍스트에 있는 모든 문자의 아틀라스를 생성해야 합니다. 표시되는 텍스트는 This is a Button이며 텍스트에 *를 추가하여 TBhinostua*에 대한 아틀라스를 생성합니다.
Google Fonts에서 Lato 글꼴 패키지를 다운로드합니다.
폰트 패키지 파일의 압축을 풀고
Lato-Regula.ttf를 프로젝트의Assets폴더에 넣습니다.-
폰트 파일의 인스펙터 창에서 다음을 확인합니다.
- Include Font Data가 활성화되어 있습니다.
- Character가 Dynamic으로 설정되어 있습니다.
프로젝트 창에서
Lato-Regula.ttf를 오른쪽 클릭하고 Create > Text Core > Font Asset > SDF를 선택합니다. 이렇게 하면Lato-Regula SDF.asset이라는 동적 폰트 에셋이 생성됩니다.Lato-Regula SDF.asset의 인스펙터 창에서 Atlas Population Mode를 Static으로 설정합니다.Update Atlas Texture를 클릭합니다.
Font Asset Creator 창의 Character Set 목록에서 Custom Characters를 선택합니다.
Custom Characters List 박스에
TBhinostua*를 입력합니다.Generate Font Atlas를 클릭합니다.
변경사항을 저장합니다.
Assets\Resources\Fonts & Materials폴더에Lato-Regula SDF.asset을 넣습니다.UI 빌더에서
SimpleRuntimeUi.uxml을 더블 클릭하여 엽니다.버튼 컨트롤의 인스펙터 창에서 Text > Font Asset > Lato-Regula SDF를 선택합니다.
동적 폰트 에셋 생성
동적 폰트 에셋을 생성하고 TextField 컨트롤에 적용합니다. 동적 폰트 에셋의 경우 빌드에 소스 폰트 파일을 포함해야 합니다. 소스 폰트 파일을 폰트에 설정된 경로로 바로 임포트합니다.
Google Fonts에서 Roboto 글꼴 패키지를 다운로드합니다.
폰트 패키지 파일의 압축을 풀고
Roboto-Regular.ttf를 프로젝트의Assets\Resources\Fonts & Materials폴더에 넣습니다.-
폰트 파일의 인스펙터 창에서 다음을 확인합니다.
- Include Font Data가 활성화되어 있습니다.
- Character가 Dynamic으로 설정되어 있습니다.
Roboto-Regular.ttf를 오른쪽 클릭하고 Create > Text Core > Font Asset을 선택합니다. 이렇게 하면Roboto-Regular SDF.asset이라는 동적 폰트 에셋이 생성됩니다.UI 빌더에서
SimpleRuntimeUi.uxml을 더블 클릭하여 엽니다.TextField 컨트롤의 인스펙터 창에서 Text > Font Asset > Roboto-Regular SDF를 선택합니다.
리치 텍스트 태그로 스타일 지정
리치 텍스트 태그를 사용하여 레이블 컨트롤에 있는 텍스트의 스타일을 지정합니다.
참고: 현재 릴리스에서 리치 텍스트 태그는 TextField에 대해 지원되지 않습니다.
- UI 빌더에서
SimpleRuntimeUi.uxml을 더블 클릭하여 엽니다. - 레이블 컨트롤의 Inspector 패널에서 Text를
This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>로 변경합니다. 이렇게 하면 단어Label이 빨간색의 큰 볼드 폰트로 표시되며 양쪽에 별표가 있습니다. - Enable Rich Text가 선택되어 있는지 확인합니다.
레이블 텍스트는 Viewport 창에서 다음과 같이 표시됩니다.
스타일시트로 스타일 지정
Label 및 Button에 동일한 스타일을 적용하려면 커스텀 스타일시트를 생성하고 두 단어에 스타일을 적용합니다.
Assets\Resources\Text Style Sheets폴더를 오른쪽 클릭하고 Create > Text Core > Text StyleSheet를 선택합니다. 이렇게 하면 UITK Text Settings 에셋에서 설정한 경로에Text StyleSheet.asset이 생성됩니다.-
Text StyleSheet.asset의 인스펙터 창에서 다음을 수행합니다.-
Name에
ExampleStyle을 입력합니다. -
Opening Tags에
<font-weight=700><size=2em><color=#FF0000>*를 입력합니다. -
Closing Tags에
*</color></size></font-weight>를 입력합니다.
-
Name에
UITK Text Settings.asset에 대한 인스펙터 창의 Default Style Sheet 목록에서 Text StyleSheet를 선택합니다.UI 빌더에서
SimpleRuntimeUi.uxml을 더블 클릭하여 엽니다.레이블 컨트롤의 인스펙터 창에서 Text를
<s>This is a <style="ExampleStyle">Label</style>로 변경합니다.Enable Rich Text가 선택되어 있는지 확인합니다.
버튼 컨트롤의 인스펙터 창에서 Text를
<s>This is a <style="ExampleStyle">Button</style>으로 변경합니다.Enable Rich Text가 선택되어 있는지 확인합니다.
플레이 모드로 전환하고 런타임 UI의 텍스트를 확인합니다.
텍스트 필드에 임의의 문자를 입력합니다. 동적 폰트 에셋의 경우 텍스트 필드에 텍스트를 입력하면 폰트 아틀라스가 동적으로 생성됩니다.
프로젝트의
Assets\Resources\Fonts & Materials폴더에서Roboto-Regular SDF.asset을 선택합니다.Roboto-Regular SDF.asset의 인스펙터 창에서 Update Atlas Texture를 선택하여 Font Asset Creator 창을 엽니다. 아틀라스 창이 숨겨져 있으면 확장합니다. 아틀라스 창에 입력한 문자가 표시됩니다.
