[유니티 기초] UI - Image 컴포넌트

이번 글에서는 유니티 UI 컴포넌트 중 Image 에 대해 알아보도록 하겠습니다.

 

▶ 텍스쳐와 스프라이트

먼저 알아 두셔야 할 사항이 있습니다. 유니티 3D 에서는 기본적으로 그림 파일을 텍스쳐 형식으로 인식합니다.  그런데, 유니티 UI 에서 사용하는 그림 파일은 텍스쳐가 아닌 스프라이트 형식을 사용해야 합니다. 

 

프로젝트가 3D 인 경우 Assets 폴더에 그림 파일을 복사하면 유니티는 해당 이미지 타입을 텍스쳐로 설정합니다. 이렇게 텍스쳐로 설정된 이미지는 Image 컴포넌트에서 사용할 수 없기 때문에 Sprite 형식으로 변경해 주어야 합니다.

 

기본 이미지 설정 상태

유니티 프로젝트의 Assets 폴더에 그림 파일을 복사해 넣은 후 유니티 에디터에서 해당 파일을 선택하면 Inspector 창에 위와 같은 정보가 나타납니다. Texture Type 이 Default 로 되어있는데 이는 이미지가 텍스쳐 타입이라는 의미입니다.

 

Image Type을 Sprite 로 변경

위와 같이 Sprite (2D and UI) 를 선택하고 [Apply] 버튼을 누르면 이미지가 Sprite 형식으로 바뀌고 UI 에서 사용할 수 있게 됩니다.

---

 

▶ Image UI  생성

이제 Image UI 객체를 하나 만들어 보도록 하겠습니다.

 

 

Hierarchy 창에서 위와 같은 방법으로 UI → Image 를 선택하면 Canvas 객체 밑에 Image UI 객체가 생성됩니다. 생성된 Image 객체를 선택하면 Inspector 창에 다음과 같이 Image 컴포넌트가 나타납니다.

 

 

Source Image 에 Sprite 형식의 이미지 파일을 연결하면 화면에 해당 이미지가 출력됩니다. 단, 크기는 원본 이미지의 크기가 아닌 RectTransform 에 있는 Width / Height 에 설정된 크기가 됩니다.

 

만약 원본 이미지의 크기와 동일한 크기를 원한다면 Width / Height 의 값을 원본 이미지의 크기에 맞게 직접 변경하거나 [Set Native Size] 버튼을 클릭하면 됩니다.

 

참고로 원본 이미지의 크기는 이미지를 선택한 다음 Inspector 창에 표시되는 Image Import Settings 하단 부분을 클릭하면 볼 수 있습니다.

 

소스 이미지 정보 보기

---

 

 

▶ Image UI  속성

다음은 이미지 컴포넌트에서 제공하는 기능들입니다.

 

▷Source Image 

표시되는 이미지입니다. 스프라이트 형식이어야 합니다.

 

▷Color

이미지에 색상과 투명도를 적용할 수 있습니다.

 

▷Material

이미지 랜더링에 사용되는 Material 입니다. 

 

▷Raycast Target

이 항목이 체크되어 있으면 유니티에서 해당 이미지를 Raycast 대상으로 간주합니다. UI 에서 Raycast 는 주로 사용자와의 상호작용에 사용됩니다.

 

▷Raycast Padding

이미지 영역 중 Raycast의 대상이 되는 영역을 지정해 줄 수 있습니다. 아래의 그림을 보면 padding 값을 모두 20 으로 설정했을 때 오른쪽 그림에서 초록색 영역이 안쪽으로 좁아졌습니다. 이 영역만 Raycast target의 대상이 됩니다.

 

Raycast padding 값을 모두 20으로 설정한 경우

 

▷Maskable

Mask 형태로 보일 수 있는지의 여부를 나타냅니다. Mask 란 이미지의 일정 부분만 보여주는 것을 뜻합니다.

 

▷Image Type

Source Image 에 Sprite 가 적용되면 이 항목이 나타납니다.

 

▷Image Type: Simple

≫Use Sprite Mesh

Texture Import Settings 에 의해 생성된 mesh 를 사용해 이미지를 출력할 것인지 아니면 간단한 squad mesh 를 이용할 것인지 선택합니다. 체크를 해제하면 squad mesh 를 사용합니다.

 

≫Preserve Aspect

RectTransform 의 Width/Height 에 상관없이 이미지 원본의 가로/세로 비율에 맞춰 출력합니다.

 

≫Set Native Size

RectTransform 의 Width/Height 를 원본 이미지의 크기와 동일하게 설정합니다.

 

▷Image Type: Sliced

Sliced 는 이미지에서 Border 로 설정된 부분은 원본 이미지 크기 이상으로는 커지지 않습니다. Border 설정 방법은 더보기를 클릭해 주세요.

 

Sliced 를 사용하려면 Sprite 에 Border 설정이 되어 있어야 합니다. Sprite 에 보더 설정을 하기 위해선 Sprite Editor 를 사용해야 합니다. Sprite Editor 는 Image Import Settings 에서 사용할 수 있습니다. 

 

Sprite Editor

 

만약 Sprite Editor 버튼을 클릭했을 때 다음과 같은 메시지가 나타나면 Sprite Editor 를 설치해 주어야 합니다.

 

