하이어라키 맨 아래가 화면 맨 앞이다

Figma 에서 팝업을 버튼 위로 올리려면 레이어 패널에서 팝업을 위로 끌어 올립니다. Unity 에서 똑같이 하면 팝업이 버튼 뒤로 숨습니다.

Unity 는 앞뒤를 반대 방향으로 셉니다. 이 차이 하나로 시안과 실제 화면이 어긋나는 일이 생각보다 많습니다. 이 글은 Unity UI 가 무엇을 먼저 그리고 무엇을 나중에 그리는지, 그 규칙을 봅니다.

Canvas 밖의 UI 는 보이지 않는다

버튼, 이미지, 텍스트 같은 UI 요소는 전부 Canvas 라는 오브젝트의 자식이어야 화면에 나옵니다. Canvas 밖으로 꺼내면 오브젝트는 남아 있어도 그려지지 않습니다.

Figma 의 프레임과 비슷하다고 생각하고 출발해도 괜찮습니다. 다만 두 가지가 다릅니다.

• 크기를 직접 정하지 않습니다. 대부분의 Canvas 는 게임 화면 크기에 저절로 맞춰집니다
• 그리는 단위입니다. 한 Canvas 안의 요소들은 한 덩어리로 계산되고, 앞뒤 순서도 그 안에서 정해집니다

UI 요소를 처음 만들면 Unity 가 Canvas 와 함께 EventSystem 이라는 오브젝트를 만들어 줍니다. 클릭과 터치를 받는 오브젝트입니다. 쓸모없어 보여서 지우면 버튼이 하나도 안 눌립니다.

Render Mode 세 가지

Canvas 에서 제일 먼저 정하는 것이 Render Mode 입니다. UI 를 게임 화면과 어떤 방식으로 합칠지를 정합니다.

Screen Space - Overlay. 기본값입니다. 카메라가 게임 화면을 다 그린 뒤, 그 위에 UI 를 덮습니다. 유리창에 스티커를 붙이는 것과 같습니다. 게임 속 어떤 물체도 이 UI 앞으로 나올 수 없습니다. HUD 와 메뉴는 대부분 이 모드입니다.

Screen Space - Camera. 지정한 카메라 앞, 정해 둔 거리(Plane Distance)에 UI 판을 세웁니다. 화면에 꽉 차게 보이는 것은 Overlay 와 같지만, 이제 UI 도 카메라가 찍는 물체 중 하나 입니다. 그래서 이펙트나 3D 캐릭터를 UI 앞에 두거나 UI 사이에 끼울 수 있습니다. 대신 카메라 설정의 영향을 받습니다. 원근 카메라라면 UI 를 기울였을 때 원근이 생깁니다.

World Space. Canvas 가 씬 안의 평범한 물체가 됩니다. 크기와 위치를 직접 정하고, 앞에 있는 물체에 가려지기도 합니다. 캐릭터 머리 위 이름표, 게임 속 모니터 화면, VR 메뉴가 이 모드입니다.

디자이너 쪽에서 기억할 것은 하나입니다. “UI 앞에 이펙트나 3D 가 올라오는 연출이 있는가” 가 Render Mode 를 정합니다. 이게 개발 중간에 나오면 캔버스 설정을 바꿔야 하고, 그러면 이미 만든 화면을 전부 다시 확인해야 합니다.

한 캔버스 안에서는 하이어라키 순서

Unity 문서는 이렇게 적고 있습니다. UI 요소는 하이어라키에 적힌 순서대로 그려집니다. 첫 번째 자식을 먼저, 두 번째를 그다음에 그립니다. 겹치면 나중에 그린 것이 위에 보입니다.

그림을 칠하는 순서로 생각하면 자연스럽습니다. 먼저 칠한 위를 나중에 칠한 것이 덮습니다. 하이어라키는 위에서 아래로 읽으니 아래에 있을수록 나중에 칠해지고, 나중에 칠할수록 앞에 보입니다.

Figma 와 Photoshop 의 레이어 패널은 반대입니다. 목록 맨 위가 맨 앞 입니다.

순서는 형제끼리만 바뀐다

하이어라키는 나무 모양이라 순서가 한 줄로 쭉 이어지지 않습니다. 부모를 먼저 그리고, 그 자식들을 전부 그린 뒤에야 다음 형제로 넘어갑니다.

구매 버튼을 상점 창 안에서 맨 아래로 내려도 2 는 3 보다 앞으로 못 나옵니다. 구매 버튼을 보상 팝업보다 앞에 보이게 하려면 방법이 둘뿐입니다. 상점 창과 보상 팝업의 순서를 바꾸거나, 구매 버튼을 상점 창 밖으로 꺼내 부모를 바꾸는 것입니다. Figma 에서 한 그룹의 레이어를 다른 그룹의 레이어 사이에 끼울 수 없는 것과 같은 규칙입니다.

여기서 하나가 더 따라 나옵니다. 자식은 부모 뒤로 갈 수 없습니다. 부모 이미지를 먼저 칠하니 자식은 늘 그 위에 있습니다. 창 테두리나 액자처럼 내용물 위에 겹쳐야 하는 장식 은 부모 이미지에 같이 그려 두면 안 됩니다. 따로 잘라서 마지막 자식으로 둬야 내용물 위로 올라옵니다.

