에셋 스토어의 새로운 UI 툴킷 샘플

Unity 2021 LTS에서 제공하는 UI 툴킷의 여러 기능과 리소스 및 툴을 사용해 보세요. 다양한 게임 애플리케이션과 에디터 확장 기능에서 어댑티브 런타임 UI를 만들고 디버깅할 수 있습니다. 직관적인 워크플로로 아티스트와 프로그래머, 디자이너 등 다양한 분야의 Unity 크리에이터가 최대한 신속하게 UI 개발을 시작할 수 있습니다.

성능과 확장성 개선 등 UI 툴킷의 주요 이점에 대한 내용은 이전 블로그를 참조하세요. Mechanistry와 같은 스튜디오에서는 이미 Timberborn 게임에 UI 툴킷을 사용하고 있습니다.

Unity UI도 3D 월드에서 UI 위치를 지정하고 조명을 설정할 때 사용할 수 있는 솔루션이지만, Unity 2021 LTS부터는 런타임 UI에 UI 툴킷을 사용하는 것이 좋습니다. UI 툴킷은 특히 스크린 공간의 오버레이 UI에 효과적이며, 다양한 화면 해상도에 맞게 확대/축소도 가능합니다.

따라서 유니티는 UI 툴킷을 활용한 UI 개발을 보다 효과적으로 지원하기 위해 두 개의 새로운 학습 리소스를 공개합니다.

• UI 툴킷 샘플 – 드래곤 크래셔(Dragon Crashers): 에셋 스토어에서 지금 무료로 다운로드할 수 있습니다.
• Unity의 사용자 인터페이스 디자인 및 구현: 몇 주 후에 공개될 무료 전자책입니다. 공개 후에 받아 보려면 여기에서 사전 등록해 주세요.

아래에서 UI 툴킷 샘플 프로젝트의 주요 기능에 대해 더 자세히 알아보세요.

UI 툴킷 샘플에서는 애플리케이션에 UI 툴킷을 활용하는 방법을 확인할 수 있습니다. 이 데모에서는 2D 프로젝트 드래곤 크래셔의 일부에 모든 기능을 갖춘 인터페이스를 적용하여 제공합니다. 드래곤 크래셔는 런타임 시 Unity 2021 LTS UI 툴킷 워크플로를 사용하는 미니 RPG 게임입니다.

다음은 샘플 프로젝트에서 설명하는 몇 가지 작업입니다.

• USS(Unity 스타일 시트) 파일의 선택자로 스타일 지정 및 UXML 템플릿 사용
• 원형 측정기, 탭 뷰 등 커스텀 컨트롤 제작
• 슬라이더, 토글 버튼과 같은 요소의 디자인 커스터마이즈
• UI 오버레이 효과, USS 애니메이션, 시즌 테마 등에 렌더 텍스처 사용

에셋에 UI 툴을 추가한 후 플레이 모드에서 프로젝트를 사용해 보세요. UI 툴킷 인터페이스는 씬(Scene) 뷰에 표시되지 않지만, 대신 게임(Game) 뷰나 UI Builder에서 확인할 수 있습니다.

왼쪽의 메뉴를 사용하면 메인 메뉴 화면을 쉽게 탐색할 수 있습니다. 세로로 배치된 버튼을 클릭하여 메인 메뉴를 구성하는 다섯 개의 메뉴에 액세스할 수 있습니다. 이러한 버튼은 화면을 전환하는 동안 활성 상태로 유지됩니다.

씬에서 사용할 수 있는 포션을 드래그해서 캐릭터를 치유하는 등의 몇 가지 상호 작용은 할 수 있지만, UI 예시에 집중할 수 있도록 샘플의 게임플레이는 최소한으로 제한됩니다.

메뉴 바의 UI를 더 자세히 살펴보도록 하겠습니다.

• 홈 화면은 애플리케이션을 실행하면 가장 처음에 표시됩니다. 홈 화면을 사용하여 게임을 플레이하거나 시뮬레이션된 채팅 메시지를 확인할 수 있습니다.

• 캐릭터 화면에서는 여러 게임 오브젝트와 UI 요소를 볼 수 있습니다. 네 명의 드래곤 크래셔 캐릭터를 살펴볼 수 있습니다. Stats, Skills, Bio 탭에서 각 캐릭터의 세부 정보를 확인하고 인벤토리 슬롯을 클릭해서 아이템을 추가하거나 제거할 수 있습니다. 미리보기 영역에는 타일 무늬의 배경에 조명을 받고 리깅(rigging)된 2D 캐릭터가 표시됩니다.