Sprite Editor 가 없을 경우 나타나는 메시지

 

Package Manager 는 메뉴 에서 [Windows ▶ Package Manager] 를 선택하시면 됩니다.

 

Package Manager 열기

 

Package Manager 가 실행되면 다음과 같은 창이 나타납니다.

 

Package Manager

 

위 그림처럼 Packages 항목을 클릭하고 Unity Registry 를 선택합니다. 그리고 우측 상단에 있는 검색 입력칸에 "sprite" 라고 입력합니다. 검색 결과에 나온 "2D Sprite" 를 선택하고 [Install] 을 클릭합니다.

 

설치가 완료되고 다시 [Sprite Editor] 를 클릭하면 다음과 같은 창이 나타납니다.

 

보더 설정하기

 

우측 하단에 있는 팝업창에서 Border 항목에 값을 직접 입력해도 되고 동그라미 부분을 마우스로 잡고 움직여서 보더를 설정할 수도 있습니다. 설정을 완료하면 상단의 [Apply] 를 클릭합니다.

 

다음은 보더가 설정된 이미지를 Sliced 타입으로 크기를 변경했을 때 어떻게 보이는지에 대한 예제입니다. 위/아래쪽을 늘리면 상단/하단 영역의 보더 부분은 고정되어 있고 가운데 부분만 늘어납니다. 좌/우를 늘리면 역시 좌/우측의 보더 영역은 늘어나지 않고 가운데 영역만 늘어납니다.

 

Sliced와 보더 예제

≫ Fill Center

Border 외의 영역인 센터 부분을 표시할지 여부를 선택합니다.

 

≫ Pixels Per Unit Multiplier

유니티는 기본적으로 Pixels Per Unit = 100 입니다. 이는 1 Unit 을 100 pixels 로 표시한다는 의미입니다.

 

예제로 사용하고 있는 이미지의 크기가 256x256 이므로 가로 세로 모두 256 / 100 = 2.56 Unit 입니다. 만약 Pixels Per Unit Multiplier 의 값을 2로 하면 256 / 200 = 1.28 Unit 이 됩니다. 이는 Border 영역에만 적용됩니다. 

 

유니티에서 1 Unit 의 의미

 

▷Image Type: Tiled

이미지를 아래와 같이 타일 형태로 출력합니다.

 

Tiled 이미지

 

≫ Pixels Per Unit Multiplier

ImageType: Sliced 에 있는 것과 같은 옵션입니다. 위의 타일 그림은 이 값을 2 로 설정한 것입니다. 이제 값을 2로 설정했을 때 왜 위와같이 표현되는지 알아보도록 하겠습니다.

 

이미지 크기: 256x256 (RectTransform 의 Width / Height 도 동일하게 256 / 256)

Pixels Per Unit: 100

이미지 원본을 표현하기 위해 사용하는 Unit의 크기: 256 / 100 = 2.56 Unit

Pixels Per Unit Multiplier: 2, Pixels Per Unit x 2 = 200

이미지 원본을 표현하기 위해 사용하는 Unit의 크기: 256 / 200 = 1.28 Unit

 

위의 계산과 같이 이미지 한 장을 표현하기 위해 필요한 Unit 의 크기가 절반으로 줄었기 때문에 위와 같은 타일 형태로 표현이 되는 것입니다. 

 

▷ Image Type: Filled

Filled 는 이미지를 부분적으로 보여줄 수 있는 기능을 제공합니다. Fill Method, Fill Origin, Fill Amount, Clockwise 설정에 따라 다양한 방식으로 표현할 수 있습니다.

 

Fill Method	Fill Origin	Fill Amount (0 ↔ 1)
Horizontal	Left	이미지를 왼쪽에서 오른쪽으로 채웁니다.
	Right	이미지를 오른쪽에서 왼쪽으로 채웁니다.
Vertical	Bottom	이미지를 아래에서 위로 채웁니다.
	Top	이미지를 위에서 아래로 채웁니다.
Radial 90	BottomLeft	이미지를 왼쪽 아래를 기준으로 90도 범위 안에서 채웁니다.
	TopLeft	이미지를 왼쪽 위를 기준으로 90도 범위 안에서 채웁니다.
	TopRight	이미지를 오른쪽 위를 기준으로 90도 범위 안에서 채웁니다.
	BottomRight	이미지를 오른쪽 아래를 기준으로 90도 범위 안에서 채웁니다.
Radial 180	Bottom	이미지를 밑을 기준으로 180도 범위 안에서 채웁니다.
	Left	이미지를 왼쪽을 기준으로 180도 범위 안에서 채웁니다.
	Top	이미지를 위쪽을 기준으로 180도 범위 안에서 채웁니다.
	Right	이미지를 오른쪽을 기준으로 180도 범위 안에서 채웁니다.
Radial 360	Bottom	이미지를 밑을 기준으로 360도 범위 안에서 채웁니다.
	Right	이미지를 오른쪽을 기준으로 360도 범위 안에서 채웁니다.
	Top	이미지를 윗부분을 기준으로 360도 범위 안에서 채웁니다.
	Left	이미지를 왼쪽을 기준으로 360도 범위 안에서 채웁니다.