유니티 팝업 닫기 완벽 가이드 : 외부 클릭으로 팝업 닫는 기능 구현하기!

유니티 팝업 닫기 완벽 가이드 : 외부 클릭으로 팝업 닫는 기능 구현하기!

 

게임이나 앱을 개발할 때, 팝업 창을 띄우고 사용자 경험을 향상시키기 위해 팝업 외부를 클릭하면 팝업이 닫히는 기능은 필수입니다. 이번 포스트에서는 유니티를 사용하여 이 기능을 구현하는 방법을 단계별로 설명하겠습니다.

 

구현 목표

팝업 외부를 클릭하면 팝업이 닫히도록 구현하겠습니다.

• 팝업: UI Canvas에 위치한 Panel
• 외부 클릭 감지: 팝업 영역 외부 클릭 이벤트 감지

 

단계별 구현 방법

1. 기본 UI 구성

Canvas 생성

• Hierarchy 창에서 Canvas를 생성합니다.
• Canvas 아래에 팝업과 백그라운드 영역을 배치할 Panel을 추가합니다.

 

Background Panel 추가

• Popup 뒤에 위치할 Background Panel을 생성합니다.
• 크기를 화면 전체로 설정(Anchor를 바꾼 후 Left, Top, Right, Bottom을 0으로 설정합니다.)

• Image 컴포넌트를 추가하고 투명도 있는 검정색을 지정해 팝업 배경 역할을 합니다.

 

• Button컴포넌트도 추가해줍니다. 트랜지션을 None으로 설정하여 추가 동작을 제거합니다.

 

Popup Panel 추가

• Popup이라는 이름으로 Panel을 생성하고, Image컴포넌트를 추가하여 눈에 띄도록 배경색을 지정합니다.
• 크기를 조절하여 팝업처럼 보이도록 구성합니다.

 

 

 

Canvas 구조 예시:

- Canvas
  - Background (Panel)
  	- Popup (Panel)

 

 

2. 스크립트 작성: 외부 클릭 감지

PopupCloser.cs

using UnityEngine;
using UnityEngine.EventSystems;

public class PopupCloser : MonoBehaviour, IPointerClickHandler
{
    [SerializeField] private GameObject popup;

    public void OnPointerClick(PointerEventData eventData)
    {
        if (popup != null)
        {
            popup.SetActive(false);
        }
    }
}

3. 스크립트 적용

Background에 스크립트 연결

• Background Panel에 PopupCloser 스크립트를 추가합니다.

• Popup 변수에 Popup Panel을 드래그하여 연결합니다.

Raycast Target 설정 확인

• Background Panel의 Image 컴포넌트에서 Raycast Target이 체크되어 있는지 확인합니다.
• Popup Panel의 하위 오브젝트도 Raycast Target이 필요한 경우, Popup의 이벤트가 차단되지 않도록 조정합니다.
• Popup Panel에 EventTrigger 컴포넌트를 추가하고 AddNewEventType을 눌러 PointerClick Event를 추가합니다.
• PointerClick 은 Raycast를 막아 팝업창 뒤에있는 버튼이 클릭되지 않게 막아줍니다.

4. 실행 테스트

1. Play 모드에서 팝업을 활성화합니다.
2. Popup 영역 외부를 클릭했을 때, 팝업이 닫히는지 확인합니다.

추가 팁

• 애니메이션 추가
  팝업이 닫힐 때 페이드 아웃 효과를 추가하면 UX가 더 좋아집니다.
• 다중 팝업 처리
  여러 팝업이 있는 경우, 스크립트를 수정하여 각각의 팝업을 제어하도록 확장할 수 있습니다.

 

끝맺음
이번 가이드를 통해 팝업 외부 클릭으로 닫는 기능을 쉽고 빠르게 구현하셨길 바랍니다.
질문이나 추가 요청 사항이 있다면 언제든 댓글로 알려주세요!