[unity] 모듈 제작 : 팝업 시스템 만들기(1)

Unity에서 UGUI를 사용하여 빌더 패턴을 통해 공통 팝업 시스템을 만드는 방법에 대해 알아보자.

 

1. 팝업 시스템 소개

유니티에서 각 씬이나 화면마다 팝업에 해당하는 UI를 구성하고, 이벤트를 연결해주는 작업은 상당히 많은 시간을 소비하게 한다. 따라서 자주 사용하는 팝업 시스템 같은 요소는 공통화 시스템으로 제작하여 싱글톤 패턴으로 인스턴스를 공유해서 사용하면 개발 시간 절약 및 유지보수에 상당히 유용하다.

 

따라서 이번 글에서는 싱글톤 패턴과 빌더 패턴을 사용하여, 팝업 시스템(모듈)을 만들어 보고자 한다.

싱글톤 패턴을 통해, 다양한 씬에서 하나의 인스턴스를 가지고 호출할 수 있게 할 수 있는 장점이 있으며,

빌더 패턴을 사용하면, 팝업의 필요한 데이터만 설정할 수 있어 가독성도 좋아지고, 유연성도 확보할 수 있다.

 

공통 팝업의 기능은 제목, 내용, 버튼의 3개의 항목으로 구성하며 경고, 선택 내용, 메시지, 공지 등의 정보를 사용자에게 알려주는 기능을 하도록 구성해보자.

 

2. 사전 준비

좀 더 빠른 개발을 위해 두 가지 무료 에셋을 추가해 주겠다.

 

1. LeanTween 에셋을 추가해 주자.

LeanTween은 팝업 Show / Hide 시 약간의 트윈 애니메이션 효과를 위한 무료 TweenAsset이다.

LeanTween Download

LeanTween | 애니메이션 도구 | Unity Asset Store

Tween Asset은 개인적으로 Dotween이 제일 좋긴 한데 유료 에셋이기 때문에 우선 LeanTween으로 제작을 해보고, Dotween을 보유하고 있다면, 추후 트윈 부분만 교체를 해주면 된다.

해당 Tween Asset은 팝업이 Show/Hide 시에 Scale 효과 및 좌에서 화면 가운데로 나오는 효과, 알파 값 0->255로 서서히 나오는 효과 등의 구현을 도와준다.

 

2. SerializableDictionary 에셋을 추가해 주자.

Dictionary를 Serialize(에디터에서 볼 수 있는) 확장해주는 무료 에셋이다.

SerializableDictionary Download

SerializableDictionary | 기능 통합 | Unity Asset Store

유니티에서는 Dictionary를 Serialize해도 현재 에디터에서 볼 수가 없다. 해당 에셋은 이런 부분을 보완해 주는 에셋이다.

 

3. 에셋을 추가한 후 최종 폴더 구조는 아래와 같이 구성하자.

다운로드한 에셋은 Library라는 폴더를 만들어서 넣어주었다.

Modules/Popup 폴더를 만들고, Images, Prefabs, Scripts 폴더를 만들어주자!

 

이제 준비 과정은 끝났다.

다음 편에서는 UI 구성에 대해 알아보자.