원본을 고치면 전부 따라오는데, 손댄 것만 안 따라온다

버튼 원본의 색을 바꿨습니다. 그런데 어떤 화면은 바뀌고 어떤 화면은 그대로입니다.

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

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

프리팹이 무엇인가

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

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

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

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

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

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

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

하나만 다릅니다. 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” 입니다

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

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

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

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

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

• 만들기: 하이어라키에서 묶음의 맨 위 오브젝트를 프로젝트 창으로 끌어다 놓습니다. .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.

읽는 법은 단순합니다.

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

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

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

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

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

이름이 곧 검색어입니다

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

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

• 종류를 앞에 둡니다. 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 경계를 같이 적어 주세요. 그 이야기는 버튼 이미지를 통째로 늘리면 모서리가 같이 늘어난다에 정리해 뒀습니다.

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

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

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

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

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

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

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

정리

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