[Unity] Canvas Order 설정으로 팝업창 구현

팝업창이나 다른 페이지 위에 올라가는 페이지 UI 를 구성하기 위해 Layer Order 를 조정하는 것이 깔끔한데, 이렇게 Layer Order 를 조정해주는 컨테이너 성격의 컴포넌트가 Canvas 컴포넌트.

이런 구성입니다. 기본 Canvas 는 Order in Layer 가 0 이고, 이 갚이 클수록 위로 올라옵니다. Scene 에 배치하고 상수를 입력하기보다는, 코드에서 Order in Layer 값을 설정하도록 하면 UI 댑스를 관리하기엔 좋을 것 같네요.

​

Canvas 컴포넌트 아래에는 Graphic Raycaster 라는 컴포넌트가 있는데, 이 컴포넌트가 없으면 아래 깔린 다른 UI 가 클릭 이벤트 등을 받아버리는 문제가 생깁니다. 그래서 Graphic Raycaster 컴포넌트를 붙여서, 현재 Canvas 에서 이벤트를 감지하도록 해야 합니다.

https://docs.unity3d.com/kr/current/Manual/script-GraphicRaycaster.html

그래픽 레이캐스터 - Unity 매뉴얼

이런 구성입니다.

"그래픽 레이캐스터를 설정하여 후면 그래픽스를 무시하거나 그 앞에 있는 2D 또는 3D 오브젝트에 의해 가려지도록 설정할 수 있습니다."

Ignore Reversed Graphics 옵션을 체크하면 현재 Canvas 보다 Order in Layer 값이 낮은 Canvas 에 속한 오브젝트 이벤트는 핸들링 하지 않습니다.

​

제일 아래 놓이는 UI 는 Order in Layer 값이 0인 기본 Canvas 에 셋팅하고, 팝업창으로 구성할 GameObject 엔 새로운 Canvas 를 추가하고 Order in Layer 값은 1 이상으로. Graphic Raycaster 도 추가해서 Order in Layer 값이 낮은 이벤트를 막아주면 끝.

.