---
title: "원본을 고치면 전부 따라오는데, 손댄 것만 안 따라온다"
description: "프리팹이 무엇이고 무엇을 어떻게 프리팹으로 만드는지부터 봅니다. 한 번 손댄 값이 왜 원본 수정을 빗나가는지, 시안의 Variant 와 무엇이 다른지, 레이어 이름과 그림 파일을 어떻게 넘겨야 하는지를 정리했습니다."
author: "유니얼"
pubDate: 2026-09-17
category: "game-dev/unity/ui"
tags: ["Unity", "UI", "uGUI"]
canonical: https://blog.unialgames.com/posts/unity-ui-prefab-handoff/
---
버튼 원본의 색을 바꿨습니다. 그런데 어떤 화면은 바뀌고 어떤 화면은 그대로입니다.

버그가 아닙니다. **그 화면에서 누군가 그 값을 한 번 손댔기 때문**입니다. 시안 쪽에서 "여기는 빨강으로" 라고 적어 준 그 예외가 그것입니다.

왜 그런지 보려면 프리팹이 무엇인지부터 봐야 합니다.

## 프리팹이 무엇인가

유니티에서 화면은 오브젝트를 쌓아서 만듭니다. 버튼 하나도 실은 배경 그림과 글자와 눌리는 판이 묶인 오브젝트 묶음입니다. 입력창을 그렇게 풀어 본 것이 [입력창은 컴포넌트 하나가 아니라 오브젝트 묶음이다](/posts/unity-ui-input-field/)입니다.

그 묶음을 **파일 하나로 저장해 둔 것**이 프리팹입니다. 도장이라고 생각하시면 됩니다.

<figure class="diagram">
<svg viewBox="0 0 680 286" role="img" aria-label="프리팹 파일 하나와 그것을 여러 화면에 갖다 놓은 인스턴스들">
<text x="130" y="40" font-size="12.5" fill="var(--accent2)" text-anchor="middle">프로젝트 창 (파일)</text>
<text x="520" y="40" font-size="12.5" fill="var(--accent)" text-anchor="middle">여러 화면에 갖다 놓은 것</text>
<rect x="40" y="90" width="180" height="90" rx="8" fill="var(--accent2)" fill-opacity="0.14" stroke="var(--accent2)"></rect>
<text x="130" y="116" font-size="11.5" fill="var(--text)" text-anchor="middle" font-family="var(--font-mono)">Btn_Confirm.prefab</text>
<rect x="85" y="128" width="90" height="26" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="130" y="146" font-size="11" fill="var(--text)" text-anchor="middle">확인</text>
<text x="130" y="172" font-size="10.5" fill="var(--text-muted)" text-anchor="middle">원본 하나</text>
<rect x="400" y="56" width="240" height="52" rx="7" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="416" y="87" font-size="11" fill="var(--text)">상점 화면</text>
<rect x="545" y="70" width="80" height="24" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="585" y="86" font-size="10.5" fill="var(--text)" text-anchor="middle">확인</text>
<line x1="224" y1="135" x2="396" y2="82" stroke="var(--accent)" stroke-dasharray="4 3"></line>
<rect x="400" y="118" width="240" height="52" rx="7" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="416" y="149" font-size="11" fill="var(--text)">인벤토리 화면</text>
<rect x="545" y="132" width="80" height="24" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="585" y="148" font-size="10.5" fill="var(--text)" text-anchor="middle">확인</text>
<line x1="224" y1="135" x2="396" y2="144" stroke="var(--accent)" stroke-dasharray="4 3"></line>
<rect x="400" y="180" width="240" height="52" rx="7" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="416" y="211" font-size="11" fill="var(--text)">설정 화면</text>
<rect x="545" y="194" width="80" height="24" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="585" y="210" font-size="10.5" fill="var(--text)" text-anchor="middle">확인</text>
<line x1="224" y1="135" x2="396" y2="206" stroke="var(--accent)" stroke-dasharray="4 3"></line>
<text x="40" y="252" font-size="13" fill="var(--text)">원본 하나를 고치면 갖다 놓은 것이 전부 따라옵니다. 그게 프리팹을 쓰는 이유입니다.</text>
<text x="40" y="276" font-size="11.5" fill="var(--text-muted)">복사 붙여넣기로 만든 것은 다릅니다. 원본이 없어서 세 군데를 세 번 고쳐야 합니다.</text>
</svg>
<figcaption>파일 하나와, 그것을 갖다 놓은 것들. 사이에 줄이 이어져 있습니다.</figcaption>
</figure>

