핵심 정리
| 항목 | 내용 |
|---|---|
| 역할 | 스프라이트를 UI 위에 그리고 타입에 따라 단순 표시, 9-slice, 게이지 채우기까지 담당 |
| 언제 쓰는가 | 패널 배경, 아이콘, 버튼 바탕, 체력바/쿨다운 링, 마스크용 그래픽을 만들 때 |
| 기준 버전 | Unity 6.5 (6000.5) |
| 핵심 Inspector | Source Image, Color, Material, Raycast Target, Image Type, Preserve Aspect, Fill 설정 |
| 자주 연결되는 API | sprite, color, fillAmount, type, SetNativeSize() |
Inspector 설정
| 설정값 | 언제 바꾸는가 | 잘못 맞추면 생기는 문제 |
|---|---|---|
| Source Image | 아이콘, 패널, 게이지 원본 스프라이트를 정할 때 | 엉뚱한 스프라이트나 빈 참조로 표시가 깨짐 |
| Color | 알파와 색 보정을 줄 때 | 색만 바꾼 줄 알았는데 투명도까지 같이 변함 |
| Material | 커스텀 UI 셰이더가 필요할 때 | 기본 UI 정렬/마스킹과 충돌할 수 있음 |
| Raycast Target | 장식 이미지를 클릭 막힘에서 제외할 때 | 아래 버튼과 드래그 입력을 가로막음 |
| Image Type | Simple, Sliced, Filled, Tiled를 고를 때 | 9-slice나 게이지가 전혀 다른 방식으로 동작 |
| Preserve Aspect / Fill Amount | 비율 유지나 게이지 비율을 맞출 때 | 아이콘 찌그러짐, 게이지 기준점 어긋남 |
Source Image, Color, Material, Raycast Target
Source Image는 그릴 스프라이트입니다. Color는 색 보정과 투명도까지 포함합니다. Material은 특수 셰이더가 필요한 경우만 바꾸는 편이 보통입니다.
Raycast Target은 이 Image가 클릭 판정 레이어를 막을지 결정합니다. 배경 장식 이미지는 꺼 두는 편이 안전합니다. 이 값을 켜 둔 채 화면 전체에 덮여 있으면 버튼이 멀쩡해 보여도 클릭이 안 됩니다.
Image Type
Simple은 일반 아이콘, Sliced는 9-slice 패널, Tiled는 반복 무늬, Filled는 게이지와 쿨다운 표현에 씁니다. Type이 바뀌면 하위 옵션 의미도 완전히 달라집니다.
Sliced를 쓰려면 원본 Sprite의 Border 설정이 먼저 맞아야 합니다. Filled를 쓰려면 Fill Method, Origin, Clockwise, Fill Amount 조합을 같이 봐야 합니다.
| 값 | 언제 고르는가 | 주의할 점 |
|---|---|---|
Simple | 일반 아이콘, 초상화, 장식 이미지 | 크기를 크게 키우면 가장자리 품질이 바로 드러남 |
Sliced | 패널, 프레임, 말풍선처럼 모서리를 유지해야 할 때 | Sprite Border가 없으면 모서리도 같이 늘어남 |
Tiled | 패턴 배경, 반복 무늬, 테두리 텍스처 | 원본 텍스처 설정과 픽셀 밀도 차이로 반복이 어색할 수 있음 |
Filled | 체력바, 쿨다운, 로딩 바, 원형 게이지 | Fill Method와 Origin을 같이 안 보면 방향이 뒤집혀 보임 |
Preserve Aspect, Set Native Size, Fill
Preserve Aspect는 아이콘이 찌그러지는 것을 막는 데 도움 됩니다. 다만 부모 레이아웃 제약이 더 강하면 기대만큼 유지되지 않을 수 있습니다. Set Native Size()는 원본 픽셀 크기로 맞출 때 편하지만, 반응형 UI에서는 오히려 깨질 수 있습니다.
Filled는 fillAmount를 코드에서 바꾸는 경우가 많습니다. 체력바, 로딩 바, 스킬 쿨다운 원형 UI가 대표적입니다.
| 값 | 언제 고르는가 | 주의할 점 |
|---|---|---|
Fill Method = Horizontal | 좌우 체력바, 진행 바 | Origin에 따라 왼쪽에서 찰지 오른쪽에서 찰지 달라짐 |
Fill Method = Vertical | 위아래 게이지, 온도계형 UI | 부모 정렬과 겹치면 기준 방향을 헷갈리기 쉬움 |
Fill Method = Radial 90/180/360 | 원형 쿨다운, 부채꼴 레이더, 원판 UI | Origin과 Clockwise가 맞지 않으면 감기는 방향이 반대로 보임 |
스크립트 연결
| 필드/프로퍼티 | 언제 읽거나 쓰는가 | 주의할 점 |
|---|---|---|
sprite | 상태별 아이콘 교체 | Atlas와 Sprite Border 설정도 같이 봐야 함 |
color | 경고, 쿨다운, 강조 연출 | 부모 Graphic 색과 곱해질 수 있음 |
fillAmount | 체력, 로딩, 쿨다운 비율 갱신 | Filled 타입일 때만 직관적으로 동작 |
type | 런타임에 표현 방식을 바꿀 때 | Type에 따라 하위 옵션 의미가 바뀜 |
| 메서드 | 언제 쓰는가 | 연결 지점 |
|---|---|---|
SetNativeSize() | 원본 스프라이트 크기로 맞출 때 | 초기화, 디버그 배치 |
CrossFadeAlpha() / CrossFadeColor() | 간단한 페이드와 색 전환 | UI 연출, 경고 표시 |
using UnityEngine;
using UnityEngine.UI;
public class HpBarView : MonoBehaviour
{
[SerializeField] private Image fillImage;
public void SetRatio(float ratio)
{
fillImage.fillAmount = Mathf.Clamp01(ratio);
}
}런타임에서는 sprite 교체, color 변화, fillAmount 갱신이 가장 흔합니다.
자주 틀리는 부분
- 장식용 Image에
Raycast Target이 켜져 있어 아래 버튼 클릭을 막는 경우가 매우 많습니다. - Sliced인데 Sprite Border가 없어 모서리가 같이 늘어납니다.
- Filled인데 단순 Width 조절과 혼용해 게이지 기준점이 어긋날 수 있습니다.
- 아이콘 비율이 이상하면 Preserve Aspect보다 부모 레이아웃 제약을 먼저 봐야 합니다.
관련 컴포넌트
Canvas, Button, TextMeshPro, RectTransform, anchor, pivot, Canvas Scaler, Graphic Raycaster와 Raycast Target
참고 링크
2 sources