언리얼 모션 그래픽(Unreal Motion Graphics, UMG)에서 제공되는 텍스트 블록은 다양한 스타일 옵션과 커스터마이제이션을 제공합니다. 하지만 스타일 변경, 인라인 이미지, 하이퍼링크 등의 마크업을 지원하는 유연한 텍스트 블록 옵션이 필요할 수도 있습니다.
UMG 리치 텍스트 블록(Rich Text Block) 은 보다 유연한 텍스트 블록을 제공합니다. 또한 스타일 변경, 인라인 이미지, 하이퍼링크 등의 마크업도 지원합니다. UMG 리치 텍스트 블록은 데코레이터 클래스를 받으므로 이를 작성하여 프로젝트에서 필요한 마크업 행동을 정의할 수 있습니다. 또한 이 페이지에서는 여러 프로퍼티의 세부 정보를 제공하므로 리치 이미지 행 및 리치 텍스트 스타일 행 데이터 타입을 사용하여 리치 텍스트 블록 위젯 및 데이터 테이블 에셋을 설정할 수 있습니다.
리치 텍스트 블록은 데이터 테이블 에셋 을 사용하여 추가된 스타일 및 커스터마이제이션을 관리합니다. 데이터 테이블 에셋을 사용하면 자신만의 스타일을 만들 수 있습니다. 또한 필요한 마크업 행동을 정의하는 커스텀 데코레이터 클래스를 프로젝트에서 작성할 수 있습니다. 이 페이지에서는 데코레이터 클래스의 예시인 RichTextBlockImageDecorator 를 보여줍니다. 이를 시작점으로 사용하여 커스텀 데코레이터 클래스 작성 경험을 쌓을 수 있을 것입니다.
UMG의 리치 텍스트 블록과 커스텀 데코레이터 클래스를 작성하는 방법에 대해 더 알아보려면 이 페이지의 콘텐츠를 숙지하는 것이 좋습니다.
데이터 테이블 에셋 생성 및 할당하기
먼저, 데이터 테이블 에셋을 생성해야 합니다. 데이터 테이블 에셋을 활용하면 다양한 데이터 태그 타입을 생성하여 UMG의 리치 텍스트 블록 위젯과 함께 사용할 수 있습니다. 텍스트 스타일 또는 이미지를 지정할 때 데이터 테이블 에셋을 사용할 수 있으며, 이를 리치 텍스트 블록을 통해 리치 텍스트와 함께 사용할 수 있습니다.
다른 에셋과 동일한 방식으로 데이터 테이블 에셋을 생성합니다. 이렇게 하려면 콘텐츠 브라우저(Content Browser) 에서 신규 추가(Add New) 를 클릭하고 기타(Miscellaneous) > 데이터 테이블(Data Table) 을 선택합니다.
행 구조 선택(Pick Row Structure) 창에서 리치 이미지 행(Rich Image Row) 또는 리치 텍스트 스타일 행(Rich Text Style Row) 을 선택합니다.
리치 이미지 행은 커스텀 데코레이터 클래스를 사용합니다. 이에 대해서는 데코레이터 클래스 섹션에서 자세하게 다룹니다.
리치 이미지 행 데이터 타입
이 페이지에서는 예시로 커스텀 데코레이터 클래스인 리치 이미지 행 데이터 타입을 보여줍니다. 데이터 테이블 에셋과 리치 이미지 행 데이터 타입을 사용하여 이미지를 저장하고 다양한 커스터마이제이션 옵션으로 구성합니다. 리치 텍스트 블록을 통해 이 데이터를 텍스트에서 인라인 이미지로 사용할 수 있습니다.
데이터 테이블 에셋의 리치 이미지 행 데이터 타입을 생성하고 사용하려면 다음 단계를 따릅니다.
- 데이터 테이블 에셋을 생성하고 행 구조 선택 창의 드롭다운 목록에서 리치 이미지 행 을 선택합니다. 이 데이터 테이블 에셋의 이름을 변경할 수도 있습니다. 예를 들어 'Image_DataTable'로 명명합니다.
- 생성된 데이터 테이블 에셋을 '콘텐츠 브라우저'에서 더블클릭하여 데이터 테이블 에디터(Data Table Editor) 에서 엽니다.
-
'데이터 테이블 에셋(Data Table Asset)' 패널에서 추가(Add) 를 클릭하여 새 행을 추가합니다. 리치 텍스트 블록을 통해 텍스트에서 사용할 각 인라인 이미지마다 데이터 테이블 에셋에 행을 생성합니다. '데이터 테이블 에셋' 패널에서는 행과 관련하여 사용할 수 있는 복사(Copy), 붙여넣기(Paste), 복제(Duplicate) 및 제거(Remove) 기능도 제공됩니다.
- 행 이름(Row Name) 섹션의 텍스트 필드를 통해 행의 이름을 변경할 수 있습니다. 접두사, 카멜 케이스 등을 사용할 수 있습니다.
- 외형(Appearance) 에서 이미지에 필요한 프로퍼티를 설정합니다.
- 행을 추가한 후에는 저장(Save) 을 클릭하고 데이터 테이블 에셋을 닫습니다.
이 세팅에 대한 자세한 내용은 리치 이미지 행 데이터 타입인 데이터 테이블 에셋의 프로퍼티를 참고하세요.
리치 텍스트 스타일 행 데이터 타입
리치 텍스트 스타일 행 데이터 타입은 디폴트 데코레이터 클래스입니다. 이를 사용하여 리치 텍스트 블록을 통해 텍스트에 적용할 수 있는 텍스트 스타일을 설정할 수 있습니다.
데이터 테이블 에셋의 리치 텍스트 스타일 행 데이터 타입을 생성 및 사용하려면 다음 단계를 따릅니다.
- 데이터 테이블 에셋을 생성하고 '행 구조 선택' 창의 드롭다운 목록에서 리치 텍스트 스타일 행 을 선택합니다. 이 데이터 테이블 에셋의 이름을 변경할 수도 있습니다. 예를 들어 'TextStyle_DataTable'로 명명합니다.
- 생성된 데이터 테이블 에셋을 '콘텐츠 브라우저'에서 더블클릭하여 '데이터 테이블 에디터' 에서 엽니다.
-
'데이터 테이블 에셋' 패널에서 추가 를 클릭하여 새 행을 추가합니다. 리치 텍스트 블록을 통해 텍스트에서 사용할 각 텍스트 스타일마다 데이터 테이블 에셋에 행을 생성합니다. '데이터 테이블 에셋' 패널에서는 행과 관련하여 사용할 수 있는 복사, 붙여넣기, 복제 및 제거 기능도 제공됩니다.
-
'행 이름' 섹션의 텍스트 필드를 통해 각 행의 이름을 변경할 수 있습니다. 접두사, 카멜 케이스 등을 사용할 수 있습니다.
데이터 테이블 에셋의 첫 행 이름을 'Default'로 변경하는 것을 권장합니다. 이렇게 하면 할당된 리치 텍스트 블록의 텍스트에 대해 이 행의 스타일을 디폴트 스타일로 정의할 수 있습니다.
- '외형'에서 이러한 스타일에 필요한 프로퍼티를 설정합니다.
- 행을 추가한 후에는 '저장'을 클릭하고 데이터 테이블 에셋을 닫습니다.
이 세팅에 대한 자세한 내용은 리치 텍스트 스타일 데이터 타입인 데이터 테이블 에셋의 프로퍼티를 참고하세요.
텍스트를 올바르게 표시하기 위해서는 각 리치 테이블 스타일 행마다 데이터 테이블 에셋의 폰트를 설정해야 합니다. '데이터 테이블 에디터'를 엽니다. 커스터마이징할 텍스트 행을 선택하고 '행 에디터(Row Editor)'의 외형 > 텍스트 스타일(Text Style) > 폰트(Font) 섹션으로 이동합니다. 새 창에서 톱니바퀴 모양의 아이콘을 클릭하고 엔진 콘텐츠 표시(Show Engine Content) 를 활성화해야 합니다. 이를 통해 Roboto 폰트나 원하는 다른 폰트를 선택할 수 있습니다.
UMG UI 디자이너에서 리치 텍스트 블록 위젯 사용하기
생성된 데이터 테이블 에셋과 함께 리치 텍스트 블록 위젯을 할당해야 합니다. 디자이너 뷰포트(Designer Viewport) 를 통해 데이터 테이블 에셋에서 환경설정된 텍스트 스타일 및 인라인 이미지를 사용할 수 있습니다.
리치 텍스트 블록 위젯 추가
위젯 블루프린트를 생성합니다. '콘텐츠 브라우저'에서 신규 추가 를 클릭하고 유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint) 를 선택합니다.
왼쪽에 있는 팔레트(Palette) 패널에서 캔버스(Canvas) 패널을 찾습니다. '캔버스' 패널을 디자이너 뷰포트로 드래그합니다. '팔레트' 패널에서 리치 텍스트 블록 을 찾아 이 위젯을 디자이너 뷰포트의 캔버스 패널 박스로 드래그합니다. 필요에 따라 리치 텍스트 블록 박스의 스케일을 조절하거나 크기를 조절할 수 있습니다.
텍스트 박스는 텍스트 크기에 맞게 자동으로 스케일이 조절되지 않습니다. 박스의 크기를 텍스트 크기에 맞게 조절하지 않으면 일부 텍스트가 클리핑되어 제대로 표시되지 않을 수 있습니다. 또한 '디테일(Details)' 패널에서 콘텐츠에 맞게 설정(Set to Content) 섹션의 체크박스를 활성화하여 텍스트 박스 크기를 콘텐츠에 맞춰 자동으로 조절할 수 있습니다.
리치 텍스트 블록에 데이터 테이블 에셋 할당하기
추가한 리치 텍스트 블록 위젯을 선택합니다. 오른쪽에 있는 디테일 패널의 '외형' 섹션에서 데이터 테이블 에셋을 리치 텍스트 블록에 할당할 수 있습니다.
텍스트 스타일 세트(Text Style Set) 를 사용하여 리치 텍스트 스타일 행이 있는 데이터 테이블 에셋을 리치 텍스트 블록에 할당합니다.
텍스트에 스타일 적용하기
앞에서 설명했듯이 데이터 테이블 에셋을 리치 텍스트 블록에 할당합니다. 데이터 테이블 에셋의 스타일을 텍스트에 적용하려면 다음 단계를 따릅니다.
- 리치 텍스트 블록을 선택합니다.
- 오른쪽에 있는 '디테일' 패널에서 콘텐츠(Content) 섹션을 찾습니다.
- 텍스트(Text) 섹션의 텍스트 필드에 텍스트를 입력합니다.
표시 텍스트에는 이름이 'Default'인 데이터 테이블 에셋 행의 스타일이 있습니다. 예를 들어 텍스트 필드에 'This is some rich text!'를 입력한 경우 이는 데이터 테이블 에셋의 'Default' 행에서 커스터마이징한 스타일로 표시됩니다.
정의한 리치 텍스트 블록의 디폴트 텍스트 스타일을 데이터 테이블 에셋으로 변경할 수 있습니다. '디테일' 패널에서 디폴트 스타일 오버라이드(Override Default Style) 섹션의 체크박스를 활성화합니다. 디폴트 텍스트 스타일 오버라이드 섹션에서 새 디폴트 텍스트 스타일을 커스터마이징할 수 있습니다.
데이터 테이블 에셋의 다른 스타일이 필요한 경우 <TextStyleRowName>text</> 마크업을 사용하여 스타일 행의 이름을 괄호 안에 넣어 입력합니다. 'TextStyleRowName' 은 할당한 데이터 테이블 에셋의 텍스트 스타일 행 이름이고 'text' 는 지정한 행에서 스타일을 가져올 텍스트 부분입니다. 예를 들어 This is some <RichText.Emphasis>rich</> text! 텍스트의 부분마다 다른 스타일을 적용할 수 있습니다.
팁: 리치 텍스트 블록의 행 이름 태그는 데이터 테이블 에셋 행 이름에 대해 대소문자를 구분하지 않습니다.
데코레이터 클래스
데코레이터 클래스(Decorator Class) 를 사용하여 텍스트에 스타일 이외의 항목도 포함할 수 있습니다. 데코레이터 클래스를 생성하면 자신만의 마크업 태그를 구성할 수 있습니다. 이를 통해 슬레이트를 사용할 수 있으며, 텍스트 내에서 다른 엘리먼트를 끊김 없이 렌더링하는 데 도움이 됩니다.
데코레이터 사용하기
예를 들어 이 페이지에서는 RichTextBlockImageRowDecorator 클래스를 통해 텍스트에 인라인 이미지를 통합하는 방법을 보여줍니다. 이 예시는 커스텀 데코레이터 클래스를 사용하는 방법을 배우는 데 도움이 됩니다.
데이터 테이블 에셋을 리치 이미지 행 데이터 타입으로 생성하고(위 데이터 테이블 에셋 생성 및 할당하기 섹션 참고) RichTextBlockImageRowDecorator 부모 클래스 를 갖춘 블루프린트 클래스 를 해당 인스턴스를 환경설정할 블루프린트로 서브클래스화한 상태여야 합니다. 이를 수행하기 위해서는 다음 단계를 따릅니다.
-
'콘텐츠 브라우저'에서 신규 추가 를 클릭하고 블루프린트 클래스(Blueprint Class) 를 선택하여 새 블루프린트 클래스를 생성합니다.
-
부모 클래스 선택(Pick Parent Class) 창에서 RichTextBlockImageRowDecorator 를 선택하고 선택 을 클릭합니다.
- 생성한 새 블루프린트 클래스를 콘텐츠 브라우저에서 더블클릭하여 블루프린트 에디터(Blueprint Editor) 에서 엽니다.
-
오른쪽에 있는 디테일 패널에서 이미지 세트(Image Set) 를 통해 이 블루프린트 클래스를 리치 이미지 행 데이터 타입이 있는 데이터 테이블 에셋에 할당합니다.
위의 모든 작업을 수행하면 리치 텍스트 블록 위젯에 데코레이터 클래스를 추가할 수 있습니다. 텍스트에서 데이터 테이블 에셋의 인라인 이미지를 사용하려면 다음 단계를 따릅니다.
- 위젯 블루프린트를 엽니다.
- 오른쪽에 있는 '디테일' 패널의 '외형' 섹션에서 데코레이터 클래스 를 찾습니다.
- (+) 버튼을 클릭하여 배열 엘리먼트를 데코레이터 클래스에 추가합니다.
-
생성된 블루프린트 클래스를 드롭다운 목록에서 선택합니다.
데이터 테이블 에셋에서 인라인 이미지를 삽입하려면 '디테일' 패널의 '콘텐츠' 섹션에서 <img id="ImageRowName"/> 마크업("ImageNameFromTable" 은 할당한 데이터 테이블 에셋의 행 이름)을 사용해야 합니다. 예를 들어 텍스트 필드에 With <img id="RichText.Logo"/> inline images! 을 입력하고 컴파일(Compile) 을 클릭하면 데이터 테이블 에셋에서 커스터마이징한 인라인 이미지가 있는 텍스트가 이름이 'RichText.Logo'인 행에 표시됩니다.
새 데코레이터 추가하기
슬레이트를 사용하면 무엇이든 텍스트에 인라인으로 추가할 수 있는 커스텀 데코레이터 클래스를 정의할 수 있습니다. 이렇게 하려면 URichTextBlockDecorator 와 FRichTextDecorator 라는 두 개의 클래스를 작성해야 합니다. 이러한 클래스는 반드시 구성해야 합니다. 이를 통해 데코레이터를 원하는 리치 텍스트 블록에 추가할 수 있습니다. 데코레이터 클래스 배열과 마크업을 사용하여 데코레이터로 텍스트를 파싱합니다.
URichTextBlockDecorator 는 UObject 를 정의하여 CreateDecorator 를 구현하고, 이는 SharedPtr 를 FRichTextDecorator 에 반환합니다. 이를 통해 모든 프로퍼티 및 유틸리티 함수를 구현할 수 있습니다. 또한 데코레이터를 블루프린트로 서브클래스화할 수 있습니다. 이렇게 하면 필요한 데이터를 추가하여 리치 텍스트 블록에서 사용할 수 있습니다.
RichTextBlockImageDecorator 는 데이터 테이블 프로퍼티를 정의합니다. 따라서 블루프린트에서 수정해야 하는 항목은 UObject 에 있어야 합니다.
UMG 리치 텍스트 블록 세팅
이 레퍼런스 섹션은 프로퍼티에 대한 세부 정보를 제공하므로, 리치 이미지 행 및 리치 텍스트 스타일 행 데이터 타입을 사용하여 리치 텍스트 블록 위젯 및 데이터 테이블 에셋을 설정할 수 있습니다.
리치 텍스트 블록 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
| 슬롯(Slot)('캔버스' 패널 슬롯) | |
| 앵커(Anchors) | 선택된 위젯에 대한 앵커 위치를 설정합니다.
|
| 정렬(Alignment) | '정렬'은 위젯의 피벗 포인트입니다. 왼쪽 상단 (0,0)에서 시작하여 오른쪽 하단 (1.1)에서 끝납니다. 정렬 포인트를 옮기면 위젯의 원점을 옮길 수 있습니다. |
| 콘텐츠에 크기 맞춤(Size To Content) | 자동 크기가 true인 경우 위젯에 맞는 크기를 사용합니다. |
| Z 순서(ZOrder) | 선택한 위젯 렌더링하기 위한 순서 우선순위를 나타냅니다. 값이 높을수록 나중에 렌더링되며, 상단에 표시됩니다. 값이 낮을 수록 먼저 렌더링되고, 하단에 표시됩니다. |
| 콘텐츠 | |
| 텍스트 | 위젯에 표시할 텍스트입니다. |
| 외형 | |
| 텍스트 스타일 세트(Text Style Set) | 데이터 테이블 에셋을 저장합니다. 이는 리치 텍스트 데코레이터가 텍스트 및 이미지 스타일에 사용되도록 지원합니다. |
| 데코레이터 클래스 | 선택된 위젯에 사용할 수 있는 데코레이터를 추가합니다. |
| 디폴트 스타일 오버라이드(Override Default Style) | true로 설정한 경우, 이 리치 텍스트 인라인에 대한 디폴트 텍스트 스타일을 지정하여 스타일 세트 테이블의 디폴트를 오버라이드합니다. |
| 디폴트 텍스트 스타일 오버라이드(Default Text Style Override) | 기본적으로 적용되는 텍스트 스타일을 설정합니다. |
| 원하는 최소 너비(Min Desired Width) | 텍스트에 대해 원하는 최소 크기를 설정합니다. |
| 트랜스폼 정책(Transform Policy) | 이 텍스트 블록에 적용할 텍스트 변환 정책입니다.
|
| 양쪽맞춤(Justification) | 텍스트가 여백에 맞춰 정렬되는 방식을 설정합니다. |
| 여백(Margin) | 텍스트 영역 가장가리에 남길 빈 공간의 양을 설정합니다. |
| 선 높이 퍼센티지(Line Height Percentage) | 각 선 높이가 스케일 조절되는 양을 설정합니다. |
| 클리핑(Clipping) | |
| 클리핑 | 이 위젯의 클리핑 행동이 작동하는 방식을 제어합니다. 일반적으로 위젯 바운드 너머로 오버플로되는 콘텐츠는 계속 렌더링됩니다. 클리핑을 활성화하면 오버플로되는 콘텐츠가 보이지 않게 됩니다.
다른 클리핑 공간의 엘리먼트는 함께 배치 처리될 수 없으므로 클리핑 적용 시 퍼포먼스 비용이 발생합니다. 패널에서 콘텐츠가 바운드 외부로 표시되지 않게 해야 하는 경우가 아니라면 클리핑을 활성화하지 않는 것이 좋습니다. |
| 오버플로 정책(Overflow Policy) | 클리핑되어 이 위젯의 클립 사각형에 맞지 않는 텍스트의 처리 방법을 설정합니다.
|
| 래핑(Wrapping) | |
| 텍스트 자동 래핑(Auto Wrap Text) | true로 설정한 경우, 계산된 이 위젯의 가로 공간에 따라 텍스트를 자동으로 래핑합니다. |
| 다음에서 텍스트 래핑(Wrap Text At) | 텍스트 길이가 이 너비를 초과하면 새 줄로 래핑합니다. 값이 0이거나 음수인 경우 래핑이 발생하지 않습니다. |
| 래핑 정책(Wrapping Policy) | 사용할 래핑 정책:
|
| 행동(Behavior) | |
| 툴팁 텍스트(Tool Tip Text) | 사용자가 위젯으로 마우스 커서를 가져갔을 때 표시할 툴팁 텍스트입니다. |
| 활성화 여부(Is Enabled) | 사용자가 이 위젯을 인터랙티브하게 수정할 수 있는지 여부를 설정합니다. |
| 비저빌리티(Visibility) | 이 위젯의 비저빌리티를 설정합니다.
|
| 렌더 오파시티(Render Opacity) | 위젯의 오파시티를 설정합니다. |
| 툴팁 위젯(Tool Tip Widget) | 사용자가 위젯으로 마우스 커서를 가져갔을 때 표시할 툴팁 위젯입니다. |
| 커서(Cursor) | 마우스를 위젯 위로 가져갔을 때 표시할 커서입니다.
|
| 렌더 트랜스폼(Render Transform) | |
| 트랜스폼(Transform) | 위젯의 렌더 트랜스폼을 통해 임의의 2D 트랜스폼을 위젯에 적용할 수 있습니다.
|
| 피벗(Pivot) | 렌더 트랜스폼 피벗은 트랜스폼이 적용될 위치를 제어합니다. 이 값은 회전 등이 발생할 정규화된 좌표입니다. |
| 퍼포먼스(Performance) | |
| 휘발성 여부(Is Volatile) | true로 설정한 경우, 위젯 또는 위젯의 자손 지오메트리 또는 레이아웃 정보가 캐시되지 않습니다. 이 위젯이 프레임마다 변경되지만 계속 무효화 패널에 있게 하려면 프레임마다 무효화하는 대신 휘발성으로 표시해야 합니다. 이렇게 하면 무효화 패널이 아무것도 캐시하지 않게 됩니다. |
| 내비게이션(Navigation) | |
| 왼쪽(Left) | '왼쪽' 사용 시 내비게이션을 정의합니다.
|
| 오른쪽(Right) | '오른쪽' 사용 시 내비게이션을 정의합니다.
|
| 위(Up) | '위' 사용 시 내비게이션을 정의합니다.
|
| 아래(Down) | '아래' 사용 시 내비게이션을 정의합니다.
|
| 다음(Next) | '다음' 사용 시 내비게이션을 정의합니다.
|
| 이전(Previous) | '이전' 사용 시 내비게이션을 정의합니다.
|
| 현지화(Localization) | |
| 강제 방향 선호(Force Direction Preference) | 새 플로 방향을 구성하는 데 사용합니다.
|
| 텍스트 셰이핑 메서드(Text Shaping Method) | 선택된 위젯에서 사용되는 텍스트 셰이핑 메서드를 결정합니다. 설정을 해제하면 Get Default Text Shaping Method에 의해 설정된 디폴트가 사용됩니다.
|
| 텍스트 플로 방향(Text Flow Direction) | 선택된 위젯에서 사용되는 플로 방향을 결정합니다. 설정을 해제하면 Get Default Text Flow Direction에 의해 설정된 디폴트가 사용됩니다.
|
리치 이미지 행 데이터 타입인 데이터 테이블 에셋의 프로퍼티
데이터 테이블 에셋에서 다음과 같은 프로퍼티를 설정하여 리치 텍스트 블록 위젯에서 사용되는 이미지 스타일을 제어합니다.
| 프로퍼티 | 설명 |
|---|---|
| 이미지(Image) | 이 브러시에 대해 렌더링되는 이미지입니다. 할당된 에셋은 UTexture, UMaterialInterface 또는 AtlasedTextureInterface를 구현하는 오브젝트일 수 있습니다. |
| 이미지 크기(Image Size) | 슬레이트 단위의 리소스 크기입니다. |
| 색조(Tint) | 이미지에 적용되는 색조입니다. |
| 그리기 방식(Draw As) | 이미지를 그리는 방식입니다.
|
| 타일링(Tiling) | 이미지 모드에서 이미지를 타일링하는 방식입니다.
|
| 프리뷰(Preview) | 프리뷰 박스에서 이미지가 표시되는 방식을 설정합니다. 가로 정렬(Horizontal Alignment)
세로 정렬(Vertical Alignment)
|
리치 텍스트 스타일 행 데이터 타입인 데이터 테이블 에셋의 프로퍼티
데이터 테이블 에셋에서 다음과 같은 프로퍼티를 설정하여 리치 텍스트 블록 위젯에서 사용되는 텍스트 스타일을 제어합니다.
| 프로퍼티 | 설명 |
|---|---|
| 폰트 | |
| 폰트 패밀리(Font Family) | 폰트 오브젝트입니다. UMG 또는 슬레이트 위젯 스타일 에셋에서 사용할 때 유효합니다. |
| 타입페이스(Typeface) | 디폴트 타입페이스에서 사용할 폰트의 이름입니다. 처음에 '없음'이 선택되어 있으면 첫 번째 항목(볼드)가 사용됩니다. |
| 크기(Size) | 포인트 값으로 측정되는 폰트 크기입니다. 포인트의 슬레이트 단위 변환은 96dpi로 이뤄집니다. 따라서 Photoshop 같은 툴을 사용하여 레이아웃 및 UI 목업을 프로토타이핑하는 경우 디폴트 dpi 값을 72dpi에서 96dpi로 변경해야 합니다. |
| 폰트 머티리얼(Font Material) | 이 폰트를 렌더링할 때 사용할 머티리얼입니다. |
| 윤곽선 세팅(Outline Settings) | 폰트에 윤곽선을 적용하는 세팅입니다.
|
| 컬러(Color) | 이 텍스트의 컬러와 오파시티입니다. |
| 섀도 오프셋(Shadow Offset) | 섀도 오프셋 양을 설정합니다. 오프셋이 0이면 섀도가 없음을 나타냅니다. |
| 섀도 컬러 및 오파시티(Shadow Color and Opacity) | 섀도의 컬러와 오파시티입니다. |
| 섀도 배경색(Shadow Background Color) | 선택된 텍스트의 배경색입니다. |
| 하이라이트 컬러(Highlight Color) | 하이라이트된 텍스트의 컬러입니다. |
| 트랜스폼 정책 | 텍스트 트랜스폼 정책입니다(디폴트는 '없음'). |
| 오버플로 정책 | 클리핑되어 텍스트 위젯의 클립 사각형에 맞지 않는 텍스트의 처리 방법을 결정합니다. |
| 하이라이트 셰이프(Highlight Shape) | |
| 이미지 | 이 브러시에 대해 렌더링되는 이미지입니다. 할당된 에셋은 UTexture, UMaterialInterface 또는 AtlasedTextureInterface를 구현하는 오브젝트일 수 있습니다. |
| 이미지 크기 | 슬레이트 단위의 리소스 크기입니다. |
| 색조 | 이미지에 적용되는 색조입니다. |
| 그리기 방식 | 이미지를 그리는 방식입니다.
|
| 타일링 | 이미지 모드에서 이미지를 타일링하는 방식입니다.
|
| 프리뷰 | 프리뷰 박스에서 이미지가 표시되는 방식을 설정합니다. 가로 정렬(Horizontal Alignment)
세로 정렬(Vertical Alignment)
|
| 취소선 브러시(Strike Brush) | |
| 이미지 | 이 브러시에 대해 렌더링되는 이미지입니다. 할당된 에셋은 UTexture, UMaterialInterface 또는 AtlasedTextureInterface를 구현하는 오브젝트일 수 있습니다. |
| 이미지 크기 | 슬레이트 단위의 리소스 크기입니다. |
| 색조 | 이미지에 적용되는 색조입니다. |
| 그리기 방식 | 이미지를 그리는 방식입니다.
|
| 타일링 | 이미지 모드에서 이미지를 타일링하는 방식입니다.
|
| 프리뷰 | 프리뷰 박스에서 이미지가 표시되는 방식을 설정합니다. 가로 정렬(Horizontal Alignment)
세로 정렬(Vertical Alignment)
|
| 밑줄 브러시(Underline Brush) | |
| 이미지 | 이 브러시에 대해 렌더링되는 이미지입니다. 할당된 에셋은 UTexture, UMaterialInterface 또는 AtlasedTextureInterface를 구현하는 오브젝트일 수 있습니다. |
| 이미지 크기 | 슬레이트 단위의 리소스 크기입니다. |
| 색조 | 이미지에 적용되는 색조입니다. |
| 그리기 방식 | 이미지를 그리는 방식입니다.
|
| 타일링 | 이미지 모드에서 이미지를 타일링하는 방식입니다.
|
| 프리뷰 | 프리뷰 박스에서 이미지가 표시되는 방식을 설정합니다. 가로 정렬(Horizontal Alignment)
세로 정렬(Vertical Alignment)
|