---
title: "버튼 이미지를 통째로 늘리면 모서리가 같이 늘어난다"
description: "버튼 배경 한 장을 여러 크기로 쓰려면 이미지를 아홉 조각으로 나눠야 합니다. Image Type 넷이 늘어나는 방식, 9-slice 경계, Pixels Per Unit, 색 곱하기, 투명 여백을 그림으로 봅니다."
author: "유니얼"
pubDate: 2026-09-16
category: "game-dev/unity/ui"
tags: ["Unity", "UI", "uGUI"]
canonical: https://blog.unialgames.com/posts/unity-ui-image-export/
---
버튼 배경 한 장을 가로로 긴 버튼, 정사각 버튼, 작은 버튼에 돌려 씁니다. 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 네 숫자로 넘기면 그대로 받아 적을 수 있습니다.
## 임포트 설정에서 두 가지를 봅니다
9-slice 를 쓰려면 Mesh Type 이 Full Rect 여야 합니다. 경계는 Sprite Editor 에서 적습니다.
- **Texture Type** 은 `Sprite (2D and UI)` 입니다. 이게 아니면 Image 에 끌어다 놓을 수가 없습니다
- **Mesh Type** 은 `Full Rect` 로 둡니다. 기본값인 `Tight` 는 투명한 부분을 뺀 모양으로 메시를 만들기 때문에 9-slice 가 제대로 안 나옵니다
- 경계는 인스펙터가 아니라 **Sprite Editor** 창에서 적습니다. 그림 가장자리의 녹색 손잡이를 끌거나 아래쪽 L, R, T, B 칸에 숫자를 칩니다
## 시안에 적힌 크기가 화면에 그대로 나오게 하려면
같은 PNG 라도 Pixels Per Unit 에 따라 화면에서의 크기가 달라집니다.
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** 도 이 여백만큼 자리를 잃습니다. 묶는 기준과 압축은 [텍스처를 합치는 것이 곧 배칭을 합치는 것](/posts/unity-sprite-atlas/)에 정리해 뒀습니다. 그림을 넘기는 쪽에서 도와줄 수 있는 것은 **한 화면에서 같이 뜨는 것끼리 폴더를 나눠 주는 것** 입니다. 로비에서만 쓰는 그림과 전투에서만 쓰는 그림이 한 장에 섞이면 둘 중 하나만 필요한 순간에도 두 장 분량이 메모리에 올라옵니다.
## 비율이 다른 그림을 같은 칸에 넣을 때
크기가 고정된 자리에 세로로 긴 아이콘과 가로로 긴 아이콘이 섞여 들어가면 각각 다르게 찌그러집니다. Image 의 **Preserve Aspect** 를 켜면 원본 비율을 지키면서 그 자리 안쪽에 맞춰 들어갑니다. 위 그림에서 Simple 을 고르고 Preserve Aspect 를 켜 보면 목표 크기가 바뀌어도 그림이 안 찌그러집니다.
대신 **남는 쪽에 빈 자리가 생깁니다.** 칸을 꽉 채워야 하는 디자인이면 아이콘을 다 같은 비율로 뽑아 주는 편이 낫습니다.
## 시안을 넘길 때 적어 주면 좋은 것
| 항목 | 적어 줄 것 |
| --- | --- |
| 크기가 변하는 배경 | 9-slice 경계 L, R, T, B 픽셀 값과 이 이미지의 최소 크기 |
| 뽑은 배수 | @1x 인지 @2x 인지, 어떤 해상도 기준인지 |
| 색이 바뀌는 그림 | 흰색이나 회색으로 뽑았다는 표시. 바뀌는 색 목록 |
| 게이지, 쿨타임 | 채워지는 방향과 시작 지점, 시계 방향인지 반대인지 |
| 반복 무늬 | 이어 붙이는 무늬라는 표시와 한 조각 크기 |
| 여백 | 투명 여백을 잘라냈는지, 남겨야 한다면 그 이유 |
| 묶음 | 같은 화면에서 함께 뜨는 그림 묶음 |
## 정리
- Image Type 이 늘어나는 방식을 정합니다. 통째로 늘리는 Simple, 아홉 조각으로 나누는 Sliced, 반복하는 Tiled, 채운 만큼 보여 주는 Filled 입니다
- 크기가 변하는 배경은 Sliced 로 두고 경계를 그어야 모서리가 지켜집니다. 경계가 0 이면 Simple 과 똑같이 늘어납니다
- 경계는 모서리 장식이 끝나는 자리에 긋고, 가운데는 늘어나도 되는 부분만 남깁니다. 임포트 설정에서 Mesh Type 은 Full Rect 여야 합니다
- 화면 크기는 픽셀 수를 Pixels Per Unit 으로 나눈 값입니다. @2x 로 뽑았으면 이 값을 200 으로 올려야 시안 크기가 나옵니다
- Image 의 색은 원본에 곱해집니다. 색이 바뀌는 그림은 흰색으로 뽑습니다
- 투명 여백은 메모리와 칠하는 면적을 그대로 잡아먹습니다. 필요 없는 여백은 잘라서 넘깁니다