개요

Unity의 UI를 다룰 때, width와 height을 조정하다보면 UI가 찌그러지는 현상을 확인하실 수 있습니다.
아래 그림을 보시면, 양 옆의 테두리에 비해 위아래의 테두리가 얇습니다.

이러한 현상을 막기 위해서, 9-slicing sprite 라는 기술을 사용합니다

9-slicing sprite

우선, UI 스프라이트를 위에 보이시는 것 처럼 9개로 분할하여 width, height 조정시 stretch 되는 방향을 제한합니다.
예를 들어, width를 늘릴 때, B와 H의 길이는 늘어나지만 D와 F의 너비는 늘어나면 안됩니다.

이를 통해 UI의 ratio에 상관없이 일정한 테두리 너비를 가지는 UI를 사용하실 수 있습니다.

구현

먼저 UI의 MeshType을 FullRect 로 변경합니다.

그 후에 SpriteEditor에서 테두리 부분을 설정해줍니다.

UI에 이미지에서 사용하실 때, Image Type을 Sliced로 설정합니다.
(저는 UI 내부가 검정색이라 괜찮지만, 내부에도 패턴이 있는 경우에는 비율에 따라 왜곡이 생깁니다.
반복적인 패턴이라면 Tiled 를 사용해야 합니다.)

위와 같이 다양한 비율을 가지는 UI들도 하나의 스프라이트를 사용해서 만들 수 있습니다.

참고자료

https://docs.unity3d.com/kr/2021.2/Manual/9SliceSprites.html