• 리소스 화면에는 UI 툴킷을 최대한으로 활용하기 위해 참고할 수 있는 기술 자료, 포럼, 기타 리소스의 연결 링크가 있습니다.

• 상점 화면은 골드나 보석 등의 게임 내 재화와 실제 재화뿐만 아니라 치유 포션 등의 가상 제품을 구입할 수 있는 게임 내 상점을 시뮬레이션합니다. 상점 화면의 각 아이템은 별도의 VisualTreeAsset입니다. UI 툴킷은 런타임 시 이러한 에셋을 Resources/GameData에 있는 각 스크립터블 오브젝트마다 하나씩 인스턴스화합니다.

• 우편함 화면은 가상의 메시지를 읽을 수 있는 프론트엔드 리더(front-end reader)이며 탭 메뉴를 사용해 받은 메시지와 삭제된 메시지를 구분합니다.

• 게임 화면은 드래곤 크래셔 프로젝트의 미니 버전이며, 여기에서 플레이가 자동으로 시작됩니다. 프로젝트에서는 일시 정지 버튼, 체력 바, 캐릭터가 대미지를 입었을 때 치유 포션 요소를 드래그하는 기능 등 UI 툴킷의 일부 개선된 요소를 확인할 수 있습니다.

UI 툴킷을 사용하면 전체 프로젝트에서 안정적이고 일관된 UI를 제작할 수 있습니다. 아울러 UI 툴킷은 자신만의 디자인과 세부 요소를 추가하여 게임 테마와 스타일을 더욱 구체화할 수 있는 유연한 툴을 제공합니다.

샘플에서 UI 디자인 개선에 사용된 몇 가지 기능을 살펴보겠습니다.

• 렌더 텍스처: UI 툴킷 인터페이스는 렌더 대기열에서 마지막으로 렌더링됩니다. 즉, UI 툴킷 UI 위에 다른 게임 그래픽스를 오버레이할 수 없습니다. 렌더 텍스처는 이러한 제한에 대한 해결 방법을 제공하며, 게임 내 효과를 UI 툴킷 UI에 통합할 수 있도록 합니다. 렌더 텍스처 기반의 이러한 효과는 꼭 필요한 경우에만 사용해야 하지만, 게임플레이를 실행하지 않고도 전체 화면 UI 컨텍스트 내에서 선명한 효과를 추가할 수 있습니다. 다음은 데모에서 렌더 텍스처를 통해 구현된 여러 예시 이미지입니다.

• TSS(테마 스타일 시트)를 사용한 테마: TSS 파일은 일반 USS 파일과 비슷한 에셋 파일입니다. 프로퍼티 및 변수 설정은 물론 USS 선택자를 통한 커스텀 테마를 정의하는 시작점으로 TSS를 사용할 수 있습니다. 데모에서는 기본 테마 파일을 복제하고 시즌 배리에이션을 주기 위해 복사본을 수정했습니다.

• 커스텀 UI 요소: 창의적인 아이디어를 한가득 품고 있는 디자이너를 위해, UI 툴킷은 표준 라이브러리를 커스터마이즈하거나 확장할 수 있는 많은 기능을 제공합니다. 데모 프로젝트에서는 탭 메뉴, 슬라이드 토글, 드롭다운 목록, 방사형 카운터 등 UI 아티스트가 개발자와 함께 만들 수 있는 몇 가지 커스텀 제작 요소를 보여 줍니다.

• 애니메이션 UI 상태 변경을 위한 USS 전환: 메뉴 화면에 전환 효과를 추가하면 시각적으로 세련되고 매끄러운 화면을 만들 수 있습니다. UI 툴킷을 사용하면 UI Builder의 인스펙터에서 Transition Animations 프로퍼티를 사용하여 더 간단하게 전환 효과를 추가할 수 있습니다. Property, Duration, Easing, Delay 프로퍼티를 조정하여 애니메이션을 설정해 보세요. 그런 다음 UI 툴킷의 스타일을 변경하여 런타임 시 애니메이션 전환을 적용하면 됩니다.

