수업 7.3 - 제목

TextMesh Pro는 Unity에서 멋진 텍스트를 생성할 수 있는 패키지입니다. TextMesh Pro 필수 리소스와 폰트를 프로젝트로 임포트합니다.

1. 상단 메뉴 드롭다운에서 Window > Text Mesh Pro > Import TMP Essential Resources를 선택합니다(그림 01).

2. 전체 TextMesh Pro 패키지가 선택되었는지 확인하고 Import를 클릭합니다(그림 02).

3. 상단 메뉴 드롭다운에서

Window > TextMeshPro > Import TMP Examples and Extras를 클릭합니다(그림 03).

4. 지금은 Fonts 패키지만 필요합니다. TextMesh Pro 상자를 선택 취소하여 불필요한 상자를 선택 취소합니다. 폰트 패키지만 선택하려면 Fonts 상자를 선택하고 Import를 클릭합니다(그림 04).

이제 프로젝트에 필요한 툴이 있으므로 제목을 생성해보겠습니다. Bangers라고 하는 폰트를 사용할 것입니다. 먼저 Font Asset을 생성해보겠습니다.

1. Assets에서 TextMesh Pro 폴더로 이동하여 새 Font Asset을 생성한 다음 Examples and Extras > Fonts > Bangers로 이동합니다(그림 05).

2. Bangers 오른쪽 클릭한 다음 Create > TextMesh Pro > Font Asset을 선택합니다(그림 06).

그러면 Fonts 폴더에 “Bangers SDF”(그림 07) 및 새 Font Asset이 생성됩니다.

이제 Font Asset을 생성했으므로 제목을 생성합니다.

3. 계층 구조 창에서 오른쪽 클릭한 다음 UI > Text - TextMeshPro(그림 08)로 이동하여 씬에 새 TextMesh Pro 게임 오브젝트를 생성합니다.

이제 게임 뷰에 텍스트가 보일 것입니다(그림 09).

4. 이 단계에서는 Text(TMP) 게임 오브젝트의 부모가 될 Canvas도 생성해보겠습니다. 이름을 “TitleCanvas”로 바꿉니다(그림 10).

• TitleCanvas를 선택했는지 확인합니다. 인스펙터 창의 Canvas Scaler에서 제목을 16:9 종횡비에 비례하도록 하려면 UI Scale Mode를 Constant Pixel Size에서 Scale With Screen Size(그림 11)로 변경합니다.

5. Canvas Scaler에서 Reference Resolution을 X: 1920 Y: 1080으로 변경합니다. 그런 다음 화면 해상도에 비례하여 제목이 중앙에 오도록 Match 값을 0.5(그림 12)로 변경합니다.

6. 다시 계층 구조 창에서 Text(TMP) 이름을 “Title”로 바꿉니다(그림 13).

7. 인스펙터 창에서 TextMeshPro - Text (UI)로 이동하고 “New Text”를 “The Chase”로 변경합니다(그림 14).

8. Rect Transform에서 Width를 1280으로 Height 값을 250으로 변경하면(그림 15) 제목 크기가 화면의 트랜스폼 포지션과 균일하게 맞습니다. 또한 화면에 맞게 제목을 배치하려면 X 및 Y 값을 0으로 변경합니다.

9. Anchor Presets에서 가운데 중앙에 있는 상자를 클릭하여 제목을 뷰 가운데에 배치합니다(그림 16).

지금은 제목이 아래와 같이 보일 겁니다(그림 17). 아직 중앙에 배치되지는 않았습니다. 크기를 늘리면 중앙에 배치됩니다.

제목 에셋이 생성되었으므로, 이제 영화의 미적 특징과 일치하도록 모양에 스타일을 적용해보겠습니다.

10. 인스펙터 창의 TextMesh Pro - Text (UI) 탭으로 돌아갑니다(그림 18).

• Font Asset을 Bangers SDF로 변경합니다.
• Font Size를 250으로 변경합니다.
• Vertex Color를 변경하여 하나의 컬러를 사용해도 되고 Color Gradient를 활성화하여 그레디언트를 사용해도 됩니다. 이 체크박스를 활성화하여 첫 번째 컬러를 “#FFD900FF”, 두 번째 컬러를 “#FF006FFF”, 세 번째 컬러를 “#FF005BFF” 그리고 네 번째 컬러를 “#A500FFFF”로 설정합니다.
• Alignment를 가운데 정렬로 변경합니다.

