[Unity] Image와 RawImage 비교

Unity에서 UI를 만들 때 Image와 RawImage는 자주 사용되는 컴포넌트입니다. 이 두 가지는 비슷해 보이지만 용도와 기능에서 차이가 있습니다.

---

기본 개념

Image

Image는 Unity의 UI에서 제공하는 컴포넌트로 Sprite를 사용하여 UI 이미지를 보여줍니다. Image컴포넌트는 상호작용할 수 있는 기능을 가지고 있습니다.

 

주요 특징

• Sprite 이미지를 사용
• 이미지의 크기와 비율을 조정하는 기능 제공
• 다양한 Fill 방식 지원. (채우기 비율, 방향)

 

RawImage

RawImage는 Texture를 렌더링하기 위해 사용됩니다. 보통 비디오, 동적 텍스처 또는 일반 Sprite로 처리할 수 없는 렌더 텍스처(Render Texture)와 같은 동적인 요소를 렌더링할 때 활용됩니다.

 

주요 특징

• Texture를 직접 렌더링
• Shader를 사용하여 커스텀 렌더링 가능
• 주로 비디오, 동적 텍스처, 또는 3D 오브젝트의 렌더링 결과 표시 (CCTV, 미니맵, 거울 등)

---

Render Texture란?

Render Texture는 Unity에서 렌더링 결과를 텍스처 형태로 저장할 수 있는 텍스처입니다. 보통 카메라 출력이나 동적 그래픽 데이터를 화면이 아닌 메모리에 저장하여 다른 객체에서 활용할 때 사용됩니다.

• 미니맵: 위에서 내려다본 카메라 시점을 렌더 텍스처로 저장 후 UI에 출력.
• CCTV 화면: 특정 카메라 시점을 렌더 텍스처로 저장하여 TV 화면에 표시.
• 거울 효과: 거울 시점을 가진 카메라의 출력을 렌더 텍스처로 처리 후 거울에 적용.

---

주요 차이점

	Image	RawImage
사용하는 리소스	Sprite	Texture
주요 용도	UI (버튼, 아이콘 등)	동적 콘텐츠(비디오, 렌더 텍스처 등)
Fill 방식	O (예: Radial, Horizontal 등)	X
성능	UI 최적화됨	추가적인 작업 필요

---

사용 예시

Image 사용 예시

1. 버튼과 이미지
   • UI에서 버튼이나 아이콘 같은 정적인 요소에 적합.
   • 예: 메뉴 버튼, HP 바.
2. 마스크 효과
   • 마스크 컴포넌트와 함께 사용하여 특정 영역만 표시.
   • 예: 동그란 프로필 사진 프레임.
3. 채우기 애니메이션
   • 이미지의 Fill 설정으로 HP 바, 쿨다운 타이머 표시.
   • 예: 스킬 쿨다운 UI.

 

RawImage 사용 사례

1. 비디오 플레이어
   • Video Player 컴포넌트와 함께 사용하여 동영상을 UI로 표시.
   • 예: 게임 내 컷신 재생.
2. 렌더 텍스처 표시
   • 3D 오브젝트의 렌더링 결과를 UI에 표시.
   • 예: CCTV 화면, 미니맵.
3. 동적 텍스처 렌더링
   • 스크립트를 통해 실시간으로 텍스처 데이터를 업데이트.
   • 예: 사용자 커스터마이징 화면.

---

장단점 비교

	Image	RawImage
장점	UI 최적화되어 있음. 마스크 및 레이아웃 시스템과 잘 통합. Fill 방식 등 다양한 기본 기능 제공.	Texture를 직접 렌더링할 수 있어 활용도가 높음. 동영상, 렌더 텍스처 등 다양한 콘텐츠 지원.
단점	Sprite만 사용할 수 있어 동적 콘텐츠에 한계	마스킹 기능 미지원. 추가적인 셰이더나 스크립트 작업 필요.

---

마무리

Image와 RawImage는 각각의 목적이 뚜렷한 컴포넌트입니다. 

• Image: 정적인 UI 요소에 적합.
• RawImage: 동적 콘텐츠나 커스텀 렌더링에 적합.