Today I Learned - Day 47 [UI 클릭을 구현하는 다양한 방법]

보통 화면 상에 '클릭'으로 작동하는 UI를 작성할 때에는 Button 컴포넌트를 자주 이용한다.

그도 그럴게, Unity 상에서 기본으로 제공하는 기능인 덕분에 따로 구현하지 않고도 충분히 실행이 가능하기 때문.

실제로 버그 예방이나 편의성 측면에서 이렇게 Button 컴포넌트로 구성하는 것이 유용한 것도 사실이다.

 

그렇다면, 이 Button은 완벽한 기능인 것일까.

그랬다면, 본인은 이 글을 작성하지 않았을 터다.

그럼 이제, Button 컴포넌트의 단점에 대해서 알아보자.

---

Button 컴포넌트

유니티 초심자가 가장 많이 사용하는 컴포넌트가 무엇인가 하면, 그것은 어쩔 수 없이 이 버튼 컴포넌트가 될 것이다.

어지간하면 게임 시작이나 게임 종료 등을 버튼으로 구성할 것이니 말이다.

 

하지만, 이 Button 컴포넌트는 몇 가지 난점이 존재한다.

 

우선 더블 클릭이나 홀드, 드래그와 같은 기능은 일절 지원하지 않는다.

그리고 우클릭을 지원하지 않는다.

타이틀 같은 화면에서의 동작이라면 좌클릭 만으로도 충분히 동작 가능하기 때문에 큰 문제가 없지만, 인 게임 UI라면 더블 클릭이나 홀드는 물론이고, 우클릭도 어마어마하게 사용하기 때문에, 이 기능이 인게임 상에서는 활용하기가 상당히 난감한 편이다.

 

그렇다면, 이를 해결할 수 있는 방법을 알아보자.

---

Event Trigger 컴포넌트

간단하게 말하자면, Button 컴포넌트의 각 기능을 별개로 정의할 수 있도록 구성된 컴포넌트다.

위 사진이 바로 EventTrigger의 인스펙터 창이다.

[각 요소에 대해서 세부 사항은 https://docs.unity3d.com/kr/530/ScriptReference/EventSystems.EventTrigger.html 참고.]

 

사진으로도 알 수 있듯이, 마우스 동작의 세부 요소들에 대한 반응을 event로 등록하여 설정할 수 있다.

Button과는 달리 각 과정에 대한 변화점을 스크립트로 작성해야 하긴 하지만, 이래저래 상세히 만들 수 있다 보니 만들 수 있는 폭은 Button 보다 훨씬 넓은 편이다.

 

참고로, 우클릭을 사용하려면 입력값인 PointerEventData의 button 변수가 PointerEventData.InputButton.Right인지 확인해야 한다.

[Event Trigger의 세부 기능을 사용하려면  UnityEngine.EventSystems 패키지를 using해야 한다는 점에는 유의하자.]

이는 하술할 IPointer Interface도 마찬가지. 그리고 휠 클릭(PointerEventData.InputButton.Middle)도 사용 가능하다.

---

IPointer Interface

유니티 자체 내장 시스템인 EventSystem와 관계된 인터페이스 그룹으로, 마우스나 터치와 관련된 요소를 작성할 수 있도록 해 주는 인터페이스 체계다.

이 중 IPointerClickHandler는 '종류에 관계 없이 클릭을 인식하는 인터페이스'다.

[참고 URL: https://docs.unity3d.com/2019.1/Documentation/ScriptReference/EventSystems.IPointerClickHandler.html]

 

즉, 클릭의 종류(좌클릭, 우클릭, 휠클릭)에 따른 반응을 '코딩으로' 작성하면 되는 방법.

상단 URL을 참고해서 인터페이스 내부 함수 만 구현하면 된다.

[UnityEngine.EventSystems 패키지를 using해야 한다는 점에는 유의하자.]

 

이외에도 IPointerEnterHandler나 IPointerExitHandler같은 마우스와 관계된 다른 인터페이스들도 존재한다.

이들의 조합으로 원하는 기능을 추가할 수가 있는 셈이다.

참고로, 터치에도 적용된다고 한다. [다만, 터치는 우클릭이 없으므로 구성에 주의가 필요하다.]

 

참고로, 본 기능을 활용하기 위해서는 해당 캔버스에 GraphicRaycaster가 있어야 하고, UI에 Raycast Target이 활성화 되어 있어야 한다. 기본적으로 둘 다 적용되어 있는 상태이긴 하나, 혹여나 문제가 발생한다면 해당 사항을 확인해 보자.

 

여담으로, 이쪽은 잘 활용하면 게임 상의 오브젝트에 클릭을 구현하는 것도 가능하다.

[이 경우, 해당 오브젝트에 Collider가 필요함에 주의하자.]

---

사실, 상술한 두 방법 모두 더블클릭이나 클릭 홀드는 개발자가 직접 개발해야 한다.

다만, 버튼이랑은 달리 두 기능은 그러한 기능을 능동적으로 작성할 수 있다는 것이 가장 큰 차이점.

어차피 어느 정도 숙련되게 된다면 메뉴 버튼을 키보드나 조이패드 등도 지원하도록 수정해야 하는데, 상술한 두 방식에 대해서 익숙해지는 것도 좋을 거 같다.