Unity에서 UI 렌더링 순서 변경하기 (겹쳐진 요소 위, 아래 위치 변경)

Unity에서 UI 렌더링 순서를 변경하는 방법에 대해 알아보겠습니다.
여러 UI 요소가 겹쳐있을 때, 어떤 요소가 다른 요소들 앞에 표시되어야 할지 결정하는 것은 게임 개발의 중요한 부분입니다.

Unity에서는 이를 위해 Hierarchy 순서, Sorting Layer와 Order in Layer를 제공합니다.

이미지 요소의 렌더링 순서 변경

Hierarchy에서의 순서 변경

Unity에서는 Hierarchy에 나열된 순서에 따라 UI 요소가 렌더링됩니다. 이는 같은 부모 아래에 있는 객체에만 적용됩니다. Hierarchy에서 위쪽에 있는 UI 요소가 먼저 렌더링되며, 아래쪽에 있는 요소가 마지막에 렌더링됩니다. 따라서, 순서를 변경하려면 Hierarchy에서 드래그하여 원하는 위치로 이동하면 됩니다.

Hierarchy

Sorting Layer와 Order in Layer 변경

2D 게임 개발 시에는 각 렌더러가 어떤 Sorting Layer에 속해 있는지와 그 Order in Layer 값이 무엇인지에 따라 렌더링 순서가 결정됩니다. Sorting Layer는 렌더러가 렌더링되는 순서를 그룹으로 나눌 때 사용되며, Order in Layer는 동일한 Sorting Layer 내에서 렌더링 순서를 결정합니다.

Sorting Layer와 Order in Layer

이 값들은 Sprite Renderer나 Canvas 컴포넌트에서 설정할 수 있습니다.

만약 이미지가 UI 요소(예: Image 컴포넌트를 사용하는 경우)라면, 각 이미지를 포함하는 Canvas 컴포넌트의 Sorting Layer와 Order in Layer 값을 변경하여 렌더링 순서를 조절할 수 있습니다. 여기에서도 Order in Layer 값이 더 큰 요소가 더 나중에 렌더링되어 앞에 표시됩니다.

텍스트 요소의 렌더링 순서 변경

텍스트를 배경 이미지 앞에 위치시키려면, 해당 텍스트의 Sorting Layer를 이미지보다 높게 설정하거나, 같은 Sorting Layer 내에서 텍스트의 Order in Layer를 이미지보다 높게 설정해야 합니다.

이상으로, Unity에서 UI 요소의 렌더링 순서를 조절하는 방법에 대해 알아보았습니다.