최종적으로는 다음과 같이 보일 겁니다(그림 19).

11. 인스펙터 창의 Extra Settings에서 Bangers Atlas Material의 삼각형 필드를 확장한 다음 Face 레이블이 지정된 설정에서 Color를 밝은 분홍색으로 변경하고 Dilate 값을 0.5로 변경합니다(그림 20). 이렇게 하면 제목이 더 커지고 글자가 겹치게 됩니다.

최종 결과는 다음과 같이 보여야 합니다(그림 21).

12. 텍스트 주변을 3색으로 두르면 텍스트를 튀어나온 것처럼 보이게 할 수 있습니다(그림 22).

• Outline에서 Color를 Navy Blue로 변경하고 Thickness 값을 0.7로 변경합니다. Outline은 텍스트 외곽선이며 가장 바깥쪽 경계 요소입니다.
• Underlay는 가장 안쪽 경계 요소입니다. Underlay 체크박스를 활성화한 다음 Underlay 필드를 다시 선택하여 해당 프로퍼티를 확장합니다. Underlay Color를 Purple(Color 설정의 Alpha가 255로 설정되어 있는지 확인)로, Offset X를 0.15, Offset Y를 0.2로, Dilate 값을 0.62로, Softness 값을 0.07로 변경합니다.
• Glow는 Outline과 Underlay 사이의 컬러입니다. Glow 체크박스를 활성화한 다음 Glow 필드를 다시 선택하여 해당 프로퍼티를 확장합니다. Glow Color를 Turquoise로 변경하고 Alpha는 다시 255로 설정합니다. Offset 값 1, Inner 값 0.255, Outer 값 0.7, Power 값 0.3으로 설정합니다.

제목이 이제 다음과 같이 보일 겁니다(그림 23).

TextMesh Pro는 텍스트 스타일링 측면에서 많은 유연성을 제공합니다. 텍스트 형태를 보다 더 특별하게 만들려면 제목 설정에서 계속 테스트해봅니다.

이제 멋진 제목이 만들어졌습니다. 영화 시작 부분에서 제목을 페이드인 및 페이드아웃 해보겠습니다. 불투명도 또는 알파 채널 값을 애니메이션화하면 됩니다. 먼저 이 제목에 대한 애니메이션 트랙을 생성해보겠습니다.

1. 타임라인 창에서 오른쪽 클릭하고 새 트랙 그룹을 생성합니다(그림 24).

2. Track Group 이름을 “Title Group”으로 바꿉니다.

3. 제목의 Title Group에 애니메이션 트랙을 추가합니다(그림 25).

4. 계층 구조 창에서 “Title” 게임 오브젝트를 빈 애니메이션 트랙으로 드래그하고 Create Animator on Title을 클릭합니다(그림 26).

이제 이 제목의 애니메이션 트랙을 생성했으니, 해당 불투명도를 애니메이션화 해보겠습니다.

5. 빨간색 Record 버튼을 클릭하여 제목 애니메이션화를 시작합니다.

6. 타임라인 재생헤드 커서를 Frame 0으로 설정하고 계층 구조 창에서 "Title" 게임 오브젝트가 선택되어 있는지 확인합니다. 다음으로, 인스펙터 창에서 TextMeshPro - Text (UI) 컴포넌트를 선택한 상태로 Vertex Color를 선택합니다(그림 28).

7. A(알파) 값을 0으로 변경하여 제목을 투명하게 만듭니다(그림 29).

8. 타임라인에서 Frame 20으로 이동하여 제목의 알파 값을 다시 255로 변경하여 제목을 다시 보이게 합니다. 제목이 완전히 사라진 상태에서 페이드인됩니다(그림 30).

9. 그래프 에디터로 이동하여 개별 키의 시간과 값을 조정하면 제목 페이드인의 모양을 추가로 조정할 수 있습니다. 즉, 개별 키를 오른쪽 클릭하고 Edit 키를 선택하면 됩니다. 페이드인 시간을 늘리려면 키의 시작 시간을 20프레임(그림 31)에서 35프레임(그림 32)으로 변경해봅니다.

이제 제목 페이드인은 완료되었고, 액션이 시작되면 다시 페이드아웃해보겠습니다.

