서론
유니티 그래픽 유저 인터페이스(UGUI)의 사용법을 알아보고
Observer Pattern에 대해 공부하여 해당 디자인 패턴을 활용한
인터페이스를 몇 가지 제작해보겠다.
UGUI
유니티에서 제공하는 컴포넌트 기반 UI 시스템
코드중심(IMGUI)에서 시각적 구성(UGUI)으로 변경
특징
| 항목 | UGUI 특징 |
|---|---|
| 구조 | Hierarchy 기반 UI 트리 구조 |
| 편집 | Scene 뷰에서 직접 배치/크기 조절 가능 |
| 렌더링 | Canvas를 통해 화면에 출력 |
| 입력 | EventSystem을 통해 클릭/터치 감지 |
| 확장성 | Script와 쉽게 연동 가능 |
구조
핵심 구조로는 Canvas, RectTransform, EventSystem 이 존재.
Canvas
UI의 렌더링 기준이 되는 영역
렌더 모드에 따라 UI 표시 방식이 달라짐.
| 모드 | 설명 | 사용 예시 |
|---|---|---|
| Screen Space - Overlay | 화면 최상단에 직접 그림 | 일반 UI (메뉴, HUD) |
| Screen Space - Camera | 특정 카메라를 기준으로 렌더링 | 3D UI, 카메라 효과와 UI |
| World Space | 3D 오브젝트처럼 씬 안에 배치 | 월드 내 모니터, 상호작용 패널 |
Canvas Scaler
해상도 변화에 대응하기 위한 스케일 조절 기능
주요 옵션
- Constant Pixel Size: 해상도와 관계없이 픽셀 단위 고정
- Scale With Screen Size: 해상도에 따라 자동 조정
- Constant Physical Size: 실제 화면 물리 크기에 맞춤
RectTransform 주요 속성
| 속성 | 설명 |
|---|---|
| Anchors | 부모 기준으로 UI의 고정 위치 정의 |
| Pivot | 회전/스케일 기준점 |
| Position | 앵커 기준 상대 좌표 |
| SizeDelta | UI 크기 조정 값 |
shift + alt 를 통해 줄맞춤 등 편리한 오브젝트 위치이동 가능
주요 UI 컴포넌트
| 컴포넌트 | 설명 | 대표 속성 |
|---|---|---|
| Text (TMP) | 문자를 화면에 표시 | Font Asset, Alignment, Color |
| Image | Sprite 표시용 UI | Source Image, Type, Color |
| Button | 클릭 이벤트 발생 | OnClick(), Transition |
| Toggle | 체크박스 UI | isOn, OnValueChanged |
| Slider | 슬라이드 조절 UI | Value, Min/Max |
| InputField (TMP) | 텍스트 입력 창 | Placeholder, OnEndEdit |
UI 관리 팁
| 항목 | 권장 사항 |
|---|---|
| EventSystem | 씬당 하나만 유지 |
| Prefab 활용 | 공동 UI (버튼, 패널 등) 프리팹화 |
| LayoutGroup / ContentSizeFitter | 자동 정렬 UI에 사용 |
| Sorting Order | 여러 Canvas 사용 시 렌더 우선순위 설정 |
Observer Pattern
객체 간의 1:N 관계를 정의하여
한 객체의 상태가 변경되면 의존 객체들이 자동으로 알림을 받는 디자인 패턴
코드 간 결합도를 낮추고 확장성 높은 이벤트 기반 시스템 구성 가능
예시
- UI 버튼 클릭 시 여러 시스템이 동시반응
- 플레이어 체력변화 -> UI, Sound, Log 전부 업데이트
- 즉시 반영되어야 하는 알림 구조가 필요할 때
실습
옵저버 패턴을 적용한 TimerUI를 UGUI를 활용하여 제작해보자.
게임 진행 시간을 UI로 표시하는 기능을 만들려고 한다.
일단 기존 방식으로 기본 틀을 만들어 보겠다.
1. 인터페이스 제작
시간 알림 받을 관찰자가 구현할 메서드 정의
2. 주시 대상(TimerUI.cs) 제작
시간 관리, 옵저버 저장 및 추가/제거 함수
3. TimerDisplayObserver.cs 제작
-
ITimerObserver 인터페이스 상속
-
using TMPro; 를 명시해야 된다길래 추가.
-
타이머를 기록, 옵저버를 저장하는 타이머UI 직렬화
-
숫자가 표시될 텍스트UI를 직렬화
Update마다 타이머가 나오게 만들고
00분:00초로 나오도록 스트링 변환
일단 TMP 활용법을 검색한대로 따라해봤는데 결과는?
시간이 안 늘어난다
문제점 찾다 다시 확인하니
타이머가 01:01로 되어있는 모습
00:00 앞 뒤가 둘 다 분을 나타내는 중인 듯 하다.
{0:00} : {0:00} 에서
{0:00} : {1:00} 로 변경
결과는??
멀쩡히 작동하는 듯 보인다
아니네 뭔가 이상하게 작동한다
정수형으로 변환해두면 괜찮을 거 같음
구현 완료
마무리
플레이어 사망 시, 타이머를 멈추는 기능은 구현했는데
게임이 종료되는 대신 타이머를 멈추고 다음 타자를 정한 뒤 해당 위치에서 다시 시작하는
바톤 터치 방식으로 게임을 구현하고 싶어서 일단 고민중.