캔버스끼리는 숫자로 정한다

캔버스가 둘 이상이면, 캔버스 사이의 앞뒤는 하이어라키 순서가 아니라 Canvas 에 적은 숫자 로 정합니다. Overlay 모드에서는 Sort Order 이고, 숫자가 클수록 앞입니다. 숫자가 같으면 어느 쪽이 앞일지 장담할 수 없으니, 겹칠 수 있는 캔버스는 숫자를 다르게 줍니다.

보통 이런 식으로 층을 나눕니다.

하이어라키 순서만으로도 겹치게 만들 수는 있습니다. 그래도 캔버스를 나누는 이유가 있습니다.

• 팝업은 어느 화면에서 뜨든 위에 있어야 합니다. 화면 안에 넣어 두면 그 화면 안의 순서에 묶입니다
• 숫자 사이를 비워 두면 (0, 10, 20) 나중에 층이 하나 늘어도 기존 캔버스를 안 건드립니다
• 성능 때문이기도 합니다. 캔버스 안에서 요소 하나가 바뀌면 그 캔버스 전체를 다시 계산합니다. 매 프레임 숫자가 바뀌는 HUD 와 가만히 있는 메뉴를 한 캔버스에 두면 메뉴까지 매번 다시 계산됩니다

캔버스 안에 캔버스를 넣고 Override Sorting 을 켜면, 그 캔버스는 부모와 상관없이 자기 숫자를 가집니다. 튜토리얼에서 화면 전체를 어둡게 덮고 버튼 하나만 딤 위로 꺼내 보여 줄 때 이렇게 합니다. 그 버튼을 딤보다 앞으로 옮기려고 부모를 바꾸면 버튼 위치와 레이아웃이 깨지기 때문입니다.

Camera 와 World Space 모드에서는 Sort Order 대신 Sorting Layer 와 Order in Layer 가 나옵니다. 캔버스가 스프라이트, 파티클과 같은 줄에 서서 순서를 겨루기 때문입니다. Sorting Layer 를 먼저 비교하고, 같은 레이어 안에서는 Order in Layer 가 큰 쪽이 앞입니다.

이펙트를 UI 사이에 끼우기 어려운 이유

이런 연출 요청이 자주 나옵니다. “보상 팝업 뒤에서 빛이 퍼지고, 그 앞에 아이템 아이콘이 있고, 아이콘 위로 반짝이가 튀었으면 좋겠다.”

시안에서는 레이어 넷입니다. Unity 에서는 이게 까다롭습니다. 이유가 둘입니다.

하나. Overlay 캔버스 위에는 아무것도 못 올라갑니다. 파티클은 카메라가 찍는 물체이고, Overlay 는 카메라가 다 찍은 뒤에 덮습니다. 캔버스의 Sort Order 를 아무리 낮추고 파티클의 순서를 아무리 올려도, 파티클은 Overlay UI 뒤에 있습니다.

둘. 한 캔버스 안에는 파티클이 끼어들 틈이 없습니다. 캔버스는 한 덩어리로 순서를 받습니다. 파티클은 캔버스 전체의 앞이나 뒤에는 설 수 있어도, 캔버스 안의 이미지 두 장 사이에는 설 수 없습니다.

그래서 Camera 모드로 두고, 파티클이 끼어야 하는 경계마다 캔버스를 쪼갭니다.

아이콘 캔버스는 팝업 캔버스 안에 넣고 Override Sorting 을 켭니다. 위치는 팝업을 따라가고, 순서만 따로 갖습니다.

캔버스가 늘어나는 게 부담스러우면 다른 길도 있습니다. 파티클을 UI 요소처럼 그려 주는 플러그인 을 쓰면 파티클이 하이어라키 순서를 따릅니다. 이펙트를 스프라이트 시퀀스 애니메이션 으로 만들어 UI 이미지로 넣는 방법도 있습니다. 어느 쪽이든 개발 중간에 바꾸기는 번거로우니 연출 시안이 일찍 나올수록 좋습니다.

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

앞의 규칙들을 거꾸로 보면, 개발자가 시안에서 찾아야 하는 정보가 됩니다.

정리

• UI 는 Canvas 안에 있어야 보이고, Canvas 는 한 덩어리로 그려지는 단위입니다
• Render Mode 는 UI 를 게임 화면과 합치는 방식입니다. UI 앞에 이펙트나 3D 가 와야 하면 Overlay 로는 안 됩니다
• 한 캔버스 안에서는 하이어라키 아래쪽이 앞 입니다. Figma 와 Photoshop 과 반대입니다
• 순서는 형제끼리만 바뀌고, 자식은 부모 뒤로 가지 못합니다
• 캔버스끼리는 숫자로 정합니다. Overlay 는 Sort Order, 나머지는 Sorting Layer 와 Order in Layer 입니다
• 파티클을 UI 사이에 끼우려면 끼어드는 경계마다 캔버스를 쪼개야 합니다