1. 📖 UI
UI는 User Interface로 사용자가 프로그램에서
가장 직접적으로 마주하는 첫 번째 상호작용 요소입니다.
1-1. 🔖 UI 구성요소
UI는 반드시 Canvas라는 오브젝트에 포함되어 있어야 하며
Canvas는 UI를 배치하는 평면의 도화지입니다.
Canvas와 모든 UI는 일반 3D 오브젝트와는 다르게 UI를 화면에 표기하기 위한 2차원 사각형 내의 위치를 제어하기 위한 Rect Transform 컴포넌트가 포함되어 있습니다.
여기서 Render Mode를 보시면 오버레이, 카메라, 월드 스페이스 3가지가 있습니다.
| 기능 | 위치 | 사용 |
|---|---|---|
| Overlay | 카메라 상관 없이 항상 화면에 고정 | 메뉴, 체력 게이지 |
| Camera | 특정 카메라 기준으로 배치 | 시네마틱 UI |
| World Space | 월드 안 3D 오브젝트처럼 배치 | NPC, player 머리 위 체력바 |
1-2. 🔖 유니티에서 사용하는 UI 시스템
1-2-1. ❌ NGUI (Next-Gen UI)
NGUI는 Unity 공식이 아닌 외부에서 만든 UI입니다.
Unity 이전 버전까지는 Unity 자체에 기본 UI 시스템이 없어서 NGUI를 사용했습니다.
그래서 패키지를 따로 다운로드 후 사용이 가능했으며
성능이 좋고 최적화가 뛰어난 장점이 있긴 합니다만...
유료이고 Unity 에디터와의 통합이 UGUI보다 떨어집니다.
또 커스터마이징을 위해 코드로 많은 작업을 필요하기 때문에 진입장벽이 높습니다.
최근 프로젝트에서는 거의 사용하지 않는 구식 기술로 취급하는 추세긴 한데
조금 오래된 프로젝트를 보면 아직 이 UI를 사용하고 있습니다.
1-2-2. ✔️ UGUI
Unity에서 공식적으로 제공하는 UI 시스템입니다.
Unity의 Canvas, Button, Text, Image 등을 말합니다.
유니티의 렌더링 파이프라인에 통합되어 있기 때문에 호환성이 좋습니다.
그 덕분에 이벤트와의 연결성이 좋아 버튼 클릭, 드래그 같은 입력 처리가 편리합니다.
C# 코드에서 쉽게 제어 가능하고 드래그 앤 드롭으로 UI를 쉽게 만들 수 있어 쉽게 배울 수 있습니다.
하지만 복잡한 UI나 많은 오브젝트가 있을 경우 Draw Call이 급격히 증가해서 최적화가 필수입니다.
1-2-3. 👍 UI Toolkit (최근 추천되는 UI 방식)
UGUI와 마찬가지로 Unity에서 공식적으로 제공하는 UI 시스템입니다.
UGUI는 Canvas를 기반으로 개발하는 UI라면 UI Toolkit은 CSS, XML를 기반으로 합니다.
그래서 입문하기에는 UGUI가 아주 좋지만 최적화 측면에서 상당히 좋지 않아
대규모 프로젝트에서는 UI Toolkit을 주로 사용합니다.
물론 가벼운 UI를 만들 때는 UGUI가 더 유리하기 때문에 게임에서
아직까지는 UGUI를 많이 사용합니다.
대규모인 메타버스 플랫폼, 버츄얼 쪽 시장에서는 UI Toolkit을 많이 사용합니다.
CSS + XML과 유사하므로 웹 개발자라면 익숙한 기능이 많습니다만...
개발에 처음 발을 들인 사람이라면 다루기 어렵습니다.
대신 UI Toolkit는 GPU 친화적이며 가볍고 빠릅니다.
그래서 대규모 UI 관리에 유리하죠.
1-3. 🔖 위치 조정
앞에서 Canvas는 Rect Transform 컴포넌트 가진다고 했습니다.
Rect Transform은 해상도 변경시에도 부모 오브젝트의 위치에 고정하고 위치를 정렬하기 위한 앵커와 회전의 기준점이 되는 피벗을 가지고 있습니다.
1-3-1. ✔️ Anchor
UI 요소가 Canvas의 어디에 붙어 있을지를 결정하는 기준점(상대 좌표)입니다.
화면 크기가 변해도 Anchor 기준으로
UI가 자동으로 위치 조절이 되어 같은 위치에 있도록 만드는 거죠.
즉 (0.5, 0.5) → Canvas의 가운데
(0,1) → Canvas의 좌상단
이런 식으로 좌표로 기준점을 변경할 수 있고,
Preset을 통해 선과 면을 기준으로 설정도 가능합니다.
1-3-2. ✔️ Pivot
앞에서 본 Anchor는 Canvas 그 자체의 위치를 기준으로 했다면
Pivot은 자기 자신 UI 요소의 중심점으로
이 점을 기준으로 크기, 회전, 위치 등을 설정합니다.
좌표로 본다면 (0, 0)은 왼쪽 하단, (1, 1)은 오른쪽 상단을 의미합니다.
1-3-2-1. 💡 응용
체력바를 왼쪽에서 오른쪽으로 줄어들게 하고 싶다면?
→ Pivot을 (0, 0.5)로 두고 왼쪽 기준으로 크기 줄입니다.
회전하는 UI가 중심에서 빙글빙글 돌게 하려면?
→ Pivot (0.5, 0.5)
이런 식으로 응용하며 UI를 완성하면 되겠죠?
