[Unity] UI 리소스 만드는 방법(sliced sprite)

---

유니티를 사용하다보면 UI 리소스를 직접 만드는 상황이 생깁니다.

채팅방을 만드는 중인데, 원하는 UI로 말풍선을 만드려 하는데, 아무 처리 없이 이미지를 그냥 넣을 경우, 

 

이렇게 그냥 이미지가 늘어나기만 합니다.

제가 원하는 이미지는 아래와 같이 모서리는 그대로 두고, 변만 늘리는 겁니다.

 

UI를 리소스화하는 쉽고 빠른 대표적인 방법은 9Grid입니다. 

이미지를 다음과 같이 9부분으로 자르는 방법이며, 유니티에 들어있는 기본 UI 이미지는 이와 같은 방법으로 리소스화되어 있습니다. 

 

이제 간단하게 9Grid를 만드는 방법을 알아보겠습니다!

이미지를 유니티 내로 가져온 후, Texture Type을 Sprite로 해준 뒤에 Sprite Editor를 누릅니다. 

 

아래 영상처럼 네 변을 잡고 움직입니다. 

 

참고로 왼쪽과 오른쪽 위아래 부분은 늘어나지 않는 부분입니다.

저는 모서리의 둥근 부분이 늘어나지 않게 조절해줬습니다. Apply를 누르고 이제 이 창을 꺼줍니다.

 

 

이미지에 만들어둔 sprite를 넣고, Image Type을 Sliced로 해주면 의도한대로 이미지가 변경됩니다.