이미지를 활용한 메뉴 배경 제작

이전 튜토리얼에서는 텍스트와 버튼 요소를 다루었습니다. UI 디자인의 또 다른 주요 요소는 이미지입니다. 이미지는 배경, 아이콘, 배지 등으로 사용할 수 있습니다.

이 튜토리얼에서는 설정 화면에 새 배경 이미지를 추가하고, 기본 버튼 이미지를 커스텀 이미지로 바꾸며, 이미지가 적절하게 스케일링되도록 9슬라이싱이라는 기법을 사용합니다.

설정 메뉴 요소는 단순한 직사각형 위에 배치됩니다. 이 직사각형을 만들려면 Image 오브젝트를 추가해야 합니다.

1. 먼저 Title Text 및 Settings Button 게임 오브젝트를 비활성화하여 Canvas를 비웁니다. 그러면 공백 상태에서 작업을 시작할 수 있습니다.

2. 계층 구조에서 오른쪽 클릭 > UI > Image를 선택한 다음, 이름을 ‘Settings Menu’로 변경합니다. Image는 프로젝트에 임포트한 모든 이미지를 표시할 수 있는 매우 간단한 UI 요소입니다. 기본적으로 씬 중앙에 흰색 정사각형이 추가됩니다.

3. 씬 뷰에서 사각 툴을 사용하여 이미지의 위치와 크기를 설정 메뉴에 적합하게 조정합니다.

4. Image 컴포넌트에서 컬러 피커를 사용하여 배경 컬러를 변경합니다. Color 창에서 Alpha 프로퍼티(A)를 사용하여 배경을 반투명하게 만들 수도 있습니다.

1. 계층 구조에서 Settings Menu 게임 오브젝트를 오른쪽 클릭하고 UI > Text - TextMeshPro를 선택합니다.

기본적으로 New Text 오브젝트는 배경 오브젝트의 중앙에 앵커됩니다. 배경이 부모 오브젝트이기 때문입니다.

2. Text (TMP) 게임 오브젝트의 이름을 ‘Settings Text’로 변경한 다음, TextMeshPro - Text (UI) 컴포넌트의 프로퍼티를 편집하여 텍스트가 보기 좋게 표시되도록 합니다.

이제 설정 메뉴가 꽤 보기 좋아졌을 것입니다. 마지막으로 남은 작업은 타이틀로 돌아가기 위한 커스텀 Exit 버튼입니다.

설정 화면으로 이동하는 설정 버튼이 있습니다. 이제 타이틀 화면으로 돌아갈 종료 버튼이 필요합니다. 이 버튼을 만들면서 Image 컴포넌트를 사용하여 UI 요소 디자인을 커스터마이즈하는 방법을 더 자세히 살펴보겠습니다.

1. 계층 구조에서 Settings Menu 게임 오브젝트를 오른쪽 클릭하고 UI > Button - TextMeshPro를 선택합니다. 그러면 새 Button 자식 오브젝트가 생성되며, 이름을 ‘Exit Button’으로 변경할 수 있습니다.

기본적으로 버튼에는 기본 글꼴로 Button이라는 단어가 표시됩니다.

2. Exit Button 오브젝트를 펼치고 자식 Text 오브젝트를 선택합니다. 원하는 글꼴로 텍스트가 ‘X’로 표시되도록 변경하세요. ‘X’는 닫기 또는 종료를 나타내는 기호로 사용됩니다.

물론 종료 버튼은 아직 이상적인 모양이나 위치에 있지 않습니다.

3. 씬 뷰의 사각 툴이나 Rect Transform 컴포넌트의 프로퍼티를 사용하여 종료 버튼을 UI 배경 오른쪽 상단의 정사각형으로 만듭니다.

이 종료 버튼은 원하는 곳 어디에나 배치할 수 있지만, 사용자는 이런 종류의 버튼이 오른쪽 위 또는 왼쪽 위 모서리에 있는 것에 익숙하다는 점을 기억하세요. UI 디자인의 목표 중 하나는 직관적으로 만드는 것입니다.

이제 버튼의 Image 컴포넌트에 사용할 더 멋진 스프라이트를 선택할 차례입니다. 스프라이트는 UI를 포함한 2D 사용을 위해 설정된 Unity의 텍스처 유형입니다.

일반적으로 스프라이트를 가로 또는 세로로 스케일하면 왜곡됩니다.

