Unity UI Toolkit을 활용한 Custom Package 만들기 (1)

TL;DR — 3줄 핵심 요약

• 문제: Unity에서 화면(UI)을 많이 만들면, 기존 UGUI 방식은 같은 계산을 반복해 느려지는 경우가 있다.

• 기술/원인: UI Toolkit은 화면의 구조(UXML), 모양(USS), 동작(C#)을 파일로 나누고, 바뀐 부분만 다시 계산하는 방식이다. Unity 2021 LTS에서 1.0 정식 버전이 나왔다.

• 해결/인사이트: 두 사람이 두 달 동안 게임 입력을 저장하고 다시 재생하는 ReInput 패키지를 만들었다. 나는 그중 UI Toolkit으로 Editor Window를 만드는 일을 맡았고, 시작할 때 규칙과 역할을 글로 정한 것이 진행에 도움이 됐다.

이 글의 위치

글또 8기 3회차 글이다. 사이드 프로젝트 하나를 마무리하며 쓴 회고 중 첫 편이다. 1편에서는 프로젝트를 시작한 계기와 목표, 역할을 정리한다. 2편에서는 진행 순서와 문제를 고친 과정, 3편에서는 기술적으로 배운 점을 다룬다.

계기: 모집 글을 보고 바로 댓글을 단 이유

브릿지(BRIDGE-DEV)라는 대학생 연합 게임 개발 동아리에서 한 사람이 글을 올렸다. UI Toolkit으로 Unity의 Custom Package(기능 묶음)를 만들어 패키지 매니저로 배포해 보자는 내용이었다. 글을 쓴 사람의 실력이 좋다는 이야기를 이미 들었고, 내가 관심 있던 주제였기 때문에 글을 보자마자 토론 글에 댓글을 달았다.

Unity Custom Editor 스터디 모집 · BRIDGE-DEV · Discussion #4

같은 시기에 확인한 Unity의 변화

Unity는 1년에 세 번 버전을 낸다. 기능을 미리 넣어 보는 Tech Stream 두 번과, 안정성을 우선하는 LTS 한 번이다. 회사에서는 보통 LTS를 쓴다. 2022년 초 기준 최신 LTS는 2021.3이었고, 이 버전에서 UI Toolkit이 1.0 정식 버전이 됐다. 새 휴대폰이 나오면 무엇이 바뀌었는지 확인하듯, 나는 Unity도 LTS가 나오면 바뀐 내용을 확인한다.

UI Toolkit이란 무엇인가

Unity가 직접 만든 새 UI 시스템이다. 공식 소개 글과 발표 영상이 있어 링크를 남긴다.

UI 툴킷에서 새롭게 선보이는 기능 | Unity Blog

구조, 모양, 동작을 세 파일로 나눈다

UI Toolkit은 웹 페이지를 만드는 방식과 비슷하게 일을 나눈다.

• UXML: 화면에 무엇이 어떤 순서로 놓이는지 적는 파일이다. 웹의 HTML과 같은 역할을 한다.
• USS: 글자 크기, 색, 여백처럼 보이는 모양을 적는 파일이다. 웹의 CSS와 같은 역할을 한다.
• C# 스크립트: 버튼을 눌렀을 때 무슨 일이 일어나는지 적는 코드다. 웹의 JavaScript와 같은 역할을 한다.

UGUI와 무엇이 다른가

기존 UGUI는 화면의 각 요소를 GameObject로 만들고 Canvas 하나가 전체를 그린다. 요소가 많아지면 값이 바뀔 때 다시 계산하는 범위가 커진다. UI Toolkit은 문서 구조 안에서 값이 바뀐 부분만 다시 계산한다. 그래서 항목이 많은 편집 도구 화면에서 차이가 크다.

UI Toolkit은 에디터 화면과 게임 실행 화면 양쪽에서 쓸 수 있다. 웹에서 화면을 만들던 사람이 Unity를 쓰는 회사로 옮겨 게임 UI를 만드는 일도 늘 것이라고 나는 예상했다.

ReInput: 입력을 저장하고 다시 재생한다

프로젝트는 나를 포함한 두 사람이 약 두 달 동안 진행했다. 메인 기능이 끝난 뒤에는 패키지로 배포하기 위한 정리 작업을 했다. 첫 회의는 디스코드로 간단히 인사하고 큰 방향만 정했고, 다음 주에 광화문 근처에서 저녁을 먹으며 세부 내용을 정했다.

홍콩식 짜장이었던 걸로 기억한다. 맛이 특이했고, 무난했다.

네이버 예약해서 서비스로 나온 메뉴였다.

회의에서 정한 네 가지 규칙

1. 최소 목표를 먼저 끝내고, 그 뒤에 목표를 늘린다.
2. 기간은 2월 말까지, 약 두 달로 정한다.
3. 입력 장치는 키보드와 마우스만 다룬다.
4. 매주 비대면 회의로 진행 상황을 확인한다.

만나서 이야기한 것이 도움이 됐다. 프로젝트는 대부분 온라인으로 진행할 수 있지만, 시작 단계에서 서로의 말투와 반응을 알고 있으면 이후 온라인 대화에서 오해가 줄어든다. 코로나19 이후 대면이 줄었지만, 처음 한 번 만나는 일이 협업 속도를 높인다고 느꼈다.

역할 분담과 이름 정하기

함께한 사람은 게임을 실행할 때 키 입력을 감지해 파일로 저장하고 읽는 시스템과 패키지 배포를 맡았다. 나는 UI Toolkit으로 Editor Window(에디터 안에서 열리는 창)를 만드는 일을 맡았다. 패키지 이름은 다시를 뜻하는 Re와 핵심 개념 Input을 붙여 ReInput으로 정했다.

정리와 다음 글

이번 글에서는 계기와 목표, 역할까지 정리했다. 다음 글에서는 진행 순서와, 문제가 생겼을 때 원인을 찾아 고친 과정을 적는다. 그다음 글에서는 기술적으로 배운 점과 개인적으로 느낀 점을 나눠 적을 예정이다.

자주 묻는 질문 (FAQ)

Q1. UI Toolkit은 UGUI를 완전히 대체하나요?

A. 아직은 아니다. UGUI로 만든 기존 화면이 많고, 두 시스템은 한 프로젝트에서 함께 쓸 수 있다. 항목이 많은 편집 도구 화면처럼 구조가 복잡한 UI에서는 UI Toolkit이 유리하고, 이미 만든 화면은 그대로 두는 경우가 많다.

Q2. Custom Package란 무엇인가요?

A. Unity 프로젝트 사이에서 다시 쓸 코드와 파일을 묶은 단위다. Package Manager에 등록하면 다른 프로젝트에서 이름과 버전을 지정해 설치할 수 있다. 이 프로젝트에서는 ReInput을 그런 형태로 배포하는 것이 목표였다.

Q3. 프로젝트에 대면 회의가 꼭 필요했나요?

A. 필수는 아니었다. 다만 첫 회의를 대면으로 해서 목표와 역할을 빠르게 맞췄고, 이후에는 매주 온라인 회의로 충분했다. 처음 한 번의 대면이 이후 온라인 논의에서 생길 수 있는 오해를 줄였다.