[Unity] ImageType

내일배움캠프 31일차 TIL

📌 ImageType

Unity의 Image.Type은 UI 이미지가 어떻게 그려질지 결정하는 속성으로, UI 요소를 만들 때 매우 중요하다.

각 타입마다 동작 방식, 용도, 제한 사항이 다르다.

 

Simple

가장 기본적인 그리기 방식으로, 스프라이트의 원본 비율과 해상도를 유지한 채 표시된다.

늘리거나 줄이면 그냥 확대/축소됨 (모서리 찌그러짐 발생 가능)

 

simple의 특징은 특별한 처리가 없으며, Set Native Size 버튼으로 스프라이트 원본 크기 맞출 수 있음

 

사용 예시로는 아이콘이나, 움직이지 않는 단순 장식 이미지

image.type = Image.Type.Simple;

 

Sliced

9-Slice (9분할) 방식으로 UI의 크기를 늘리거나 줄일 때 모서리는 고정, 가운데만 유동적으로 조절된다. UI 요소 크기를 유연하게 조절할 때 적합하다.

 

사전 조건으로는, Sprite의 Border 값 설정 필수이며 Sprite Editor에서 사각형 테두리 설정 필요하다. 이 Border가 이미지의 9개 영역(4 모서리 + 4 변 + 중앙)을 구분한다.

 

사용 예시로는, 버튼, 말풍선, 박스, 배경 프레임에서 사용 가능하다.

 

Sliced의 장점으로는 모서리 왜곡 없이 크기 조절 가능하며, UI가 반응형으로 커지거나 줄어들 때 유용하다.

image.type = Image.Type.Sliced;

 

Tiled

Tiled는 이미지의 중앙 영역을 타일처럼 반복해서 채우고, Border가 설정된 경우 중앙 영역만 타일링한다. Sliced와 달리 확대가 아닌 반복으로 표현된다.

 

Tiled을 사용하기 위해선 Sprite의 Wrap Mode가 Repeat여야 한다. (Texture Import Settings)

 

격자 배경, 반복 무늬 테두리, 텍스처 배경 등에서 사용될 수 있다.

 

주의사항으로는 타일 크기와 컨테이너 사이즈 비율에 따라 이미지가 잘려 보일 수 있으며, 모바일에서 과도한 타일링은 퍼포먼스 저하가 일어날 수 있다.

image.type = Image.Type.Tiled;

 

Filled

이미지를 부분적으로 채워서 보여주는 방식으로, Fill Amount(0~1)만큼 이미지가 점점 채워진다.

 

Fill Method

방법	설명
Horizontal	왼→오 or 오→왼
Vertical	아래→위 or 위→아래
Radial90 / 180 / 360	시계방향 / 반시계 방향 원형 채움 (쿨타임 등 표현 가능)

 

체력/마나 게이지, 로딩바, 원형 쿨다운 표시할 때 사용하기 적합하다.

 

시각적 효과가 뛰어나며, 다양한 방향과 패턴으로 채우기 가능

image.type = Image.Type.Filled;
image.fillMethod = Image.FillMethod.Radial360;
image.fillAmount = 0.75f; // 75%만큼 채워짐
image.fillClockwise = true;

 

비교 요약

항목	Simple	Sliced	Tiled	Filled
변형 방식	크기만 변형	9슬라이스 조절	반복 타일링	비율 채우기
Border 필요	❌	✅	옵션	❌
사용 예시	아이콘	버튼	배경 패턴	게이지, 쿨타임
텍스처 설정 필요	없음	Border 설정	WrapMode=Repeat	없음

 

실전 팁

• 버튼, 창틀은 무조건 Sliced로 쓰세요. Simple은 크기 키우면 깨진다.
• 배경 패턴은 Tiled로 반복 처리. 단, 텍스처가 Repeat 가능한지 확인해야 한다.
• 로딩바, 체력바는 Filled. 특히 원형 게이지는 Radial360이 기본!
• Sprite Import에서 Pixels Per Unit, Mesh Type, Wrap Mode 설정도 잘 봐야 한다.