예를 들어 설정 배경에 아래 스프라이트를 사용한다고 가정해 보겠습니다.

이 스프라이트를 세로 방향에 가깝게 스케일링하면 아래와 같이 찌그러지고 왜곡되어 보입니다.

하지만 종료 버튼의 크기를 직사각형에서 정사각형으로 변경했을 때 스프라이트는 찌그러지거나 왜곡되지 않았습니다. 어떻게 가능한 걸까요?

1. 버튼을 선택한 상태에서 인스펙터 하단의 Image Preview 창을 찾습니다. 이미지를 보려면 창을 확장해야 할 수도 있습니다.

이미지 미리보기의 3x3 그리드를 확인하세요. 이 그리드는 이미지를 9개 섹션으로 나눕니다. 이는 9슬라이싱이라는 기법으로, 직사각형 스프라이트를 비율에 맞지 않게 스트레치하지 않고 스케일링할 수 있습니다.

모서리는 스트레치하지 않고, 필요한 만큼 다른 모든 면을 스케일링하여 이를 구현합니다.

다음은 이 기법을 적용했을 때와 적용하지 않았을 때 버튼을 가로로 스케일링하면 어떻게 보이는지 보여 주는 예시입니다.

9슬라이싱에 대한 자세한 내용은 매뉴얼에서 확인할 수 있습니다.

이는 Unity에서 제공하는 기본 9슬라이싱된 버튼 이미지이지만, 이 이미지나 다른 UI 스프라이트를 커스텀 9슬라이싱 이미지로 바꿀 수 있습니다.

2. Image 컴포넌트에서 오브젝트 피커(⊙) 버튼을 사용하여 제공된 다른 UI 스프라이트를 찾아봅니다. 설정 메뉴에 가장 잘 어울린다고 생각하는 것을 선택하세요.

스프라이트 에디터를 사용한 UI 스프라이트 슬라이싱

이미지는 기본적으로 9슬라이싱되지 않지만, 스프라이트 에디터를 사용하여 직접 스프라이트를 슬라이싱할 수 있습니다.

직접 확인하려면 CreativeCore_UI > UI > Textures로 이동한 다음 UI 텍스처 중 하나를 선택하세요. 이미지의 Texture Type이 Sprite로 설정된 경우 Open Sprite Editor를 선택하여 새 창에서 에디터를 열 수 있습니다.

참고: 먼저 2D Sprite 패키지를 설치하라는 프롬프트가 표시될 수 있습니다. 설치가 완료되면 Open Sprite Editor를 선택할 수 있습니다.

스프라이트 에디터를 사용하면 UI 스프라이트가 완벽하게 스케일링되도록 슬라이스의 위치를 지정하고 적용할 수 있습니다.

스프라이트가 9슬라이싱되면 Image 컴포넌트에서 Image Type을 Sliced로 설정하는 것만으로도 보기 좋게 스케일링됩니다.

이제 UI에서 이미지를 추가하고 교체하는 방법을 알게 되었습니다. 이러한 기술을 적용하여 UI 요소를 더욱 보기 좋게 만들어 보세요. 설정 버튼이 기본 이미지 대신 커스텀 이미지를 사용하도록 하거나, 배경 주위에 테두리를 추가하여 더 돋보이게 만들 수 있습니다.

UI 요소에 세부 사항을 더해 레이어를 구성할수록 캔버스의 드로잉 순서를 이해하는 것이 중요합니다. 오브젝트는 계층 구조에 나열된 순서대로 화면에 그려집니다. 즉, 계층 구조에서 더 아래에 있는 오브젝트가 더 위에 있는 오브젝트 위에 그려집니다.

계층 구조에서 오브젝트의 순서가 올바르지 않으면 아래에 표시된 것처럼 오브젝트가 겹칠 수 있습니다.

이 문제를 해결하려면 계층 구조에서 해당 종료 버튼을 배경 테두리 아래에 배치하기만 하면 됩니다.

제목 화면과 설정 메뉴가 정말 멋지게 완성되었습니다. 하지만 UI에 아직 상호작용 기능이 없습니다. 설정 메뉴를 오가는 방법도 없고, 메뉴 자체에도 실제 설정이 없습니다. 다음 튜토리얼에서 이러한 인터랙션을 모두 추가하겠습니다.