- 프로젝트 창에 **`.prefab` 파일 하나**로 있습니다. 이게 원본입니다
- 그걸 화면에 갖다 놓으면 **인스턴스**가 생깁니다. 갖다 놓은 것은 원본과 줄로 이어져 있습니다
- **원본을 고치면 갖다 놓은 것이 전부 따라옵니다.** 같은 버튼이 쉰 군데에 있어도 한 번만 고치면 됩니다

원본을 고치려면 그 파일을 엽니다. 유니티에서는 **프리팹 모드**라고 부르고, 화면이 그 프리팹만 남은 상태로 바뀝니다. 그 안에서 고친 것이 갖다 놓은 것들로 퍼집니다.

프리팹이 아닌 것도 있습니다. **화면에 직접 올려 둔 오브젝트는 원본이 없습니다.** 복사해서 스무 개를 만들어 두면 그건 그냥 스무 개고, 고칠 때도 스무 번 고쳐야 합니다. 시안에서 컴포넌트로 안 묶고 복사 붙여넣기로 스무 개를 만든 것과 같은 상태입니다.

## Variant 는 시안의 Variant 와 뜻이 다릅니다

하는 일이 같으니 용어도 대체로 대응합니다.

<figure class="diagram">
<svg viewBox="0 0 680 262" role="img" aria-label="Figma 의 컴포넌트 용어와 Unity 프리팹 용어의 대응">
<text x="160" y="36" font-size="13" fill="var(--accent2)" text-anchor="middle">Figma</text>
<text x="520" y="36" font-size="13" fill="var(--accent)" text-anchor="middle">Unity</text>
<rect x="40" y="56" width="240" height="34" rx="6" fill="var(--accent2)" fill-opacity="0.14" stroke="var(--border)"></rect>
<text x="160" y="78" font-size="12" fill="var(--text)" text-anchor="middle">Component</text>
<rect x="400" y="56" width="240" height="34" rx="6" fill="var(--accent)" fill-opacity="0.16" stroke="var(--border)"></rect>
<text x="520" y="78" font-size="12" fill="var(--text)" text-anchor="middle">Prefab</text>
<line x1="284" y1="73" x2="396" y2="73" stroke="var(--border)"></line>
<rect x="40" y="100" width="240" height="34" rx="6" fill="var(--accent2)" fill-opacity="0.14" stroke="var(--border)"></rect>
<text x="160" y="122" font-size="12" fill="var(--text)" text-anchor="middle">Instance</text>
<rect x="400" y="100" width="240" height="34" rx="6" fill="var(--accent)" fill-opacity="0.16" stroke="var(--border)"></rect>
<text x="520" y="122" font-size="12" fill="var(--text)" text-anchor="middle">Prefab 인스턴스</text>
<line x1="284" y1="117" x2="396" y2="117" stroke="var(--border)"></line>
<rect x="40" y="144" width="240" height="34" rx="6" fill="var(--accent2)" fill-opacity="0.14" stroke="var(--warn)"></rect>
<text x="160" y="166" font-size="12" fill="var(--text)" text-anchor="middle">Variant</text>
<rect x="400" y="144" width="240" height="34" rx="6" fill="var(--accent)" fill-opacity="0.16" stroke="var(--warn)"></rect>
<text x="520" y="166" font-size="12" fill="var(--text)" text-anchor="middle">Prefab Variant</text>
<line x1="284" y1="161" x2="396" y2="161" stroke="var(--warn)" stroke-dasharray="4 3"></line>
<text x="340" y="156" font-size="9.5" fill="var(--warn)" text-anchor="middle">같지 않음</text>
<rect x="40" y="188" width="240" height="34" rx="6" fill="var(--accent2)" fill-opacity="0.14" stroke="var(--border)"></rect>
<text x="160" y="210" font-size="12" fill="var(--text)" text-anchor="middle">인스턴스 떼어내기</text>
<rect x="400" y="188" width="240" height="34" rx="6" fill="var(--accent)" fill-opacity="0.16" stroke="var(--border)"></rect>
<text x="520" y="210" font-size="12" fill="var(--text)" text-anchor="middle">Unpack Prefab</text>
<line x1="284" y1="205" x2="396" y2="205" stroke="var(--border)"></line>
<text x="40" y="250" font-size="11.5" fill="var(--text-muted)">Variant 만 다릅니다. Figma 는 한 컴포넌트 안의 속성 조합이고, Unity 는 원본을 상속한 별도 에셋입니다.</text>
</svg>
<figcaption>이름이 겹치는 만큼 같은 뜻일 것 같지만, Variant 는 구조가 다릅니다.</figcaption>
</figure>

