[Unity] 9-Slice ( 나인 슬라이스 ) 이미지

● 9-Slice 이미지

: 이미지를 9개로 분할하여 D, F 영역은 세로로 늘리고 B, H 영역은 가로로 늘리고 E 영역은 가로 세로로 늘리거나 타일링 하여 이미지를 처리하는 것을 이야기합니다.

: A, C, G, I 영역은 크기를 변경하지 않고 유지합니다.

: 9-Slice는 Android 및 다양한 플랫폼에서 사용되고 있습니다.

● 9-Slice 사용 시 이미지의 모습

▶ Image Type이 Simple일 때는 원본 이미지 전체를 가로로 늘린 모습을 볼 수 있습니다.

▶ Image Type을 Sliced로하면 9개의 사각형 메시로 나뉘어져 B, D, E, F, H 영역이 늘어나고, A,G,C,I는 그대로 그리면서 자연스러운 사각형을 볼 수 있습니다.

▶ Image Type을 Tiled로하면 9개의 사각형 메시로 나뉘어져 B, D, E, F, H 영역이 크기만큼 반복되면서 메시를 그리고, A,G,C,I는 그대로 그리면서 자연스러운 사각형을 볼 수 있습니다.

● 9-Slice를 사용하는 이슈

▶ 작은 리소스 사용만으로도 다양한 이미지를 자연스럽게 표현할 수 있기 때문에 9-Slice를 사용합니다.

: Simple로 이미지를 처리하면 사이즈 변화에 따라 이미지가 찌그러져 보이거나 늘려져 보이는 현상이 발생합니다. 해당 현상을 막기 위해서는 사용하려는 사이즈에 따른 각각의 이미지가 필요하게 됨으로써 불필요한 텍스쳐 낭비가 발생하게 됩니다.

: 9-Slice로 이미지를 처리하면, 이미지 하나만으로 다양한 사이즈의 이미지를 처리할 수 있음으로 텍스쳐 낭비가 발생하지 않습니다.

● 9-Slice를 적용 방법

[ 9-Slice를 적용할 이미지 선택 후, Inspector에서 Mesh Type을 Full Rect로 설정 ] 

[ Sprite Editor를 선택 후 9-Slice를 적용할 영역을 만들어 줌 ]

[ Image Type을 Slice 또는 Tiled 로 선택 ]

● 9-Slice를 적용 시 이슈

▶ Tile로 사용하는 경우 메시를 반복적으로 그리기 때문에 큰 사이즈의 이미지를 그리는 경우 오버 헤드가 있을 수 있습니다.

참고 자료 : assetstore.unity.com/packages/2d/gui/icons/easy-ui-emerald-default-112796

easy UI emerald - default | 2D 아이콘 | Unity Asset Store

참고 자료 : https://docs.unity3d.com/kr/current/Manual/9SliceSprites.html

9슬라이싱 스프라이트 - Unity 매뉴얼