10. 타임라인을 대략 81프레임으로 이동하고 그래프 에디터를 오른쪽 클릭하여 새 키를 추가합니다(그림 33). 그러면 제목의 알파 값이 255로 동일한 새 키프레임이 추가됩니다.

11. 대략 89프레임까지 조금 더 이동하고 제목의 알파 값을 0으로 변경하여 페이드아웃을 생성합니다(그림 34).

페이드아웃 설정을 조정하여 제목을 보다 점진적으로 표현하고 영화의 타이밍과 일치하도록 설정할 수 있습니다.

12. 세 번째 키프레임을 오른쪽 클릭하고 Edit 키를 선택한 다음 시간을 65프레임으로 변경합니다. 네 번째 키프레임을 오른쪽 클릭하고 Edit 키를 선택한 다음 시간을 75프레임으로 변경합니다(그림 35).

13. 이 애니메이션의 편집을 완료하려면 깜박이는 빨간색 원을 클릭하고 저장해야 합니다(그림 36).

14. 타이밍이 맞을 때까지 전환을 클릭하고 드래그하여 추가로 조정할 수도 있습니다(그림 37). 최종 키프레임을 85프레임으로 드래그해봅니다(그림 38).

끝으로, 영화 시작 부분과 끝 부분에 페이드인 및 페이드아웃을 추가해보겠습니다. 제목에서 했던 작업과 마찬가지로 검은색 이미지를 생성하고 불투명도를 조정하면 됩니다.

먼저, 캔버스를 덮을 검은색 이미지를 생성합니다.

1. 계층 구조 창에서 TitleCanvas를 오른쪽 클릭하고 UI > Image를 선택합니다(그림 39).

그러면 TitleCanvas의 자식인 Image 게임 오브젝트가 생성됩니다(그림 40).

2. 인스펙터 창에서 전체 뷰에 맞도록 이미지를 펼치려면 Alt/Option 및 Shift 키를 누른 상태에서 Rect Transform 아래 Anchor Presets을 Stretch, Stretch로 변경합니다(그림 41). 게임 뷰 전체를 채우는 흰색 이미지가 바로 나타납니다.

3. Image 아래에서 컬러를 흰색에서 검은색으로 변경합니다(그림 42). 이렇게 하면 게임 뷰의 컬러가 흰색에서 검은색으로 변경됩니다.

4. 이제 이미지 이름을 “FadeInToBlack”로 바꿉니다(그림 43).

검은색 이미지가 나타납니다. 다음으로, 제목에서 했던 작업과 마찬가지로 해당 불투명도를 애니메이션화하여 페이드인 및 페이드아웃을 생성합니다.

5. 타임라인에서 Title Group을 오른쪽 클릭하고 Add Animation Track을 선택합니다(그림 44).

생성한 새 애니메이션 트랙을 편집하면서 인스펙터 창에서 FadeToBlack 게임 오브젝트의 값을 변경하려면 타임라인 창 오른쪽 상단 코너에 있는 잠금을 클릭하여 고정시킵니다(그림 45).

6. FadeInToBlack을 빈 애니메이션 트랙으로 드래그하고 Create Animator on FadeInToBlack을 선택합니다(그림 46).

7. Record 버튼을 눌러 FadeInToBlack 게임 오브젝트의 불투명도를 애니메이션화합니다.

a. 타임라인을 0프레임으로 이동한 다음 인스펙터 창의 Image에서 컬러를 클릭하고 A(알파 값)를 255로 변경합니다(그림 47).

b. 10프레임으로 이동하여 A 값을 0으로 변경합니다. 비디오가 페이드인됩니다.

c. 페이드아웃하려면 485프레임에서 새 키를 생성하고 FadeInToBlack의 알파 값이 0으로 설정되어 있는지 확인합니다.

d. 515프레임에서 최종 프레임을 하나 생성하고 FadeInToBlack의 알파 값을 255로 설정합니다. 페이드아웃은 그래프 에디터에서 이와 같이 보입니다(그림 48). 페이드인과 페이드아웃의 극적인 변화를 살펴보며 해당 값을 자유롭게 변경해봅니다.

이 수업에서는 TextMesh Pro를 사용하여 멋진 제목을 생성하고 타임라인을 사용하여 제목과 비디오 자체를 페이드인 및 페이드아웃하는 방법을 배웠습니다.