하나만 다릅니다. **Variant 입니다.**

- 시안 쪽 Variant 는 한 컴포넌트 안에 속성 조합을 넣어 둔 것입니다. 크기가 Large 냐 Small 이냐, 상태가 Default 냐 Disabled 냐를 고르면 그 안에서 바뀝니다
- Unity 의 Prefab Variant 는 **원본을 상속한 별도 에셋**입니다. 매뉴얼 표현으로 "A prefab variant inherits properties from a base prefab. Overrides in the variant take precedence over the base values" 입니다

그래서 시안에서 속성 넷을 조합해 변형 열여섯 개를 만들어 두면, 유니티 쪽에서는 그게 에셋 열여섯 개가 될 수 있습니다. **변형이 정말 열여섯 개 필요한지, 값 하나로 바뀌는 것인지** 시안에 구분해 주시면 그만큼 줄어듭니다.

## 무엇을 프리팹으로 만들고, 어떻게 만드는가

기준은 하나입니다. **두 번 이상 쓰이는가.**

<figure class="diagram">
<svg viewBox="0 0 680 274" role="img" aria-label="한 화면에서 프리팹으로 빼는 것과 화면 안에 그냥 두는 것">
<text x="40" y="30" font-size="13" fill="var(--text)">보상 팝업 한 화면</text>
<rect x="40" y="44" width="440" height="190" rx="10" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<rect x="58" y="62" width="180" height="24" rx="6" fill="var(--border)" fill-opacity="0.3" stroke="var(--border)" stroke-dasharray="4 3"></rect>
<text x="148" y="78" font-size="10.5" fill="var(--text)" text-anchor="middle">제목</text>
<rect x="58" y="100" width="120" height="60" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="118" y="134" font-size="10.5" fill="var(--text)" text-anchor="middle">아이템 칸</text>
<rect x="190" y="100" width="120" height="60" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="250" y="134" font-size="10.5" fill="var(--text)" text-anchor="middle">아이템 칸</text>
<rect x="322" y="100" width="120" height="60" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="382" y="134" font-size="10.5" fill="var(--text)" text-anchor="middle">아이템 칸</text>
<rect x="58" y="180" width="70" height="28" rx="6" fill="var(--border)" fill-opacity="0.3" stroke="var(--border)" stroke-dasharray="4 3"></rect>
<text x="93" y="198" font-size="10.5" fill="var(--text)" text-anchor="middle">리본</text>
<rect x="312" y="180" width="130" height="28" rx="6" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)"></rect>
<text x="377" y="198" font-size="10.5" fill="var(--text)" text-anchor="middle">확인 버튼</text>
<text x="500" y="70" font-size="12" fill="var(--accent)">프리팹으로 뺍니다</text>
<text x="500" y="92" font-size="10.5" fill="var(--text-muted)">이 화면에서 반복되거나</text>
<text x="500" y="110" font-size="10.5" fill="var(--text-muted)">다른 화면에도 나오는 것</text>
<text x="500" y="148" font-size="12" fill="var(--text-muted)">화면 안에 그냥 둡니다</text>
<text x="500" y="170" font-size="10.5" fill="var(--text-muted)">여기서만 한 번 쓰는 것.</text>
<text x="500" y="188" font-size="10.5" fill="var(--text-muted)">배경, 제목, 장식 리본</text>
<text x="40" y="256" font-size="12" fill="var(--text)">화면 자체도 프리팹입니다. 그 안에 아이템 칸 프리팹이 들어가는 것을 중첩이라고 부릅니다.</text>
</svg>
<figcaption>기준은 하나입니다. 두 번 이상 쓰이는가.</figcaption>
</figure>

