버튼 이미지를 통째로 늘리면 모서리가 같이 늘어난다

버튼 배경 한 장을 가로로 긴 버튼, 정사각 버튼, 작은 버튼에 돌려 씁니다. Figma 에서는 프레임을 아무리 늘려도 모서리 반경과 테두리 굵기가 그대로입니다. 같은 PNG 를 Unity 에 넘기고 폭을 늘리면 그림 전체가 같이 늘어나서 모서리가 납작해지고 테두리가 두꺼워집니다.

Unity 에서 이미지 한 장은 Image 컴포넌트가 그립니다. 늘어날 자리를 어떻게 채울지는 Image 의 Image Type 에서 갈립니다.

같은 그림도 Type 에 따라 다르게 늘어납니다

• Simple 은 그림을 통째로 목표 크기에 맞춥니다. 사진이나 일러스트처럼 그림 전체가 한 덩어리인 것에 씁니다
• Sliced 는 아홉 조각으로 나눠 모서리 넷은 그대로 두고, 위아래 변은 가로로만, 좌우 변은 세로로만, 가운데만 양쪽으로 늘립니다. 버튼, 패널, 말풍선, 입력창처럼 크기가 변하는 배경 은 거의 다 이쪽입니다
• Tiled 는 늘리는 대신 반복해서 채웁니다. 격자무늬, 나무결, 종이 질감처럼 이어 붙여도 티가 안 나는 무늬에 씁니다
• Filled 는 Simple 로 그린 뒤 채운 만큼만 보여 줍니다. 체력 바, 쿨타임 원, 로딩 게이지가 이것입니다. 채우는 방향은 가로, 세로, 90도, 180도, 360도 중에서 고릅니다

두 가지가 사람을 자주 헷갈리게 합니다.

• 경계를 안 그은 이미지는 Sliced 로 두어도 Simple 처럼 늘어납니다. Unity 는 경계가 0 이면 그냥 통째로 그립니다. 위 그림에서 경계를 없음으로 두고 Sliced 를 눌러 보면 Simple 과 똑같이 나옵니다
• 목표 크기가 경계 합보다 작으면 경계가 비율대로 줄어듭니다. 좌우 경계가 24 씩인 그림을 폭 40 으로 만들면 모서리도 같이 작아집니다. 그래서 이 이미지는 이 크기 밑으로는 쓰지 말아 주세요 라는 최소 크기를 같이 넘겨 주면 좋습니다

아홉 조각으로 나누는 자리는 사람이 정합니다

경계를 어디에 그을지는 그림을 그린 사람이 제일 잘 압니다. 규칙은 둘입니다.

• 모서리 안쪽으로, 둥근 부분과 테두리 장식이 끝나는 자리 에 긋습니다. 모서리 반경이 24 픽셀이고 테두리가 2 픽셀이면 26 쯤이 안전합니다
• 가운데로 남는 부분은 단색이거나 가로세로로 이어 붙여도 되는 무늬 여야 합니다. 가운데에 로고나 그라데이션 무늬가 있으면 늘어나면서 뭉개집니다

경계는 픽셀 값 입니다. L, R, T, B 네 숫자로 넘기면 그대로 받아 적을 수 있습니다.

임포트 설정에서 두 가지를 봅니다

• Texture Type 은 Sprite (2D and UI) 입니다. 이게 아니면 Image 에 끌어다 놓을 수가 없습니다
• Mesh Type 은 Full Rect 로 둡니다. 기본값인 Tight 는 투명한 부분을 뺀 모양으로 메시를 만들기 때문에 9-slice 가 제대로 안 나옵니다
• 경계는 인스펙터가 아니라 Sprite Editor 창에서 적습니다. 그림 가장자리의 녹색 손잡이를 끌거나 아래쪽 L, R, T, B 칸에 숫자를 칩니다

시안에 적힌 크기가 화면에 그대로 나오게 하려면

Unity 는 픽셀을 그대로 쓰지 않고 Pixels Per Unit 으로 한 번 나눠서 캔버스 크기를 정합니다. 스프라이트의 Pixels Per Unit 이 100 이고 Canvas Scaler 의 Reference Pixels Per Unit 도 100 이면 200 픽셀짜리 그림은 캔버스에서 200 이 됩니다. 인스펙터의 Set Native Size 버튼이 이 크기로 맞춰 주는 버튼입니다.

그래서 이렇게 갈립니다.

