UI 툴킷: 프로그래머와 아티스트를 위한 신규 데모 및 기존 데모 업데이트

UI 툴킷을 사용하여 전문적인 게임 내 UI를 개발하는 프로그래머와 아티스트/디자이너들의 다양한 관점을 지원하기 위해 신규 및 업데이트된 교육용 샘플 2개를 새롭게 공개합니다.

UI 툴킷은 게임 및 애플리케이션, Unity 에디터용 커스텀 확장, 런타임 디버깅 툴의 확장 가능한 고성능 런타임 UI를 개발하기 위한 다양한 툴을 제공합니다. 웹 페이지나 애플리케이션을 개발한 경험이 있다면 UI 툴킷의 핵심 개념과 워크플로가 익숙하실 겁니다.

교육용 샘플의 목표는 UI 툴킷을 사용하여 반응성과 확장성이 뛰어난 UI를 제작할 수 있도록 지원하는 것입니다. 프로그래머를 위한 새로운 데모인 QuizU와 아티스트 및 디자이너를 위한 업데이트된 UI 툴킷 샘플인 드래곤 크래셔(Dragon Crashers)는 서로 다른 프로젝트로, 두 프로젝트 모두 방대한 교육용 콘텐츠를 갖추고 있습니다.

QuizU는 인터랙티브 퀴즈 애플리케이션의 프로그래머 중심 샘플로, 여러 화면과 게임 플로 관리로 구성되어 있으며 작지만 기능적인 게임에서 다양한 디자인 패턴을 활용하여 여러 UI 툴킷 컴포넌트가 연동하는 방식을 보여 줍니다.

이 데모는 두 부분으로 구성됩니다. 하나는 UI 툴킷의 다양한 측면을 시연하는 10개의 쉽고 간단한 샘플이며, 다른 하나는 10개의 씬에 사용된 여러 기법이 하나의 완전한 프로젝트에 통합된 미니 퀴즈 게임입니다.

미니멀한 스타일이 적용된 미니 게임을 진행하면서 설계 세부 사항에 크게 신경 쓰지 않고 UI 구현의 메카닉에 집중할 수 있습니다.

퀴즈 게임에서는 게임 플로에 상태 패턴을 사용하고, 여러 메뉴 화면을 관리하고, MVP(Model View Presenter) 패턴을 사용하고, UI 툴킷에서 이벤트 처리를 구현하는 방법 등을 설명합니다. 매우 간단한 퀴즈 게임 메카닉의 게임플레이를 보이지만 실제 프로젝트에서 사용할 수 있는 구현 기법을 배우고 익히는 데 중점을 두고 제작되었습니다.

프로젝트에 이러한 디자인 패턴을 일관되게 적용하면 코드의 가독성을 높이고 더 깔끔한 코드 베이스를 구축할 수 있습니다. 디자인 패턴을 적용하면 리팩터링과 테스트 시간을 단축할 수 있을 뿐 아니라 팀 전체가 개발 프로세스 전반에 투입하는 시간을 줄일 수 있습니다.

게임 컴포넌트가 이벤트를 통해 서로 소통하는 이벤트 기반 아키텍처는 확장성과 테스트 용이성을 위한 느슨한 결합을 촉진합니다.

데모의 두 번째 부분은 10개의 작은 데모 씬으로 구성됩니다. 각 데모 씬은 특정 기법이나 기능을 나타냅니다. 차기 프로젝트에서 UI 툴킷을 사용할 방법을 알아보기 위한 일종의 레시피라고 생각할 수 있습니다. 다음은 데모 씬을 통해 알아볼 수 있는 UI 툴킷의 몇 가지 기능과 기법입니다.