- **한 화면 안에서 반복되는 것**: 아이템 칸, 목록의 한 줄, 스킬 슬롯. 코드가 실행 중에 개수만큼 찍어 냅니다
- **여러 화면에 같은 모양으로 나오는 것**: 버튼, 토스트, 확인 팝업, 재화 표시줄
- **화면 하나 자체**: 보상 팝업, 인벤토리, 설정 창. 열고 닫는 단위가 곧 프리팹입니다
- **안 만드는 것**: 그 화면에서만 한 번 쓰는 배경, 제목, 장식. 화면 프리팹 안에 그냥 둡니다

만드는 것은 조작 세 가지가 전부입니다.

- **만들기**: 하이어라키에서 묶음의 **맨 위 오브젝트**를 프로젝트 창으로 끌어다 놓습니다. `.prefab` 파일이 생기고, 화면에 있던 것은 그 파일의 인스턴스로 바뀝니다
- **변형 만들기**: 그 파일을 우클릭해서 `Create > Prefab Variant` 입니다. 매뉴얼 표현으로 "right-click a prefab and select Create > Prefab Variant"
- **연결 끊기**: 화면에 있는 인스턴스를 우클릭해서 `Unpack Prefab` 입니다. 되돌릴 수 없으니 웬만하면 쓰지 않습니다

프리팹 안에 프리팹이 들어갈 수도 있습니다. 보상 팝업 프리팹 안에 아이템 칸 프리팹이 들어가는 식이고, 이걸 **중첩**이라고 부릅니다. 이때도 기준은 같습니다. **따로 쓸 일이 있으면 빼고, 없으면 안에 둡니다.** 잘게 쪼갤수록 원본이 많아져서 어느 파일을 고쳐야 하는지 찾는 일이 늘어납니다.

시안 쪽에서 이걸 도와주는 방법은 **컴포넌트로 만든 것과 안 만든 것을 그대로 두는 것**입니다. 시안에서 컴포넌트인 것은 대체로 유니티에서도 프리팹이 됩니다. 반대로 시안에서 복사 붙여넣기로 스무 개를 만들어 두면, 받는 쪽에서는 그게 스무 개 다 따로인지 하나의 반복인지 알 수가 없습니다.

## 손댄 값만 원본을 안 따라옵니다

인스턴스에서 값을 바꾸면 그것이 **override** 가 됩니다. 매뉴얼은 override 를 이렇게 정리합니다.

> When you change any of the following on a prefab instance, Unity treats it as an override: The values of a property. Adding or removing a component. Adding or removing a child GameObject.

그리고 다음 문장이 이 글이 시작한 자리입니다. 도입에서 색이 안 바뀌던 그 화면이 이것입니다.

> An overridden property value on a prefab instance always takes precedence over the value from the prefab asset. This means that if you change a property on a prefab asset, it doesn't have any effect on instances where that property is overridden.

