Unity - 기본 지원 UI

땡구의 개발일지·2025년 5월 12일

Scroll View Text Mesh Pro UI Unity button image raw image slider tmp

Unity마스터

목록 보기

22/78

유니티의 기본 지원 UI들은 어떤 것들이 있는 지, 어떻게 쓰는 지 알아본다

스크립트로 UI 편집

네임스페이스로 UI를 추가해줘야 한다
컴포넌트 타입 또한 구분 해볼 필요가 있다

// 기본 지원UI
using UnityEngine.UI;
// 레거시 Text
using UnityEngine.UI.Text;
// Text Mesh Pro
using TMPro;

// 이미지
Image image;
// 버튼
Button button;
// 텍스트 메시 프로 텍스트
TMP_Text text;
// 인풋 필드
TMP_InputField inputField;

Image

스프라이트로 표현하는 UI. Material을 추가할 수도 있다

Raw Image

Image와는 다르게 Texture로 표현한다

스크립트로 Image 제어

public class ImageTest : MonoBehaviour
{
   [SerializeField] private Image _image;
   [SerializeField] private RawImage _rawImage;

   [SerializeField] private Sprite _sprite;
   [SerializeField] private Texture2D _png; 

   private void Awake() 
   {
       _image.sprite = _sprite;
       _rawImage.texture = _png;
   }
}

Button

대표적인 상호작용 컴포넌트. 사용자의 버튼 클릭 유무에 따라 수행. On Click() 이벤트에 수행할 내용을 추가할 수 있다. 스크립트로도 제어 가능하다
텍스트를 자식으로 가지고 있다
Interactable : 상호작용 여부를 결정할 수 있다
Transition : 상호작용에 따라 변화하는 방법을 설정할 수 있다
스크립트로 설정하기

public class ImageTest : MonoBehaviour
{
   [SerializeField] private Image _image;
   [SerializeField] private RawImage _rawImage;

   [SerializeField] private Sprite _sprite;
   [SerializeField] private Texture2D _png;

   [SerializeField] private Button _button;

   private bool _isImageOn;

   private void Start()
   {
       _button.onClick.AddListener(ImageOnOff);
   }

   private void ImageOnOff()
   {

       _isImageOn = !_isImageOn;

       if(_isImageOn)
       {
           _image.sprite = _sprite;
           _rawImage.texture = _png;
       }
       else
       {
           _image.sprite = null;
           _rawImage.texture = null;
       }
   }
}

Slider

주로 옵션 창에서 볼륨 설정, 밝기 조절 등에 사용된다
마우스 혹은 터치 드래그를 통해 값을 조절한다
변경되는 값은 Min : 0 , Max : 1. 변경할 수 있다

public class ImageTest : MonoBehaviour
{
   [SerializeField] private Image _image;
   [SerializeField] private RawImage _rawImage;

   [SerializeField] private Sprite _sprite;
   [SerializeField] private Texture2D _png;

   [SerializeField] private Button _button;

   [SerializeField] private Slider _slider;

   private bool _isImageOn;

   private void Start()
   {
       _button.onClick.AddListener(ImageOnOff);
       _slider.onValueChanged.AddListener(AlphaChange);
   }

   private void ImageOnOff()
   {

       _isImageOn = !_isImageOn;

       if(_isImageOn)
       {
           _image.sprite = _sprite;
           _rawImage.texture = _png;
       }
       else
       {
           _image.sprite = null;
           _rawImage.texture = null;
       }
   }

   private void AlphaChange(float value)
   {
       _image.color = new Color(_image.color.r,_image.color.g,_image.color.b, value);
   }
}

Scroll View

한정된 영역에 많은 데이터를 넣을 때 사용한다. 예를 들어, 사용자 매뉴얼, 스킬 설명, 멀티 게임에서의 채팅창, 인벤토리 등에 사용된다. 스크롤 바를 통해 사용용, 모바일 플랫폼을 위한 터치 및 반동 기능도 지원한다
elastic 이면 스크롤에 탄성이 있다. 컨텐츠 끝보다 더 스크롤이 되지만, 손을 놓으면 다시 돌아간다. clamped는 그와 반대로 끝까지만 간다.Unrestricted 는 제한없이 스크롤이 된다
Content 안에 여러 요소들을 추가해서 이렇게 배치할 수 있다