• 배경 블러 효과를 위한 포스트 프로세싱 볼륨: 블러는 게임에서 흔히 사용되는 효과로, 복잡한 게임플레이 씬에 적용하여 플레이어의 주의를 팝업 메시지나 다이얼로그 창으로 유도합니다. 유니버설 렌더 파이프라인에서 사용할 수 있는 Volume 프레임워크에서 뎁스오브필드(피사계심도)를 활성화하면 이 블러 효과를 구현할 수 있습니다.

유니티는 UI를 개선하기 위해 효율적인 워크플로를 구성했습니다. 다음은 프로젝트를 효과적으로 정리된 상태로 유지하기 위한 몇 가지 권장 사항입니다.

• 일관된 명명 규칙: 시각적 요소와 스타일 시트에 맞는 명명 규칙을 사용하는 것이 중요합니다. 명확한 명명 규칙을 사용하면 UI 빌더에서 계층 구조를 정리된 상태로 유지할 수 있습니다. 또한 팀원들이 확인하기도 더 쉬우며, 코드를 깔끔하고 가독성 높게 만들 수 있습니다. 구체적으로 설명하면 시각적 요소와 스타일 시트에 BEM (Block Element Modifier) 명명 규칙을 사용하는 것이 좋습니다. BEM 명명 규칙을 사용하면 요소가 어떤 일을 하고, 어떤 모습이며, 주변의 다른 요소와 어떤 관련성을 가지는지 한눈에 볼 수 있습니다. 다음은 BEM 명명 규칙을 사용한 예시입니다.

• 반응형 UI 레이아웃: 웹 기술과 마찬가지로 UI 툴킷을 사용하면 '자식' 시각적 요소가 '부모' 시각적 요소 내에서 현재 사용할 수 있는 크기에 맞게 조정되는 레이아웃을 만들 수 있으며, Unity UI 시스템과 유사하게 각 요소의 위치를 레퍼런스 지점에 고정된 절대 위치로 지정할 수 있습니다. 샘플에서는 UI의 시각적 요소에서 필요에 따라 두 옵션을 모두 사용합니다.

• PSD Importer: 효율적인 데모 제작 툴로, 아티스트가 모든 스프라이트를 별도로 직접 익스포트하지 않고도 마스터 문서에서 작업할 수 있도록 합니다. 변경할 부분이 있다면 원본 PSD 파일에서 변경하면 되며, 변경 사항은 Unity에 자동으로 업데이트됩니다.
• 스크립터블 오브젝트: 샘플 프로젝트에서는 UI 디자인 및 구현에 집중하기 위해 스크립터블 오브젝트를 사용하여 인앱 구매와 우편 메시지 등의 백엔드 데이터를 시뮬레이션합니다. Resources/GameData 폴더에서 이 데이터를 편리하게 커스터마이즈하고, 예시를 사용하여 UI 툴킷에서 인벤토리 아이템, 캐릭터 또는 다이얼로그 데이터 등 비슷한 데이터 에셋을 만들 수 있습니다.

UI 툴킷을 사용하면 UI 레이아웃과 스타일이 코드와 분리됩니다. 다시 말해 UI 디자인과 별개로 백엔드 데이터를 다시 작성할 수 있습니다. 개발 팀이 시스템을 교체하더라도 인터페이스는 계속 작동합니다.

데모에는 특수 효과를 위한 빌트인 파티클 시스템으로 만든 파티클 시스템, 2D 툴셋 등 여러 툴이 추가로 사용되었습니다. 인스펙터에서 프로젝트를 자유롭게 둘러보고 다양한 요소가 플레이에 어떻게 적용되어 있는지 살펴보세요.

UI Builder에 복사되어 있는 UI/Reference에서 UI 아티스트가 제작한 레퍼런스 아트를 확인할 수 있습니다. 모형부터 와이어프레임에 이르는 전체 프로세스는 전자책에 나와 있습니다. 마지막으로 샘플의 모든 콘텐츠를 자신의 Unity 프로젝트에 추가할 수 있습니다.

UI 툴킷 샘플 – 드래곤 크래셔는 에셋 스토어에서 다운로드할 수 있습니다. 샘플에서 다양한 UI 디자인을 살펴보고 포럼에서 의견을 공유해 주시기 바랍니다.

가을에 공개될 전자책 Unity의 사용자 인터페이스 디자인 및 구현도 놓치지 마세요. 여기에서 사전 등록하면 전자책 공개 시 이메일 알림을 받을 수 있습니다.