<x-prefab>
<script type="application/json">
{
  "label": "원본을 고쳤을 때 어느 인스턴스가 따라오는가",
  "default": { "prop": 0 },
  "note": "덮어쓴 값이 있는 인스턴스는 그 속성만 원본에서 끊깁니다."
}
</script>
</x-prefab>

읽는 법은 단순합니다.

- **덮어쓰지 않은 속성만** 원본을 따라옵니다
- 덮어쓴 속성은 그 인스턴스에서만 멈춰 있습니다. 나머지 속성은 계속 따라옵니다
- 연결을 끊은(Unpack) 것은 무엇을 바꾸든 안 따라옵니다

그래서 **"이 화면에서만 빨강"** 같은 예외 하나가 나중에 비용이 됩니다. 원본 색을 바꾸는 작업이 그 화면만 빗나가고, 빗나간 것을 사람이 눈으로 찾아야 합니다.

시안에서 도와줄 수 있는 것은 이렇습니다.

- **예외를 만들 거면 예외라고 적어 주세요.** "여기만 다름" 이라고 적혀 있으면 유니티 쪽에서 override 로 둘지 Variant 로 만들지 판단할 수 있습니다
- **같은 예외가 세 군데 이상 나오면 그건 예외가 아닙니다.** 그건 종류가 하나 더 있는 것이고, Variant 로 만들어야 할 것입니다

목록이나 배열을 덮어쓴 경우에는 함정이 하나 더 있습니다. 매뉴얼이 적어 둔 대로, 나중에 원본에서 항목을 넣거나 빼면 "the override stays at the same position" 이라 **덮어쓴 값이 엉뚱한 항목에 붙습니다.** 순서가 있는 목록은 시안에서 항목을 중간에 끼워 넣지 말고 뒤에 붙이는 편이 안전합니다.

## 이름이 곧 검색어입니다

시안 레이어의 이름은 그대로 유니티 하이어라키의 오브젝트 이름이 됩니다. 옮겨 적는 사람이 그냥 그대로 쓰기 때문입니다.