• 시안이 1920 × 1080 이고 이미지도 그 기준으로 뽑았으면 Pixels Per Unit 100 그대로 두면 됩니다
• 고해상도 기기를 위해 @2x 로 크게 뽑았으면 Pixels Per Unit 을 200 으로 올립니다. 그러면 화면에서는 시안 크기 그대로 나오면서 픽셀만 두 배로 촘촘해집니다. 이걸 안 올리면 모든 이미지가 두 배로 커진 화면이 됩니다
• 배수를 섞어서 뽑으면 개발자가 이미지마다 다른 값을 넣어야 합니다. 한 프로젝트 안에서는 배수를 통일해서 뽑고, 무슨 배수로 뽑았는지 적어 주는 것 이 가장 확실합니다

Image 인스펙터에는 Pixels Per Unit Multiplier 도 있습니다. 이 값을 키우면 9-slice 의 모서리만 그만큼 얇아집니다. 같은 이미지를 작은 버튼에도 쓰고 싶은데 모서리가 너무 두꺼울 때 쓰는 값입니다.

한 가지 더. Sliced 와 Tiled 로 둔 이미지는 자기 크기를 물어보면 원본 크기가 아니라 경계의 합을 답합니다. 96 × 96 짜리 버튼 배경이라도 경계가 24 씩이면 48 × 48 이라고 말합니다. 크기를 자동으로 맞추는 그룹 안에 이 버튼을 넣으면 생각보다 훨씬 작게 잡히는 이유입니다.

색은 원본 위에 곱해집니다

• 같은 아이콘을 활성, 비활성, 강조 세 가지 색으로 쓸 거면 흰색과 회색만으로 뽑아 주세요. 색은 Unity 쪽에서 넣습니다
• 곱하기라서 어둡게는 되지만 밝게는 안 됩니다. 회색 50 퍼센트로 뽑은 그림은 어떤 색을 넣어도 그 색의 절반 밝기까지만 나옵니다
• 명암이나 질감은 회색 음영으로 남겨 두면 색을 넣어도 그대로 살아납니다
• 색이 절대 안 바뀌는 그림, 예를 들어 캐릭터 일러스트나 브랜드 로고는 색을 넣어 뽑는 것이 맞습니다

투명한 여백도 그대로 비용입니다

투명한 픽셀도 텍스처 메모리를 차지하고, 화면에서도 그 자리를 한 번 칠합니다. 아이콘 주위에 안전 여백을 넉넉히 두고 뽑는 습관은 여기서는 손해입니다. 자리를 띄우고 싶으면 이미지에 여백을 넣는 대신 Unity 쪽에서 간격을 주면 됩니다.

여러 이미지를 한 장으로 묶는 Sprite Atlas 도 이 여백만큼 자리를 잃습니다. 묶는 기준과 압축은 텍스처를 합치는 것이 곧 배칭을 합치는 것에 정리해 뒀습니다. 그림을 넘기는 쪽에서 도와줄 수 있는 것은 한 화면에서 같이 뜨는 것끼리 폴더를 나눠 주는 것 입니다. 로비에서만 쓰는 그림과 전투에서만 쓰는 그림이 한 장에 섞이면 둘 중 하나만 필요한 순간에도 두 장 분량이 메모리에 올라옵니다.

비율이 다른 그림을 같은 칸에 넣을 때

크기가 고정된 자리에 세로로 긴 아이콘과 가로로 긴 아이콘이 섞여 들어가면 각각 다르게 찌그러집니다. Image 의 Preserve Aspect 를 켜면 원본 비율을 지키면서 그 자리 안쪽에 맞춰 들어갑니다. 위 그림에서 Simple 을 고르고 Preserve Aspect 를 켜 보면 목표 크기가 바뀌어도 그림이 안 찌그러집니다.

대신 남는 쪽에 빈 자리가 생깁니다. 칸을 꽉 채워야 하는 디자인이면 아이콘을 다 같은 비율로 뽑아 주는 편이 낫습니다.

시안을 넘길 때 적어 주면 좋은 것

정리

• Image Type 이 늘어나는 방식을 정합니다. 통째로 늘리는 Simple, 아홉 조각으로 나누는 Sliced, 반복하는 Tiled, 채운 만큼 보여 주는 Filled 입니다
• 크기가 변하는 배경은 Sliced 로 두고 경계를 그어야 모서리가 지켜집니다. 경계가 0 이면 Simple 과 똑같이 늘어납니다
• 경계는 모서리 장식이 끝나는 자리에 긋고, 가운데는 늘어나도 되는 부분만 남깁니다. 임포트 설정에서 Mesh Type 은 Full Rect 여야 합니다
• 화면 크기는 픽셀 수를 Pixels Per Unit 으로 나눈 값입니다. @2x 로 뽑았으면 이 값을 200 으로 올려야 시안 크기가 나옵니다
• Image 의 색은 원본에 곱해집니다. 색이 바뀌는 그림은 흰색으로 뽑습니다
• 투명 여백은 메모리와 칠하는 면적을 그대로 잡아먹습니다. 필요 없는 여백은 잘라서 넘깁니다