Text Mesh Pro

레거시와 다르게 벡터로 이루어진 텍스트다. 해상도와 상관없이 깔끔한 글자를 볼 수 있다
기본 제공 폰트가 한글을 지원하지 않는다. 그래서 폰트 에셋을 만들어줘야 한다. Font Asset Creator로 만든다. 사용할 폰트를 Asset 폴더에 넣고 Font Asset Creator로 폰트 에셋으로 만들어 준 후 사용하면 된다
TMP는 Button, Scroll View 등 다른 UI들에도 쓰이므로 잘 알아보는 것이 좋다

폰트 에셋 설정

유니티 - 폰트 에셋

Source Font File : 폰트 원본 파일 삽입
Sampling Point Size : 텍스쳐화 될 폰트 이미지에 삽입될 글자의 크기, 일반적으로 Auto Sizing을 선택한다.
Padding : 글자 이미지 간의 여백, 보통 5를 선택한다
Packing Method : 폰트들을 한 장의 이미지로 합쳐 아틀라스를 생성한다. 두 옵션의 차이가 크지 않으므로 Fast를 선택한다
Atlas Resolution : 글자로 구성된 한 장의 이미지의 최대 크기, 너무 작다면 폰트가 제대로 출력되지 않을 수 있고 너무 크다면 성능적으로 좋지 않다. 한글이라면 일반적으로 2048 ~ 4096을 추천한다
Character Set : 폰트에셋으로 지정해 둘 폰트를 지정하는 단계. 보통 ASCII로 해결되지만, 한글폰트가 포함되어야 하므로 Custom Range로 설정한다.
Character Sequence : 유니코드 단위의 10진수로 범위를 지정한다.
32-126 : 영문자
44032-55203 : 한글
12593-12643 : 한글 자모음
8200-9900 : 특수문자
RenderMode : 텍스트를 이미지화 할 때 사용되는 렌더링 모드. 거리에 따라 선명도를 계산해 렌더링 하는 방식인 SDF를 사용하고, 그 중에서도 SDF16 을 선택하지만 이 수치는 디바이스 환경이나 해상도 등에 차이가 있을 수 있으며 숫자가 높을수록 더 많은 연산이 발생하므로 많은 테스트를 통해 결정되어야 한다

스크립트로 설정

유니티 - 리치 텍스트

스크립트로 설정 가능하다

주의점

폰트는 저작권이 매우 강한 컨텐츠다. 라이센스를 정확히 알아보고 사용해야한다. 사용만으로 License fee를 내야 하는 경우도 있다.
무료 폰트 : 빛의 계승자 - 진지한 느낌의 폰트로 쓰기 좋다

무료 폰트 모음

공유마당 : 상업적 이용이 가능한 폰트들을 모아놓은 사이트

아틀라스

유니티 - 스프라이트 아틀라스

스프라이트들을 바둑판 식으로 이미지들을 모아놓고 하나의 이미지로 만든 것이다. 2D 에서 자세히 다룰 예정
GPU 입장에서는 100개의 이미지 파일을 메모리로 가지고 있는 것보다, 큰 이미지 파일 하나에서 일부분을 그리도록 사용하는 방법이 더 빠르다. 캐쉬 친화도가 높아진다

Panel

캔버스 속의 캔버스다. 원하는 크기만큼 지정해서 캔버스 처럼 사용할 수 있다
인벤토리 같은 것들은 고정된 위치에 버튼 UI를 배치 할 수 있지만, 맵이라면 경우가 다르다 스테이지가 새로 생성 될 때마다 새로 배치하자니 위치를 계산하기 어렵다 이럴 때 사용할 수 있는 것이 Grid Layout Group이다
Add Component 로 검색해서 추가하자