<x-tabs>
<figure class="diagram" data-tab="이름을 안 지었을 때">
<svg viewBox="0 0 680 250" role="img" aria-label="시안 레이어 이름이 하이어라키 이름으로 그대로 넘어오는 모습">
<text x="30" y="26" font-size="13" fill="var(--text)">기본 이름 그대로인 시안</text>
<text x="175" y="44" font-size="12.5" fill="var(--accent2)" text-anchor="middle">시안 레이어</text>
<rect x="30" y="54" width="290" height="152" rx="8" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="48" y="80" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Frame 3</text>
<text x="66" y="106" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Group 12</text>
<text x="84" y="132" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Rectangle 5</text>
<text x="84" y="158" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Text</text>
<text x="66" y="184" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Rectangle 8</text>
<text x="505" y="44" font-size="12.5" fill="var(--accent)" text-anchor="middle">Unity 하이어라키</text>
<rect x="360" y="54" width="290" height="152" rx="8" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="378" y="80" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Frame 3</text>
<text x="396" y="106" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Group 12</text>
<text x="414" y="132" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Rectangle 5</text>
<text x="414" y="158" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Text</text>
<text x="396" y="184" font-size="11.5" fill="var(--warn)" font-family="var(--font-mono)">Rectangle 8</text>
<line x1="326" y1="130" x2="352" y2="130" stroke="var(--text-muted)"></line>
<path d="M356 130 l-7 -4 l0 8 z" fill="var(--text-muted)"></path>
<text x="30" y="236" font-size="11.5" fill="var(--warn)">이 이름이 그대로 넘어옵니다. Rectangle 5 가 무엇인지 한 달 뒤에는 아무도 모릅니다.</text>
</svg>
<figcaption>이름을 안 지으면 넘어온 쪽에서도 못 찾습니다.</figcaption>
</figure>
<figure class="diagram" data-tab="이름을 지었을 때">
<svg viewBox="0 0 680 250" role="img" aria-label="시안 레이어 이름이 하이어라키 이름으로 그대로 넘어오는 모습">
<text x="30" y="26" font-size="13" fill="var(--text)">레이어에 이름을 지어 둔 시안</text>
<text x="175" y="44" font-size="12.5" fill="var(--accent2)" text-anchor="middle">시안 레이어</text>
<rect x="30" y="54" width="290" height="152" rx="8" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="48" y="80" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Popup_Reward</text>
<text x="66" y="106" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Btn_Confirm</text>
<text x="84" y="132" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Img_BG</text>
<text x="84" y="158" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Txt_Label</text>
<text x="66" y="184" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Img_Icon</text>
<text x="505" y="44" font-size="12.5" fill="var(--accent)" text-anchor="middle">Unity 하이어라키</text>
<rect x="360" y="54" width="290" height="152" rx="8" fill="var(--bg-subtle)" stroke="var(--border)"></rect>
<text x="378" y="80" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Popup_Reward</text>
<text x="396" y="106" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Btn_Confirm</text>
<text x="414" y="132" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Img_BG</text>
<text x="414" y="158" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Txt_Label</text>
<text x="396" y="184" font-size="11.5" fill="var(--text)" font-family="var(--font-mono)">Img_Icon</text>
<line x1="326" y1="130" x2="352" y2="130" stroke="var(--text-muted)"></line>
<path d="M356 130 l-7 -4 l0 8 z" fill="var(--text-muted)"></path>
<text x="30" y="236" font-size="11.5" fill="var(--accent)">이름으로 찾습니다. 시안에서 "Btn_Confirm 색 바꿔 주세요" 가 그대로 통합니다.</text>
</svg>
<figcaption>이름이 그대로 검색어가 됩니다.</figcaption>
</figure>
</x-tabs>

규칙은 팀마다 다르지만, 갖춰야 할 것은 셋뿐입니다.

- **종류를 앞에 둡니다.** `Btn_`, `Img_`, `Txt_`, `Popup_` 처럼요. 하이어라키에서 종류로 걸러집니다
- **역할을 적습니다.** `Btn_Confirm` 이지 `Btn_Blue` 가 아닙니다. 색은 나중에 바뀝니다
- **상태는 뒤에 붙입니다.** `Btn_Confirm_Disabled` 처럼요

`Rectangle 12`, `그룹 3`, `최종_수정_2` 는 유니티까지 그대로 따라옵니다. 그리고 그 이름은 **코드에서도 그 이름으로 찾습니다.** 나중에 이름을 바꾸면 찾던 코드가 끊어지는 일도 생깁니다. 그래서 처음에 짓는 편이 쌉니다.

## 벡터는 그대로 못 받습니다

uGUI 의 `Image` 는 스프라이트를 받습니다. 스프라이트는 픽셀 그림입니다. **SVG 를 그대로 끌어다 넣을 수 없습니다.**

벡터를 쓰는 길이 아예 없지는 않습니다. `com.unity.vectorgraphics` 라는 별도 패키지가 SVG 를 스프라이트나 uGUI 용으로 들여오게 해 줍니다. 다만 세 가지를 알고 가야 합니다.

- 아직 **프리뷰 패키지**입니다. 이 글을 쓰는 시점에 3.0.0-preview.7 입니다
- **SVG 1.1 규격의 일부만** 따릅니다("follows a subset of the SVG 1.1 specification"). 시안 툴에서 쓴 효과가 그대로 나온다는 보장이 없습니다
- 들여올 때 **삼각형으로 잘라서** 씁니다("the vector data is tessellated into triangles"). 결국 정점이 생기고, 복잡한 아이콘일수록 정점이 많아집니다