• UXML 및 시각적 트리: UXML 파일은 UI 요소의 계층 구조를 형성합니다. 시각적 트리는 사용자 인터페이스의 청사진과도 같습니다.
• Flexbox: Flexbox(Flexible Box Layout Model)는 하나의 컨테이너 안에서 동적으로 UI 요소를 배열하기 위한 효율적인 레이아웃 모델을 제공합니다.
• USS(Unity Style Sheet): USS를 사용해 미리 정의된 스타일로 UI 요소를 커스터마이즈할 수 있습니다. 스타일 시트를 바꾸는 것만으로 UI의 디자인을 변경할 수 있습니다.
• UQuery: UQuery는 복잡한 UI 요소의 계층 구조를 검색하는 과정을 간소화하여 시각적 트리 내에서 특정 UI 컴포넌트로 원활하게 이동할 수 있도록 지원합니다.
• 유사 클래스: 유사(Pseudo) 클래스는 최소한의 추가적인 코드로 인터랙티브 애니메이션 UI 요소를 만드는 데 사용할 수 있으며, 이를 통해 시각적 인터페이스에 재미를 더할 수 있습니다(예: 마우스 커서를 올리면 커지는 버튼, 선택하면 색상이 바뀌는 텍스트 필드).
• UI 툴킷 이벤트 시스템: UI 툴킷에는 복잡한 계층 구조 전반에 걸쳐 UI의 클릭, 변경 사항 및 포인터 입력을 처리하도록 설계된 자체 이벤트 시스템이 있습니다.
• 매니퓰레이터: 관련 이벤트 콜백이 하나의 클래스로 캡슐화된 매니퓰레이터는 재사용성을 높이며 사용자 인터랙션을 쉽게 정의할 수 있도록 합니다(예: 인벤토리 시스템을 위한 클릭-앤-드래그 매니퓰레이터, 핀치로 확대/축소하기 위한 제스처 매니퓰레이터 등).
• 커스텀 컨트롤: 데모에서는 UxmlFactory 및 UxmlTraits 클래스를 통해 커스텀 VisualElement를 정의하고 인스턴스화하는 방법을 보여 줍니다. 커스텀 컨트롤은 스크립트 또는 UI 빌더를 통해 재사용할 수 있습니다.

Unity 2022 LTS를 사용하여 QuizU를 다운로드하세요. 데모와 함께 Unity Discussions에 게시된 일련의 문서도 참고하면 좋습니다. 해당 문서를 아래에 정리했습니다.

• 최신 UI 툴킷 샘플 프로젝트 QuizU 시작하기
• QuizU: 게임 플로를 위한 상태 패턴
• UI 툴킷에서 메뉴 화면 관리
• MVP(Model View Presenter) 패턴
• UI 툴킷에서 이벤트 처리
• UI 툴킷 성능 팁

유니티는 2022년 9월 UI 툴킷 샘플 드래곤 크래셔를 출시했습니다(출시 블로그 게시물 참조). 2D 미니 RPG 프로젝트 드래곤 크래셔에 적용된 완전한 기능을 갖춘 인터페이스로 이루어진 이 데모는 실제 애플리케이션에서의 UI 툴킷 활용 기법을 보여 줍니다. 이 데모는 2022년 말에 공개된 Unity에서의 사용자 인터페이스 디자인 및 구현(영문) 전자책과 함께 제공됩니다.

Unity 2022 LTS용 UI 툴킷 샘플 드래곤 크래셔의 새로운 버전을 지금 다운로드하세요. 최신 버전에서 개선된 사항과 업데이트된 기능은 다음과 같습니다.

• UI 툴킷의 테마 및 GeometryChangedEvent를 통한 런타임 가로 및 세로 화면 모드 지원
• 디바이스의 사용 가능한 화면 영역 내에 UI 기능을 포함하도록 하는 SafeArea API 구현
• 모바일 디바이스의 fps 한도를 60fps로 상향
• 리팩터링되고 간소화된 선택자 및 USS 스타일 시트
• 고해상도 아이콘
• 다양한 화면 비율 및 일부 커서 비일관성에 대해 VFX 생성 위치 개선 및 수정
• 더 정돈된 UI 아키텍처를 위한 디자인 패턴 리팩터링
• Tutorial Inspector 창을 통해 새로운 학습 콘텐츠 제공

업데이트된 프로젝트를 위한 사용자 가이드도 추가되었습니다. 이 가이드에는 데모에서 사용된 기법과 기능을 더 효과적으로 이해할 수 있도록 지침 콘텐츠의 개선을 요청한 사용자들의 피드백이 반영되었습니다.

마지막으로, 데모를 원활하게 탐색할 수 있도록 돕는 프로젝트의 동영상 가이드를 지금 사용할 수 있습니다. 아래에서 확인해 보세요.

QuizU와 업데이트된 UI 툴킷 샘플 드래곤 크래셔를 통해 유용한 팁을 많이 얻으셨으면 합니다. Unity 베스트 프랙티스 허브에서 프로그래머와 아티스트, 테크니컬 아티스트, 디자이너를 위한 유니티의 고급 전자책을 이용하실 수 있습니다.