안녕하세요? 오늘은 유니티에서 버튼의 자식 오브젝트이 클릭되는 경우를 막기 위한 방법에 대해 알아보겠습니다.
문제 상황
회색 바탕의 네모 UI가 위 하이어라키 창의 Btn_~에 해당하고,
그 안의 스프라이트들이 자식 오브젝트입니다.
네모 UI에 버튼 컴포넌트를 할당하여 당연히 해당 UI의 범위에서만 클릭이 가능한 줄 알았는데, 게임을 실행해보니 자식 컴포넌트의 해당하는 범위까지 클릭이 반응하는 상황이었습니다. 위 사진에서 자식 컴포넌트의 범위인 파란색 꼭짓점의 네모까지 말이죠.
(사실 자식 컴포넌트의 크기를 줄이려 하였으나, 그렇게 되면 sprite가 의도했던 것보다 작아지거나 찌그러지는 불상사가 생겼습니다. 하지만 만약 그 방법으로 해결이 됐다면 raycast에 대해 알아보는 기회가 사라졌을테니 다행인 것 같습니다. ☺️)
정리해보자면,
다음과 같은 UI 구조가 있다고 가정해봅시다.
Button
├─ Image (아이콘)
└─ Text (버튼 텍스트)
이때,
버튼 배경을 클릭해도 버튼이 눌리고
아이콘이나 텍스트를 클릭해도 버튼이 눌린다
👉 의도한 동작이 아닐 경우가 많습니다.
원인
왜 이런 일이 발생할까요?
Unity UI에서는 다음 컴포넌트들이 Raycast 대상이 됩니다.
Image
Text / TMP_Text
Button (내부적으로 Image 사용)
그리고 이 컴포넌트들에는 공통적으로 Raycast Target이라는 옵션이 있는데요. On 상황이 기본값이기 때문에 따로 설정을 끄지 않으면 버튼에 반응을 합니다.
즉,
자식 오브젝트의 Image / Text도
클릭 판정(Raycast)에 포함되고
결과적으로 부모 Button까지 이벤트가 전달되는 것입니다.
그래서 자식 영역을 눌러도 버튼이 눌리는 것이죠.
해결 방법
그러면 해결 방법은 자식 오브젝트의 raycast target 옵션을 끄면 되는 것 아니냐?!
맞습니다! 껐더니 쉽게 해결이 되었습니다.
결론 👉 “보여주기만 하는 UI 요소”**는 Raycast Target을 끄는 게 좋다.
읽어주셔서 감사합니다.