그래서 실무에서는 **PNG 로 뽑아 주시는 쪽이 안전합니다.** 대신 어떤 배수로 뽑았는지와 9-slice 경계를 같이 적어 주세요. 그 이야기는 [버튼 이미지를 통째로 늘리면 모서리가 같이 늘어난다](/posts/unity-ui-image-export/)에 정리해 뒀습니다.

아이콘이 여러 크기로 쓰인다면 **가장 큰 크기 기준으로 한 장**만 주시면 됩니다. 작게 쓰는 쪽은 줄여서 쓰면 되지만, 키우는 쪽은 방법이 없습니다.

## 무엇이 바뀌었는지가 시안보다 중요할 때가 있습니다

시안이 업데이트되면 새 파일이 옵니다. 그런데 받는 쪽이 알아야 하는 건 새 파일이 아니라 **뭐가 달라졌는가** 입니다.

한 줄이면 됩니다. 그리고 그 한 줄을 **값이 바뀐 것과 구조가 바뀐 것으로 나눠** 주시면 더 좋습니다.

- **값이 바뀐 것**: 색, 크기, 문구, 간격. 프리팹 원본에서 고치면 끝납니다
- **구조가 바뀐 것**: 요소가 늘거나 줄거나, 순서가 바뀌거나, 계층이 달라진 것. 이건 다시 만들어야 하는 일에 가깝습니다

둘의 비용이 몇 배 차이 납니다. 같은 "버튼 수정" 이라도 색만 바뀐 것과 아이콘이 하나 늘어난 것은 다른 작업입니다.

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

| 항목 | 적어 줄 것 |
| --- | --- |
| 레이어 이름 | 종류 접두사 + 역할 + 상태. `Rectangle 12` 는 그대로 넘어옵니다 |
| 컴포넌트 | 시안에서 컴포넌트로 묶은 것과 복사해 둔 것을 그대로 |
| 반복 | 같은 모양이 몇 번 나오는지, 개수가 실행 중에 정해지는지 |
| 예외 | "여기만 다름" 이 어디인지. 세 군데 이상이면 종류로 |
| 변형 | 색이나 아이콘만 다른 묶음인지, 구조가 다른 별개인지 |
| 그림 파일 | 벡터 말고 PNG 로. 뽑은 배수와 9-slice 경계 |
| 업데이트 | 값이 바뀐 것과 구조가 바뀐 것을 나눠서 한 줄 |

## 정리

- 프리팹은 **오브젝트 묶음을 파일 하나로 저장해 둔 것**입니다. 갖다 놓은 것들이 그 원본과 줄로 이어져 있습니다
- 시안의 컴포넌트와 같은 자리에 있습니다. **Variant 만 뜻이 다릅니다.** 유니티 쪽은 원본을 상속한 별도 에셋입니다
- **두 번 이상 쓰이면 프리팹으로 뺍니다.** 한 화면에서만 한 번 쓰는 것은 화면 프리팹 안에 그냥 둡니다
- 만드는 것은 하이어라키에서 프로젝트 창으로 끌어다 놓기, 변형은 우클릭 `Create > Prefab Variant`, 끊기는 `Unpack Prefab` 입니다
- 인스턴스에서 한 번 손댄 값은 **원본을 고쳐도 안 따라옵니다.** 나머지 속성은 계속 따라옵니다
- 연결을 끊은 것은 무엇을 바꾸든 안 따라옵니다
- "여기서만 다름" 이 세 군데 이상 나오면 그건 예외가 아니라 종류가 하나 더 있는 것입니다
- **시안 레이어 이름이 그대로 오브젝트 이름이 됩니다.** 종류 접두사와 역할을 적고, 색을 이름에 넣지 않습니다
- 벡터는 그대로 못 받습니다. PNG 로, 가장 큰 크기 기준 한 장으로 주세요
- 시안이 바뀌면 **값이 바뀐 것과 구조가 바뀐 것**을 나눠 적어 주세요. 비용이 몇 배 다릅니다